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

今回はテキストに下線・上線・訂正線などの装飾する際に使用するCSStext-decorationの使い方を解説します。

■text-decorationでは線の位置や種類、色、太さを一括指定することができます。

index.html

<p>ここに<span style="text-decoration: underline solid red 3px;">テキスト</span>が入ります。</p>

1	<p>ここに<span style="text-decoration: underline solid red 3px;">テキスト</span>が入ります。</p>

 

■よく使う例の一つはリンクaタグの下線を消す例です。text-decorationを指定し、値を「none」としてあげればOKです。

index.html

<p>ここは<span style="text-decoration: none;">リンク</span>です。</p>

1	<p>ここは<span style="text-decoration: none;">リンク</span>です。</p>

 

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

text-decorationとは？基本的な使い方

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

4つのCSSプロパティを同時に指定することができる一括指定プロパティでそれぞれ以下の通りです。

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

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

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

aタグに付いている下線をtext-decoration:noneで消す

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

非表示にしてあげたい場合は、text-decoration:none;としてあげればOKです。

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

特定のテキストに訂正線を入れる

特定のテキストに訂正線を入れる例もよくある例です。訂正線はtext-decoration:line-throgh;としてあげればOKです。

text-decorationで指定できる値

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

線の位置を指定する：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タグにデフォルトで付いている下線を消したり、あえて下線をつけたりする際によく利用するので覚えておきましょう。

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

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

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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