【HTML】下線を引く・消す方法：テキスト・リンク・テーブルにおけるCSS装飾

2026年4月2日

Webデザインにおいて「下線」はテキストの強調やリンクを示す重要な役割を持ちますが、実装方法を誤るとユーザーの利便性を損なう原因にもなります。

本記事では、HTML/CSSを使った下線の引き方、おしゃれなマーカー風デザイン、「消えない・表示されない」トラブルの解決策を解説します。

HTMLでテキスト（文字）に下線を引く方法

Webサイトの文章を書いていると、「ここは重要だから強調したい」「見出しのデザインとして文字に下線を引きたい」という場面が出てきます。

HTMLでテキスト（文字）に下線を引くには、大きく分けて2つのアプローチが存在します。

HTMLのタグを直接使う方法とCSSを使って装飾する方法です。

ここでは、HTMLに下線をつけるだけでなく、ユーザーにとって分かりやすい下線部のデザイン、実務で避けるべき「リンクと間違えられる問題」について解説します。

テキスト（文字）に下線を引く方法

uタグを使って下線を引く
CSS（text-decoration）を使って下線を引く

uタグを使って下線を引く

HTMLの機能だけで下線を引く方法は、タグを使用することです。

「u」は「Underline」の頭文字です。

「強調したいから」という理由でタグを多用すると、WebサイトのUXを悪化させます。

なぜなら、「青や黒の文字に引かれた下線」は、ユーザーが「クリックできるリンク（<a>タグ）」だと認識するからです。

リンクだと思って何度もクリックしたのに何も起きないと、ユーザーはストレスを感じるため、意味のない下線は多用を避けましょう。

❌ 悪い例（装飾目的のuタグ）

ここは普通の文章ですが、この部分はuタグで下線が引かれています。

…この部分はuタグで下線…

※文法上、単なる強調やデザインのためにuタグを使うのは非推奨です。

❌ 最悪の例（リンクと誤認させる）

詳細は、こちらの公式ドキュメントをご確認ください。

こちらの公式ドキュメント

※クリックできない下線にこのデザイン（青＋下線）を使うのは実務では御法度です。

⭕️ 良い例（用途に合った正しいタグを使う）

別ページへ飛ばすならaタグでリンクを作り、文章を強調したいならstrongタグで太字にするのが正しいHTMLの書き方です。

<!– リンクにしたい場合 –>
<a href=”URL”>aタグでリンク</a>

<!– 強調したい場合 –>
strongタグで太字

※ブラウザや検索エンジンに対して「これはリンクだ」「これは重要だ」と正しく意味を伝えることができます。

HTMLコード表示

<div class="hul1-wrapper">
  
  <div class="hul1-demo-area">
    
    <div class="hul1-box">
      <div class="hul1-label" style="color:#dc3545;">❌ 悪い例（装飾目的のuタグ）</div>
      
      <p class="hul1-text">
        ここは普通の文章ですが、<u>この部分はuタグで下線</u>が引かれています。
      </p>

      <div class="hul1-code hul1-code-bad">
        <p>...<span class="hul1-hl-red"><u></span>この部分はuタグで下線<span class="hul1-hl-red"></u></span>...</p>
      </div>
      <p class="hul1-note">※文法上、単なる強調やデザインのためにuタグを使うのは非推奨です。</p>
    </div>

    <div class="hul1-box">
      <div class="hul1-label" style="color:#dc3545;">❌ 最悪の例（リンクと誤認させる）</div>
      
      <p class="hul1-text">
        詳細は、<u style="color: #0d6efd; cursor: pointer;">こちらの公式ドキュメント</u>をご確認ください。
      </p>

      <div class="hul1-code hul1-code-bad">
        <u style="color: blue;">こちらの公式ドキュメント</u>
      </div>
      <p class="hul1-note" style="color:#842029; font-weight:bold;">※クリックできない下線にこのデザイン（青＋下線）を使うのは実務では御法度です。</p>
    </div>

    <div class="hul1-box">
      <div class="hul1-label" style="color:#198754;">⭕️ 良い例（用途に合った正しいタグを使う）</div>
      
      <p class="hul1-text">
        別ページへ飛ばすなら<a href="#" style="color: #0d6efd;">aタグでリンク</a>を作り、文章を強調したいなら<strong>strongタグで太字</strong>にするのが正しいHTMLの書き方です。
      </p>

      <div class="hul1-code hul1-code-good">
        <!-- リンクにしたい場合 --><br>
        <span class="hul1-hl-green"><a href="URL"></span>aタグでリンク<span class="hul1-hl-green"></a></span><br><br>
        <!-- 強調したい場合 --><br>
        <span class="hul1-hl-green"><strong></span>strongタグで太字<span class="hul1-hl-green"></strong></span>
      </div>
      <p class="hul1-note" style="color:#198754;">※ブラウザや検索エンジンに対して「これはリンクだ」「これは重要だ」と正しく意味を伝えることができます。</p>
    </div>

  </div>
</div>

CSSコード表示

.hul1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hul1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}
.hul1-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 15px 0;
}
.hul1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hul1-code-bad { border-left: 4px solid #dc3545; }
.hul1-code-good { border-left: 4px solid #198754; }
.hul1-hl-red { color: #e06c75; font-weight: bold; }
.hul1-hl-green { color: #98c379; font-weight: bold; }
.hul1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

CSS（text-decoration）を使って下線を引く

デザインや強調の目的で下線を引く場合、CSSのtext-decorationプロパティを使用することです。

文章の一部だけ適用したい場合は、意味を持たないインライン要素であるタグで文字を囲み、CSSのクラスを当てて装飾します。

下線の色を変えるtext-decoration-colorや下線の太さを変えるtext-decoration-thickness、文字と下線の隙間を調整するtext-underline-offsetといったプロパティもあります。

⭕️ 基本（text-decoration）

ここから、CSSで下線を引いた部分です。文字に線が被っています。

.basic {
text-decoration: underline;
}

✨ おしゃれな装飾（距離・色・太さを調整）

ここから、CSSで調整した美しい下線です。非常に読みやすくなります。

.pro {
  text-decoration: underline;
  text-decoration-color: #d63384; /* ピンク色 */
  text-decoration-thickness: 3px; /* 太め */
  text-underline-offset: 4px; /* 文字から離す */
}

HTMLコード表示

<div class="hul2-wrapper">
  
  <div class="hul2-demo-area">
    
    <div class="hul2-box">
      <div class="hul2-label" style="color:#0d6efd;">⭕️ 基本（text-decoration）</div>
      
      <p class="hul2-text">
        ここから、<span class="hul2-underline-basic">CSSで下線を引いた部分</span>です。文字に線が被っています。
      </p>

      <div class="hul2-code">
        .basic {<br>
          <span class="hul2-hl-blue">text-decoration: underline;</span><br>
        }
      </div>
    </div>

    <div class="hul2-box">
      <div class="hul2-label" style="color:#198754;">✨ おしゃれな装飾（距離・色・太さを調整）</div>
      
      <p class="hul2-text">
        ここから、<span class="hul2-underline-pro">CSSで調整した美しい下線</span>です。非常に読みやすくなります。
      </p>

      <div class="hul2-code" style="border-left-color:#198754;">
        .pro {<br>
          <span class="hul2-hl-green">text-decoration: underline;</span><br>
          <span class="hul2-hl-green">text-decoration-color: #d63384;</span> /* ピンク色 */<br>
          <span class="hul2-hl-green">text-decoration-thickness: 3px;</span> /* 太め */<br>
          <span class="hul2-hl-green">text-underline-offset: 4px;</span> /* 文字から離す */<br>
        }
      </div>
    </div>

  </div>
</div>

CSSコード表示

.hul2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hul2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}
.hul2-text {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin: 0 0 15px 0;
}

/* 基本のtext-decoration */
.hul2-underline-basic {
  text-decoration: underline;
}

/* ★美しい下線（文字との距離や太さを調整） */
.hul2-underline-pro {
  text-decoration: underline;
  text-decoration-color: #d63384; /* 下線の色だけを変える */
  text-decoration-thickness: 3px; /* 線の太さ */
  text-underline-offset: 4px;     /* 文字と線の隙間を開ける */
  font-weight: bold; /* 強調のために太字にする */
}

.hul2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hul2-hl-blue { color: #61afef; font-weight: bold; }
.hul2-hl-green { color: #98c379; font-weight: bold; }

リンク（aタグ）の下線を消す・つける方法

HTMLで<a>タグを使ってリンクを作成すると、ブラウザの標準仕様として「青い文字色」と「下線」が付与されます。

しかし、Webデザインにおいてナビゲーションメニューやボタンなど、全てのリンクに下線がついているとデザイン性が損なわれることがあります。

ここでは、CSSを使ってリンクの下線を消す方法と意図したタイミングで下線をつける方法を解説します。

リンクの下線を消す・つける方法

デフォルトの青い下線をCSSで消す
テキストにリンク用の下線をつける

リンクタグ（aタグ）の使い方について詳しく知りたい人は「【html&css】aタグ（リンク）の使い方とWebデザインによる装飾」を一読ください。

【html&css】リンクタグの使い方とWebデザインによる装飾

デフォルトの青い下線をCSSで消す

リンク特有のデフォルト下線を消すには、text-decorationプロパティを使用し、値をnoneに設定します。

下線を消していいのは、「グローバルナビゲーション（ヘッダーメニュー）」「サイドバーのリスト」「ボタン風のデザイン」など、配置や形から『明らかにクリックできることが分かる要素』だけです。

文章中にあるリンクの下線は消してはいけません。

⭕️ 良い例（メニューの下線を消す）

.menu-link {
  /* メニューなので下線を消してスッキリさせる */
  text-decoration: none;
  color: #333;
}

❌ 悪い例（文章中のリンクの下線を消す）

当社の詳細な沿革につきましては、こちらの会社概要ページをご覧ください。また、採用情報も随時更新しております。

a {
  /* どこがリンクか分からなくなる最悪の指定 */
  text-decoration: none;
  color: #333; /* 色まで黒にすると完全に同化する */
}

※上の文章には2つのリンクが隠れていますが、下線も色もないためマウスを乗せないと分かりません。これは最悪のユーザー体験です。

HTMLコード表示

<div class="ha1-wrapper">
  
  <div class="ha1-demo-area">
    
    <div class="ha1-box">
      <div class="ha1-label" style="color:#198754;">⭕️ 良い例（メニューの下線を消す）</div>
      
      <ul class="ha1-menu">
        <li><a href="#" class="ha1-link-none">ホーム</a></li>
        <li><a href="#" class="ha1-link-none">サービス</a></li>
        <li><a href="#" class="ha1-link-none">お問い合わせ</a></li>
      </ul>

      <div class="ha1-code ha1-code-good">
        .menu-link {<br>
          /* メニューなので下線を消してスッキリさせる */<br>
          <span class="ha1-hl-green">text-decoration: none;</span><br>
          color: #333;<br>
        }
      </div>
    </div>

    <div class="ha1-box">
      <div class="ha1-label" style="color:#dc3545;">❌ 悪い例（文章中のリンクの下線を消す）</div>
      
      <p class="ha1-text">
        当社の詳細な沿革につきましては、こちらの会社概要ページをご覧ください。また、採用情報も随時更新しております。
      </p>

      <div class="ha1-code ha1-code-bad">
        a {<br>
          /* どこがリンクか分からなくなる最悪の指定 */<br>
          <span class="ha1-hl-red">text-decoration: none;</span><br>
          color: #333; <span class="ha1-hl-note">/* 色まで黒にすると完全に同化する */</span><br>
        }
      </div>
      <p class="ha1-note">※上の文章には2つのリンクが隠れていますが、下線も色もないためマウスを乗せないと分かりません。これは最悪のユーザー体験です。</p>
    </div>

  </div>
</div>

CSSコード表示

.ha1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.ha1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.ha1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.ha1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* ⭕️ 良い例：メニューの装飾 */
.ha1-menu {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  background-color: #e9ecef;
  padding: 10px;
  border-radius: 4px;
}
.ha1-link-none {
  /* ここで下線を消す */
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.ha1-link-none:hover { color: #0d6efd; }

/* ❌ 悪い例：文章中の同化リンク */
.ha1-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 15px 0;
}
.ha1-text a {
  /* 文章中なのに下線を消し、色も黒にするという最悪の設定 */
  text-decoration: none;
  color: #333;
}

.ha1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.ha1-code-bad { border-left: 4px solid #dc3545; }
.ha1-code-good { border-left: 4px solid #198754; }

.ha1-hl-red { color: #e06c75; font-weight: bold; }
.ha1-hl-green { color: #98c379; font-weight: bold; }
.ha1-hl-note { color: #5c6370; font-style: italic; }

.ha1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

テキストにリンク用の下線をつける

下線を消すだけでなく、特定の状態になった時にリンクであることを強調するため、意図的に下線をつけるのも重要です。

よく使われるのが「マウスを乗せた時（ホバー時）にだけ下線を出す」という手法で、:hover疑似クラスを使用します。

PC向けには:hoverで下線を出したり消したりするのも良いですが、スマートフォン向けの表示では、文章中のリンクには最初からtext-decoration: underline;で下線を出したままにしておくのがよいです。

🖱️ マウスホバーで下線をつける（PC向け）

こちらのホバー用リンクにマウスを乗せてみてください。

/* 普段は下線を消しておく */
a { text-decoration: none; }

/* マウスが乗った時だけ下線を出す */
a:hover {
text-decoration: underline;
}

📱 最初から下線をつける（スマホ向け推奨）

スマホではマウスを乗せられないため、このように最初から下線を引いておくのが親切な設計です。

/* 文章中のリンクは下線を出しておく */
.article a {
  color: #0d6efd;
  text-decoration: underline;
  text-underline-offset: 3px; /* 少し離すとおしゃれ */
}

※スマホ対応（レスポンシブデザイン）において、「ホバーしないとリンクだと分からない」UIは避けるべきです。

HTMLコード表示

<div class="ha2-wrapper">
  
  <div class="ha2-demo-area">
    
    <div class="ha2-box">
      <div class="ha2-label" style="color:#0d6efd;">🖱️ マウスホバーで下線をつける（PC向け）</div>
      
      <p class="ha2-text">
        こちらの <a href="#" class="ha2-link-hover">ホバー用リンク</a> にマウスを乗せてみてください。
      </p>

      <div class="ha2-code">
        /* 普段は下線を消しておく */<br>
        a { text-decoration: none; }<br><br>
        /* マウスが乗った時だけ下線を出す */<br>
        a<span class="ha2-hl-blue">:hover</span> {<br>
          <span class="ha2-hl-blue">text-decoration: underline;</span><br>
        }
      </div>
    </div>

    <div class="ha2-box">
      <div class="ha2-label" style="color:#d63384;">📱 最初から下線をつける（スマホ向け推奨）</div>
      
      <p class="ha2-text">
        スマホではマウスを乗せられないため、 <a href="#" class="ha2-link-always">このように最初から下線を引いておく</a> のが親切な設計です。
      </p>

      <div class="ha2-code" style="border-left-color:#d63384;">
        /* 文章中のリンクは下線を出しておく */<br>
        .article a {<br>
          color: #0d6efd;<br>
          <span class="ha2-hl-pink">text-decoration: underline;</span><br>
          text-underline-offset: 3px; /* 少し離すとおしゃれ */<br>
        }
      </div>
      <p class="ha2-note">※スマホ対応（レスポンシブデザイン）において、「ホバーしないとリンクだと分からない」UIは避けるべきです。</p>
    </div>

  </div>
</div>

CSSコード表示

.ha2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.ha2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.ha2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.ha2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}
.ha2-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

/* 🖱️ ホバー時に下線 */
.ha2-link-hover {
  color: #0d6efd;
  font-weight: bold;
  text-decoration: none; /* 普段は消す */
  transition: all 0.2s ease; /* フワッと変化させるおまけ */
}
.ha2-link-hover:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 📱 常時下線（スマホ向け） */
.ha2-link-always {
  color: #0d6efd;
  font-weight: bold;
  text-decoration: underline; /* 常に引いておく */
  text-underline-offset: 3px; /* 少し離して読みやすく */
}

.ha2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.ha2-hl-blue { color: #61afef; font-weight: bold; }
.ha2-hl-pink { color: #c678dd; font-weight: bold; }

.ha2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

CSSでおしゃれな下線にデザイン・装飾する

Webデザインにおいて、テキストの強調や見出しの装飾として「下線」は便利です。

ここでは、標準のtext-decorationプロパティの応用、実務で多用されるborder-bottomやbackground（背景色）を使った方法を解説します。

CSSでおしゃれな下線にデザイン・装飾する

下線の種類を変える（点線・波線・二重線）
下線の色や太さを変える
蛍光ペン風（マーカー）の下線を引く
下線の長さや文字との隙間を調整する

文字装飾のまとめを確認したい人は「【html&css】文字装飾に関するWebデザインまとめ」を一読ください。

【html&css】文字装飾に関するWebデザインまとめ

下線の種類を変える（点線・波線・二重線）

一本の直線ではなく、点線や波線、二重下線といった種類に変更したい場合は、CSSのtext-decoration-styleプロパティを使用するか、border-bottom（下枠線）を使用します。

〰️ 波線（text-decoration）

ここが波線で装飾されたテキストです。

.wavy {
text-decoration: underline wavy #d63384;
}

⋯ 点線・二重線（border-bottom）

ここは点線で装飾されています。

ここは二重下線が引かれたテキストです。

/* 点線（文字から少し離す） */
.dotted {
  text-decoration: none;
  border-bottom: 2px dotted #0d6efd;
  padding-bottom: 2px;
}
/* 二重線 */
.double {
  border-bottom: 4px double #198754;
}

HTMLコード表示

<div class="hul-design1-wrapper">
  
  <div class="hul-design1-demo-area">
    
    <div class="hul-design1-box">
      <div class="hul-design1-label">〰️ 波線（text-decoration）</div>
      <p class="hul-design1-text">
        ここが<span class="hul-design1-wavy">波線で装飾された</span>テキストです。
      </p>
      <div class="hul-design1-code">
        .wavy {<br>
          text-decoration: underline <span class="hul-design1-hl">wavy</span> #d63384;<br>
        }
      </div>
    </div>

    <div class="hul-design1-box">
      <div class="hul-design1-label">⋯ 点線・二重線（border-bottom）</div>
      <p class="hul-design1-text">
        ここは<span class="hul-design1-dotted">点線で装飾</span>されています。<br><br>
        ここは<span class="hul-design1-double">二重下線が引かれた</span>テキストです。
      </p>
      <div class="hul-design1-code">
        /* 点線（文字から少し離す） */<br>
        .dotted {<br>
          text-decoration: none;<br>
          <span class="hul-design1-hl">border-bottom: 2px dotted #0d6efd;</span><br>
          padding-bottom: 2px;<br>
        }<br>
        /* 二重線 */<br>
        .double {<br>
          <span class="hul-design1-hl">border-bottom: 4px double #198754;</span><br>
        }
      </div>
    </div>

  </div>
</div>

CSSコード表示

.hul-design1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-design1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hul-design1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-design1-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
.hul-design1-text {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
  line-height: 1.8;
}

/* 装飾のスタイル */
.hul-design1-wavy {
  text-decoration: underline wavy #d63384;
  text-underline-offset: 3px;
  font-weight: bold;
}
.hul-design1-dotted {
  text-decoration: none;
  border-bottom: 2px dotted #0d6efd;
  padding-bottom: 2px;
  font-weight: bold;
}
.hul-design1-double {
  text-decoration: none;
  border-bottom: 4px double #198754;
  padding-bottom: 1px;
  font-weight: bold;
}

.hul-design1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hul-design1-hl { color: #e5c07b; font-weight: bold; }

下線の色や太さを変える

文字色とは別の色で下線を引いたり、線を太くして目立たせたりするにはCSSプロパティであるtext-decoration-colorやtext-decoration-thicknessを使用します。

文字を太字にして下線を引くことで、より力強い強調が可能です。

🎨 色と太さの変更（太字下線）

重要なポイントは太字にして赤い太線で強調します。

.bold-line {
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #dc3545;
  text-decoration-thickness: 4px;
}

🔗 リンクの下線色だけを別にする

こちらのおしゃれなリンクをご覧ください。

.link {
  color: #0d6efd; /* 文字は青 */
  text-decoration: underline;
  text-decoration-color: #adb5bd; /* 下線はグレー */
  text-underline-offset: 4px;
}

HTMLコード表示

<div class="hul-design2-wrapper">
  
  <div class="hul-design2-demo-area">
    
    <div class="hul-design2-box">
      <div class="hul-design2-label">🎨 色と太さの変更（太字下線）</div>
      <p class="hul-design2-text">
        重要なポイントは<strong class="hul-design2-bold-line">太字にして赤い太線</strong>で強調します。
      </p>
      <div class="hul-design2-code">
        .bold-line {<br>
          font-weight: bold;<br>
          text-decoration: underline;<br>
          <span class="hul-design2-hl">text-decoration-color: #dc3545;</span><br>
          <span class="hul-design2-hl">text-decoration-thickness: 4px;</span><br>
        }
      </div>
    </div>

    <div class="hul-design2-box">
      <div class="hul-design2-label">🔗 リンクの下線色だけを別にする</div>
      <p class="hul-design2-text">
        こちらの<a href="#" class="hul-design2-link">おしゃれなリンク</a>をご覧ください。
      </p>
      <div class="hul-design2-code">
        .link {<br>
          color: #0d6efd; /* 文字は青 */<br>
          text-decoration: underline;<br>
          <span class="hul-design2-hl">text-decoration-color: #adb5bd;</span> /* 下線はグレー */<br>
          text-underline-offset: 4px;<br>
        }
      </div>
    </div>

  </div>
</div>

CSSコード表示

.hul-design2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-design2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hul-design2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-design2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }
.hul-design2-text { font-size: 16px; color: #333; margin: 0 0 15px 0; }

.hul-design2-bold-line {
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #dc3545;
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}
.hul-design2-link {
  color: #0d6efd;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #adb5bd;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.hul-design2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hul-design2-hl { color: #98c379; font-weight: bold; }

蛍光ペン風（マーカー）の下線を引く

蛍光ペンで線を引いたような装飾は、ブログ記事などで読者の視線を集めるのに効果があります。

これを実現するには、text-decorationではなく、linear-gradien（線形グラデーション）を使った背景色（background）のハックを使用します。

🖍️ 蛍光ペン風（マーカー）の下線

ここは黄色のマーカーです。

ここは細めのピンクマーカーです。

/* 太めの黄色マーカー（下半分を塗る） */
.marker-yellow {
background: linear-gradient(transparent 50%, #ffff66 50%);
}

/* 細めのピンクマーカー（下30%だけ塗る） */
.marker-pink {
background: linear-gradient(transparent 70%, #ffc0cb 70%);
}

※transparent（透明）の割合を変えることで、マーカーの太さを自由自在にコントロールできます。

HTMLコード表示

<div class="hul-design3-wrapper">
  
  <div class="hul-design3-demo-area">
    
    <div class="hul-design3-box">
      <div class="hul-design3-label">🖍️ 蛍光ペン風（マーカー）の下線</div>
      <p class="hul-design3-text">
        ここは<span class="hul-design3-marker-yellow">黄色のマーカー</span>です。<br><br>
        ここは<span class="hul-design3-marker-pink">細めのピンクマーカー</span>です。
      </p>

      <div class="hul-design3-code">
        /* 太めの黄色マーカー（下半分を塗る） */<br>
        .marker-yellow {<br>
          background: <span class="hul-design3-hl-yellow">linear-gradient(transparent 50%, #ffff66 50%)</span>;<br>
        }<br><br>
        /* 細めのピンクマーカー（下30%だけ塗る） */<br>
        .marker-pink {<br>
          background: <span class="hul-design3-hl-pink">linear-gradient(transparent 70%, #ffc0cb 70%)</span>;<br>
        }
      </div>
      <p class="hul-design3-note">※transparent（透明）の割合を変えることで、マーカーの太さを自由自在にコントロールできます。</p>
    </div>

  </div>
</div>

CSSコード表示

.hul-design3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-design3-demo-area {
  display: flex;
  justify-content: center;
}
.hul-design3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-design3-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; }
.hul-design3-text { font-size: 16px; color: #333; line-height: 1.8; margin: 0 0 20px 0; font-weight: bold; }

/* 魔法のマーカーCSS */
.hul-design3-marker-yellow {
  background: linear-gradient(transparent 50%, #ffff66 50%);
}
.hul-design3-marker-pink {
  background: linear-gradient(transparent 70%, #ffb6c1 70%);
}

.hul-design3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hul-design3-hl-yellow { color: #e5c07b; font-weight: bold; }
.hul-design3-hl-pink { color: #c678dd; font-weight: bold; }
.hul-design3-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

下線の長さや文字との隙間を調整する

デザインの要件によっては、「見出しの下に、文字の幅よりも少し短いおしゃれなアクセント線を引いてほしい」といった下線の長さを調整する指示が出ることがあります。

下線の長さを操りたい場合は、疑似要素（::after）を使って、文字の下に「独立した線のブロック」を描画して配置する方法を使用します。

📏 長さを自由に調整したアクセント下線

COMPANY PROFILE

会社概要

/* 見出し本体（基準位置にする） */
h3 {
  position: relative;
  text-align: center;
  padding-bottom: 15px;
}

/* 疑似要素で線を自作する */
h3::after {
  content: “”;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* ど真ん中に配置 */
  width: 40px; /* ここで長さを決める！ */
  height: 3px; /* ここで太さを決める！ */
  background-color: #0d6efd;
}

HTMLコード表示

<div class="hul-design4-wrapper">
  
  <div class="hul-design4-demo-area">
    
    <div class="hul-design4-box">
      <div class="hul-design4-label">📏 長さを自由に調整したアクセント下線</div>
      
      <div class="hul-design4-heading">COMPANY PROFILE</div>
      <p style="text-align: center; color: #666; font-size: 14px;">会社概要</p>

      <div class="hul-design4-code">
        /* 見出し本体（基準位置にする） */<br>
        h3 {<br>
          position: relative;<br>
          text-align: center;<br>
          padding-bottom: 15px;<br>
        }<br><br>
        /* 疑似要素で線を自作する */<br>
        h3<span class="hul-design4-hl-blue">::after</span> {<br>
          content: "";<br>
          position: absolute;<br>
          bottom: 0;<br>
          left: 50%;<br>
          transform: translateX(-50%); /* ど真ん中に配置 */<br>
          <span class="hul-design4-hl-green">width: 40px; /* ここで長さを決める！ */</span><br>
          <span class="hul-design4-hl-green">height: 3px;  /* ここで太さを決める！ */</span><br>
          background-color: #0d6efd;<br>
        }
      </div>
    </div>

  </div>
</div>

CSSコード表示

.hul-design4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-design4-demo-area {
  display: flex;
  justify-content: center;
}
.hul-design4-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-design4-label { font-size: 14px; font-weight: bold; margin-bottom: 25px; color: #333; }

/* ★プロが使う疑似要素によるアクセントライン */
.hul-design4-heading {
  position: relative;
  text-align: center;
  font-size: 24px;
  color: #333;
  margin: 0 0 10px 0;
  padding-bottom: 15px; /* 線を引くための隙間を作る */
  letter-spacing: 2px;
}
.hul-design4-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せの魔法 */
  width: 40px; /* 線の長さをピクセル等で指定可能 */
  height: 4px; /* 線の太さ */
  background-color: #0d6efd;
  border-radius: 2px; /* 線の端を少し丸くするおもてなし */
}

.hul-design4-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hul-design4-hl-blue { color: #61afef; font-weight: bold; }
.hul-design4-hl-green { color: #98c379; font-weight: bold; }

下線が消えない・表示されない：原因と解決策

「CSSを書いたはずなのに下線が消えない。」「指定した通りに下線が表示されない。」というのは、HTML/CSSを学び始めた際に直面します。

コードの書き間違いよりも、CSSの「適用ルールの優先順位」や「親から子への継承」という基本的な仕様を勘違いしていることがほとんどです。

ここでは、実務の現場でも起こる下線トラブルの原因と解決策を解説します。

下線が消えない・表示されない：原因と解決策

リンクの下線が消えない
指定した下線が表示されない原因

リンクの下線が消えない

「リンクの下線を消そうと思ってCSSを書いたのに、青い線が消えない」と悩む場合、原因はほぼ100%「親要素にCSSをかけて満足してる」という初歩的なミスです。

リンクの下線を消すには、親要素ではなく、<a>タグそのものを直接指名してCSSを効かせる必要があります。

どうしても消えない場合は、WordPressテーマの干渉によって強いCSSが邪魔をしてる可能性があるため、一時的に!importantをつけて優先度を高めるのもよいです。

❌ 悪い例（親のdivに指定）

親にnoneを指定しても、このリンクの下線は消えません。

.bad-box {
text-decoration: none;
}
/* リンク自身を狙っていないので無視される！ */

⭕️ 良い例（aタグを直接指定）

aタグを直接狙い撃ちすれば、このリンクの下線は綺麗に消えます。

.good-box a {
text-decoration: none;
}
/* aタグを直接指定するのが絶対のルール */

HTMLコード表示

<div class="hul-trouble1-wrapper">
  
  <div class="hul-trouble1-demo-area">
    
    <div class="hul-trouble1-box hul-trouble1-bad-box">
      <div class="hul-trouble1-label" style="color:#dc3545;">❌ 悪い例（親のdivに指定）</div>
      
      <p>親にnoneを指定しても、<a href="#" class="hul-trouble1-link-default">このリンクの下線</a>は消えません。</p>

      <div class="hul-trouble1-code hul-trouble1-code-bad">
        .bad-box {<br>
          <span class="hul-trouble1-hl-red">text-decoration: none;</span><br>
        }<br>
        /* リンク自身を狙っていないので無視される！ */
      </div>
    </div>

    <div class="hul-trouble1-box hul-trouble1-good-box">
      <div class="hul-trouble1-label" style="color:#198754;">⭕️ 良い例（aタグを直接指定）</div>
      
      <p>aタグを直接狙い撃ちすれば、<a href="#" class="hul-trouble1-link-good">このリンクの下線</a>は綺麗に消えます。</p>

      <div class="hul-trouble1-code hul-trouble1-code-good">
        .good-box <span class="hul-trouble1-hl-green">a</span> {<br>
          <span class="hul-trouble1-hl-green">text-decoration: none;</span><br>
        }<br>
        /* aタグを直接指定するのが絶対のルール */
      </div>
    </div>

  </div>
</div>

CSSコード表示

.hul-trouble1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-trouble1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hul-trouble1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-trouble1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hul-trouble1-link-default {
  text-decoration: underline !important;
  color: #0d6efd !important;
}

/* ❌ 悪い例：親要素に指定している */
.hul-trouble1-bad-box {
  /* 親で消そうとしても、子（aタグ）が持っているunderlineは消せない */
  text-decoration: none !important;
}

/* ⭕️ 良い例：中のaタグを直接指定する */
.hul-trouble1-link-good {
  /* 直接指定することで初めて消すことができる */
  text-decoration: none !important;
  font-weight: bold;
  color: #0d6efd !important;
}

.hul-trouble1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
}
.hul-trouble1-code-bad { border-left: 4px solid #dc3545; }
.hul-trouble1-code-good { border-left: 4px solid #198754; }
.hul-trouble1-hl-red { color: #e06c75; font-weight: bold; }
.hul-trouble1-hl-green { color: #98c379; font-weight: bold; }

指定した下線が表示されない原因

逆に「下線を引くCSSを書いたのに表示されない。」というトラブルも発生します。

これは、「そもそも下線を引く（text-decoration: underline;）」という重要の命令が抜けているためです。

色や太さをいくら細かく指定しても、大元となる「下線を引く」という指示がなければ、ブラウザは「線を引かないなら、色の指定も無視しよう」と判断してます。

装飾用のプロパティを書く時は、セットで一番上にtext-decoration: underline;を記述しているか確認するとよいです。

❌ 悪い例（大元の命令を忘れている）

一生懸命色と太さを指定したのに、ここには下線が表示されません。

.bad-line {
  /* そもそも線を引く命令がない！ */
  text-decoration-color: #0d6efd;
  text-decoration-thickness: 3px;
}

⭕️ 良い例（すべて正しく指定）

基本の命令を足すことで、見事に下線が表示されました。

.good-line {
  text-decoration: underline; /* 必須！ */
  text-decoration-color: #0d6efd;
  text-decoration-thickness: 3px;
}

HTMLコード表示

<div class="hul-trouble2-wrapper">
  
  <div class="hul-trouble2-demo-area">
    
    <div class="hul-trouble2-box">
      <div class="hul-trouble2-label" style="color:#dc3545;">❌ 悪い例（大元の命令を忘れている）</div>
      
      <p class="hul-trouble2-text">
        一生懸命色と太さを指定したのに、<span class="hul-trouble2-bad-line">ここには下線が表示されません。</span>
      </p>

      <div class="hul-trouble2-code hul-trouble2-code-bad">
        .bad-line {<br>
          <span class="hul-trouble2-hl-note">/* そもそも線を引く命令がない！ */</span><br>
          text-decoration-color: #0d6efd;<br>
          text-decoration-thickness: 3px;<br>
        }
      </div>
    </div>

    <div class="hul-trouble2-box">
      <div class="hul-trouble2-label" style="color:#198754;">⭕️ 良い例（すべて正しく指定）</div>
      
      <p class="hul-trouble2-text">
        基本の命令を足すことで、<span class="hul-trouble2-good-line">見事に下線が表示されました。</span>
      </p>

      <div class="hul-trouble2-code hul-trouble2-code-good">
        .good-line {<br>
          <span class="hul-trouble2-hl-green">text-decoration: underline; /* 必須！ */</span><br>
          text-decoration-color: #0d6efd;<br>
          text-decoration-thickness: 3px;<br>
        }
      </div>
    </div>

  </div>
</div>

CSSコード表示

.hul-trouble2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-trouble2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hul-trouble2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-trouble2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }
.hul-trouble2-text { font-size: 15px; color: #333; line-height: 1.6; }

/* ❌ 悪い例：underline忘れ */
.hul-trouble2-bad-line {
  /* colorとthicknessを指定しても、大元のunderlineがないと表示されない */
  text-decoration-color: #0d6efd;
  text-decoration-thickness: 3px;
  font-weight: bold;
}

/* ⭕️ 良い例：完璧な指定 */
.hul-trouble2-good-line {
  text-decoration: underline; /* これが必要 */
  text-decoration-color: #0d6efd;
  text-decoration-thickness: 3px;
  font-weight: bold;
}

.hul-trouble2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
}
.hul-trouble2-code-bad { border-left: 4px solid #dc3545; }
.hul-trouble2-code-good { border-left: 4px solid #198754; }
.hul-trouble2-hl-green { color: #98c379; font-weight: bold; }
.hul-trouble2-hl-note { color: #e06c75; font-style: italic; }

WordPressやテーブルなど特定環境での下線設定

実際にWebサイトを構築する環境においては、下線の引き方に特殊なコツや作法が求められます。

ここでは、テーブルのセルを美しく見せる下線の引き方とWordPress環境においてメンテナンスで後悔しない下線の書き方について解説します。

テーブル（表）のセルに下線を引く
WordPressでの下線の引き方とカスタマイズ

HTMLにおけるテーブル（table）の作り方を詳しく知りたい人は「【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ」を一読ください。

【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ | Code Stock

テーブル（表）のセルに下線を引く

料金表や会社概要などの「表組み（テーブル）」の中で下線を引く場合、文字に下線を引くのか、セル（箱）の下に線を引くのかで使うべきCSSが異なります。

テーブルの項目を線で区切る場合は、文字ではなくセル（thやtd）自体に対してborder-bottom（下枠線）を指定するのがよいです。

これにより、文字数に関係なくセルの横幅いっぱいに整った美しい下線が引かれます。（※この時、テーブル本体にborder-collapse: collapse;を指定するのを忘れないでください。）

❌ 悪い例（文字に下線を引く）

名前	田中
部署	マーケティング部

span {
text-decoration: underline;
}
/* 文字の長さで線が途切れるため、右側に不格好な余白ができる */

⭕️ 良い例（セルに下線を引く）

名前	田中
部署	マーケティング部

td {
border-bottom: 3px solid #198754;
}
/* セルの幅いっぱいに線が引かれ、右端まで美しく揃う */

HTMLコード表示

<div class="hul-env1-wrapper">
  
  <div class="hul-env1-demo-area">
    
    <div class="hul-env1-box">
      <div class="hul-env1-label" style="color:#dc3545;">❌ 悪い例（文字に下線を引く）</div>
      
      <table class="hul-env1-table hul-env1-table-bad">
        <tr>
          <th>名前</th>
          <td><span class="hul-env1-bad-line">田中</span></td>
        </tr>
        <tr>
          <th>部署</th>
          <td><span class="hul-env1-bad-line">マーケティング部</span></td>
        </tr>
      </table>

      <div class="hul-env1-code hul-env1-code-bad">
        span {<br>
          <span class="hul-env1-hl-red">text-decoration: underline;</span><br>
        }<br>
        /* 文字の長さで線が途切れるため、右側に不格好な余白ができる */
      </div>
    </div>

    <div class="hul-env1-box">
      <div class="hul-env1-label" style="color:#198754;">⭕️ 良い例（セルに下線を引く）</div>
      
      <table class="hul-env1-table hul-env1-table-good">
        <tr>
          <th>名前</th>
          <td class="hul-env1-good-line">田中</td>
        </tr>
        <tr>
          <th>部署</th>
          <td class="hul-env1-good-line">マーケティング部</td>
        </tr>
      </table>

      <div class="hul-env1-code hul-env1-code-good">
        td {<br>
          <span class="hul-env1-hl-green">border-bottom: 3px solid #198754;</span><br>
        }<br>
        /* セルの幅いっぱいに線が引かれ、右端まで美しく揃う */
      </div>
    </div>

  </div>
</div>

CSSコード表示

.hul-env1-wrapper {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-env1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hul-env1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-env1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

/* ★テーブルの幅を100%に強制し、セルの形を背景色で可視化する */
.hul-env1-table {
  width: 100% !important;
  table-layout: fixed !important; /* 幅を確実に広げる */
  border-collapse: collapse !important;
  margin-bottom: 15px;
}
.hul-env1-table th, .hul-env1-table td {
  border: none !important;
  padding: 15px !important;
  text-align: left !important;
  font-size: 14px !important;
  /* セルの箱の広さが分かるように薄いグレーに塗る */
  background-color: #f8f9fa !important; 
}
.hul-env1-table th { 
  width: 30% !important; 
  background-color: #e9ecef !important;
  border-right: 2px solid #fff !important; /* 見出しとの区切り線 */
}

/* ❌ 悪い例の装飾（文字の下だけで途切れる赤い線） */
.hul-env1-bad-line {
  text-decoration: underline !important;
  text-decoration-color: #dc3545 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
  color: #333;
  font-weight: bold;
}

/* ⭕️ 良い例の装飾（セルの端まで伸びる緑の線） */
.hul-env1-table-good td.hul-env1-good-line {
  border-bottom: 3px solid #198754 !important; /* セルの下枠線として引く */
  color: #333;
  font-weight: bold;
}

.hul-env1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hul-env1-code-bad { border-left: 4px solid #dc3545; }
.hul-env1-code-good { border-left: 4px solid #198754; }
.hul-env1-hl-red { color: #e06c75; font-weight: bold; }
.hul-env1-hl-green { color: #98c379; font-weight: bold; }

WordPressでの下線の引き方とカスタマイズ

WordPressで記事を書く際、SWELLなどの高機能なテーマを使っていれば、エディタ上のボタン一つで綺麗なマーカー線を引けます。

しかし、テーマにないオリジナルの下線を引きたい場合は、HTMLエディタ（カスタムHTMLブロックなど）を使って自分で記述する必要があります。

WordPressでオリジナルの装飾を施す際は、記事内にはのように「クラス名」だけを付与します。

そして、線の色や太さといったデザインの指定は、WordPressの「外観＞カスタマイズ＞追加CSS」といった一箇所にまとめて記述します。

こうすることで、後からデザインを変えたくなった時、追加CSSの1行を書き換えるだけでよいです。

❌ 悪い例（記事内にstyleを直書き）

この方法は後から色を変更するのが地獄になります。

<!– 記事エディタに直接書いたHTML –>

後から色を変更するのが地獄

※100記事でこの書き方をしたら、色を変えるのに100記事を手作業で修正する必要があります。

⭕️ 良い例（クラス名で追加CSSに書く）

この方法は一瞬でサイト全体の色を変更できます。

<!– 記事エディタには名前（class）だけ書く –>

一瞬でサイト全体の色を変更


/* WordPressの「追加CSS」に書くコード */
.my-custom-line {
border-bottom: 2px solid #198754;
}

※追加CSSの「#198754（緑）」を「blue」に変えるだけで、全記事の下線が青色に一斉アップデートされます。

HTMLコード表示

<div class="hul-env2-wrapper">
  
  <div class="hul-env2-demo-area">
    
    <div class="hul-env2-box">
      <div class="hul-env2-label" style="color:#dc3545;">❌ 悪い例（記事内にstyleを直書き）</div>
      
      <p style="font-size: 15px; color: #333; line-height: 1.6; margin-bottom: 15px;">
        この方法は<span style="border-bottom: 2px solid #dc3545; font-weight: bold;">後から色を変更するのが地獄</span>になります。
      </p>

      <div class="hul-env2-code hul-env2-code-bad">
        <!-- 記事エディタに直接書いたHTML --><br>
        <span <span class="hul-env2-hl-red">style="border-bottom: 2px solid red;"</span>><br>
          後から色を変更するのが地獄<br>
        </span>
      </div>
      <p class="hul-env2-note">※100記事でこの書き方をしたら、色を変えるのに100記事を手作業で修正する必要があります。</p>
    </div>

    <div class="hul-env2-box">
      <div class="hul-env2-label" style="color:#198754;">⭕️ 良い例（クラス名で追加CSSに書く）</div>
      
      <p style="font-size: 15px; color: #333; line-height: 1.6; margin-bottom: 15px;">
        この方法は<span class="hul-env2-custom-underline">一瞬でサイト全体の色を変更</span>できます。
      </p>

      <div class="hul-env2-code hul-env2-code-good">
        <!-- 記事エディタには名前（class）だけ書く --><br>
        <span <span class="hul-env2-hl-green">class="my-custom-line"</span>><br>
          一瞬でサイト全体の色を変更<br>
        </span><br><br>
        /* WordPressの「追加CSS」に書くコード */<br>
        .my-custom-line {<br>
          border-bottom: 2px solid #198754;<br>
        }
      </div>
      <p class="hul-env2-note" style="color:#198754;">※追加CSSの「#198754（緑）」を「blue」に変えるだけで、全記事の下線が青色に一斉アップデートされます。</p>
    </div>

  </div>
</div>

CSSコード表示

.hul-env2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hul-env2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hul-env2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hul-env2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

/* ⭕️ 良い例：追加CSSで管理している想定のスタイル */
.hul-env2-custom-underline {
  border-bottom: 2px solid #198754;
  font-weight: bold;
}

.hul-env2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hul-env2-code-bad { border-left: 4px solid #dc3545; }
.hul-env2-code-good { border-left: 4px solid #198754; }
.hul-env2-hl-red { color: #e06c75; font-weight: bold; }
.hul-env2-hl-green { color: #98c379; font-weight: bold; }
.hul-env2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ

基本の引き方
単なる装飾目的でのタグ使用は非推奨。
CSSのtext-decoration: underline;を使用するのが標準。
リンクの誤認防止
青色＋下線のデザインはリンクと誤認されやすいため、クリックできないテキストへの使用は厳禁。
リンクの下線を消す
親要素（divなど）ではなく、<a>タグ自身に対してtext-decoration: none;を指定する。
スマホ向けリンク
ホバー時（:hover）のみ下線を出すUIはスマホで機能しないため、文章中のリンクは常時下線を表示しておくのがよい。
下線のデザイン調整
text-decoration-color、text-decoration-thickness、text-underline-offsetを組み合わせて整える。
マーカー風（蛍光ペン）装飾
background: linear-gradient()を使用し、上部の透明と下部の色の割合を指定して実装する。
下線の長さ調整
text-decorationでは長さを変えられないため、疑似要素（::after）を使って線のブロックを自作して配置する。
表（テーブル）の下線
文字の長さに依存してガタガタになるのを防ぐため、文字ではなくセル（thやtd）に対してborder-bottomを指定する。
WordPressでの運用
タグへの直書き（インラインスタイル）は修正が困難になるため、クラス名を付与して追加CSSなどで一元管理する。