HTMLで文字に下線を引きたいものの、uタグとCSSのどちらを使えばよいか迷っていませんか。見た目が似ていても、それぞれ役割と使いどころが違います。
装飾として下線を付けるなら、基本はCSSのtext-decorationを使います。線を文字から離したいときはtext-underline-offset、文字幅とは別に線の長さを調整したいときはborder-bottom、マーカー風に見せたいときはlinear-gradientが便利です。
この記事では、HTML・CSSで下線を引く4つの方法を、変更前の状態、追加するコード、表示結果、使い分けの順で初心者向けに解説します。リンクと普通の文章を見分けやすくする注意点も確認しましょう。
HTML・CSSで下線を引く4つの方法
上の図は、4つの方法による表示の違いです。最初に目的を整理しておくと、似たコードの中から適切な方法を選べます。
| 方法 | 向いている用途 | 特徴 |
|---|---|---|
text-decoration | 一般的な文字の下線 | 線の色・太さ・種類・位置も調整できる |
border-bottom | 見出しや部品の下線 | 余白や線の長さを要素単位で調整しやすい |
u要素 | 固有名詞の表記などへの注記 | 装飾ではなく文章上の意味を持つ |
linear-gradient | マーカー風の強調 | 文字の後ろへ太い色面を重ねられる |
迷った場合は、装飾ならtext-decorationから試してください。HTMLは文章の意味、CSSは見た目を担当させると、あとから修正しやすいコードになります。
text-decorationで基本の下線を引く
text-decorationは、文字へ下線・上線・打ち消し線などを付けるCSSプロパティです。普通の下線を引くだけなら、値にunderlineを指定します。
変更前のHTMLを用意する
まず、下線を付けたい部分をspan要素で囲みます。この時点ではクラスにCSSを書いていないため、見た目は普通の文章です。
<p>申し込みは<span class="underline">8月31日まで</span>です。</p>CSSを追加して下線を表示する
style.cssへ次のコードを追加します。クラス名の先頭には、クラスを選択する記号の.を付けます。
.underline {
text-decoration: underline;
}保存してブラウザを再読み込みすると、「8月31日まで」の下に線が表示されます。HTML側へ見た目の指定を書き込まないため、別の場所でも同じクラスを再利用できます。
色・太さ・位置を調整する
下線は、色・太さ・線の種類・文字からの距離を個別に指定できます。次の例では、読みやすいように線を少し太くし、文字との間隔も空けています。
.underline {
text-decoration-line: underline;
text-decoration-color: #2563eb;
text-decoration-thickness: 0.15em;
text-decoration-style: solid;
text-underline-offset: 0.2em;
}emは、その文字の大きさを基準にする単位です。文字サイズが変わっても線の太さや間隔が一緒に調整されるため、固定のpxより扱いやすい場面があります。
線の種類にはsolidのほか、点線のdotted、破線のdashed、波線のwavyなどがあります。装飾が強すぎると読みにくくなるため、本文では控えめに使いましょう。
border-bottomで要素の下側に線を引く
border-bottomは、要素の下辺に枠線を付けるCSSプロパティです。文字そのものではなく要素の境界へ線が付くため、余白や線の長さを調整したい見出し、タブ、ボタン風の部品に向いています。
<h2 class="section-title">サービスの特徴</h2>.section-title {
width: fit-content;
padding-bottom: 0.35em;
border-bottom: 3px solid #f97316;
}padding-bottomで文字と線の間隔を空け、border-bottomで線の太さ・種類・色をまとめて指定しています。width: fit-contentを加えると、見出しの幅が内容に合わせて縮まり、線が画面いっぱいに伸びません。
段落全体に指定した場合、線は文字列の直下ではなく要素の幅に沿って引かれます。「文字だけに線を付けたい」のか「部品の下辺を作りたい」のかを判断して使い分けてください。
u要素で文章上の注記を表す
u要素は、見た目を飾るためだけのタグではありません。固有名詞の表記やスペルミスの指摘など、文章中の一部分へ「通常とは異なる注記がある」と示すときに使います。
<p>入力例：<u class="spelling-error">ウェブサイ卜</u></p>.spelling-error {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #dc2626;
}ブラウザの初期スタイルでは、多くの場合u要素に下線が表示されます。ただし、強く伝えたい内容にはstrong、声や気持ちの強調にはem、関連性のために目立たせたい箇所にはmarkを使うなど、意味に合う要素を選ぶことが大切です。
装飾目的で下線を引くだけなら、意味を持たないspanへクラスを付けてCSSで整えます。HTMLの役割と見た目の役割を分けると、音声読み上げやデザイン変更にも対応しやすくなります。
文字を強調するHTML要素の違いは、次の記事でコード例と一緒に確認できます。
linear-gradientでマーカー風の下線を作る
linear-gradientは、本来は色が変化する背景を作るCSS関数です。色の境界を同じ位置へ重ねると、文字の下半分だけに色を置き、蛍光ペンで引いたような表現を作れます。
<p>提出前に<span class="marker">表示を確認</span>してください。</p>.marker {
background: linear-gradient(
transparent 60%,
#fde68a 60%
);
}0〜60%は透明、60〜100%は薄い黄色になるため、文字の下側へ太い色面が表示されます。境界の割合を70%にすると細く、50%にすると太いマーカーになります。
背景色と文字色の組み合わせによっては読みにくくなります。薄い色を選び、本文の文字とのコントラストを保ってください。
linear-gradientの方向、色の境界、繰り返しなどを詳しく調整したい場合は、次の記事で仕組みから確認できます。
リンクと紛らわしい下線に注意する
Webページでは、下線付きの文字はリンクだと認識されやすいデザインです。クリックできない普通の文章へリンクと同じ色・太さの下線を付けると、読者が操作できると誤解する可能性があります。
- リンクではない強調に、リンクと同じ青色の下線を使わない
- 色だけに頼らず、リンクには下線など別の手掛かりも残す
- 下線を大量に使わず、重要な箇所へ絞る
- 文字と線が重なる場合は
text-underline-offsetを調整する - スマートフォンとパソコンの両方で読みやすさを確認する
リンクの下線をすべて消すと、本文中のどこをクリックできるか分かりにくくなることがあります。デザイン上どうしても消す場合は、色、太さ、ホバー時の変化、フォーカス表示など、リンクだと分かる別の手掛かりを用意してください。
HTMLでリンクを作る基本と、別タブで開く場合の注意点は次の記事で解説しています。
下線が表示されないときの確認ポイント
HTMLのクラス名とCSSの指定をそろえる
HTMLがclass="underline"なら、CSSは.underlineです。大文字と小文字、ハイフンの有無、先頭のドットを確認しましょう。
CSSファイルが読み込まれているか確認する
ほかの装飾も反映されない場合は、HTMLのlink要素で指定したファイル名や保存場所が違う可能性があります。ブラウザの開発者ツールを開き、対象要素へCSSが適用されているか確認してください。
別のCSSに上書きされていないか確認する
テーマやリセットCSSにtext-decoration: noneがあると、下線が消える場合があります。開発者ツールの「Styles」や「Computed」で、最終的に採用された値を確認しましょう。
HTMLの下線に関するよくある質問
下線だけ色を変えられますか？
はい。文字色はcolor、下線の色はtext-decoration-colorで別々に指定できます。背景色との組み合わせも確認し、線が見えにくくならない色を選んでください。
下線と文字の間隔を空けられますか？
text-underline-offsetで調整できます。まずは0.15em〜0.25emほどから試し、使用しているフォントと文字サイズに合わせて変更してください。
文字の一部分だけに下線を引くにはどうしますか？
対象部分をspan要素で囲み、そのクラスへCSSを指定します。文章全体を囲うp要素へ指定すると段落全体が対象になるため、HTML側の範囲を確認してください。
まとめ
一般的な文字の下線はtext-decoration、要素の下辺をデザインするならborder-bottom、文章上の注記にはu要素、マーカー風の表現にはlinear-gradientを使います。
最初はtext-decoration: underlineから試し、必要に応じて線の色・太さ・位置を調整してください。下線がリンクと紛らわしくないか、読みやすさを損なっていないかもブラウザで確認しましょう。