CSSで下線の位置を調整する方法｜text-underline-offset・position

CSSで text-decoration: underline; を指定したのに、下線が文字に近すぎたり、日本語のフォントで字と重なって読みにくくなったりした経験はないでしょうか。実は「text decoration underline 位置」で検索する方の多くが、この下線の位置ズレに悩まされています。原因は装飾自体のミスではなく、ブラウザやフォントが下線位置を自動計算している仕組みにあり、正しいプロパティを選べば数行のCSSで解決できます。

CSSで下線を引く基本の書き方(text-decoration: underline;)

CSSで文字に下線を引くには、対象の要素に text-decoration: underline; を指定するだけです。ただし、この基本プロパティだけでは下線の位置や太さまでは制御できないため、文字に近すぎたり重なったりする不具合が起きやすくなります。まずは基本構文と、他の装飾値との違いを整理しておきます。

text-decorationプロパティの基本構文

text-decoration は、下線・打ち消し線・上線などのテキスト装飾をまとめて指定するショートハンドプロパティです。単体で underline を指定すれば、それだけで下線が表示されます。

.underline-basic {
  text-decoration: underline;
}

実際には text-decoration は次の4つのロングハンドプロパティの集合体です。

• text-decoration-line(線の種類:underline・overline・line-throughなど)
• text-decoration-color(線の色)
• text-decoration-style(線のスタイル:solid・dashed・wavyなど)
• text-decoration-thickness(線の太さ)

そのため、次のように書いても同じ見た目になります。

.underline-longhand {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
}

位置調整を細かく行いたい場合は、このあと紹介する text-underline-offset や text-underline-position と組み合わせて使う場面が多くなります。

overline・line-throughなど他の値との違い

text-decoration-line に指定できる値は underline だけではなく、線を引く位置によって役割が異なります。

複数の線を同時に引きたい場合は、値をスペース区切りで並べます。

.multi-decoration {
  text-decoration-line: underline overline;
}

見た目としては下線がもっとも使用頻度が高いものの、underline は「線を引く場所」の指定にすぎず、線と文字の距離や太さまでは決めていない、という点が次の問題につながります。

デフォルトの下線が文字と重なる・近すぎる原因

text-decoration: underline; だけを指定したときに下線が文字と重なって見えるのは、多くの場合ブラウザが下線の位置をフォントの内部メトリクス(フォントファイルに埋め込まれた基準値)を基に自動計算しているためです。

具体的には、以下のような要因が重なって発生します。

• 欧文フォントと和文フォントでは、文字の重心やベースラインの取り方が異なり、和文フォントほど下線が文字に近づきやすい
• ブラウザやOSごとにフォントメトリクスの解釈が微妙に異なり、同じCSSでもChromeとSafariで下線位置がずれることがある
• line-height を詰めているコンテナ内では、下線を描画できる余白そのものが狭くなり、結果的に文字と重なって見える

つまり text-decoration: underline; は「どこに下線を引くか」という座標をピクセル単位で指定しているわけではなく、フォントとブラウザの実装に位置決めを委ねている状態です。この挙動を制御するために使うのが、次の章で説明する text-underline-offset と text-underline-position です。

下線の位置を調整する方法(text-underline-offset・position)

下線と文字の重なりや近すぎる問題は、text-underline-offset で線と文字の間隔を空け、text-underline-position で線を描画する基準そのものを変えることで解決できます。この2つは役割が異なるため、症状に応じて使い分けます。

text-underline-offsetで下線と文字の間隔を離す

text-underline-offset は、下線をベースラインからどれだけ下に離すかを指定するプロパティです。数値を大きくするほど、文字と下線の間の余白が広がります。

.underline-offset {
  text-decoration: underline;
  text-underline-offset: 4px;
}

単位は px のほか、フォントサイズを基準にした em も使えます。レスポンシブなレイアウトで文字サイズが可変する場合は em 指定にしておくと、サイズが変わっても間隔のバランスが崩れにくくなります。

