【完全保存版】CSSで下線を引く方法まとめ｜text-decoration・borderの使い分けを初心者向けに解説

Webサイトを作っていると、
「文字に下線を引きたい」「リンクを強調したい」
という場面はとても多くあります。

下線をつけたいけど方法が分からない
リンクの下線を消したい
下線の色や太さを変えたい

この記事では、「css 下線」で検索した初心者の方に向けて、
CSSで下線を引く基本的な方法から、
デザインに使える応用テクニックまでを 分かりやすく解説 します。

CSSで下線を引くとは

CSSで下線を引くとは、
文字の下に線を表示して強調することです。

下線は主に次のような目的で使われます。

リンクであることを示す
強調したいキーワードを目立たせる
デザイン的な装飾として使う

下線を引く基本（text-decoration）

CSSで下線を引く最も基本的な方法は、
text-decoration プロパティを使うことです。

p {
  text-decoration: underline;
}

これだけで、文字に下線が表示されます。

text-decorationで指定できる値

p {
  text-decoration: underline;
}

主な指定値は次の通りです。

underline：下線
line-through：打ち消し線
overline：上線
none：装飾なし

リンクの下線を消す方法

HTMLのリンク（aタグ）には、
初期状態で下線が表示されます。

a {
  text-decoration: none;
}

注意点

下線を消す場合は、色やホバー効果でリンクと分かる工夫をしましょう

ホバー時だけ下線を表示する方法

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

この方法は、
デザイン性と分かりやすさを両立できるため、よく使われます。

下線の色を変更する方法

p {
  text-decoration: underline;
  text-decoration-color: red;
}

ポイント

下線だけ色を変えられる
文字色とは独立して指定可能

下線の太さを変更する方法

p {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

よくある使い方

見出しの装飾
強調ワードのマーキング風デザイン

下線の位置を調整する方法

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

下線と文字の距離を調整できるため、
デザインの完成度が一気に上がります。

text-decorationをまとめて書く方法

p {
  text-decoration: underline solid red;
}

ただし初心者の方は、
個別プロパティで指定する方が理解しやすいです。

下線が思った通りにならない原因

下線が文字に近すぎる

p {
  text-decoration: underline;
}

→ text-underline-offset を使って調整しましょう。

下線の太さが変わらない

p {
  text-decoration-thickness: 4px;
}

→ 古いブラウザでは非対応の場合があります。

borderを使って下線風にする方法（応用）

デザイン性を重視したい場合は、
border-bottom を使う方法もあります。

span {
  border-bottom: 2px solid #333;
}

border下線のメリット

太さ・色・位置を自由に調整できる
アニメーションと相性が良い

注意点

本来の下線ではないため、意味的な強調には向かない

下線アニメーションの簡単な例

a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

a:hover {
  border-bottom: 2px solid #333;
}

シンプルですが、
よく使われるデザインテクニックです。

下線を使うときの注意点

下線を多用しすぎない
本文全体に使わない
強調・リンクなど目的を明確にする

特に本文では、
下線が多いと読みにくくなるため注意しましょう。

よくある質問

下線はSEOに影響しますか

直接的なSEO効果はありません。
ただし、読みやすさや視認性はユーザー評価に影響します。

下線と太字はどちらを使うべきですか

軽い強調：下線
強い強調：太字

と使い分けるのがおすすめです。

まとめ

CSSで下線を引く方法は、大きく分けて2つあります。

text-decoration：意味的・基本的な下線
border-bottom：デザイン重視の下線

基本は text-decoration: underline; を使い、
必要に応じて色・太さ・位置を調整していきましょう。

「css 下線」で検索した方は、
まず text-decorationの基本 をしっかり押さえてください。
下線を正しく使えるようになると、文章表現とデザインの幅が大きく広がります。

【完全保存版】CSSで下線を引く方法まとめ｜text-decoration・borderの使い分けを初心者向けに解説