テキストと下線(蛍光ライン)を重ねて表示するHTMLとCSSはこちら【text-decoration】

こんにちは、フリーランスエンジニアのしょーご（@samuraibrass）です。

今回解説するのは、以下のような「テキストと下線が重なった場合の実装方法」です。

下線の実装方法は多様で、

text-decoration
border-bottom
background-image

などがあります。しかし、以下のような”テキストと下線が重なるデザイン“の場合に、簡単にできるおすすめの実装方法があります。

テキストと下線(蛍光ライン)を重ねて表示するHTMLとCSSはこちら【text-decoration】

特に、欧文書体と日本語が入り交じると若干苦しめられることになるので、そこも含めて解説します。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

今回の題材
- 題材その①
- 題材その②
テキストに重なる下線の実装解説
もう一例解説
下線にグラデーションやアニメーションを書けたい場合
まとめ　下線の基本はtext-decorationプロパティ

今回の題材

今回は私が出している「コーディング実践演習課題」から、サンプルを抜粋します。

題材その①

こちらは「【初級Ex】 XDデザインからのコーディング実践演習」の下線部分です。

題材その②

こちらは「【上級】XDデザインからのコーディング実践演習」の下線部分です。

テキストに重なる下線の実装解説

「題材その①」を基本に解説していきます。

❶基本のHTMLを書く

今回はテキスト間が上下でかなり離れているので、h2タグを２つに分割して書いています。

<h2><span class="underline">山形で治療し続けて30年</span></h2>
<h2><span class="underline">笑顔をお守りします</span></h2>

❷CSSのtext-decorationを書く

まずデザインデータで確認することは、以下です。

下線の色
下線の太さ（高さ）

その後、以下のCSSを書きます。

.underline {
  text-decoration-color: #99E5A5;
  text-decoration-line: underline;
  text-decoration-thickness: 10px;
}

text-decoration-thickness：線の太さ。初期値はauto。

このままでは、下線がテキストと重ならないので、追加でCSSを書いていきます。

❸下線のオフセットを行う

下線のオフセットは、text-underline-offsetプロパティで指定が可能です。

.underline {
  text-decoration-color: #99E5A5;
  text-decoration-line: underline;
  text-decoration-thickness: 10px;
  text-underline-offset: -3px;
}

しょーご

実際のズレ具合はデザインデータと照らし合わせて合わせてください。

この時点で、線が欧文書体の英数字を横切ろうとするところで中断される問題が残ります。

そこで、text-decoration-skip-inkを利用します。これで英数字部分でも途切れなくなります。

CSS の text-decoration-skip-ink プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。
https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-skip-ink

欧文書体には、ディセンダーと呼ばれる下線より下側にはみでる部位があって、これのせいで下線が消えるので、これを無効化しているということみたいです。

.underline {
  text-decoration-color: #99E5A5;
  text-decoration-line: underline;
  text-decoration-thickness: 10px;
  text-underline-offset: -3px;
  text-decoration-skip-ink: none;
}

これでデザインを再現できました！

もう一例解説

「題材その②」の方は簡単に解説します。

デザイン的にh2を採択しています。下線部分はspanで囲みます。

<h2>Engressは<br><span class="underline">TOEFLに特化したスクール</span>です</h2>

当てるCSSは以下。

.underline {
  text-decoration-color: #F5A623;
  text-decoration-line: underline;
  text-decoration-thickness: 9px;
  text-underline-offset: -5px;
  text-decoration-skip-ink: none;
}