CSS text-decorationの使い方文字・テキストの装飾方法

CSS

【CSS text-decorationの使い方】文字テキストの装飾方法

2022年5月13日

今回はテキストに下線・上線・訂正線などの装飾する際に使用するCSSプロパティ、text-decorationプロパティの使い方について解説していきます。
 

この記事を読むと分かること

  • text-decorationプロパティの概要について
  • text-decorationプロパティで指定できる値について
  • aタグにデフォルトで付いている下線を消す方法について

 

text-decoration:テキストに装飾を付けるCSSプロパティ

text-decorationプロパティは、テキストに装飾を付けることができるCSSプロパティです。

このプロパティは4つのCSSプロパティを同時に指定することができる一括指定プロパティで、text-decorationプロパティを構成する4つのプロパティは以下の通りになります。

text-decorationプロパティを構成する4つのプロパティは4つのプロパティの一括指定プロパティ。
 
■text-decorationプロパティを構成する4つのプロパティ

プロパティ名 意味
text-decoration-line 表示する線の位置を指定できる。
text-decoration-style 表示する線の種類を指定できる。
text-decoration-color 表示する線の色を指定できる。
text-decoration-thickness 表示する線の太さを指定できる。

なお4つのプロパティの値を同時に指定する際は、値同士の間に半角スペースを空けて記述すればOKです。

text-decorationを使って赤い線を引いている例。

また値の指定する順番に特に決まりはなく、必ず4つのプロパティを指定しなければならない訳ではありません。

値の指定する順番に特に決まりはない。

 

aタグに付いている下線は「none」を指定することで非表示にできる

aタグにデフォルトで付いているアンダーラインは、ブラウザ側から予め「text-decoration: underline」の指定がされている為付いています。

aタグにはデフォルトで「text-decoration: underline」が指定されている。

非表示にしてあげたい場合は、再度text-decorationを指定し、値を「none」としてあげればOKです。

aタグに付いている下線を非表示にしているデモ。

aタグのアンダーラインを非表示にしたい場面は多々あるので、覚えておくと良いでしょう。

 

 

text-decorationで指定できる値

それではここからはtext-decorationプロパティで指定できる値を1つ1つ紹介していきます。

 

線の位置を指定する:text-decoration-line

まずは線の位置を指定できる値(text-decoration-lineの値)についてです。

線の位置を指定できる値には以下の3つの値があります。

■線の位置を指定できる値

  • 下線:underline
  • 上線:overline
  • 取り消し線:line-through

値をline-throughとした場合のデモ。

また、線の位置は複数指定することも可能で、以下のように半角スペースを空けて「underline overline」と指定してあげることでテキストの上下に線を付けることもできます。

線の位置は複数指定することも可能。

 

線の種類を指定する:text-decoration-style

次に線の種類を指定できる値(text-decoration-styleの値)についてです。

線の種類は以下の5つから選択できます。

■線の種類を指定できる値

  • 実線:solid
  • 二重線:double
  • 点線:dotted
  • 破線:dashed
  • 波線:wavy

値をwavyとした場合のデモ。

 

線の色を指定する:text-decoration-color

線の色(text-decoration-color)を指定するには、文字色や背景色を指定する時と同じように「black」「white」のようなカラーネームや「#333333」といった16進数を使用します。

追加した装飾線に色をつけているデモ。

 

線の太さを指定する:text-decoration-thickness

線の太さ(text-decoration-thickness)を指定するには、pxなどの絶対値を使う方法と%やemといったフォントサイズを基準とした相対値を使う方法の2つがあります。

追加した装飾線の太さを変更しているデモ。

 

 

まとめ

まとめです。今回はテキストに装飾を付けるCSS「text-decoration」の使い方について解説しました。

文章の中の大切な部分にアンダーラインを引いたり、aタグにデフォルトで付いている下線を消したりする際によく使うのでぜひ覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS