はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

CSSで文字に下線の装飾をしたい！というときによく設定する項目についてまとめました。

疑似要素を使用するとより自由度の高い装飾を実装することができますが、【text-decoration: underline;】にまつわる設定だけでも十分なことがたくさんあると思うのでぜひ活用してみてください。

【text-decoration: underline;】の線の色・太さ

text-decorationプロパティでできること

そもそもtext-decorationプロパティとはテキストの装飾的な線の表示を設定するものです。より正確な説明をすると、
①text-decoration-color
②text-decoration-thickness
③text-decoration-line
④text-decoration-style
……の4つのプロパティを一括で指定することができるというプロパティです。

4つのプロパティ

それぞれ以下のような値の指定を行うことができます。

①text-decoration-color：線の色
②text-decoration-thickness：線の太さ
③text-decoration-line：線の種類
　→ none（なし）・overline（上線）・underline（下線）・line-through（打消し線）
④text-decoration-style：線のスタイル
　→ solid（直線）・double（二重線）・dotted（点線）・dashed（破線）・wavy（波線）

*****

③text-decoration-lineの初期値は「none」です。
【text-decoration: underline;】というのは、【text-decoration-line: underline;】という指定と同じで「該当のテキストに下線の装飾を行う＋その他の3つのプロパティは初期値のまま」ということを表しています。

この下線の色や太さを設定するには①text-decoration-colorと②text-decoration-thicknessを追加で指定するか、【text-decoration: underline red 5px;】のように一括で指定することもできます。

色と太さを変化させるだけでもマーカーのような装飾の表現が可能です。

【text-decoration: underline;】の線の位置を調整したい・途切れないようにしたい

線の位置を調整したい：text-underline-offset

文字と線の位置を近づけたい・離したい・程よく調整したいという場面は多々あると思います。
そんな時には「text-underline-offset」のプロパティを使用することで線の位置を動かすことができます。

「offset」は「基準からどれだけ離れているか」という意味をもちます。
text-underline-offsetの初期値は「auto」に設定されていて、自分で調整する際にはpxや%で数値を指定して制御を行うことができます。
数値が大きいほど初期の位置から文字の外側へと離れていきます。マイナスの値を指定すると、初期値よりもテキストのほうへ近づく方向に動かすことができます。

なお、text-underline-offset は先ほどの text-decoration による一括の指定には含まれません。線の位置調整を行うには必ず追加で記述する必要があります。

線が途切れないようにしたい：text-decoration-skip-ink

【text-decoration: underline;】によるテキストの下線は、文字と重なった部分の線がデフォルトでは途切れる仕様になっています。

この仕様はローマ字表記の「y」や「g」などでは違和感がないかもしれませんが、日本語表記では一字分まるごと線が途切れたような見た目になってしまいます。

これを回避するためには「text-decoration-skip-ink」を活用しましょう。
text-decoration-skip-ink のプロパティでは以下の3つの値を設定することができます。

①none：線が文字に触れるときに線の中断を行わない。
②auto：初期値。線が文字に触れそうなときに中断を行う可能性がある。
③all：線が文字に触れるときに必ず中断を行う。

線と文字が重なる部分で線を途切れさせたくないというときには「none」を設定することで解決できます。

text-decoration-skip-ink の既定値は「auto」ですが、これは日本語・中国語・韓国語では挙動が安定しない場合があるため、線と文字が交わるときに必ず線を途切れさせたいというときには「all」を指定しましょう。

text-underline-offset と同じように、text-decoration-skip-ink は text-decoration による一括の指定には含まれませんので、必ず追加で記述する必要があります。

おわりに

text-decorationプロパティとそれにまつわる設定を調整するだけでも意外と様々な文字装飾の表現が可能ですので、ぜひ使いこなしてみてください。

勉強中の方、HTML・CSS駆け出しの方の参考にしていただけたら幸いです。

【実践マーケティング手法２２選】 無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。