CSSで自由自在！HTMLの下線の色や太さ、スタイルを変更する方法

By /

CSSで自由自在！HTMLの下線の色や太さ、スタイルを変更する方法【完全ガイド】

Webサイトをデザインする上で、テキストの装飾は非常に重要な役割を果たします。特に「下線（アンダーライン）」は、リンクの存在を示したり、特定のテキストを強調したりするために古くから使われてきました。しかし、HTMLの<a>タグや<u>タグで表示されるデフォルトの下線は、デザインの自由度が低く、サイト全体のトンマナと合わないこともしばしばです。

「この下線の色をブランドカラーに合わせたい」
「もっと細く、あるいは太くしてデザインにメリハリをつけたい」
「ホバーした時に、おしゃれなアニメーションで下線を表示させたい」

このような要望を抱いたことはありませんか？

幸いなことに、現代のCSSを使えば、下線の色、太さ、線の種類（実線、破線、波線など）、さらにはテキストとの距離やアニメーションまで、驚くほど自由にカスタマイズすることが可能です。

この記事では、CSSを使って下線を自在に操るためのテクニックを、基本的なプロパティから高度な応用テクニックまで、網羅的かつ詳細に解説します。初心者の方にも分かりやすいように、豊富なコードサンプルと共に一歩ずつ進めていきますので、ご安心ください。

この記事を読み終える頃には、あなたは「下線マスター」として、Webサイトのデザイン表現の幅を大きく広げることができるでしょう。

この記事で学べること

  • text-decorationプロパティ群を使った基本的な下線カスタマイズ
  • 下線の「色」「太さ」「スタイル（点線、波線など）」の変更方法
  • テキストと下線の間のスペースを調整する方法
  • border-bottom を使った下線の実装と、そのメリット・デメリット
  • 疑似要素(::after)を使った、グラデーションやアニメーションを伴う究極の下線表現
  • 各手法の使い分けと、実践的なデザインパターン

それでは、CSSによる下線カスタマイズの奥深い世界へ旅立ちましょう。

第1章: HTMLと下線の基本

まず、CSSでカスタマイズする前に、HTMLにおける下線の基本をおさらいしておきましょう。

HTMLで下線が引かれる主な要素

HTMLには、デフォルトで下線が表示される要素がいくつか存在します。

  1. <a> タグ（アンカータグ）
    最も代表的なのが、リンクを示す<a>タグです。ほとんどのブラウザでは、未訪問のリンクは青い文字色と青い下線、訪問済みのリンクは紫の文字色と紫の下線で表示されます。これはユーザーが「クリックできる要素」であることを直感的に認識させるための重要な役割を担っています。

  2. <u> タグ（アンダーラインタグ）
    その名の通り、テキストに下線を引くためのタグです。かつては見た目のためだけに使われていましたが、HTML5では「中国語の固有名詞を示す」「スペルミスを意図的に示す」など、非テキスト的な注釈としての意味合いが与えられました。しかし、一般的にはリンクと見分けがつきにくいため、使用には注意が必要です。

  3. <ins> タグ（挿入タグ）
    文章が後から挿入されたこと（追記や修正）を示すためのタグです。通常、下線付きで表示されます。

これらのデフォルトの下線は、ブラウザによって微妙に見た目が異なり、何よりデザイン上の自由がありません。色も、太さも、テキストとの距離も、ブラウザの気まぐれに委ねられています。この制約を打ち破るのが、CSSの役割です。

第2章: CSSの基本プロパティ text-decoration

下線をカスタマイズするための最も基本的で強力な武器が text-decoration プロパティ群です。かつては text-decoration という一つのプロパティで線の種類（underline, line-throughなど）しか指定できませんでしたが、CSS3以降、機能が大幅に拡張され、色、スタイル、太さなどを個別に指定できるようになりました。

text-decoration を構成するプロパティたち

text-decorationは、以下の4つの個別プロパティをまとめて指定できる「ショートハンドプロパティ」です。まずは、それぞれの個別プロパティの役割を詳しく見ていきましょう。

  1. text-decoration-line
  2. text-decoration-style
  3. text-decoration-color
  4. text-decoration-thickness

1. text-decoration-line: 線の位置を決める

このプロパティは、どこに線を引くかを指定します。

  • underline: テキストの下に線を引きます（下線）。
  • overline: テキストの上に線を引きます（上線）。
  • line-through: テキストの中央に線を引きます（取り消し線）。
  • none: 全ての線を消します。リンクの下線を消したい場合によく使います。

これらの値は、スペースで区切って複数指定することも可能です。

“`css
/ 基本的な下線 /
.underline {
text-decoration-line: underline;
}

/ 上線 /
.overline {
text-decoration-line: overline;
}

/ 取り消し線 /
.line-through {
text-decoration-line: line-through;
}

/ リンクの下線を消す定番の指定 /
a {
text-decoration-line: none;
}

/ 下線と上線を同時に引く /
.underline-overline {
text-decoration-line: underline overline;
}
“`

2. text-decoration-style: 線のスタイルを決める

線の見た目を変更します。border-styleプロパティとよく似た値を取ります。

  • solid: 実線（デフォルト）。
  • double: 二重線。
  • dotted: 点線。
  • dashed: 破線。
  • wavy: 波線。

wavy は、テキストの誤りを指摘したり、デザインのアクセントとして使ったりするのに非常に便利です。

“`css
/ 二重線 /
.double-line {
text-decoration-line: underline;
text-decoration-style: double;
}

/ 点線 /
.dotted-line {
text-decoration-line: underline;
text-decoration-style: dotted;
}

/ 破線 /
.dashed-line {
text-decoration-line: underline;
text-decoration-style: dashed;
}

/ 波線 /
.wavy-line {
text-decoration-line: underline;
text-decoration-style: wavy;
/ 波線には色をつけるとより効果的 /
text-decoration-color: red;
}
“`

3. text-decoration-color: 線の色を決める

下線の色を自由に指定できます。テキストの色(colorプロパティ)とは独立して設定できるのが大きなポイントです。

“`css
/ 赤色の下線 /
.red-line {
text-decoration-line: underline;
text-decoration-color: red;
}

/ 16進数カラーコードで指定 /
.hex-line {
text-decoration-line: underline;
text-decoration-color: #007bff; / Bootstrapのプライマリブルー /
}

/ RGBAで透明度を指定 /
.rgba-line {
color: #333;
text-decoration-line: underline;
text-decoration-color: rgba(255, 0, 0, 0.5); / 半透明の赤 /
}
“`

ここで便利なのが currentcolor というキーワードです。これは、その要素のcolorプロパティの値を参照します。つまり、テキストの色を変更すれば、下線の色も自動的に追従してくれるようになります。

css
.current-color-line {
color: #d9534f; /* テキストの色 */
text-decoration-line: underline;
text-decoration-color: currentcolor; /* テキストと同じ色になる */
text-decoration-style: wavy;
}

4. text-decoration-thickness: 線の太さを決める

下線の太さを調整します。これにより、デザインに合わせた繊細な表現や、力強い表現が可能になります。

  • auto: ブラウザが自動で決定します（デフォルト）。
  • from-font: フォントの持つ情報から適切な太さを決定します。
  • 絶対単位: px, pt など。 2px のように指定します。
  • 相対単位: em, rem など。フォントサイズを基準に太さが決まります。 0.1em のように指定すると、フォントサイズが大きくなれば下線も太くなります。

