• 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のみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

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

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

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

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