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

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

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

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

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

 
■text-decorationプロパティを構成する4つのプロパティ

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

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

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

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

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

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

text-decorationで指定できる値

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

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

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

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

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

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

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

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

線の色を指定する：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チャンネル開設しました！

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

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