text-decorationプロパティで線の種類・色・太さ・距離を変える方法【CSS】

最終更新日:

公開日:2024-11-05

ページ内に広告が含まれています。
text-decorationプロパティで線の種類・色・太さ・距離を変える方法【CSS】

テキストに下線や打消し線や点線などを引けるtext-decorationプロパティ。線の色や太さ、文字との距離など使いにくいと思った事はありませんか?
前までは、対応していないブラウザ等があり実用的ではありませんでしたが、現在はIEを除くほとんどのモダンブラウザが対応しており使う事が出来るようになりました。
今回はそのtext-decorationプロパティの各内容について解説していきます。

text-decorationプロパティの基本的な使い方

text-decorationプロパティはテキストに線を付ける事が出来るプロパティです。
まずは以下のコードをご覧ください。

p {
    text-decoration: underline solid darkorange 3px;
}

text-decorationプロパティの使い方

上記のように、text-decorationプロパティは4つのプロパティを一括指定する事が出来ます
一括指定出来るプロパティは以下の4種類です。

  • text-decoration-line:線の位置を指定
  • text-decoration-style:線の種類を指定
  • text-decoration-color:線の色を指定
  • text-decoration-thickness:線の太さを指定

上記の4つのプロパティの内、一括指定(ショートハンド)でもそうでなくても、text-decoration-lineプロパティだけは必須となります。その他のプロパティは指定しなければデフォルトの値となります。デフォルトの値については後述する各プロパティの項目をご覧ください。

また、個別のプロパティはIEを除くモダンブラウザに対応していますが、詳しくはCan I Useでご確認ください。

線の位置を変更する text-decoration-line

線の位置を変更出来るプロパティです。
一番馴染みのあるプロパティになりますが、普段は一括指定(ショートハンド)で記述する事が多いと思います。
個別のプロパティを記述する場合でも、このプロパティは必須となります。
線の位置を個別に指定する場合は以下のように指定します。

p {
    /* 下線 */
    text-decoration-line: underline;

    /* 上線 */
    text-decoration-line: overline;

    /* 打消し線 */
    text-decoration-line: line-through;

    /* 全種類(2種類 & ショートハンドでも可能) */
    text-decoration-line: underline overline line-through;
}

text-decorationプロパティの使い方(下線)

text-decorationプロパティの使い方(上線)

text-decorationプロパティの使い方(打消し線)

text-decorationプロパティの使い方(下線・上線・打消し線)

線の色を変更する text-decoration-color

線の色を変更する事ができます。デフォルトではテキストの色と同じ色になります。

p {
    /* グレー */
    text-decoration-color: gray;

    /* オレンジ */
    text-decoration-color: orange;

    /* レッド */
    text-decoration-color: red;
}

text-decorationプロパティの使い方(グレー)

text-decorationプロパティの使い方(オレンジ)

text-decorationプロパティの使い方(レッド)

線の種類を変更する text-decoration-style

線の種類を変更する事ができます。デフォルトでは単独線(solid)です。
単独線や二重線、破線や点線、波線があります。

p {
    /* 単独線(デフォルト) */
    text-decoration-style: solid;

    /* 二重線 */
    text-decoration-style: double;

    /* 破線 */
    text-decoration-style: dotted;

    /* 点線 */
    text-decoration-style: dashed;

    /* 波線 */
    text-decoration-style: wavy;
}

text-decorationプロパティの使い方(単独線)

text-decorationプロパティの使い方(二重線)

text-decorationプロパティの使い方(破線)

text-decorationプロパティの使い方(点線)

text-decorationプロパティの使い方(波線)

線の太さを変更する text-decoration-thickness

線の太さを変更する事ができます。デフォルトでは1pxです。
px指定の他に、rem%from-fontというフォントサイズに合わせた太さに変更という事も出来るようです。
下記例ではpxでのみ指定しています。

p {
    /* 1px(デフォルト) */
    text-decoration-thickness: 1px;

    /* 3px */
    text-decoration-thickness: 3px;

    /* 10px */
    text-decoration-thickness: 10px;
}

text-decorationプロパティの使い方(1px)

text-decorationプロパティの使い方(3px)

text-decorationプロパティの使い方(10px)

線と文字の重なりを変更する text-decoration-skip-ink

線と文字が重なってしまう場合、デフォルトでは線が途切れます。(アルフェベットのpやg、記号など)
その重なった部分を途切れさせるかどうかを変更できます。デフォルトでは途切れるようになっています。

p {
    /* 途切れる(デフォルト) */
    text-decoration-skip-ink: auto;

    /* 途切れない */
    text-decoration-skip-ink: none;
}

text-decorationプロパティの使い方(auto)

text-decorationプロパティの使い方(none)

線と文字の距離を変更する text-underline-offset

線と文字の距離を変更できます。デフォルトではauto(ブラウザのデフォルト値)になります。
px指定の他にrem%などでも指定可能です。

p{
    /* auto(デフォルト) */
    text-underline-offset: auto;

    /* 10px */
    text-underline-offset: 5px;

    /* 30px */
    text-underline-offset: 10px;
}

text-decorationプロパティの使い方(auto)

text-decorationプロパティの使い方(5px)

text-decorationプロパティの使い方(10px)

さいごに

いかがでしたでしょうか。
今回は、text-decorationプロパティで線の種類・色・太さ・距離を変える方法を解説しました。
前までは出来なかった事も最近では出来るようになっています。アニメーションを付ける場合は別の方法になりますが、単純な線の場合は有用ですのでぜひ覚えておいてください。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP