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

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

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

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

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

上記のように、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-color

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

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

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

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

線の種類を変更する 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-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-skip-ink

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

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

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