こんにちは、中村です。
前回書いた文字の下線に関するCSSプロパティについて、そのままでは困ったところがあったので補足として記事にしました。
と言っても解決方法はプロパティを一つ追加するだけです。
前回の記事はこちら
問題点と解決方法
問題になったのは「半角英数字の場合に下線の表示が消える」という現象です。
勿体ぶる話でもないので解決方法はこちら
text-decoration-skip-ink: none;を追加する
どういうことか、DEMOを見てもらうのが早いかと思います。
See the Pen 文字の下線をスタイル調整するCSSプロパティの問題点 by Nakamura (@takayo-nakamura) on CodePen.
text-decoration-skip-inkとは？
上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。
下線をつけた場合、デフォルトではg・p・yなどの下の部分が下線をつき抜ける表示になるかと思います。
そうしないと打ち消し線のように重なってしまって読みづらいためだと思います。
この仕様をオフにして文字情報に関係なく下線を引く、という指定になります。
「書体を変えれば良い」という記事も見かけましたが、自動で生成されるコンテンツなどでは個々に設定できないので簡単に解決できる方法があってよかったです。
余談
最近制作したもので、文字の左右に0.5emほどはみ出した線が敷かれたデザインもありました。
それは下線の指定では対応しきれず、背景の設定で対応しました。
見た目は微妙な差ですが、CSSとしては文字の範囲を超えてしまったので別物になります。
もっとよく探したら解決方法があるかもしれませんが、
CSSを書く前にデザインをよく見て使い分けないといけないなと思いました。
次回の更新について
次週はGWでお休みのため、次回の更新は5月15日（水）となります。
