HTMLでアンダーラインを引く方法｜uタグ・CSS活用・デザイン例を徹底解説

文字に下線を引きたいけど、どうすればいいのか迷うことってありますよね。

HTMLだけでできるのか、それともCSSが必要なのか、いろんな方法があって混乱してしまうこともあると思います。

この記事では、「HTMLアンダーライン」の引き方と、CSSを使ったデザインの工夫まで、やさしくわかりやすく説明していきます。

読み終わるころには、自分の思いどおりにアンダーラインを引けるようになって、文章をもっと見やすく・伝わりやすくすることができます。

初心者の方も安心して読める内容になっていますので、ぜひ最後まで参考にしてみてください。

HTMLでアンダーラインを引く基本的な方法

uタグを使ったアンダーラインの引き方

HTMLで最も簡単にアンダーラインを引く方法は、<u>タグを使うことです。

<u>タグで囲まれた文字に、下線が引かれます。

これは古くから使われている方法で、今でも多くのサイトで見かけます。

<u>この文字に下線が引かれます</u>

<u>タグを使うと、特にCSSを書かなくてもすぐに下線を表示できるため、とても手軽です。

以下のポイントをおさえておきましょう。

<u>タグはとても便利ですが、最近ではデザインや意味づけの観点からCSSで制御する方法が主流になっています。

spanタグとstyle属性で下線を引く方法

もっと柔軟にデザインしたい場合は、<span>タグとCSSのtext-decorationを使う方法があります。

この方法なら色や太さなども自由に変更できます。

<span style="text-decoration: underline;">この文字に下線が引かれます</span>

次のような工夫ができます。

HTMLとCSSの組み合わせで、デザイン性の高いアンダーラインが実現できます。

古いタグinsとその使い方

<ins>タグは「挿入された内容」を意味し、もともとは文書の変更履歴を表すために使われていました。

このタグで囲むと自動的に下線が付きます。

<ins>このテキストは後から追加されました</ins>

使い方の特徴を以下にまとめます。

意味を持つタグなので、デザイン目的だけで使うのは避けた方が良いです。

HTML5で非推奨になったタグについて

HTMLにはかつてアンダーラインに使われていた古いタグがありますが、HTML5では非推奨とされています。

特に気をつけたいのが、以下のタグです。

こういったタグはCSSでの表現に置き換えるのが基本となっています。

現代的なWeb制作では、意味を持つタグを使い、デザインはCSSで制御するのが大切です。

テキスト以外にアンダーラインを使うケース

下線は文字だけでなく、画像やボタン、メニューなどにも使うことがあります。

ユーザーに何かを強調したり、クリック可能であることを伝える目的で活用されます。

具体的な利用例は次の通りです。

こうした活用により、視覚的なアクセントを加えることができます。

目的に応じて、HTMLとCSSを組み合わせて効果的に使いましょう。

CSSでアンダーラインをデザインする方法

text-decorationプロパティの基本

CSSでアンダーラインを引くときによく使うのがtext-decorationプロパティです。

このプロパティを使うことで、HTMLだけでは難しい細かなデザインの下線を実現できます。

たとえば、次のように使います。

text-decoration: underline;

これは、指定したテキストに下線を引く命令です。

とてもシンプルですが、応用するともっと自由にアレンジができます。

以下のような書き方が基本になります。

これらの使い方を覚えておくと、文字の見せ方にバリエーションを持たせることができます。

アンダーラインの色を変更する方法

CSSではアンダーラインの色も自由に変えることができます。

普通はテキストと同じ色になりますが、text-decoration-colorプロパティを使えば好きな色に変えることができます。

たとえば、赤色にしたい場合は次のように書きます。

text-decoration-color: red;

使い方のポイントを以下にまとめます。

このプロパティを使うと、普通の下線とは違った印象を作り出すことができます。

下線の位置や太さをカスタマイズする

もっと細かくデザインしたいときには、text-underline-offsetとtext-decoration-thicknessを使います。

これで下線の高さや太さを調整できます。

たとえば、少し下に線をずらすにはこのようにします。

text-underline-offset: 3px;

太さを変えたい場合はこうです。

text-decoration-thickness: 2px;

以下のような活用方法があります。

このように位置と太さを工夫することで、読みやすくて目を引くアンダーラインが作れます。

装飾付きのアンダーラインを作るテクニック

CSSでは、ただの線ではなく、点線や波線など装飾のあるアンダーラインも作れます。

text-decoration-styleプロパティを使うことで、下線に変化をつけられます。

指定できるスタイルは以下の通りです。

たとえば波線を使いたいときは、次のように書きます。

text-decoration-style: wavy;

これを使うと、やわらかく可愛らしい雰囲気のデザインが簡単にできます。

子ども向けサイトや楽しい印象を与えたい時にとても便利です。

ホバー時に下線を表示・非表示する方法

CSSの:hover疑似クラスを使うと、マウスが乗った時だけアンダーラインを表示したり消したりできます。

これはリンクやボタンのデザインでよく使われます。

次のようなコードで実現できます。


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


このテクニックの特徴をまとめます。

このようにホバーのタイミングでアンダーラインを変えることで、動きのあるわかりやすいデザインが実現できます。

アニメーション付きの下線の実装例

CSSのアニメーションやトランジションを使うと、アンダーラインに動きを加えることができます。

たとえば、ホバー時に左から右へ線が伸びるようなアニメーションは人気です。

以下のコードのように、transitionとbackgroundを組み合わせる方法があります。


a {
position: relative;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
width: 0;
height: 2px;
left: 0;
bottom: 0;
background: red;
transition: 0.3s;
}
a:hover::after {
width: 100%;
}


このような動きのある下線を作ることで、見た目のインパクトが大きくなり、クリック率も上がりやすくなります。

HTMLとCSSの組み合わせで自在に下線を引く

uタグとCSSを併用するパターン

HTMLの<u>タグとCSSを組み合わせることで、より細かくスタイルを調整した下線を引くことができます。

<u>タグだけではデザインの自由度が低いですが、CSSを使えば見た目を簡単に変えられます。

例えば以下のような使い方ができます。

<u style="text-decoration-color: blue; text-decoration-thickness: 2px;">強調したい文字</u>

<u>タグとCSSを組み合わせると、次のようなメリットがあります。

この方法は、デザインの自由度と実装の簡単さを両立したい場面にとてもおすすめです。

複数行テキストで均一なアンダーラインを引く

1行だけの下線は簡単に引けますが、複数行にまたがるテキストに均一な下線を引くのは少し工夫が必要です。

特にtext-decorationでは複数行の一部に線が切れてしまうこともあります。

このような場合には、box-shadowやborder-bottomを使って下線風の装飾を作る方法が効果的です。


span {
border-bottom: 2px solid red;
}


このようにすると、文字の長さに関係なく、均一な線が引かれます。

複数行に対応するテクニックは次の通りです。

この方法を使えば、どんなに長い文章でも安定した下線が引けます。

マーカー風のデザインで強調表示する

下線ではなく、マーカーで引いたような見た目にしたいときには、背景色を使って装飾する方法があります。

これは特に小学生にもわかりやすく、親しみやすいデザインになります。

たとえば以下のように書きます。


span {
background: yellow;
padding: 2px 4px;
}


この方法の特徴をまとめると次のようになります。

マーカー風のデザインは、下線よりもさらに目立たせたいときにおすすめです。

スマホ表示でも見やすい下線スタイル

パソコンではキレイに見えても、スマホでは下線が詰まっていたり、小さすぎたりすることがあります。

そのため、スマホでも読みやすいように、レスポンシブ対応を考えた下線スタイルが必要です。

スマホ対応のポイントを以下にまとめます。

こうした工夫をすることで、小さな画面でも読みやすく、ストレスのないデザインにすることができます。

レスポンシブ対応でデザインが崩れない工夫

レスポンシブデザインでは、画面の幅によって文字のサイズや間隔が変わるため、下線も一緒に調整しなければ見た目が崩れてしまいます。

これを防ぐには、相対的な単位やメディアクエリを使ったCSS設計が必要です。

具体的な対策は以下の通りです。

このような対応をしておくことで、どんな端末でも美しい下線デザインが保てます。

アクセシビリティを意識した下線の使い方

アンダーラインは見た目のデザインだけでなく、視覚的な情報を正しく伝える役割もあります。

視力が弱い人や色の識別が難しい人にも分かりやすくするには、アクセシビリティの観点から下線の使い方を考えることが大切です。

以下のような工夫をすると効果的です。

こうした配慮を取り入れることで、誰にでも見やすく、正しく伝わるデザインが実現します。

目的別アンダーラインの活用テクニック

リンクとしての下線と区別する方法

Webページではリンクに下線がついていることが多いため、装飾目的のアンダーラインと区別しないと混乱を招いてしまいます。

見た目は似ていても、意味はまったく違うので注意が必要です。

混同を避けるための工夫は以下の通りです。

これらの工夫を取り入れることで、ユーザーが迷わずに内容を理解しやすくなります。

見出しや強調表示に下線を使う場面

見出しや重要な文章を目立たせたいときにも、アンダーラインはとても便利です。

装飾としての下線は、読者の目を引くのにぴったりです。

特に装飾しすぎず、スッキリ見せたいときに役立ちます。

使いやすい場面をいくつか紹介します。

このような使い方をすれば、読み手に伝えたい内容を自然に引き立たせることができます。

資料・レポート風のデザインに活かす

学校のプリントや報告書のような「まじめ」な雰囲気を出したいときは、アンダーラインがとても効果的です。

見出しや重要な言葉に線を引くだけで、資料らしさがグッと増します。

資料風に見せるポイントは以下の通りです。

こうしたデザインを心がけることで、信頼感のある落ち着いたページを作ることができます。

ブランドイメージに合わせたカスタム下線

ブランドやサービスのイメージに合った下線スタイルを使うことで、統一感のあるページが作れます。

たとえば明るい色で元気な印象にしたり、曲線や波線でやさしい雰囲気にしたりできます。

ブランドに合った工夫の例は次の通りです。

このように、ブランドの世界観を下線ひとつで表現することも可能です。

デザイン性と可読性を両立するコツ

アンダーラインを使いすぎるとゴチャゴチャして読みにくくなってしまいます。

デザイン性を出しながら、同時に読みやすさを守るにはバランスがとても大切です。

わかりやすくするためのコツを紹介します。

このような工夫をすれば、見た目もキレイで、読む人にやさしいページに仕上がります。

ユーザーの視線誘導に効果的な下線設計

ユーザーに「ここを見てほしい」と思った場所には、視線を自然に誘導する工夫が必要です。

アンダーラインは、そのためのとても強力なツールです。

視線を誘導するテクニックとして、次のような方法があります。

このように使えば、ユーザーが迷わず目的の情報にたどり着けるデザインが実現できます。

まとめ

これまで、HTMLとCSSでアンダーラインを引くいろいろな方法を紹介してきました。

最後に、大切なポイントをもう一度かんたんに振り返っておきましょう。

下線の使い方ひとつで、ページの印象が大きく変わります。

この記事を参考に、自分のWebサイトでも伝わるデザインを作ってみましょう。