今回はサイト上のテキストに下線を付けるときに便利なCSSのコードを紹介したいと思います！

従来のやり方だとテキストに下線を引く場合は、

.underline_text{
  text-decoration: underline;  // 下線をつける
}

上記のコードを使って実装することが一般的だったかと思います。

しかし、こちらのコードだけで実装するとテキストに線がぴったりとくっついていて少し野暮ったさを感じますし、何よりデザイナーの方からもらったデザインがテキストと線の間に距離があると実現することができません。

そのため、今まで私はテキストと線の間に距離があるデザインをするときには、

以下の通り実装することがありました。

.borderBottom_text{
  border-bottom: 1px solid #000; // 要素の下端に境界線を引く
  padding-bottom: 10px // 要素の下部に余白をつける;

}

しかし、このやり方で実装しますとページの横幅を縮めてテキストが複数行になった際に以下のとおり上手く線が引けなくなってしまいます。

これはborder-bottomが下線を引いているわけではなく、あくまで要素の下部に境界線を引いているにすぎないためこのような見た目になってしまうわけですね。

.underline_offset{
  text-decoration: underline; // 下線をつける
  text-underline-offset: 20px; // テキストと線との距離を20px分空ける;
}

しかし、最新のCSSを駆使すれば、横幅が変わっても見た目が崩れることなく下線を実装することができます。

もし線の太さや色を変えたい場合は以下のコードを使います。

.underline_offset03{
  text-decoration-color: red; // 下線の色を変更
  text-decoration-thickness: 10px; // 下線の太さを変更
}

また、それだけではなくテキストと下線の重なり順を変更することもできます。

デフォルトでは以下の画像の通り、テキスト→下線の順に表示されているかと思います。

下記のコードを使うことで、重なり順を下線→テキストの順に変えることができます。

.underline_offset05{
  text-decoration-skip-ink: none;
}

これにより、

g,j,pのような下に文字が突き出ているようなものでも下線が途切れなくなりました。

いかがだったでしょうか？

モダンCSSを駆使すればお手軽にテキストの下線の見た目をカスタマイズすることができます。

最新のコードをどんどんインプットしてコーディングの時短を図っていきたいですね！

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから

もぐら

コーダー

2022年入社。実務未経験ながらも一念発起してWeb業界に飛び込みました。日進月歩の変化の速い業界で日々の勉強が必要不可欠ですが、楽しみながら一人前になるべく頑張っています。