CSSで下線の引き方：基本から応用まで徹底解説

Webサイトのデザインにおいて、下線は強調やリンクの視認性向上に役立つ重要な要素です。CSSには下線を引くためのいくつかの方法があり、デザインや用途に応じて適切な手法を選択することが重要です。

この記事では、CSSで下線を引くさまざまな方法を詳しく解説し、それぞれの特徴や使いどころを紹介します。

1. text-decoration を使った下線（基本的な方法）

最も基本的な下線の引き方は、text-decoration: underline; を使用する方法です。

.underline {
  text-decoration: underline;
}

<p class="underline">この文章には下線が引かれています。</p>

メリット:

• 最もシンプルで簡単に実装可能
• リンクの下線としてデフォルトで適用される

デメリット:

• 下線のデザイン（色・太さ・スタイル）を細かく調整しにくい
• 文字と下線の間隔を調整できない

2. border-bottom を使った下線（カスタマイズ性の高い方法）

border-bottom を使用すると、色・太さ・間隔を自由に調整できるため、よりデザイン性の高い下線が実現できます。

.border-underline {
  display: inline-block;
  border-bottom: 3px solid #ff6600;
}

<p class="border-underline">カスタマイズ可能な下線</p>

メリット:

• 下線の色・太さ・位置を細かく調整できる
• 文字と下線の間隔を適切に調整可能

デメリット:

• display: inline-block; を指定しないと動作しない場合がある

3. box-shadow を使った下線（影を活かした演出）

box-shadow を使うと、より柔らかい下線やぼかしを効かせたデザインが可能です。

.shadow-underline {
  display: inline;
  box-shadow: inset 0 -3px 0 rgba(255, 102, 0, 0.5);
}

<p class="shadow-underline">影付きの下線</p>

メリット:

• ぼかしや透過効果をつけた柔らかいデザインが可能

デメリット:

• 一部のブラウザで細かい調整が必要

4. background-image を使った下線（グラデーションや波線）

background-image を使うと、波線やグラデーションの下線を作ることができます。

.gradient-underline {
  background-image: linear-gradient(transparent 50%, #ff6600 50%);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

<p class="gradient-underline">グラデーション下線</p>

メリット:

• グラデーションやカラフルな下線を作れる
• border-bottom よりもデザインの自由度が高い

デメリット:

• 複雑なデザインにはSVGやclip-pathが必要

5. text-decoration-thickness で太さを調整（モダンな方法）

最近のブラウザでは、text-decoration-thickness を使うことで、text-decoration の下線の太さを変更できます。

.thick-underline {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #ff6600;
}

<p class="thick-underline">太い下線</p>

メリット:

• text-decoration を使いながら太さ・色を調整可能

デメリット:

• 古いブラウザ（IE など）では未対応

まとめ：用途別おすすめの下線スタイル

下線のデザインは、サイトの雰囲気や用途に合わせて最適な方法を選ぶことが重要です。特に、最近のモダンブラウザでは text-decoration-thickness が使えるので、これを活用すると簡単にカスタマイズできます。