プログラミング

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

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

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

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

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

  • text-decoration
  • border-bottom
  • background-image

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

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

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

\現役エンジニアのレビュー付き/

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

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

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

過去の受講生の口コミを見る

今回の題材

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

題材その①

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

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

題材その②

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

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

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

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

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

❶基本のHTMLを書く

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

<h2><span class="underline">山形で治療し続けて30年</span></h2>
<h2><span class="underline">笑顔をお守りします</span></h2>
テキストと下線(蛍光ライン)を重ねて表示するHTMLとCSSはこちら【text-decoration】

❷CSSのtext-decorationを書く

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

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

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

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

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

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

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

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

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

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

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

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

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

そこで、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;
}
テキストと下線(蛍光ライン)を重ねて表示するHTMLとCSSはこちら【text-decoration】

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

もう一例解説

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

デザイン的に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;
}
テキストと下線(蛍光ライン)を重ねて表示するHTMLとCSSはこちら【text-decoration】

下線にグラデーションやアニメーションを書けたい場合

この場合はbackground-image: linear-gradient();など他の選択肢を取る必要があります。

CSSで下線を引く方法まとめ – 様々な装飾方法とアニメーションに適した指定まで

まとめ 下線の基本はtext-decorationプロパティ

下線の作り方は様々あり、

  • text-decoration
  • border-bottom
  • background-image

が挙げられますが、今回紹介したtext-decorationプロパティがおすすめです。

元々文字の装飾のために用意されたプロパティですからね。

しょーご

下線表現はたまに出てきて毎回ググることになるので、スニペットでコードをまとめておいてもいいかなと思いますね!

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!