“`css
/ 2pxの太さの下線 /
.px-thick-line {
text-decoration-line: underline;
text-decoration-thickness: 2px;
}

/ 非常に細い下線 /
.thin-line {
text-decoration-line: underline;
text-decoration-thickness: 0.5px; / 小数点も利用可能 /
}

/ フォントサイズに応じた太さ /
.em-thick-line {
font-size: 24px;
text-decoration-line: underline;
text-decoration-thickness: 0.1em; / 24px * 0.1 = 2.4px の太さになる /
}
“`

ショートハンドプロパティ text-decoration で一括指定

これまで見てきた4つのプロパティは、text-decoration を使って一行でまとめて記述できます。

構文: text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>;

値の順序は任意ですが、一般的には line, style, color, thickness の順で書くと見やすいでしょう。

“`css
/ 青色の2pxの波線 /
.shorthand-example {
text-decoration: underline wavy blue 2px;
}

/ 赤色の二重線 (太さはデフォルト) /
.shorthand-example-2 {
text-decoration: underline double red;
}

/ リンクのスタイルをまとめて設定 /
a {
/ 下線、実線、テキストと同色、太さ1px /
text-decoration: underline solid currentcolor 1px;
}
“`

注意点:
text-decoration ショートハンドプロパティで指定されなかった値は、初期値にリセットされます。例えば、text-decoration: underline; とだけ書くと、styleはsolidに、colorはcurrentcolorに、thicknessはautoに戻ります。これは意図しないリセットを引き起こす可能性があるので、注意が必要です。

第3章: text-decorationの限界と、それを超えるテクニック

text-decorationプロパティ群は非常に強力で、多くのケースで十分な表現力を持ちます。しかし、デザインの要求が高度になるにつれて、いくつかの「できないこと」に直面します。

  • テキストと線の間の余白（スペース）の調整:
    デフォルトの下線は、’g’や’p’のようなディセンダ（ベースラインより下にはみ出す部分）を持つ文字に重なってしまうことがあります。この線とテキストの間の距離を自由に調整することは、text-decorationだけでは困難です。（後述するtext-underline-offsetで可能になりましたが、より柔軟な制御には他のテクニックが必要です）

  • 線の位置の微調整:
    テキストのベースラインからの距離をピクセル単位で正確にコントロールすることはできません。

  • グラデーションカラーの下線:
    text-decoration-colorは単色しか指定できません。虹色のようなグラデーションの下線を引くことは不可能です。

  • 角丸の下線:
    線の両端を丸くするようなスタイルは適用できません。

  • 高度なアニメーション:
    ホバーした時に線の長さが伸びたり、色が変わったりするアニメーションはtransitionプロパティで可能ですが、より複雑な動き（例：中央から両側に広がる）を実装するのは困難です。

これらの「できないこと」を実現するため、Web制作者たちは長年にわたって様々な代替テクニックを編み出してきました。次章からは、text-decorationの限界を超えるための、よりパワフルな3つの方法を解説します。

  1. border-bottom を使う方法
  2. 疑似要素 (::before, ::after) を使う方法
  3. background-image を使う方法

第4章: border-bottomを使った下線の実装

text-decorationの代替として最も古くから使われているのが、要素の下側の境界線 border-bottom を下線として利用するテクニックです。

border-bottom の基本

border-bottomは、以下の3つの個別プロパティで構成されます。

  • border-bottom-width: 線の太さ
  • border-bottom-style: 線のスタイル (solid, dotted, dashedなど)
  • border-bottom-color: 線の色

これらもborder-bottomというショートハンドプロパティで一括指定できます。

“`css
.border-underline {
/ リンクのデフォルト下線を消す /
text-decoration: none;

/ border-bottomで新たな下線を設定 /
border-bottom: 2px dotted #ff6347;
}
“`

text-decoration との比較（メリット・デメリット）

border-bottomを下線として使うことには、明確なメリットとデメリットがあります。

メリット

テキストと線の間に余白を作れる
これが最大のメリットです。padding-bottomプロパティを使うことで、テキストと線の間の距離を自由に調整できます。これにより、ディセンダを持つ文字と線が重なるのを防ぎ、可読性を向上させることができます。

“`css
.border-underline-with-padding {
text-decoration: none;
color: #333;
border-bottom: 1px solid #333;

/ テキストの下に3pxの余白を設ける /
padding-bottom: 3px;
}
“`

デメリット

複数行のテキストに対応しづらい
border-bottomは、その要素が持つ「ボックス」の底辺に線を引きます。そのため、display: block;やdisplay: inline-block;の要素内でテキストが複数行に折り返された場合、下線は最後の行の下にしか引かれません。これは下線としては不自然な見た目になります。

“`html

これは非常に長いテキストです。複数行に折り返されると、border-bottomは最後の行の下にだけ表示されます。

css
.border-underline-block {
display: block; / または inline-block /
width: 200px;
border-bottom: 2px solid red;
padding-bottom: 5px;
}
“`
この場合、テキスト全体を囲むボックスの底辺に一本だけ線が引かれます。

display: inlineでの挙動
この問題を解決するために、display: inline;を指定する方法があります。inline要素の場合、改行されても各行の下にborder-bottomが引かれるようになります。

しかし、display: inline;の要素に対しては、padding-topとpadding-bottomが期待通りに機能しないという別の問題が発生します。パディングは確保されますが、上下の要素を押し広げる効果がないため、他の要素と重なってしまう可能性があります。

まとめ
border-bottomは、一行で完結するテキスト（ナビゲーションメニューの項目や見出しなど）に対して、テキストと線の間にスペースを作りたい場合に非常に有効なテクニックです。しかし、複数行にわたる可能性のある文章中のリンクなどには不向きです。

第5章: 疑似要素 (::before, ::after) を使った究極のカスタマイズ

デザインの要求がさらに高度になったとき、最強の武器となるのが疑似要素です。::beforeまたは::afterを使うことで、HTMLを汚すことなく、CSSだけで完全に独立した「線のレイヤー」を要素に追加できます。これにより、text-decorationやborder-bottomでは不可能だった、ありとあらゆる下線表現が実現可能になります。

疑似要素による下線の実装手順

基本的な実装方法は、以下のステップで行います。

  1. 親要素に position: relative; を指定する
    疑似要素をposition: absolute;で絶対位置指定するための基準点とします。

  2. ::after（または::before）に content: ''; を指定する
    疑似要素を表示させるためには、contentプロパティが必須です。中身は空で構いません。

  3. 線の見た目を定義する
    display: block;, height (線の太さ), background-color (線の色) を指定します。

  4. position: absolute; で位置を調整する
    bottom, left を使って、テキストの下の任意の位置に配置します。widthで線の長さを指定します。

基本的なコード例

“`css
.pseudo-underline {
/ 1. 親要素を基準点にする /
position: relative;
/ リンクのデフォルト下線は不要 /
text-decoration: none;
/ インライン要素として振る舞わせるため /
display: inline-block;
color: #2c3e50;
}

.pseudo-underline::after {
/ 2. 疑似要素の必須プロパティ /
content: ”;

/ 3. 線の見た目を定義 /
display: block;
height: 2px; / 線の太さ /
background-color: #3498db; / 線の色 /

/ 4. 位置を調整 /
position: absolute;
bottom: -5px; / テキストの下からの距離 /
left: 0;
width: 100%; / 親要素と同じ幅 /
}
“`

この方法なら、bottomの値を調整するだけで、テキストと線の間の距離をピクセル単位で正確にコントロールできます。

疑似要素を使うメリットと応用テクニック

疑似要素の真価は、その圧倒的な表現力にあります。

1. グラデーション下線

background-colorの代わりにbackground-imageとlinear-gradient()を使えば、美しいグラデーションの下線が簡単に作成できます。

css
.gradient-underline::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 3px;
/* 虹色のグラデーション */
background-image: linear-gradient(
to right,
#ff7e5f, #feb47b, #fdfd96, #84dcc6, #a1c4fd, #c2e9fb
);
}

2. 角丸の下線

疑似要素は単なる「線」ではなく「ボックス」なので、border-radiusを適用して線の両端を丸めることができます。

css
.rounded-underline::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 4px;
background-color: #1abc9c;
/* 高さと同じ値を指定すると完全に丸くなる */
border-radius: 2px;
}

3. インタラクティブなホバーアニメーション

CSSのtransitionとtransformを組み合わせることで、ユーザーの心を掴むインタラクティブなアニメーションを実装できます。

例1: 左から右へ伸びる下線

初期状態では線の幅(width)を0にしておき、ホバー時に100%に変化させます。

“`css
.hover-expand-underline {
position: relative;
display: inline-block;
text-decoration: none;
color: #333;
}

.hover-expand-underline::after {
content: ”;
position: absolute;
bottom: -3px;
left: 0;
width: 0; / 初期状態では幅0 /
height: 2px;
background-color: #e74c3c;
/ transitionで変化を滑らかに /
transition: width 0.3s ease-in-out;
}

.hover-expand-underline:hover::after {
width: 100%; / ホバー時に幅100%に /
}
“`

例2: 中央から両側へ広がる下線

transform: scaleX(0);で初期状態では水平方向に潰しておき、ホバー時にscaleX(1)で元のサイズに戻します。transform-origin: center;で変化の基点を中央に設定するのがポイントです。

“`css
.hover-center-out-underline {
position: relative;
display: inline-block;
text-decoration: none;
color: #333;
}

.hover-center-out-underline::after {
content: ”;
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 2px;
background-color: #9b59b6;
transform: scaleX(0); / 初期状態では潰す /
transform-origin: center; / 中央を基点に変化 /
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.hover-center-out-underline:hover::after {
transform: scaleX(1); / ホバー時に元のサイズに戻す /
}
“`

複数行テキストへの対応

疑似要素もborder-bottomと同様に、親要素がdisplay: block;などだと複数行に対応できないという弱点があります。しかし、親要素をdisplay: inline;にすることで、この問題を回避できます。
ただし、前述の通りinline要素はレイアウト上の扱いに注意が必要です。多くの場合、疑似要素によるリッチな下線は、ナビゲーションや見出しなど、一行で完結する要素に対して適用するのが最も効果的で安全です。

第6章: その他のテクニックと応用

text-decoration, border-bottom, 疑似要素以外にも、下線を表現するためのテクニックや、知っておくと便利な最新のプロパティが存在します。

1. background-image を直接使う方法

疑似要素を使わずに、要素自体のbackgroundプロパティを駆使して下線を引く方法です。linear-gradient()で生成した「画像」を、background-sizeとbackground-positionで調整して下線のように見せます。

css
.background-image-underline {
text-decoration: none;
color: #333;
/* 1pxの高さのグラデーション画像を作成 */
background-image: linear-gradient(currentcolor, currentcolor);
/* 画像を繰り返さない */
background-repeat: no-repeat;
/* 画像のサイズを指定 (幅100%, 高さ1px) */
background-size: 100% 1px;
/* 画像の位置を底辺に指定 */
background-position: 0 100%;
/* padding-bottomでスペースを調整することも可能 */
padding-bottom: 2px;
}
このテクニックの最大のメリットは、複数行のテキストに自然に対応できる点です。display: inline;の要素であれば、改行された各行の下に正しく下線が引かれます。疑似要素のような複雑な設定も不要です。

ホバーアニメーションも可能です。

“`css
.background-hover-underline {
text-decoration: none;
color: #000;
background-image: linear-gradient(#3498db, #3498db);
background-repeat: no-repeat;
/ 初期状態では幅0 /
background-size: 0% 2px;
background-position: 0 100%;
transition: background-size 0.3s ease-in-out;
}

.background-hover-underline:hover {
/ ホバー時に幅100% /
background-size: 100% 2px;
}
“`

