• HOME > 
  • CSS > 
  • CSSのtext-decorationの使い方【下線や打消し...

CSSのtext-decorationの使い方【下線や打消し線などの装飾線を表示する】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

text-decorationプロパティとは?

text-decorationは、テキストに上線や下線、打消し線といった装飾線を表示するプロパティです。

装飾線の種類はもちろん、二重線や点線といったスタイルや線の太さ・色を自由に指定することが可能です。

text-decorationの記述の仕方

text-decorationは次のように記述して使用します。線の種類は必須ですが、それ以外の値は省略してデフォルトの値を適用させることができます。

text-decorationの書き方

線の種類を設定する

text-decorationプロパティに線の種類として用意されている値は次の通りです。

none装飾線なし
overline上線
underline下線
line-through打消し線
blink点滅(現在使用不可)

装飾線としては、「上線」「下線」「打消し線」という3つが使用できます。

なお、text-decorationを使用するときには、線の種類の記述を省略することはできません。

overline

overlineを指定するとテキストに上線を表示させることができます。

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:overline;/*上線*/
}

プレビュー

ダミーテキスト

underline

underlineを指定するとテキストに下線(アンダーライン)を表示することができます。

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:underline;/*下線*/
}

プレビュー

ダミーテキスト

ハイパーリンクが貼られているテキストには下線を付けることで、ユーザーにリンクの存在を認識してもらいやすくできます。(aタグには予めデフォルトで設定されていることがほとんどです。)

text-underline-positionで位置を変更できる

text-underline-positionを一緒に指定すると下線の表示位置を変更できます。横書きでは何の変化もありませんが、テキストが縦書きの場合に左右どちらに線を表示するかを変更することが可能です。

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:underline;/*下線*/
    text-underline-position:left;/*左側*/
}

プレビュー

ダミーテキスト

line-through

line-throughを指定するとテキストに打消し線を表示することができます。

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:line-through;/*打消し線*/
}

プレビュー

ダミーテキスト

複数の装飾線を同時に表示できる

線の種類の値は間に半角スペースを入れて並べて書けば、同じ要素に複数の装飾線を同時に表示させることができます。

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:overline underline line-through;/*上線・下線・打消し線*/
}

プレビュー

ダミーテキスト

スタイルを設定する

text-decorationプロパティでは線の種類に対して、二重線や点線などのスタイルを設定することが可能です。

スタイルとして用意されている値は次の通りで、上線・下線・打消し線と組み合わせて使用します。

solid直線例:ダミーテキスト
double二重線例:ダミーテキスト
dotted点線例:ダミーテキスト
dashed波線例:ダミーテキスト
wavy波線例:ダミーテキスト

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:line-through double;/*打消し線(二重線)*/
}

プレビュー

ダミーテキスト

太さを設定する

text-decorationプロパティでは、装飾線の太さも設定できます。

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:line-through double 3px;/*打消し線(太さ3pxの二重線)*/
}

プレビュー

ダミーテキスト

色を設定する

text-decorationプロパティでは、装飾線のも設定できます。

HTML

<p class="sample">ダミーテキスト</p>

CSS

.sample{
    text-decoration:line-through double 3px red;/*打消し線(太さ3pxの赤い二重線)*/
}

プレビュー

ダミーテキスト

text-decorationが効かない時は?

text-decorationを指定したのに思い通りに反映されない場合は、次のような点を確認してみましょう。

  • コードに記述ミスはないかどうか?
  • 同じセレクターで重複して指定していないか?
  • セレクターの優先順位は正しいかどうか?

コードに記述ミスはないかどうか?

CSSはスペルミスやコロン・セミコロンを付け忘れているだけで反映されなくなりますので今一度確認してみてください。text-decorationの箇所以外が間違っていても同様ですので遡ってチェックしましょう。

同じセレクターで重複して指定していないか?

CSSは同じセレクターの場合、後から記述したものが優先されます。同じセレクターでtext-decorationを指定していないか確認してみてください。

セレクターの優先順位は正しいか?

同じ要素でもCSSのセレクターには優先順位があり、基本としてはタグよりもクラス、クラスよりもIDに指定した値が優先されます。以前に別のセレクターを使ってtext-decorationを指定していないかなど確認してみてください。

リンク先のサムネイル
CSSのセレクターとは?【種類と使い方をわかりやすく解説】

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。このページではセレクターの種類と使い方を解説します。セレクタ―を使ってスタイルを指定することで...【もっと読む】

まとめ

以上が、text-decorationプロパティの使い方です。

テキストを強調させたり、ハイパーリンクや打消しといった役割や意味合いを伝える際に利用されますので覚えておきましょう。

関連する記事

サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。