.underline-offset-em {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

text-underline-offset はChrome・Edge・Firefox・Safariの最新版でいずれも問題なく利用できます。古いブラウザへの対応が必要な場合を除けば、実務上の互換性はほぼ気にしなくてよい状態です。

text-underline-offset - CSS | MDN

text-underline-offset は CSS のプロパティで、 (text-decoration を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

developer.mozilla.org

text-underline-positionで日本語の下線を文字に重ねない設定にする

text-underline-offset が「距離」を調整するのに対し、text-underline-position は「どの基準線から線を引くか」を切り替えるプロパティです。特に日本語フォントで下線が字形に食い込む場合は、こちらの調整が効果的です。

.underline-position-ja {
  text-decoration: underline;
  text-underline-position: under;
}

主な値は次のとおりです。

• auto(初期値):ブラウザが自動判断
• under:文字の下端よりさらに下、ディセンダー(g・pなどの下に突き出た部分)を避けた位置に線を引く。和文の下線が字に重なるケースで有効
• from-font:フォント自体が埋め込んでいる下線位置の情報を優先する
• left / right:縦書きテキストで、下線を文字の左側・右側に配置する

縦書きレイアウトやルビ付きテキストで下線位置が乱れる場合は、under または from-font を指定したうえで実際の見た目を確認するのが確実です。ブラウザ対応については、Chrome・Edge・Firefoxは主要な値に対応していますが、Safariは一部の値でサポート状況が異なるため、対象ブラウザでの表示確認をおすすめします。

text-underline-position - CSS | MDN

text-underline-position は CSS のプロパティであり、text-decoration プロパティの underline の値で設定される下線（傍線）の位置を指定します。

developer.mozilla.org

offsetとpositionの使い分けの目安

結論としては、「間隔を微調整したいだけならoffset」「線を引く基準位置そのものがずれているならposition」という切り分けで考えると迷いにくくなります。

.underline-combined {
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 2px;
}

具体的な判断基準は以下のとおりです。

多くの場合、まず text-underline-position で線の基準位置を整えてから、text-underline-offset で微調整するという2段階の流れがもっともきれいに仕上がります。

下線の太さ・色を変える方法

下線の太さは text-decoration-thickness、色は text-decoration-color でそれぞれ独立して指定でき、文字色を変えずに下線だけ目立たせたり、細くして圧迫感を減らしたりといった調整が自由に行えます。

text-decoration-thicknessで太さを調整する

text-decoration-thickness は下線・打ち消し線・上線の太さをピクセル単位や em 単位で指定するプロパティです。初期値はフォントに依存するため、太さを揃えたい場合は明示的に指定します。

.underline-thin {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.underline-bold {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

太さを増やすと文字との距離が相対的に近く感じられるようになるため、text-decoration-thickness を変更したときは text-underline-offset もあわせて見直すと仕上がりが安定します。Chrome・Edge・Firefox・Safariの最新版いずれでも問題なく利用できるプロパティです。

text-decoration-colorで色だけを変える

text-decoration-color を使うと、文字色はそのままに下線の色だけを変更できます。リンクの文字色を維持しつつ下線だけを薄くしたい、といったデザインでよく使われます。

.underline-colored {
  color: #222;
  text-decoration: underline;
  text-decoration-color: #ff6b6b;
}

text-decoration-color を省略した場合の初期値は currentColor、つまり文字色と同じ色になります。文字色と下線色を意図的に分けたいときだけ指定すれば十分です。

ショートハンドでまとめて指定する書き方

線の種類・色・スタイル・太さをまとめて指定したい場合は、text-decoration のショートハンドに複数の値をスペース区切りで並べます。

.underline-shorthand {
  text-decoration: underline wavy #ff6b6b 2px;
}

上記は「波線・赤系の色・太さ2px」の下線を1行で表現した例です。ただし、text-underline-offset はショートハンドに含まれない独立したプロパティなので、位置の調整が必要な場合は別行で指定する必要があります。

.underline-shorthand-with-offset {
  text-decoration: underline solid #333 2px;
  text-underline-offset: 3px;
}

コード量を減らしたい場合はショートハンド、後から個別に上書きする可能性がある場合はロングハンドで書く、という使い分けが管理しやすくなります。

border-bottomとの違いと位置調整での使い分け

text-decoration 系のプロパティで位置調整が難しい場合、border-bottom を下線代わりに使う方法もあります。ただし複数行テキストでは挙動が大きく異なるため、用途に応じた使い分けが必要です。

text-decorationとborder-bottomのメリット・デメリット比較

text-decoration: underline; と border-bottom は見た目こそ似ていますが、描画の仕組みが根本的に異なります。

複数行にわたる本文テキストの下線には text-decoration を使い、見出しの下の区切り線やタブの選択インジケーターのような「1本の固定された線」が欲しい場合は border-bottom を使う、という切り分けが基本になります。

border-bottomで下線の位置を細かく調整する方法

border-bottom は padding-bottom と組み合わせることで、文字と線の距離を自由に設定できます。

.underline-border {
  display: inline-block;
  border-bottom: 2px solid #333;
  padding-bottom: 4px;
}

display: inline-block; を指定しているのは、インライン要素のままだと padding-bottom が期待通りに効かない場合があるためです。ボタンやタブのように背景や余白を持つ要素に下線を付けたいときは、text-decoration よりも border-bottom のほうが直感的にコントロールできます。

複数行テキストにborder-bottomを使う際の注意点

border-bottom は要素そのものの下端に線を引く仕様のため、テキストが折り返して複数行になった場合、各行の下ではなく段落全体の最後の下にしか線が入りません。

<p class="underline-border-multiline">
  この文章が複数行に折り返した場合、border-bottomは各行の下ではなく
  段落全体の一番下にしか線を表示しません。
</p>

.underline-border-multiline {
  border-bottom: 1px solid #999;
}

各行ごとに下線を入れたい場合は border-bottom ではなく text-decoration: underline; を使うのが確実です。見出しやボタンなど、行数が固定されている短いテキストに限定して border-bottom を使うようにすると、意図しない見た目のずれを防げます。

おしゃれな下線デザインを作る方法

text-decoration だけでは表現できない下線デザイン、たとえばホバー時に伸びるアニメーションや波線・グラデーションのような装飾は、::after 疑似要素で自作した下線を使うことで実現できます。

::after疑似要素でカスタム下線を作る基本

::after を使う方法では、実際には下線ではなく「文字の下に配置した細い横棒」を表示しています。位置・太さ・色を text-decoration より柔軟に指定できるのが特徴です。

<a class="custom-underline" href="#">カスタム下線のリンク</a>

.custom-underline {
  position: relative;
  text-decoration: none;
  color: #222;
}

.custom-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #222;
}

親要素に position: relative; を指定し、::after を position: absolute; で配置することで、bottom の値を使ってピクセル単位で線の位置を決められます。text-underline-offset よりも自由度が高い一方、コード量は増えるため、単純な下線であれば text-decoration を使うほうがシンプルです。

実際の表示

See the Pen css-underline-example-1 by watashi-xyz (@watashi-xyz) on CodePen.

ホバーで伸びる下線アニメーション(Spotify風)の実装

::after の width を transform: scaleX() でアニメーションさせると、ホバー時に下線が左から右へ伸びる演出が作れます。

.hover-underline {
  position: relative;
  text-decoration: none;
  color: #222;
  display: inline-block;
}

.hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #1db954;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hover-underline:hover::after {
  transform: scaleX(1);
}

width ではなく transform: scaleX() を使っているのは、width の変化をアニメーションさせるとブラウザの再レイアウト処理が発生し、動きがカクつきやすくなるためです。transform はレイアウトに影響を与えずに描画だけを変化させるため、滑らかな動きになります。

実際の表示

See the Pen css-underline-example-2 by watashi-xyz (@watashi-xyz) on CodePen.

波線・グラデーションなど装飾性の高い下線パターン

波線は text-decoration-style: wavy; を指定するだけで表現できます。

.underline-wavy {
  text-decoration: underline wavy;
  text-decoration-color: #4a90d9;
  text-underline-offset: 3px;
}

グラデーションの下線は text-decoration では表現できないため、::after に linear-gradient を背景として指定します。

.underline-gradient {
  position: relative;
  text-decoration: none;
  color: #222;
}

.underline-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #ff6b6b, #4a90d9);
}

装飾性の高い下線ほど ::after を使った自作の線に頼る場面が増えますが、その分アクセシビリティやコントラストへの配慮も必要になります。次の章ではリンクの下線とアクセシビリティの関係を扱います。

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

あわせて読みたい

CSSだけで波線背景を実現！画像不要で作れるコピペ実装＆アニメーション付きデザイン集

CSSだけで実装できる波線背景の作り方をわかりやすく解説。コピペOKの実例や、Sass・Tailwind対応の再利用しやすい構造、さらにSVGやHaikei、clip-pathなどを使ったアニメーション付き応用テクニック、WordPressテンプレートへの組み込み方、レスポンシブ対応のポイントまで網羅します。

watashi.xyz

2025.06.30

リンクの下線とアクセシビリティの注意点

リンクの下線は装飾のためだけでなく、色を識別しにくいユーザーがテキストの中からリンクを見分けるための手がかりとして機能しています。下線を消す場合は、色以外の方法でリンクだと分かるようにする配慮が必要です。

リンクに下線が必要とされる理由

ブラウザの初期設定では <a>要素に自動で下線が付きますが、これは単なる伝統的なスタイルではなく、色覚特性によって文字色の違いを認識しにくいユーザーへの配慮という側面があります。WCAG(WebContent Accessibility
Guidelines:Webコンテンツのアクセシビリティに関する国際的な指針)では、色だけを情報伝達の手段にしないことが求められており、リンクを色だけで区別させるデザインはこの考え方に反する可能性があります。

a {
  color: #1a5fb4;
  text-decoration: underline;
  text-underline-offset: 2px;
}

デザイン上どうしても本文中のリンクから下線を外したい場合は、色のコントラストを十分に確保したうえで、ホバーやフォーカス時に下線を表示するなど、別の手がかりを用意しておくと安全です。

a.no-default-underline {
  color: #1a5fb4;
  text-decoration: none;
}

a.no-default-underline:hover,
a.no-default-underline:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

色だけに頼らないリンク表現の作り方

本文の地色とリンクの文字色のコントラストが低い場合、下線を消してしまうと文章中のリンクの位置がほとんど分からなくなります。下線以外にも、アイコンを添える・太字にする・背景色を薄く敷くといった手段を組み合わせることで、色覚特性に関わらずリンクだと認識しやすくなります。

a.icon-link {
  color: #1a5fb4;
  text-decoration: none;
  font-weight: 600;
}

a.icon-link::after {
  content: "↗";
  margin-left: 2px;
}

複数の手がかりを重ねておくことで、下線を完全に消すデザインを採用した場合でも、リンクとしての機能性を損なわずに済みます。ナビゲーションメニューのように、見た目からリンクだと明確に分かる文脈では下線を省略しても問題ありませんが、本文中に埋め込まれたテキストリンクでは下線を残すか、代替の手がかりを用意しておくほうが無難です。

text-decoration: underlineが効かない・表示されないときの対処法

下線が表示されない原因の多くは、CSSの優先順位・他のスタイルによる打ち消し・要素の表示形式のいずれかに集約されます。ここでは原因ごとに確認方法と解決コードをセットで紹介します。

CSSの優先順位が原因で下線が反映されないケース

原因: あとから読み込まれたCSSや、より詳細度(セレクタの強さ)の高いスタイルによって、指定した text-decoration: underline; が上書きされている状態です。

確認方法: ブラウザの開発者ツールでリンクや文字を選択し、要素パネルの text-decoration プロパティに取り消し線が入っていないかを確認します。取り消し線が入っている場合は、その下に表示されている別のルールが優先されています。

解決コード: セレクタの詳細度を上げるか、読み込み順を後ろにすることで解決します。

/* 詳細度が低く、後から上書きされやすい例 */
a {
  text-decoration: underline;
}

/* クラスを併用して詳細度を上げる */
a.link-underline {
  text-decoration: underline;
}

!important で強引に上書きする方法もありますが、以降の保守性を下げるため、詳細度の調整で解決できないか先に検討したほうが安全です。

text-decoration: none;を指定しても下線が効かないケース

原因: 逆に「下線を消したいのに消えない」場合は、フレームワークやリセットCSSが独自に text-decoration を再定義しており、自分で書いたスタイルより後に読み込まれていることが多い原因です。

確認方法: 開発者ツールで該当要素を選択し、text-decoration にどのセレクタが最終的に適用されているかをスタイルパネルの上から順に確認します。

解決コード: 該当セレクタと同じか、それ以上の詳細度で上書きします。

.card a {
  text-decoration: none;
}

.card a のように親要素を含めたセレクタにすることで、単体の a セレクタよりも詳細度を上げられます。

display・フォント・ブラウザ差異による表示崩れの確認ポイント

原因: display: inline-block; や display: flex; を指定した要素の内部でテキストを折り返している場合、下線の描画位置がブラウザによって微妙に異なることがあります。また、Webフォントの読み込みタイミングによって、フォント切り替え前後で下線位置が一瞬ずれて見えるケースもあります。

確認方法: 以下の観点でブラウザごとの表示を比較します。

• Chrome・Edge・Firefox・Safariでそれぞれ同じ要素を表示し、下線位置に差がないか
• Webフォント読み込み前(フォールバックフォント表示時)と読み込み後で下線位置が変化していないか
• 要素の line-height が極端に小さく、下線がテキストブロックの外にはみ出していないか

解決コード: フォント読み込みによるちらつきを抑えるには font-display を調整し、下線位置のずれ自体は text-underline-offset で吸収します。

@font-face {
  font-family: "CustomFont";
  src: url("custom-font.woff2") format("woff2");
  font-display: swap;
}

.underline-stable {
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1.8;
}

line-height に余裕を持たせておくと、下線が行の外にはみ出したり、次の行と干渉したりする不具合を予防できます。

よくある質問(FAQ)

まとめ

text-decoration: underline; は手軽に下線を引ける一方、位置の細かい制御には周辺プロパティとの組み合わせが欠かせません。最後に、選び方の指針として要点を整理します。

迷ったときは、まず text-underline-position で基準位置を整え、次に text-underline-offset で微調整するという2段階の流れに戻ると、たいていの「ズレる」「重なる」「近すぎる」という悩みは解消できます。

あわせて読みたい

線が動くアニメーションの作り方｜描くように伸びる手書き風・スクロール連動演出まで解説

SVGやCSS、JavaScriptを使って「線が動く」アニメーションを表現する方法を詳しく解説！描線アニメーションの基本から、スクロールに連動して線が伸びる演出、手書き風の動き、フェードイン効果との組み合わせまで紹介。Web制作でローディング演出やトランジションを取り入れた実装テクニックと最適化ノウハウがこちら

watashi.xyz

2025.08.29