CSSでアンダーラインを自在にデザイン！基本からおしゃれな応用まで解説

CSS

Webサイトでリンクや見出しに**アンダーライン（下線）**をつけたいとき、CSSを使うととても簡単に実現できます。

でも「ただの線じゃ物足りない」「おしゃれにアニメーションをつけたい」「他のサイトで見たようなカッコいい下線を作りたい」という方も多いのではないでしょうか。

従来の単調な下線から一歩進んで、デザイン性の高いアンダーラインを作れるようになると、サイト全体の印象がぐっと洗練されます。

この記事では、

  • CSSでアンダーラインをつける基本
  • 色や太さを自由にカスタマイズする方法
  • hoverで動くおしゃれなアニメーション
  • 実際のWebサイトで使える実用的なパターン

まで、プログラミング初心者にもわかるように順を追って説明します。コピペで使えるコード例もたくさん用意しました！

スポンサーリンク
  1. まず理解しよう：アンダーラインの種類と使い分け
    1. CSS でアンダーラインを作る3つの方法
  2. 1. text-decoration を使った基本のアンダーライン
    1. 最もシンプルな書き方
    2. 下線の色と太さをカスタマイズ
    3. 下線のスタイルを変更
    4. text-decoration のメリット・デメリット
  3. 2. border-bottom でより柔軟なアンダーライン
    1. 基本的な border-bottom の使い方
    2. 文字と下線の間隔を調整
    3. 下線の長さを調整
    4. グラデーション下線
  4. 3. hover で動くアンダーラインアニメーション
    1. 左から右に伸びる下線
    2. 中央から外側に広がる下線
    3. フェードイン/フェードアウト下線
    4. 跳ねるアニメーション下線
  5. 4. 実用的なアンダーラインパターン集
    1. ナビゲーションメニュー用
    2. 見出し用のデザイン下線
    3. カード要素のタイトル用
    4. ボタン風リンク
  6. 5. よくある疑問と解決方法Q&A
    1. Q1. text-decoration と border-bottom の使い分けは？
    2. Q2. 下線の位置をもっと細かく調整したい
    3. Q3. 複数行のテキストでも下線を正しく表示したい
    4. Q4. 下線のアニメーションが滑らかに見えない
    5. Q5. モバイル環境での注意点は？
  7. 6. ブラウザ対応状況と注意点
    1. モダンブラウザでの対応状況
    2. 古いブラウザ対応
    3. パフォーマンスの考慮
  8. まとめ：アンダーラインをマスターしてデザイン力UP
    1. 基本パターンのおさらい
    2. 使い分けのコツ
    3. 実際の使用場面
    4. デザインのポイント

まず理解しよう：アンダーラインの種類と使い分け

CSS でアンダーラインを作る3つの方法

方法1：text-decoration

  • 文字に直接下線を引く
  • 最もシンプルで基本的な方法

方法2：border-bottom

  • 要素の下部に境界線を引く
  • より柔軟なカスタマイズが可能

方法3：疑似要素（::after）

  • 完全にカスタムなアンダーラインを作成
  • アニメーションや特殊効果に最適

それぞれにメリット・デメリットがあるので、目的に応じて使い分けることが重要です。

1. text-decoration を使った基本のアンダーライン

最もシンプルな書き方

説明： text-decoration: underline は、最も基本的なアンダーライン設定です。

基本のCSS：

a {
  text-decoration: underline;
}

HTML：

<a href="#" class="basic-underline">基本的なアンダーライン</a>

これだけで、リンクに標準的な下線がつきます。

下線の色と太さをカスタマイズ

説明： 最近のCSSでは、下線の色や太さを個別に指定できます。

CSS：

.custom-underline {
  text-decoration: underline;
  text-decoration-color: #3498db;
  text-decoration-thickness: 3px;
  color: #333;
}

/* 一行でまとめて書く方法 */
.compact-underline {
  text-decoration: underline #e74c3c 2px;
  color: #333;
}

HTML：

<h2 class="custom-underline">カスタムカラーの見出し</h2>
<p class="compact-underline">コンパクトな書き方</p>

下線のスタイルを変更

CSS：

/* 点線の下線 */
.dotted-underline {
  text-decoration: underline dotted #9b59b6 2px;
  color: #333;
}

/* 波線の下線 */
.wavy-underline {
  text-decoration: underline wavy #e67e22 2px;
  color: #333;
}

/* 二重線の下線 */
.double-underline {
  text-decoration: underline double #27ae60 3px;
  color: #333;
}

HTML：