この方法は非常にスマートで強力ですが、background-imageを既に他の目的で使用している要素には使えないという制約があります。

2. text-underline-offset: テキストと線の距離を調整する新プロパティ

これまでtext-decorationの弱点とされてきた「テキストと線の間の距離」を直接コントロールできる、待望のプロパティがtext-underline-offsetです。

“`css
.offset-underline {
text-decoration: underline;
text-decoration-thickness: 2px;

/ テキストの下から4px離れた位置に下線を引く /
text-underline-offset: 4px;
}
``
このプロパティは非常にシンプルで直感的です。emなどの相対単位も使用できます。
対応ブラウザも増えてきており（2023年時点では主要なモダンブラウザはほぼ対応）、text-decorationを使いつつ、少しだけスペースを空けたい、という場合に最適な選択肢となります。
ただし、border-bottom`や疑似要素ほどの柔軟性（グラデーションやアニメーション）はありません。

3. text-decoration-skip-ink: 可読性を向上させるプロパティ

このプロパティは、下線が’g’や’p’などのディセンダ部分と交差する際に、線を途切れさせて文字が読みにくくなるのを防ぐかどうかを制御します。

  • auto: ブラウザのデフォルトの挙動。多くのモダンブラウザでは、インクをスキップ（線を途切れさせる）のが標準です。
  • none: インクをスキップせず、線が文字を貫通します。
  • all: 全てのグリフ（文字記号）で線を中断します。

通常はデフォルトのautoで問題ありませんが、デザイン上の意図で線を貫通させたい場合にtext-decoration-skip-ink: none;を指定することがあります。

css
.no-skip-ink {
text-decoration: underline;
text-decoration-thickness: 3px;
font-size: 48px;
/* ディセンダ部分でも線を途切れさせない */
text-decoration-skip-ink: none;
}
このプロパティは、ユーザーの可読性とアクセシビリティに直接関わるため、その役割を理解しておくことは重要です。

第7章: 実践的なユースケースとデザインパターン

学んできたテクニックを、実際のWebサイトでどのように活用できるか、具体的なシーンを想定して見ていきましょう。

1. ナビゲーションメニューのホバーエフェクト

要件: シンプルで、ホバーしたことが分かりやすいエフェクト。一行で完結する。
最適な手法: 疑似要素を使ったアニメーション。

“`css
.nav-link {
display: inline-block;
position: relative;
padding: 10px 0;
text-decoration: none;
color: #555;
transition: color 0.3s;
}

.nav-link::after {
content: ”;
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}

.nav-link:hover {
color: #000;
}

.nav-link:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
“`
この例では、ホバー時に右から左へ線が消え、同時に左から右へ線が現れるような少し凝ったエフェクトを実装しています。

2. ブログ記事内のインラインリンク

要件: 複数行にまたがる可能性があり、可読性を損なわず、かつデザインのアクセントも欲しい。
最適な手法: background-imageまたは進化したtext-decoration。

パターンA: background-image を使う

“`css
.post-content a {
text-decoration: none;
color: #007bff;
background-image: linear-gradient(to top, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.2) 100%);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: 0 95%;
transition: background-size 0.2s ease-in;
}

.post-content a:hover {
background-size: 100% 80%;
}
“`
この例では、半透明の背景をマーカーペンのような下線として使っています。ホバーで範囲が広がる効果も加えました。複数行に綺麗に対応します。

パターンB: text-decoration と text-underline-offset を使う

“`css
.post-content a {
color: #d9534f;
text-decoration: underline;
text-decoration-color: #f0ad4e;
text-decoration-thickness: 2px;
text-decoration-style: wavy;
text-underline-offset: 3px; / スペースを確保 /
transition: all 0.2s;
}

.post-content a:hover {
text-decoration-color: #d9534f;
text-underline-offset: 5px;
}
``
最新のプロパティを駆使すれば、text-decoration`だけでも十分ユニークで可読性の高い下線が作成できます。

3. アクセシビリティを考慮した下線

要件: 色覚に障がいのあるユーザーでも、リンクであることが明確にわかるようにする。
重要な考え方: 色だけに頼らない。

WCAG（Web Content Accessibility Guidelines）では、情報伝達を色のみに依存しないことが推奨されています。リンクを示す場合、下線は非常に重要な役割を果たします。

“`css
/ 悪い例: 色しか変わらない /
a { color: #007bff; text-decoration: none; }
a:hover { color: #0056b3; }

/ 良い例: 色だけでなく、下線でもリンクを示す /
a {
color: #007bff;
text-decoration: underline;
text-decoration-color: rgba(0, 123, 255, 0.5); / 少し控えめな色の下線 /
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}

a:hover {
color: #0056b3;
text-decoration-color: #0056b3; / ホバーで下線の色を濃くする /
}
“`
常に下線を表示するか、少なくともホバーやフォーカス時には必ず下線が表示されるように設計することが、アクセシブルなサイト作りには不可欠です。

まとめ: どの手法をいつ使うべきか？

これまで様々な下線のカスタマイズ方法を見てきました。最後に、それぞれのテクニックの長所と短所、そして最適な使いどころをまとめておきましょう。

手法 メリット デメリット おすすめの使いどころ
text-decoration – 最もシンプルで簡単
– セマンティックに正しい
– offsetやthicknessで柔軟性が向上
– wavyなどのスタイルが使える		 – グラデーションは不可
– 高度なアニメーションは困難
– 角丸にできない		 – ブログ本文中のリンクなど、基本的な下線
– 素早く実装したい場合
– 可読性を重視する場面
border-bottom – padding-bottomで余白を自由に設定可能
– 実装が比較的簡単		 – 複数行テキストに弱い（最後の行にしか引かれない）
– wavyスタイルがない		 – ナビゲーションメニュー
– 見出し
– ボタンなど、一行で完結する要素
疑似要素 (::after) – 究極の自由度
– 位置、太さ、色を完全に制御
– グラデーション、角丸、高度なアニメーションが可能		 – 実装が最も複雑
– positionの理解が必要
– 複数行テキストへの対応がトリッキー		 – デザインに凝ったホバーエフェクト
– ブランドイメージを強調したい見出し
– 他の手法では実現不可能な特殊なデザイン
background-image – 複数行テキストに自然に対応
– グラデーションが可能
– ホバーアニメーションも実装可能		 – backgroundを他の用途で使えない
– wavyなどの複雑なスタイルは不可
– 実装がややトリッキー		 – 複数行にまたがる可能性のあるリンク（マーカー風など）
– 疑似要素を使わずにアニメーションを実装したい場合

選択の指針:

  1. まずは text-decoration を検討する。
    text-decoration-thicknessとtext-underline-offsetを使えば、ほとんどの基本的なニーズは満たせます。シンプルイズベストです。
  2. テキストとの間に余白が絶対に必要で、かつ一行の要素なら border-bottom を使う。
    実装が手軽で、意図が明確です。
  3. 複数行にまたがるリッチな下線（マーカー風など）が必要なら background-image を検討する。
    スマートな解決策です。
  4. グラデーションや複雑なアニメーションなど、text-decorationの限界を超える表現が必要な場合は、迷わず疑似要素を使う。
    あなたの創造性を最大限に発揮できる最強のカードです。

Webデザインの世界では、ディテールへのこだわりがサイト全体の品質を大きく左右します。たかが下線、されど下線。今日学んだテクニックを駆使して、あなたのWebサイトをより美しく、より使いやすく、そしてより魅力的なものにしてください。CSSによる下線のカスタマイズは、あなたのデザイン表現の新たな扉を開く鍵となるでしょう。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール