テキストのアンダーラインはデザインの印象を大きく左右します。文字の下端にただ線を引くだけでは、字体によっては線が降ってくる文字と干渉して読みづらくなることがあります。ここではCSSを使ってCSS 文字 アンダーライン 位置を自在に調整し、視認性と美しさを両立させる方法を詳しく解説します。最新のブラウザ対応状況はもちろん、使いどころや注意点までしっかりお伝えしますので、現場で使える知識が身につきます。
目次
CSS 文字 アンダーライン 位置を制御する主なプロパティ
アンダーラインの位置を調整するにはまさにこのキーワードの通り、CSSと文字、アンダーライン、位置をコントロールするプロパティを利用します。主に使われるのがtext-underline-positionとtext-underline-offsetです。それぞれの特徴・使い方を理解すれば、アンダーラインの位置を微調整して文字と線の関係性をデザイン上理想的な状態に保てます。
text-underline-positionとは何か
このプロパティは、テキストにアンダーラインが引かれる際、どの位置を基準に線を配置するかを指定します。デフォルトはautoで、フォントのメトリクスやブラウザの規定値に従って決定されます。underを指定すると、下端の文字（j, p, yなど）のデセンダーを避けて線を引くように設定できます。縦書きモードではleftやrightを使って左側または右側に線を寄せることもできます。
text-underline-offsetとは何か
このプロパティは、実際にアンダーラインの基準線（通常はベースラインあるいはtext-underline-positionで設定された位置）からどれだけ上下にオフセットするかを調整します。正の値なら文字から遠ざけ、負の値なら基準に近づけます。emやpx、％で指定でき、フォントサイズとの相対関係も持てるため可変デザインに適しています。
両者を組み合わせて使う理由
text-underline-positionで大まかなベースライン位置を調整し、さらにtext-underline-offsetで微調整することで、文字の形状やフォントのデザイン、行間、アクセント付き文字との関係を考慮した美しいアンダーラインが実現します。それぞれ単独で使っても効果がありますが、両方使うことでよりデザインの自由度が高まります。
プロパティの値と対応ブラウザ・互換性
これらのプロパティを安心して使うためには、値の意味とブラウザ対応状況を把握しておくことが重要です。最新情報をもとに、どの値がどの環境で使えるか、またfallback（代替方法）をどう設けるかについて解説します。
text-underline-positionの値の種類
このプロパティには主に以下の値があります：
- auto：デフォルト。ブラウザとフォントの情報に基づいて位置が決定される
- under：デセンダーを避けて線を文字の下部に置く
- left／right：縦書き時に線を左右どちら側に配置するか
- from-font：フォント内に定められた情報を優先して使用する（未定義の場合はauto扱い）
各値により文字との線の重なり具合や行間への影響が異なります。
text-underline-offsetの指定方法と範囲
offsetの指定にはlength（pxやemなど）またはpercentageを使用できます。lengthは固定距離で、emを使えばフォントサイズ変化に対応可能です。percentageは1emあたりの比率で距離を設定します。autoも使え、ブラウザとフォントの既定値を使用します。
ブラウザ対応状況と注意点
modernなブラウザではtext-underline-offsetおよびtext-underline-position双方が対応済みで、Chrome, Firefox, Safariなどで使えます。古いブラウザでは一部未対応だったり挙動が異なることがあります。特に縦書きモードでのleft/right指定は限定的な環境でのみ有効です。互換性が心配な場合はborder-bottomを代替として使う技術もあります。
具体的な使い方とサンプルコード
実際にどのようにアンダーラインの位置を調整するか、具体的なCSS例で確認すると理解が早まります。様々なケースを想定して、文字の形やレイアウトに応じた対応方法を紹介します。
デセンダーを避ける基本例
以下のように設定することで、文字の下にある降りる部分（g, p, yなど）に線がかからず、読みやすくなります。
.underline-under {
text-decoration-line: underline;
text-underline-position: under;
text-underline-offset: 0.2em;
}この設定により、線が文字のベースラインより下になり、デセンダーとの干渉が抑えられます。
太さやスタイルも同時に調整する
アンダーラインの太さや線の種類（実線、破線、波線など）もposition調整と組み合わせることで印象が変わります。
.custom‐underline {
text-decoration: underline solid #990000;
text-decoration-thickness: 2px;
text-underline-position: under;
text-underline-offset: 0.3em;
}線が太くなるほど位置調整が必要になり、offsetを使って最適な間隔をとるのがポイントです。
縦書きテキストでのleft／right利用例
日本語コンテンツなど縦書きを使うデザインでは、underlineの位置を左右どちらかに寄せることが可能です。
.vertical {
writing-mode: vertical-rl;
text-decoration: underline;
text-underline-position: left;
text-underline-offset: 0.1em;
}vertical-rlモードではleftが行の左側、rightが右側に線が配置されます。縦書きならではのレイアウト調整です。
実際のデザインに応じた応用テクニック
アンダーライン位置の調整は単なる見た目だけでなく、UXやアクセシビリティにも関わります。デザインシステムやタイポグラフィの観点からどう使い分けるか、実務で役立つテクニックを紹介します。
リンクテキストの可読性を高める手法
リンクとして使われるテキストはアンダーラインがあることで識別されやすくなりますが、デフォルトの線が文字と近すぎたり、文字によっては切れ目が見えることがあります。text-underline-position: under を使って線を文字の下部に下げ、offsetで数px離すことで可視性とクリック精度が向上します。また、text-decoration-skip-ink を併用することでインク部分を避ける動きが得られ、より洗練されます。
ブランドデザイン／見出しデザインでの活用
見出しやロゴ部分などブランドデザインは視覚的インパクトが重要です。アンダーラインの位置・太さ・スタイル（solid／wavy／doubleなど）を調整することでデザインのアクセントにできます。太めの線を用いる場合は offset を少し大きめにとると線が文字に近づきすぎずバランスが取れます。
レスポンシブデザインでの注意点
画面サイズが変わるとフォントサイズ、行間、文字スペースが変わるのでアンダーラインが文字に近づいたり離れたり見た目が崩れることがあります。emや％単位で offset を指定するか、メディアクエリで調整することで対応できます。他にも、font 指定の内容や line-height が影響するので、それらと合わせてテストすることが必要です。
代替方法と互換性が不十分な環境での対応策
全てのブラウザ／フォント環境で text-underline-position や text-underline-offset が完璧に動くわけではありません。特に古いブラウザや限定されたレンダリングエンジンでは未対応あるいは値が無視されることがあります。こうした場合に備えて代替手段を設けることが賢明です。
border-bottomを使った代替線の方法
テキストに対してアンダーライン代わりに border-bottom を適用することで位置を正確にコントロールできます。text-decoration を無効化し、padding-bottom や line-height を工夫することで、線を文字から適切に離したり重なりを避けたりできます。ただし行の折り返し（wrap）やインライン要素の扱いに注意が必要です。
疑似要素（::after等）を使ってカスタマイズ線を追加する方法
文字列をラップする要素に position: relative を与え、::after を使ってカスタムの線を引く方法もあります。高さ・太さ・色・オフセットを細かく指定できるため、ブランドやデザインの要件が厳しい場合に有効です。しかしマークアップの工夫や可読性への配慮、アクセシビリティの確保が必要です。
フォールバックの設定例
CSSを書く際には、まず text-decoration: underline; を指定し、続いて text-underline-position と text-underline-offset を置く。未対応時のために border-bottom を含むスタイルを予備として持つと安全です。
.link‐fancy {
text‐decoration‐line: underline;
text‐underline‐position: under;
text‐underline‐offset: 0.25em;
border‐bottom: 1px solid currentColor;
}まとめ
文字のアンダーラインを調整する際に鍵となるのは、まずアンダーラインを引く基本設定である text-decoration を使い、その後 text-underline-position で大まかな基準位置を決め、text-underline-offset で微調整を加えることです。これらを組み合わせることで、フォントの形状、行間、文字の降り部分（デセンダー）などと干渉せず、美しく見える線が引けます。
ブラウザの対応状況にも注意して、未対応環境へのフォールバックを border-bottom や疑似要素で補うことで、どの環境でも一貫したデザインを維持できます。視認性・ブランド性・使いやすさを両立するアンダーラインスタイルを意識することで、デザインのプロフェッショナルなクオリティが向上します。
コメント