<p class="dotted-underline">点線のアンダーライン</p>
<p class="wavy-underline">波線のアンダーライン</p>
<p class="double-underline">二重線のアンダーライン</p>

text-decoration のメリット・デメリット

メリット：

  • 書き方が簡単
  • 文字の長さに自動調整
  • ブラウザサポートが良い

デメリット：

  • 位置の微調整が困難
  • アニメーションが限定的
  • 複雑なデザインには不向き

2. border-bottom でより柔軟なアンダーライン

基本的な border-bottom の使い方

説明： border-bottom を使うと、文字ではなく要素自体に線を引けるため、より柔軟なデザインが可能です。

CSS：

.border-underline {
  border-bottom: 2px solid #333;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

HTML：

<a href="#" class="border-underline">border-bottomを使った下線</a>

文字と下線の間隔を調整

説明： padding-bottom を使って、文字と下線の距離を自由に調整できます。

CSS：

.spaced-underline {
  border-bottom: 2px solid #e74c3c;
  padding-bottom: 5px;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

.wide-spaced-underline {
  border-bottom: 1px solid #3498db;
  padding-bottom: 10px;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

HTML：

<h3 class="spaced-underline">適度な間隔の見出し</h3>
<h3 class="wide-spaced-underline">広い間隔の見出し</h3>

下線の長さを調整

説明： width プロパティを使って、下線の長さを文字の長さとは無関係に設定できます。

CSS：

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

.short-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 50%;
  height: 2px;
  background: #9b59b6;
}

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

.center-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 30px;
  height: 2px;
  background: #e67e22;
  transform: translateX(-50%);
}

HTML：

<h2 class="short-underline">文字の半分の長さの下線</h2>
<h2 class="center-underline">中央に固定長の下線</h2>

グラデーション下線

CSS：

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

.gradient-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3498db, #9b59b6, #e74c3c);
}

HTML：

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

3. hover で動くアンダーラインアニメーション

左から右に伸びる下線

説明： マウスをホバーしたときに、下線が左から右にスーッと伸びるアニメーションです。

CSS：

.slide-underline {
  position: relative;
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 3px;
}

.slide-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #3498db;
  transition: width 0.3s ease;
}

.slide-underline:hover::after {
  width: 100%;
}

HTML：

<a href="#" class="slide-underline">ホバーで下線が伸びる</a>

中央から外側に広がる下線

CSS：

.expand-underline {
  position: relative;
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 3px;
}

.expand-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #e74c3c;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.expand-underline:hover::after {
  width: 100%;
}

HTML：

<a href="#" class="expand-underline">中央から広がる下線</a>

フェードイン/フェードアウト下線

CSS：

.fade-underline {
  position: relative;
  color: #333;
  text-decoration: none;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.fade-underline:hover {
  border-bottom-color: #9b59b6;
}

/* より滑らかなフェード効果 */
.smooth-fade-underline {
  position: relative;
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 3px;
}

.smooth-fade-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #e67e22;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.smooth-fade-underline:hover::after {
  opacity: 1;
}

HTML：

<a href="#" class="fade-underline">シンプルフェード</a>
<a href="#" class="smooth-fade-underline">滑らかフェード</a>

跳ねるアニメーション下線

CSS：

.bounce-underline {
  position: relative;
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 5px;
}

.bounce-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #27ae60;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-underline:hover::after {
  width: 100%;
}

HTML：

<a href="#" class="bounce-underline">跳ねる下線</a>

4. 実用的なアンダーラインパターン集

ナビゲーションメニュー用

CSS：

.nav-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 30px;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  display: block;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #3498db;
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #3498db;
}

.nav-link:hover::after {
  width: 100%;
}

/* アクティブ状態 */
.nav-link.active::after {
  width: 100%;
}

HTML：

<ul class="nav-menu">
  <li class="nav-item">
    <a href="#" class="nav-link active">ホーム</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">サービス</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">会社概要</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">お問い合わせ</a>
  </li>
</ul>

見出し用のデザイン下線

CSS：

.section-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #3498db, #9b59b6);
}

/* 二重線バージョン */
.double-line-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.double-line-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
}

.double-line-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 50px;
  height: 2px;
  background: #e74c3c;
}

HTML：

<h2 class="section-title">セクション見出し</h2>
<h3 class="double-line-title">二重線の見出し</h3>

カード要素のタイトル用

CSS：

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #f39c12;
  transition: width 0.3s ease;
}

.card:hover .card-title::after {
  width: 100%;
}

HTML：

