【2026年8月最新】HTMLのタグで下線を引くのはNG？CSSでの正しい下線の付け方とtext-decoration完全ガイド

「文字に下線を引きたいだけなのに、<u>タグを使うと怒られた」——コーディングを学び始めた方や、社内のLP・資料をHTMLで組んでいる方の多くが、一度はこの壁にぶつかります。

たしかに<u>タグを使えば一瞬で下線を引けます。しかし、Web制作の現場では「装飾目的で<u>タグを使うのは避けるべき」というのが共通認識になっています。とはいえ、その理由をきちんと説明できる人は意外と多くありません。

この記事では、<u>タグがなぜ非推奨とされるのかという根本的な理由から、CSSのtext-decorationやborder-bottomを使った正しい下線の付け方、色・太さ・スタイルのカスタマイズ、リンクの下線の扱い方、ホバーアニメーションまでを体系的に整理します。さらに後半では、こうした「地味だけど地味に時間がかかる」CSS調整の作業を、Claude CodeのようなAIコーディングエージェントにどう任せられるかという実務的な視点も紹介します。

この記事を最後まで読むと、次の6つが明確になります。

01 U TAG BASICS <u>タグとは？下線を引く最も原始的な方法 HTMLの仕様として今も存在する「文字に下線を引くタグ」

<u>タグは、囲んだテキストに下線を引くHTMLの要素です。書き方は非常にシンプルで、以下のようにテキストを挟むだけで下線が表示されます。

<p>この部分に<u>下線</u>が引かれます。</p>

見た目上は非常に手軽な<u>タグですが、実はHTML5でこのタグの意味（セマンティクス）が大きく変わったという背景があります。かつては単純な装飾目的のタグでしたが、現在の仕様では「文法的に正しくない語句」「固有名詞」「中国語の固有名詞表記」など、特殊な注釈を示すための要素として再定義されています。

1-1. 似ているタグ：<ins>タグとの違い

下線が表示されるタグとして、<u>タグとよく混同されるのが<ins>タグです。<ins>タグは「文書に後から挿入された箇所」を示すためのタグで、ブラウザの標準スタイルでは同じように下線が表示されます。

タグ	本来の意味	標準スタイルでの見た目
<u>	通常とは異なる注釈付きテキスト（スペルミス表記等）	下線
<ins>	文書に後から挿入された内容（編集履歴の表現）	下線
<s>	もはや正確・関連性がなくなった内容	取り消し線
<mark>	参照・強調のためにハイライトされた範囲	背景色によるハイライト

この表からも分かる通り、見た目が似ているタグでもそれぞれ持っている「意味」がまったく違います。「下線が引ければどれでもいい」という考え方でタグを選んでしまうと、スクリーンリーダーなど支援技術を使うユーザーに誤った情報を伝えてしまう可能性があります。

02 WHY NOT <u>タグが非推奨とされる3つの理由 装飾目的で使うと何が問題になるのかを整理する

<u>タグを装飾目的で使うべきではないと言われる理由は、大きく分けて3つあります。

2-1. 理由1：HTMLの意味と見た目の意図がズレる

前章で触れた通り、<u>タグ本来の意味は「通常とは異なる注釈付きテキスト」です。単に見た目を強調したいだけで<u>タグを使うと、HTMLが本来伝えるべき「構造上の意味」と、実際にやりたいこと（装飾）がズレてしまいます。これは、検索エンジンやスクリーンリーダーなど、HTMLの意味を読み取る仕組みに誤った情報を与えることにつながります。

2-2. 理由2：リンクの下線と見分けがつかなくなる

Webページにおいて、下線は伝統的に「ここはリンクです」という視覚的なサインとして広く使われてきました。装飾目的で<u>タグを多用すると、リンクではない普通のテキストにも下線が引かれることになり、ユーザーが「これはクリックできるのか」を判断しづらくなります。

2-3. 理由3：デザインの微調整ができない

<u>タグで表示される下線は、ブラウザ標準のスタイルに依存するため色・太さ・文字との間隔などを細かく調整できません。実務のWeb制作では「もう少し下線を文字から離したい」「太さを2pxにしたい」といった微調整が頻繁に発生しますが、<u>タグ単体ではこれらに対応できません。

03 CSS METHODS CSSで下線を引く3つの方法 text-decoration・border-bottom・box-shadowの使い分け

装飾目的で下線を引きたい場合は、HTMLのタグではなくCSSを使うのが正しいアプローチです。ここでは代表的な3つの方法を紹介します。

3-1. 方法1：text-decorationプロパティ（最も基本的な方法）

下線を引く最も標準的な方法が、text-decorationプロパティです。値にunderlineを指定するだけで、<u>タグと同じ見た目の下線を表示できます。

.underline {
  text-decoration: underline;
}

text-decorationの最大のメリットは、「見た目の装飾」であることがCSSという正しい場所に書かれているという点です。HTML側は<span>や<p>のような意味的にニュートラルな要素のままにできます。

3-2. 方法2：border-bottomプロパティ（より柔軟な下線表現）

text-decorationよりもさらにデザインの自由度が高い方法が、border-bottom（下側の枠線）を使うテクニックです。

.underline-border {
  border-bottom: 2px solid #dc2626;
  padding-bottom: 2px;
}

border-bottomを使う最大のメリットは、下線と文字の間隔（padding-bottom）を自由に調整できる点です。text-decorationの下線は文字のすぐ下にぴったり付きますが、border-bottomなら「文字からやや離れた位置に太めの線を引く」といった、デザイン性の高い表現が可能になります。

方法	間隔の調整	複数行テキストでの見た目	こんな場面に向いている
text-decoration	基本的に不可（一部プロパティで調整可）	各行の文字の下にきれいに沿う	本文中の一般的な下線表現
border-bottom	自由に調整可能（padding-bottomで制御）	インライン要素は折り返した行ごとに線が入る（text-decorationと同様）。単一行のブロック要素（見出し・ボタン等）なら1本の線として見える	見出し・ボタン風の装飾的な下線
box-shadow	inset指定でかなり自由に調整可能	同上（複数行のインライン要素では行ごとに線が入る。見出し・ボタン等の単一行ブロックでの使用が向く）	特殊な質感・グラデーション下線

3-3. 方法3：box-shadowを使った応用的な下線表現

やや上級者向けのテクニックですが、box-shadowのinset（内側影）指定を使っても下線のような表現を作ることができます。

.underline-shadow {
  box-shadow: inset 0 -3px 0 0 #dc2626;
}

04 CUSTOMIZE 下線の色・太さ・スタイルを自在に変える text-decoration関連プロパティで細部までコントロールする

text-decorationには、下線の色・太さ・線のスタイル（点線・波線等）をそれぞれ個別に指定できる関連プロパティが用意されています。

4-1. 下線の色を変える：text-decoration-color

.underline-colored {
  text-decoration: underline;
  text-decoration-color: #dc2626;
}

このプロパティを使うと、文字の色はそのままに、下線だけを別の色にするという表現ができます。例えば「重要なキーワードの文字色は変えずに、赤い下線だけを引いて注目させたい」というケースに便利です。

4-2. 下線の太さを変える：text-decoration-thickness

.underline-thick {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

太さを指定するtext-decoration-thicknessと、間隔を指定するtext-underline-offsetはセットで使うのが実務上のコツです。太さだけを大きくすると下線が文字に重なって読みにくくなるため、offsetで適度な余白を作ることでバランスの取れた見た目になります。

4-3. 線のスタイルを変える：text-decoration-style

.underline-dotted {
  text-decoration: underline;
  text-decoration-style: dotted;
}
.underline-wavy {
  text-decoration: underline;
  text-decoration-style: wavy;
}

text-decoration-styleの値	見た目	主な用途
solid（初期値）	実線	一般的な下線表現
double	二重線	強調したい見出し等
dotted	点線	注釈・補足のニュアンス
dashed	破線	境界・区切りのニュアンス
wavy	波線	スペルミスの指摘表現（エディタ風）

4-4. 一括指定でまとめて書く方法

個別プロパティに慣れてきたら、text-decorationプロパティ1行にまとめて指定することもできます。

.underline-shorthand {
  text-decoration: underline wavy #dc2626 2px;
}

05 LINKS リンクの下線を消す・カスタマイズする方法 a要素のデフォルト下線をコントロールする

<a>タグ（リンク）には、ブラウザの標準スタイルとして自動的に下線が表示される仕様があります。デザインによっては、この下線を消したい、あるいはホバー時だけ表示したい、というケースがよくあります。

5-1. リンクの下線を消す

a {
  text-decoration: none;
}

5-2. ホバー時だけ下線を表示する

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

この書き方は、普段はすっきりした見た目にしつつ、マウスを乗せたときだけ「クリックできる」ことを伝える、バランスの良い実装として広く使われています。

5-3. 一部のリンクだけ下線を維持したい場合

サイト全体でリンクの下線を消す設定にしつつ、本文中の文中リンクだけは下線を残したい、というケースもよくあります。その場合はクラスを使って個別に上書きします。

/* サイト全体：下線なし */
a {
  text-decoration: none;
}

/* 本文中の文中リンクだけ下線を残す */
.article-body a {
  text-decoration: underline;
  text-decoration-color: #dc2626;
}

06 HOVER ANIMATION ホバー時に下線がスッと伸びるアニメーション表現 transitionを使った動きのある下線演出

近年のWebサイトでよく見かける、ホバー時に下線が左から右へスッと伸びるアニメーションも、CSSだけで実装できます。

.animated-underline {
  position: relative;
  text-decoration: none;
}
.animated-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #dc2626;
  transition: width 0.3s ease;
}
.animated-underline:hover::after {
  width: 100%;
}

この仕組みでは、::after擬似要素で幅0の細い帯を用意しておき、ホバー時にwidthを100%に変化させることで「下線が伸びる」ように見せかけています。transitionプロパティが、この変化を滑らかなアニメーションにしてくれます。

6-1. transitionの動き方を調整する

transitionの値	動きの印象
ease（標準）	自然な加減速。多くの場面で違和感がない
linear	一定速度。機械的でシンプルな印象
ease-in-out	ゆっくり始まりゆっくり終わる、丁寧な印象
cubic-bezier(...)	独自のカーブを指定。ブランドらしい動きを作りたい場合

こうしたホバーアニメーションは、ボタンやナビゲーションメニューのリンクに使うと、サイト全体の質感を大きく引き上げる効果があります。ただし、本文中の大量のリンク全てに適用すると、逆に落ち着かない印象になるため、「ここぞ」という導線に絞って使うのがバランスの良い使い方です。

07 SEPARATION 「構造」と「装飾」を分離するというHTML/CSSの大原則 なぜこの原則が生まれ、なぜ今も重要なのか

ここまで見てきた<u>タグとCSSの下線表現の違いは、実はWeb制作における「構造（HTML）」と「装飾（CSS）」を分離するという、より大きな原則の一例に過ぎません。

7-1. なぜこの原則が生まれたのか

Webが登場した初期の時代は、<font>タグや<u>タグのように、見た目の指定をHTMLの中に直接書き込むのが一般的でした。しかしサイトの規模が大きくなるにつれ、「デザインを一つ変えるだけで、何百ページものHTMLを1つずつ書き換えなければならない」という深刻な保守性の問題が表面化しました。

この反省から、HTMLとCSSの役割を明確に分離する設計思想が広まりました。現在では、デザインの変更はCSSファイルを1つ修正するだけで、サイト全体に反映できるのが当たり前になっています。

7-2. 分離を守るメリットを具体的に見る

観点	構造と装飾が混在した場合	構造と装飾を分離した場合
デザイン変更	HTMLファイルを1つずつ修正する必要がある	CSSファイル1つの修正で全ページに反映される
コードの見通し	装飾指定が混ざり、文章構造が読みにくい	HTMLは意味だけ、CSSは見た目だけで見通しが良い
アクセシビリティ	タグの意味とスクリーンリーダーの読み上げがズレやすい	タグ本来の意味が保たれ、支援技術との相性が良い
チーム開発	デザイナーとコーダーの作業が絡み合いやすい	HTML担当・CSS担当で作業分担しやすい

<u>タグを装飾目的で使わない、という今回のテーマは、この大原則の入り口に過ぎません。JavaScriptによる「振る舞い」も含めた「構造・装飾・振る舞いの3層分離」は、モダンなWeb制作全体を貫く基本的な考え方として、コーディングを学ぶ最初の段階で押さえておく価値があります。

08 COMMON MISTAKES 実務でよくある間違いパターン ここまでの内容を「事故のパターン集」として総整理

間違いパターン	症状	対策
装飾目的で<u>タグを多用する	リンクと誤認されやすく、意味と見た目がズレる	CSSのtext-decorationまたはborder-bottomに置き換える
太さだけtext-decoration-thicknessで変えて間隔を調整しない	下線が文字に重なって読みにくい	text-underline-offsetで間隔を調整する
全てのリンクの下線を無条件に消す	クリックできることが伝わりにくくなる	ホバー時に表示する、色で区別する等の代替手段を用意する
ホバーアニメーションを本文中の全リンクに適用する	ページ全体が落ち着かない印象になる	CTAボタンやナビゲーションなど、要所だけに絞って使う
<u>と<ins>を見た目だけで使い分ける	タグ本来の意味と実際の用途がズレる	「後から挿入された内容」等、タグの意味に合った場面でのみ使う

8-1. コードレビューで確認すべきチェックポイント

社内でHTML/CSSのコードレビュールールを作る場合、下線表現に関しては以下の観点をチェック項目に加えておくと、実装ミスの再発防止に役立ちます。

こうした細部のルールは、1人で作業しているうちは気にならなくても、チームでコードを触るようになった瞬間に効いてきます。レビュー観点として明文化しておくことで、担当者が変わってもコードの質を一定に保てます。

09 AI CODING 【独自】コーディングの「地味な調整」をAIに任せる 下線の太さ調整のような細部の試行錯誤にこそAIが効く

ここまで紹介してきた下線の色・太さ・間隔・アニメーションの調整は、実務では「ブラウザで見た目を確認しながら、数値を少しずつ変えていく」試行錯誤が発生しやすい作業です。1つのプロパティを直しては保存し、ブラウザをリロードして確認する——この地味な繰り返し作業こそ、Claude CodeのようなAIコーディングエージェントが力を発揮しやすい領域です。

弊社（株式会社GENAI）では、自社LP・資料のコーディングにもClaude Codeを活用しています。「下線を波線にして」「ホバーで下線が伸びるアニメーションを付けて」といった感覚的な指示でも、text-decoration-styleやtransitionなど適切なプロパティを判断してコードに落とし込んでくれるため、細部の調整に費やす時間が大きく圧縮されます。

9-1. 非エンジニアがコーディングの細部に関わる意味

「CSSのプロパティ名なんて覚えていないから関係ない」という経営者・マーケティング担当の方も多いはずです。しかし、LPや資料の細部の作り込みは、サイト全体の信頼感やコンバージョン率に地味に効いてくる要素でもあります。「このリンクの下線が気になる」「もう少し目立たせたい」といった感覚的な違和感を、プロパティ名を知らないままClaude Codeに直接伝えて試せるのは、非エンジニアにとって大きな価値です。

もちろん、ブランドイメージに関わる最終的なデザイン判断は人間が行うべき領域です。Claude Codeはあくまで「試行錯誤のスピードを上げる」アシスタントという位置づけであり、最終的な意思決定を代替するものではありません。弊社ではLP・記事コーディング以外にも営業・広告・経理・秘書業務までClaude Codeを組み込んでおり、月額約30,000円（Max 20xプラン）の投資で、こうした細部の調整まで含めて業務を分担できている肌感があります。

コーディングの細部調整も、Claude Codeの業務活用も、AI鬼管理が伴走します

「LPや資料の見た目を素早く改善したい」「開発・デザイン以外の業務にもAIを活かしたい」という経営者・マーケティング担当の方に向けて、Claude Codeの導入設計をサポートしています。

よくある質問

Q. <u>タグは使ってはいけないのですか？

A. 完全に禁止されているわけではありません。HTML5では「通常とは異なる注釈付きテキスト」を示す要素として現行仕様に含まれています。ただし「単に下線を引きたいだけ」という装飾目的での使用は推奨されず、CSSのtext-decorationやborder-bottomを使うべきとされています。

Q. text-decorationとborder-bottom、どちらを使えばいいですか？

A. 本文中のシンプルな下線であればtext-decoration、下線と文字の間隔を調整したい・見出しやボタンなど装飾性の高い下線を作りたい場合はborder-bottomが向いています。まずtext-decorationで試し、表現力が足りなければborder-bottomに切り替えるのが実務的な進め方です。

Q. リンクの下線は必ず表示すべきですか？

A. 必須ではありませんが、下線を消す場合は色の違いやボタン化など、他の方法で「クリックできる」ことをユーザーに伝える工夫が必要です。特に文章量の多いページでは、下線が視覚的な手がかりとして重要な役割を果たします。

Q. 下線のホバーアニメーションはどのプロパティで作れますか？

A. ::after擬似要素で幅0の帯を用意し、transitionプロパティでwidthの変化を滑らかにする方法が一般的です。position:relativeを親要素に、position:absoluteを疑似要素に指定して重ねるのが基本の実装パターンです。

Q. <u>タグと<ins>タグは何が違うのですか？

A. 見た目（下線）は同じですが、意味が異なります。<u>は「通常と異なる注釈付きテキスト」、<ins>は「文書に後から挿入された内容」を示すタグです。見た目だけで選ばず、意味に合った場面で使い分けることが推奨されます。

Q. HTML/CSSのコーディングを効率化するのにAIツールは使えますか？

A. 使えます。特にClaude CodeのようなAIコーディングエージェントは、「下線をこうしたい」といった感覚的な指示から適切なCSSプロパティを判断してコードを生成できます。プロパティ名を細かく覚えていない非エンジニアの方でも、試行錯誤のスピードを大きく上げられます。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。