text-decoration: underline;の位置調整はこうする！下線を美しく整えるCSSテクニックまとめ

WebサイトやアプリのUIを制作していると、テキストにアンダーラインを付けた際の“見た目の違和感”に悩んだことはありませんか？

「リンクに下線を付けたけれど、文字にくっつきすぎて読みにくい」「デザインカンプと比べて位置や太さが微妙に違う」「ブラウザによって表示がズレて困る」——そんな経験をした方は少なくないはずです。

実はCSSでは、従来のtext-decoration: underline;に加えて、より細かな下線の位置やスタイルを制御できるプロパティが登場しており、現代的なWebデザインに欠かせない機能となっています。

本記事では、そうした下線スタイルの調整テクニックを基礎から応用まで網羅的に解説し、見た目にも機能性にも優れた下線デザインを実現する方法をご紹介します。

デザイン精度にこだわる方や、フロントエンドの実装力を高めたい方は、ぜひ最後までお読みください。

CSSでアンダーラインの位置を自在に調整する方法

text-decoration: underline; の基本とデフォルト挙動

text-decorationプロパティは、テキストに装飾線を追加するためのCSSプロパティです。最も一般的な値はunderlineで、テキストに下線を引きます。その他にも、テキストの上に線を引くoverline、テキストを打ち消すline-throughなどがあります。

基本的な使い方は非常にシンプルです。

/* 基本的な使い方 */
.underline-text {
  text-decoration: underline;
}

/* その他の値 */
.overline-text {
  text-decoration: overline;
}

.line-through-text {
  text-decoration: line-through;
}

/* 複数の装飾を組み合わせることも可能 */
.multi-decoration-text {
  text-decoration: underline overline;
}

デフォルトのtext-decoration: underline;を設定した場合、下線の位置や太さはブラウザやフォントの種類によって異なります。特に日本語フォントでは、欧文フォントに比べて下線が文字に近すぎたり、文字の画と重なってしまったりすることがよくあります。これは、各フォントが持つ文字のベースライン（基準線）と、ブラウザが下線を描画する位置の計算方法が原因です。

このようにデフォルトの下線位置では、以下のような問題が生じることがあります。

• 可読性の低下: 下線が文字の画と重なることで、特に日本語のひらがなやカタカナ、漢字の一部が読みにくくなる。
• デザインの一貫性の欠如: 異なるブラウザやデバイスで見たときに、下線の位置が微妙に異なり、意図しない表示になる。
• 視覚的な不快感: デザイン全体の中で、下線だけが浮いて見えたり、バランスが悪く見えたりする。

これらの問題を解決し、より美しい下線表現を実現するために、次に紹介するプロパティが非常に役立ちます。

text-underline-offset・text-underline-positionの違いと使い分け

下線の位置をより詳細にコントロールするために導入されたのが、text-underline-offsetとtext-underline-positionです。これらを理解し、適切に使い分けることで、デザイン意図に沿った美しい下線を実現できます。

text-underline-offset

text-underline-offsetプロパティは、text-decorationで引かれた下線を、その文字のベースラインから垂直方向にオフセット（ずらす）ために使用します。これにより、下線と文字の間の間隔を調整し、可読性を向上させることができます。

値には、長さの単位（px, em, remなど）や、パーセンテージ（%）を指定できます。

• 正の値: 下線が文字のベースラインから下に移動します。
• 負の値: 下線が文字のベースラインから上に移動します（文字と重なる方向）。

<style>
  .offset-default {
    text-decoration: underline;
  }
  .offset-2px {
    text-decoration: underline;
    text-underline-offset: 2px; /* 2ピクセル下にずらす */
  }
  .offset-05em {
    text-decoration: underline;
    text-underline-offset: 0.5em; /* 0.5em下にずらす */
  }
  .offset-negative {
    text-decoration: underline;
    text-underline-offset: -2px; /* 2ピクセル上にずらす */
  }
</style>

<p class="offset-default">デフォルトの下線位置</p>
<p class="offset-2px">2px下にずらした下線</p>
<p class="offset-05em">0.5em下にずらした下線</p>
<p class="offset-negative">負の値でずらした下線</p>

emや%を使用すると、フォントサイズに比例してオフセットが調整されるため、レスポンシブデザインにおいてより柔軟な対応が可能です。一般的には、文字の大きさに合わせてemや%で指定する方が望ましいとされています。

text-underline-position

text-underline-positionプロパティは、下線をテキストのどこに配置するかを指定します。主に、下線を文字のベースラインの下に配置するか（デフォルトの挙動）、それとも文字のボックスの下に配置するかをコントロールします。

主な値は以下の通りです。

• auto: ブラウザのデフォルトの挙動に任せます。多くの場合、underと同じ挙動になりますが、特定のスクリプト（言語）によっては異なります。
• under: 下線を文字のボックスの下に配置します。これにより、下線が文字の画に重なるのを避けることができます。特に日本語などの表意文字を扱う場合に有効です。
• left, right: 縦書きの場合に、文字の左側または右側に下線を配置します。

<style>
  .underline-position-auto {
    text-decoration: underline;
    text-underline-position: auto;
  }
  .underline-position-under {
    text-decoration: underline;
    text-underline-position: under; /* 文字ボックスの下に配置 */
  }
  .underline-vertical-left {
    writing-mode: vertical-rl; /* 縦書き設定 */
    text-decoration: underline;
    text-underline-position: left; /* 縦書きの場合、左側に配置 */
  }
</style>

<p class="underline-position-auto">デフォルトまたは`auto`の下線</p>
<p class="underline-position-under">`under`で調整した下線</p>
<div class="underline-vertical-left">
  縦書き<br />
  下線
</div>

日本語の場合、text-underline-position: under;を指定することで、下線が文字のストロークを避けて描画されるため、見た目が大きく改善されることが多いです。

text-underline-offsetとtext-underline-positionの使い分け

両プロパティは独立して機能しますが、組み合わせて使うことでより詳細な下線デザインが可能です。

• text-underline-position: under;: まず下線が文字に重ならないように、文字のボックスの下に配置したい場合に設定します。これにより、日本語の可読性が大幅に向上します。
• text-underline-offset: underを設定した上で、さらに下線と文字の間の間隔を微調整したい場合に利用します。例えば、underだけではまだ少し近いと感じる場合に、わずかにオフセットを加えることで、より理想的な間隔を実現できます。

使い分けのポイント:

1. 日本語など、文字と下線の重なりを避けたい場合: 優先的にtext-underline-position: under;を使用します。
2. 下線と文字の間に少し余裕を持たせたい、または特定の間隔にしたい場合: text-underline-offsetを使用し、具体的な値を調整します。
3. 横書きでベースラインからの距離を厳密にコントロールしたい場合: text-underline-offsetのみを使用し、pxやemで細かく調整します。

これらのプロパティは比較的新しいため、ブラウザの対応状況には注意が必要ですが、モダンブラウザでは広くサポートされています。

フォント・ブラウザごとの下線位置の違いと対応策

ウェブサイトのフォントや閲覧環境（ブラウザ）によって、同じCSSコードでも下線の表示が微妙に異なることがあります。これは、フォントの設計（文字のベースラインや descent の情報）や、各ブラウザの下線描画エンジンの違いによるものです。

Webフォントとシステムフォントでの違い

• システムフォント: OSに標準でインストールされているフォントです。ブラウザはOSのフォントレンダリングエンジンを利用するため、OSやブラウザの組み合わせによって下線の位置が異なります。
• Webフォント: CSSの@font-faceルールで指定され、ウェブサイトからダウンロードして表示されるフォントです。Webフォントはフォントファイル自体が持っているグリフ（文字の形）情報や、ベースライン、アセント、ディセントといったメトリクス情報がブラウザのレンダリングに影響を与えます。一部のWebフォントでは、下線の位置がシステムフォントとは大きく異なる場合があります。

主要ブラウザごとのレンダリングの違い

主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）は、CSS標準に準拠しようとしますが、細かい部分で独自の実装を持っています。特に、text-decoration: underline;のデフォルトの太さや色、位置の微細な差異は常に存在します。

• text-underline-offsetやtext-underline-positionは比較的新しいプロパティのため、古いブラウザではサポートされていません。ただし、現在主要なブラウザではほとんど問題なく動作します。

クロスブラウザ対応のための記述方法と注意点

プロパティのフォールバック: text-underline-offsetがサポートされていないブラウザ向けに、代替手段を検討しておくことが重要です。しかし、このプロパティは視覚的な調整なので、完全に同じ表示でなくても許容されるケースが多いでしょう。

text-decorationのショートハンド: text-decorationは、text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thicknessのショートハンドプロパティです。これらを活用することで、下線の見た目をより細かく制御できます。

.custom-underline {
  text-decoration-line: underline; /* 下線の種類 */
  text-decoration-color: blue;   /* 下線の色 */
  text-decoration-style: solid;  /* 下線のスタイル (solid, double, dotted, dashed, wavy) */
  text-decoration-thickness: 2px; /* 下線の太さ */
  text-underline-offset: 3px;    /* 下線のオフセット */
}

リセットCSS / ノーマライズCSSの影響:

normalize.cssやreset.cssのようなCSSファイルを使用している場合、デフォルトのリンクの下線が消去されていることがあります。その場合、明示的にtext-decoration: underline;を再設定する必要があります。

/* 例: リセットCSSでリンクの下線が消えている場合 */
a {
  text-decoration: none; /* デフォルトで下線を消している */
}

/* 必要な箇所で下線を再設定 */
.link-with-underline {
  text-decoration: underline;
}

ブラウザの互換性については、Can I use…のようなサイトで最新の情報を確認することをお勧めします。

より美しい下線表現を実現するための応用テクニック

アンダーラインと border-bottom の違いと使い分けポイント

下線を表現する方法はtext-decoration: underline;だけではありません。CSSのborder-bottomプロパティも下線のように見せることができます。それぞれにメリットとデメリットがあり、使い分けが重要です。

text-decoration: underline;のメリット・デメリット

メリット:

• シンプルさ: 最も簡単に下線を引ける。
• テキストの一部として扱われる: text-decoration-skip-ink (デフォルトでauto) の挙動により、文字のストローク（特にg, j, p, q, yなど、ベースラインより下に伸びる部分）を避けて下線が描画されることがあり、可読性が保たれる（ブラウザのサポート状況による）。
• インライン要素全体に適用: 複数行にわたる場合も、各行のテキスト全体に下線が自動的に適用される。

デメリット:

• デザインの自由度が低い: 色、太さ、スタイル、位置の調整には限界がある（特にtext-decoration-thicknessやtext-underline-offsetがなかった時代）。
• 要素のレイアウトに影響しない: 下線はテキストの装飾であり、ボックスモデルの範囲外に描画されるため、要素の高さや行間には影響しない。

border-bottomのメリット・デメリット

border-bottomは、要素の下辺にボーダー（線）を追加するプロパティです。

メリット:

• 高いカスタマイズ性:
  • 色: border-bottom-colorで自由に指定可能。
  • 太さ: border-bottom-widthでpxやemで細かく指定可能。
  • スタイル: border-bottom-styleでsolid, dotted, dashed, doubleなど多様なスタイルを指定可能。
  • 位置調整: padding-bottomやmargin-bottom、またはpositionプロパティを組み合わせることで、要素の下から線を引く位置を詳細に調整できる。
• ボックスモデルの一部: 要素の高さや行間に影響を与え、レイアウトに組み込まれる。

デメリット:

• テキストのストロークを避けない: text-decoration-skip-inkのような機能がないため、文字のストロークと重なることがある。
• 複数行テキストに不向き: 複数行にわたるテキストの場合、全体に引くと最後の行の下に線が一本引かれるだけになる。各行に下線を引くには複雑なCSSが必要。
• リンクではない要素にも引ける: テキスト装飾ではないため、リンク要素以外にも自由に線が引ける反面、リンクだと認識されにくい場合がある。

使い分けのポイント

• 標準的なリンクの下線: 基本的にはtext-decoration: underline;を使用し、text-underline-offsetとtext-underline-positionで微調整します。これにより、可読性を保ちつつ、ブラウザのデフォルトの振る舞いを活かすことができます。
• デザイン性の高い下線: 太さ、色、スタイル、アニメーションなど、より複雑なデザインが必要な場合はborder-bottomや、次に紹介する::after擬似要素を使用することを検討します。特に、ホバーエフェクトで下線が伸びる、色が変化するといった演出にはこれらが適しています。
• 複数行のテキストに個別の下線: text-decoration: underline;が最適です。border-bottomでは、各行に下線を引くのが困難です。

複数行・異なるフォントサイズへの対応方法と注意点

text-decoration: underline;は、複数行にわたるテキストに対しても自動的に各行に下線を引いてくれます。しかし、その挙動にはいくつかの注意点があります。

複数行テキストの挙動

<style>
  .multi-line {
    width: 300px; /* テキストを複数行にするために幅を制限 */
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
</style>

<p class="multi-line">
  これは複数行にわたるテキストの例です。
  `text-decoration: underline;`を使用すると、
  各行のテキストに自動的に下線が引かれます。
</p>

このように、text-decoration: underline;は行をまたいでも自然に下線が引かれます。text-underline-offsetも各行に対して個別に適用されます。

異なるフォントサイズが混在する場合

親要素でtext-underline-offsetをemや%で指定している場合、子要素でフォントサイズが変更されると、その子要素の下線オフセットも相対的に変化します。

<style>
  .parent-text {
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 0.5em; /* 親要素のフォントサイズ16pxに対して0.5em */
  }
  .child-text {
    font-size: 24px; /* 子要素でフォントサイズを変更 */
    /* ここにtext-underline-offsetがなければ、親の0.5emが24pxに対して適用される */
  }
</style>

<p class="parent-text">
  親要素のテキストと<span class="child-text">子要素のテキスト</span>です。
</p>

この場合、child-textにはtext-underline-offsetが明示的に指定されていないため、親要素の0.5emが継承され、24pxのchild-textに対して0.5emが計算されます。もし、親要素と同じオフセット量を維持したい場合は、子要素にも明示的にtext-underline-offsetを指定し直す必要があります。

box-decoration-breakプロパティ

box-decoration-breakプロパティは、要素が複数行にわたって改行された場合や、フラグメント（インライン要素の分割された部分）が複数のボックスにまたがる場合に、その装飾（background, border, padding, margin, box-shadowなど）がどのように描画されるかを制御します。text-decorationには直接影響しませんが、borderを擬似的な下線として使う場合には影響します。

• slice (デフォルト): 各フラグメントの境界で装飾が「スライス」されます。
• clone: 各フラグメントが個別のボックスとして扱われ、それぞれに装飾が適用されます。

例えば、border-bottomを複数行のテキストに適用し、各行の下に線を引きたい場合は、display: inline;と組み合わせ、box-decoration-break: clone;を使用することが考えられます。

<style>
  .box-decoration-example {
    display: inline; /* インライン要素にする */
    background-color: lightblue;
    border-bottom: 2px solid blue;
    box-decoration-break: clone; /* 各行にボーダーが適用される */
    line-height: 1.8; /* 行間を広げて見やすくする */
  }
</style>

<p>
  <span class="box-decoration-example">
    このテキストは複数行にわたりますが、
    box-decoration-break: clone;
    によって、各行にボーダーが適用されています。
  </span>
</p>

このテクニックは、text-decoration: underline;では実現できない、背景色を含んだ下線表現などに活用できます。

::after 擬似要素で作るカスタムアンダーラインとアニメーション演出

text-decoration: underline;やborder-bottomでは実現できない、より複雑でデザイン性の高い下線を作成したい場合、::after擬似要素を使用するのが非常に強力なテクニックです。これにより、下線の位置、太さ、色、アニメーションなどを完全にコントロールできます。

::after擬似要素によるカスタム下線の基本

1. 親要素のposition設定: ::after擬似要素を基準に配置するために、親要素（下線をつけたいテキストを含む要素）にposition: relative;を設定します。
2. ::afterの作成: content: '';を必須とし、position: absolute;で配置します。
3. 下線のデザイン: width, height, background-colorで下線の見た目を定義します。
4. 位置調整: bottom, left, rightなどのプロパティと、transform: translateY()やtransform: translateX()を組み合わせて、下線の位置を正確に調整します。

<style>
  .custom-underline-text {
    position: relative; /* ::afterの基準点 */
    display: inline-block; /* インライン要素をブロック要素のように扱いつつ、テキストの幅に合わせる */
    padding-bottom: 5px; /* 下線とのスペース確保 */
    overflow: hidden; /* アニメーション時のはみ出しを隠す */
    color: #333;
    font-size: 24px;
  }

  .custom-underline-text::after {
    content: '';
    position: absolute;
    bottom: 0; /* 親要素の底部に配置 */
    left: 0;
    width: 100%; /* 親要素の幅に合わせる */
    height: 2px; /* 下線の太さ */
    background-color: #007bff; /* 下線の色 */
    transform: translateY(5px); /* 初期位置: 少し下にずらして隠す */
    transition: transform 0.3s ease-out; /* アニメーション */
  }

  /* ホバー時のアニメーション */
  .custom-underline-text:hover::after {
    transform: translateY(0); /* 通常の位置に戻す */
  }
</style>

<p>
  <span class="custom-underline-text">ホバーで現れるカスタム下線</span>
</p>

この例では、初期状態で下線を少し下にずらして隠し、ホバー時に元の位置に戻すことで、下線が下から現れるようなアニメーションを実装しています。

下線のホバーアニメーション・スクロールアニメーション演出

::after擬似要素とCSSのtransitionや@keyframesを組み合わせることで、様々なアニメーション効果を実現できます。

1. スライドイン・アウト（Spotify風）

ホバー時に下線が左から右へ、または中央から左右に広がるアニメーションは非常に人気があります。

<style>
  .spotify-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 8px; /* 下線とのスペース */
    color: #1DB954; /* Spotifyカラー */
    font-size: 30px;
    font-weight: bold;
    text-decoration: none; /* デフォルトの下線を消す */
  }

  .spotify-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* 中央から開始 */
    width: 0; /* 初期状態は幅0 */
    height: 3px;
    background-color: #1DB954;
    transition: all 0.3s ease-out; /* 幅と左端のアニメーション */
    transform: translateX(-50%); /* 中央揃えを維持 */
  }

  .spotify-underline:hover::after {
    width: 100%; /* ホバー時に幅100%に */
  }
</style>

<p>
  <a href="#" class="spotify-underline">Spotify風下線リンク</a>
</p>

2. 波線アニメーション

background-imageとbackground-position、@keyframesを組み合わせることで、動く波線のような下線も作成可能です。

<style>
  .wavy-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    font-size: 28px;
    text-decoration: none;
    color: #333;
  }

  .wavy-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px; /* 波線の高さ */
    background-image: repeating-linear-gradient(
      -45deg,
      #f90, #f90 1px, transparent 1px, transparent 5px
    ); /* 波線パターン */
    background-size: 10px 10px; /* パターンのサイズ */
    animation: waveAnimation 1s linear infinite; /* アニメーション */
  }

  @keyframes waveAnimation {
    from { background-position: 0 0; }
    to { background-position: 10px 0; } /* 横にずらす */
  }
</style>

<p>
  <span class="wavy-underline">波線アニメーション</span>
</p>

SVGを使った下線表現

より複雑な形状やグラデーションを使った下線が必要な場合は、SVGを使用することも有効です。SVGを下線として直接HTMLに埋め込んだり、CSSのbackground-imageとして利用したりできます。SVGは拡大縮小しても劣化しないため、高解像度ディスプレイでも美しく表示されるという利点があります。

実践的な下線デザインの応用とトラブル解決

text-decoration: underline; が表示されない原因と対処法

下線が表示されない場合、いくつかの原因が考えられます。以下のチェックリストを参考に、順に確認してみてください。

1.CSSの優先順位:

• 原因: 他のCSSルール（特に!importantが付いているものや、より詳細なセレクタを持つもの）によってtext-decoration: none;が上書きされている可能性があります。
• 対処法: 開発者ツール（ブラウザのF12キーで開く）で要素を検査し、適用されているCSSルールを確認します。意図しないtext-decoration: none;がないか確認し、必要に応じて自身のルールをより具体的に記述するか、!importantを使って強制的に適用します（乱用は避けるべきですが、一時的なデバッグには有効です）。

/* 悪い例（上書きされやすい） */
a {
  text-decoration: underline;
}

/* 良い例（より優先順位が高い） */
.navigation a {
  text-decoration: underline !important; /* 緊急時の対処 */
}

2.要素の表示設定（displayプロパティ）:

• 原因: text-decorationはインライン要素またはインラインレベルの要素に適用されるのが一般的です。ブロックレベル要素全体に装飾しようとしている場合、期待通りの表示にならないことがあります。
• 対処法: 装飾したいテキストが<span>などのインライン要素内にあるか確認します。ブロック要素（<div>, <p>など）のテキストに下線を引くことはできますが、その要素のテキストコンテンツ全体に引かれます。

3.ブラウザの互換性・バグ:

• 原因: 稀に、特定のブラウザやバージョンで既知のバグがある場合があります。
• 対処法: 別のブラウザで試してみて、同じ問題が発生するか確認します。もし特定のブラウザだけで問題が発生する場合、そのブラウザのバグである可能性もあります。text-underline-offsetやtext-underline-positionは新しいプロパティなので、古いブラウザではサポートされていない可能性があります（ただし、現状はほとんどのモダンブラウザで対応済みです）。

4.JavaScriptによる変更:

• 原因: JavaScriptによって動的にCSSが変更され、下線が消されている可能性があります。
• 対処法: 開発者ツールで要素のスタイルを監視し、JavaScriptによってスタイルが変更されていないか確認します。

5.フォントの問題:

• 原因: ごく稀に、使用しているフォント自体に下線の情報が欠けている、または非常に細い、透明な下線が設定されているなどの問題がある場合があります。
• 対処法: 別のフォントで試してみるか、border-bottomや::after擬似要素で代替の下線を引くことを検討します。

アンダーラインのアニメーション・hover効果実装例（Spotify風など）

ウェブサイトのユーザー体験を向上させる上で、インタラクティブなホバー効果は非常に重要です。アンダーラインにアニメーションを加えることで、より洗練された印象を与えることができます。

1. シンプルなホバーアニメーション（色の変化・太さの変化）

text-decoration-colorやtext-decoration-thicknessとtransitionを組み合わせることで、簡単にアニメーションを実装できます。

<style>
  .simple-hover-underline {
    text-decoration: underline;
    text-decoration-color: #ccc; /* 初期の色 */
    text-decoration-thickness: 1px; /* 初期値 */
    transition: text-decoration-color 0.3s ease, text-decoration-thickness 0.3s ease;
    color: #333;
    font-size: 20px;
    cursor: pointer;
  }

  .simple-hover-underline:hover {
    text-decoration-color: #007bff; /* ホバー時の色 */
    text-decoration-thickness: 3px; /* ホバー時の太さ */
  }
</style>

<p>
  <span class="simple-hover-underline">ホバーで色と太さが変わる下線</span>
</p>

2. Spotify風下線アニメーションの応用

前述の::after擬似要素を使ったSpotify風の例をベースに、より洗練された演出を加えてみましょう。例えば、ホバー時に下線が少し遅れて現れる、または、テキストの幅に合わせて下線が伸びるなどです。

<style>
  .spotify-effect-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    color: #333;
    font-size: 24px;
    text-decoration: none; /* デフォルトの下線を消す */
  }

  .spotify-effect-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* 初期は幅0 */
    height: 2px;
    background-color: #1DB954; /* Spotifyグリーン */
    transition: width 0.3s ease-out; /* 幅のアニメーション */
  }

  .spotify-effect-underline:hover::after {
    width: 100%; /* ホバーで幅100%に */
  }
</style>

<p>
  <a href="#" class="spotify-effect-underline">より洗練されたSpotify風下線</a>
</p>

このバリエーションでは、下線が左から右に伸びるアニメーションを実現しています。transition-delayを使って、下線が少し遅れて現れるようにすることも可能です。

3. CSSアニメーション (@keyframes) を使った複雑な演出

より複雑なアニメーション、例えば下線が複数の段階で変化するような場合は、@keyframesルールを使用します。

<style>
  .keyframes-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    color: #333;
    font-size: 24px;
    text-decoration: none;
  }

  .keyframes-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff5722;
    transform: scaleX(0); /* 初期は幅0に縮小 */
    transform-origin: bottom left; /* 左下を基準に拡大 */
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); /* 緩急をつけたアニメーション */
  }

  .keyframes-underline:hover::after {
    transform: scaleX(1); /* ホバーで幅100%に拡大 */
  }
</style>

<p>
  <span class="keyframes-underline">キーフレームアニメーション下線</span>
</p>

アクセシビリティ・可読性を高める下線デザインのベストプラクティス

下線は単なるデザイン要素ではなく、特にリンクの識別やテキストの強調において、アクセシビリティ（ウェブサイトの利用しやすさ）と可読性に大きく影響します。

リンクの下線の重要性

• 視認性: リンクは、それがクリック可能であることを視覚的に明確に示す必要があります。下線は、色覚多様性のあるユーザーを含め、多くのユーザーにとって最も一般的な視覚的な手がかりです。色だけでリンクを示すのは避けるべきです。
• 操作性: 下線があることで、ユーザーはどこをクリックすればよいかを直感的に理解できます。

下線と文字の重なり、適切なオフセットの重要性

前述の通り、下線が文字のストロークと重なると、テキストが読みにくくなります。

• 対策: text-underline-offsetやtext-underline-position: under;を積極的に利用し、下線と文字の間に適切な間隔を設けるようにしましょう。特に日本語ではこの調整が不可欠です。
• ベストプラクティス: 大文字・小文字、アセンダー・ディセンダー（文字の上下に突き出る部分）が混在するテキストでも、下線が文字と重ならないようにデザインします。

色覚多様性を持つユーザーへの配慮

色覚多様性のあるユーザーは、特定の色（特に赤と緑）を区別するのが難しい場合があります。

• 対策: リンクを示すために色だけに頼らないこと。必ず下線（またはアイコンや太字など、他の視覚的な手がかり）と組み合わせてリンクであることを示します。ホバー時に色が変わる場合でも、下線は残しておくか、別の視覚的な変化（下線が伸びるなど）を加えることを推奨します。

下線と他の要素とのコントラスト比の考慮

• 対策: 下線の色と背景色、そして下線とテキストの色の両方において、十分なコントラスト比を確保することが重要です。特に、リンクの下線が目立たない色だと、ユーザーはそれがリンクであることに気づかない可能性があります。WCAG（Web Content Accessibility Guidelines）2.1の基準（テキストと背景のコントラスト比3:1以上、標準テキストは4.5:1以上）を満たすようにしましょう。

テキスト以外の要素への下線の適用有無

• 画像リンクやアイコンリンクには、通常text-decoration: underline;は適用されません。これらの要素にクリック可能なことを示す場合は、ボーダー、背景色の変化、影、または視覚的なフィードバック（拡大・縮小、フェードイン・アウトなど）を使用します。

よくある質問（FAQ)

まとめ

この記事では、CSSのtext-decoration: underline;を中心に、下線の位置を自在に調整するための様々なテクニックを解説しました。

これらの知識とテクニックをマスターすることで、あなたのWebサイトにおけるテキストの表現は、機能的かつ視覚的に大きく向上するでしょう。読者のユーザー体験を高める美しい下線デザインを、ぜひあなたのプロジェクトで実践してみてください。

CSSだけでできる！カルーセルの作り方ガイド【HTML・JS不要／最新scroll-snap対応】

HTMLとCSSだけで作れるカルーセルの実装方法を、初心者にもわかりやすく解説。レスポンシブ対応やscroll-snapを活用した横スクロール型、最新のCSS疑似要素を使った高度なカスタマイズ手法まで幅広く紹介。コピペOKなコード付きで、JavaScriptなしでも本格的なスライダーを作りたい方におすすめの内容です。

watashi.xyz

2025.06.16