<div class="card">
  <h3 class="card-title">カードタイトル</h3>
  <p>カードの内容がここに入ります。ホバーするとタイトルに下線が表示されます。</p>
</div>

ボタン風リンク

CSS：

.button-link {
  display: inline-block;
  padding: 12px 24px;
  color: #3498db;
  text-decoration: none;
  border: 2px solid #3498db;
  border-radius: 4px;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.button-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #3498db;
  transition: height 0.3s ease;
  z-index: -1;
}

.button-link:hover {
  color: white;
}

.button-link:hover::before {
  height: 100%;
}

HTML：

<a href="#" class="button-link">詳細を見る</a>

5. よくある疑問と解決方法Q&A

Q1. text-decoration と border-bottom の使い分けは？

A1. 用途に応じて以下のように使い分けます：

text-decoration を使う場面：

  • シンプルな下線で十分
  • 文字の長さに合わせて自動調整したい
  • 設定が簡単で済ませたい

border-bottom を使う場面：

  • 下線と文字の間隔を調整したい
  • 下線の太さや色を細かく制御したい
  • アニメーションをつけたい

Q2. 下線の位置をもっと細かく調整したい

A2. 疑似要素を使うことで最も細かい制御が可能です：

.precise-underline {
  position: relative;
  text-decoration: none;
  color: #333;
}

.precise-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* この値で位置を調整 */
  width: 100%;
  height: 1px;
  background: #333;
}

Q3. 複数行のテキストでも下線を正しく表示したい

A3. text-decoration は複数行に対応していますが、より制御したい場合：

.multiline-underline {
  background-image: linear-gradient(transparent 90%, #3498db 90%);
  background-size: 100% 1.2em;
  background-repeat: repeat;
}

Q4. 下線のアニメーションが滑らかに見えない

A4. transition の設定を調整します：

/* より滑らかなアニメーション */
.smooth-animation::after {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 跳ねるような動き */
.bouncy-animation::after {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Q5. モバイル環境での注意点は？

A5. モバイルでは以下の点に注意が必要です：

/* タッチデバイス向けの調整 */
@media (max-width: 768px) {
  .mobile-friendly-underline {
    /* hover効果を無効化 */
    transition: none;
  }
  
  .mobile-friendly-underline::after {
    /* 初期状態で下線を表示 */
    width: 100%;
  }
}

/* タッチ可能なデバイスでのみhover効果 */
@media (hover: hover) {
  .hover-only::after {
    width: 0;
    transition: width 0.3s ease;
  }
  
  .hover-only:hover::after {
    width: 100%;
  }
}

6. ブラウザ対応状況と注意点

モダンブラウザでの対応状況

プロパティChromeFirefoxSafariEdge
text-decoration-color✅✅✅✅
text-decoration-thickness✅✅✅✅
text-decoration (shorthand)✅✅✅✅
疑似要素アニメーション✅✅✅✅

古いブラウザ対応

IE11での対応：

/* 古いブラウザ用のフォールバック */
.legacy-underline {
  text-decoration: underline; /* フォールバック */
  text-decoration: underline #3498db 2px; /* モダンブラウザ */
}

パフォーマンスの考慮

効率的なアニメーション：

/* GPU加速を利用 */
.optimized-animation::after {
  will-change: transform, opacity;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

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

まとめ：アンダーラインをマスターしてデザイン力UP

CSSでアンダーラインを自在にデザインできるようになると、Webサイトの表現力が大幅に向上します。

基本パターンのおさらい

シンプルな下線：

.simple {
  text-decoration: underline #3498db 2px;
}

カスタマイズ可能な下線：

.custom {
  border-bottom: 2px solid #e74c3c;
  padding-bottom: 3px;
}

アニメーション下線：

.animated::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #9b59b6;
  transition: width 0.3s ease;
}

.animated:hover::after {
  width: 100%;
}

使い分けのコツ

text-decoration： シンプルで十分な場合 border-bottom： 基本的なカスタマイズが必要な場合 疑似要素： 高度なデザインやアニメーションが必要な場合

実際の使用場面

  • ナビゲーションメニュー：ホバー効果で現在位置を示す
  • 見出し：セクションの区切りを明確にする
  • リンク：クリック可能であることを視覚的に示す
  • ボタン：インタラクティブな要素として

デザインのポイント

  1. サイト全体のトーンに合わせた色選び
  2. アニメーション時間は0.3s前後が自然
  3. モバイル環境での見やすさも考慮
  4. 過度な装飾は避け、機能性を重視

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました