こんにちは、ナカムラです。
最近関わった案件で文字に下線が引かれたデザインが多かったので、今回は下線のスタイルを調整するときに使うCSSプロパティをご紹介したいと思います。
DEMO
See the Pen CSSで文字の下線をスタイル調整する by Nakamura (@takayo-nakamura) on CodePen.
まず一番上はtext-decoration: underline;で下線を表示しただけの状態です。
デフォルトなのですが、デザインでこの状態になっているものに出会ったことがありません。
色が違う、幅が違う、表示位置が違うなど、デザイン通りに作るにはスタイルの調整が必要です。
昔はタグで囲ってborder-bottomやbefore要素、backgroundなどで実装していました。
その場合、作り方によっては改行に対応できないこともありました。
地味に手間のかかる作業で、若干苦手な意識がありましたが今はそんなに悩むことなく実装できます。
下線の色を変えるCSSプロパティ
text-decoration-color: #ffec3f;
text-decoration-color - CSS: カスケーディングスタイルシート | MDN
下線の太さを変えるCSSプロパティ
text-decoration-thickness: 0.25em;
text-decoration-thickness - CSS: カスケーディングスタイルシート | MDN
下線の位置を変えるCSSプロパティ
text-underline-offset: -0.25em;
text-underline-offset - CSS: カスケーディングスタイルシート | MDN
※縦書きの時に左側に変えたい時などはtext-underline-positionというものもあります。
text-underline-position - CSS: カスケーディングスタイルシート | MDN
上記の３つを一括で書く方法もあります。
text-decoration - CSS: カスケーディングスタイルシート | MDN
その他の気になるテキスト関連のCSSプロパティ
使ったことはないのですが、他にも便利そうなテキスト関連のCSSプロパティがありました。
text-emphasis
文字の上に圏点（強調するための点）を表示するスタイルをつける時に使用します。
ルビで実装しているのを見たことがありますが、できればスタイルで実装したいですね。
強調なのでstrongやbタグが良いんじゃないかと思います。
text-emphasis - CSS: カスケーディングスタイルシート | MDN
text-transform
大文字で表示したい時などに。
text-transform - CSS: カスケーディングスタイルシート | MDN
text-combine-upright
1文字分のスペースに収めたいときに（縦書きの時の数字など）
これは便利ですが…縦書き関連はブラウザによっては組み合わせによって不具合が起きるパターンもあるのではないかと心配になりますね。実際に使う時にはまずは検証したいと思います。 （safariとか・・大丈夫かな？）
text-combine-upright - CSS: カスケーディングスタイルシート | MDN
まとめ
別の要素を追加して実装する、というのはできるだけやりたくないので、要素そのもののスタイルを調整できるプロパティは本当にありがたいなと思います。
リファレンスを眺めていると便利なCSSプロパティが見つかります。
何かを調べるときについでに他のものも見るようにすると良いですね。
