HTML/CSSで下線（アンダーライン）を引く方法
Web記事の文章に下線（アンダーライン）を引いて、「重要な部分を強調させたい」と思ったことはありませんか？
HTMLやCSSの記述を少し工夫するだけで、初心者でも簡単に下線を引くことができます。
下線を引くことにより、文章の重要な部分が目立ち、内容が伝わりやすくなるので、コンテンツの質を高めるのに確実に役立つ技術です。
今回WEBCAMP NAVIでは、HTMLやCSSを使って下線を引く方法から、下線の色や太さを変える方法、点線や二重線、マーカー線を引く方法、下線を消す方法まで、わかりやすく解説します。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
下線（アンダーライン）を引くメリット
下線の効果
下線とは、アンダーラインとも呼ばれますが、文字通り文章（テキスト）の下に線を引くことで、見出しの印象を強くしたり、文中の重要な単語を強調したりすることができます。
Web開発の世界で文章に下線を引くためには、HTMLやCSSの記述を編集する必要がありますが、その方法はとても簡単です！
下線の種類
下線と一口に言っても、シンプルな黒色の細い線だけでなく、色や太さを変えたり、点線や二重線、蛍光ペンのようなマーカー線など、多彩な表現が可能です。
下線を引く箇所や内容に応じて下線の種類を使い分けることで、より見やすくわかりやすいコンテンツに仕上げることができます。
それでは、さっそくHTMLで下線を引く方法を解説していきます。
HTMLで下線を引く方法
<u>タグの使い方
下線を引く方法のなかで、最も簡単な方法が<u>タグを使う方法です。
<u>とは「Underline（アンダーライン）」の略で、その名の通り、文字に下線を引くためのHTMLタグです。
書き方は以下のように、<u> ~ </u>で下線を引きたい文章を囲むだけです。
<u>下線を引きたい文章</u>
表示イメージ
画像1
これだけで、文字（フォント）と同じ色の下線が引かれます。
また、<u>タグは以下のように、見出しなどにも下線を引くことができます。
<u><h1>下線を引きたい見出し</h1></u>
表示イメージ
画像2
<u>タグのデメリット
HTMLの<u>タグを使えば簡単に下線を引くことができますが、下線の種類や色、太さを変えたりすることはできません。
しかし、CSSを使うことで、下線の色や太さを変えたり、点線や二重線、マーカー線など、さまざまな下線を表現することができます。
それでは、CSSで下線を引く方法を見ていきましょう。
CSSで下線を引く方法
text-decorationプロパティの使い方
CSSで下線を引く最も簡単な方法は、「text-decoration」プロパティを使う方法で、以下のサンプルコードのように、「underline」を指定することで下線を引くことができます。
<span>この文章に下線が引かれます。</span>
span {
text-decoration: underline;
}
表示イメージ
画像3
ワンポイントアドバイス
「text-decoration」は、その名の通り文字を装飾するためのプロパティで、下線以外にも上線（overline）、取り消し線（line-through）なども引くことができます。
下線の色を変える方法
text-decoration-colorプロパティを使う
前述の「text-decoration: underline;」に加えて、「text-decoration-color」プロパティを利用することで、下線に色を付けることができます。
色の指定方法は、「red」や「blue」などの英語表記または、「#FF0000」のようにカラーコードを指定します。
<span>この文章に赤色の下線が引かれます。</span>
span {
text-decoration: underline;
text–decoration–color: red;
}
表示イメージ
画像4
しかしながら、「text-decoration」や「text–decoration–color」では、下線の種類や太さを変えることはできません。
下線の太さや種類を変える方法
border-bottomプロパティを使う
「border-bottom」プロパティを使えば、「線の種類」、「太さ」、「色」の3つのパラメータを同時に指定することができます。
パラメータは半角スペースで区切り「種類 太さ 色」の順番で指定します。
border-bottomで表現できる下線の種類
- solid（実線）
- double（二重線）
- dotted（点線）
- dashed（破線）
- wavy（波線）
例えば、赤色の太さ2pxの二重線を引きたい場合は、以下のように指定します。
<span>この文章に赤色の太さ2pxの二重線が引かれます。</span>
span {
border-bottom: double 2px red;
}
表示イメージ
画像5
下線を消す方法（下線なし）
text-decorationプロパティに「none」を指定する
HTMLの<a>タグ使ってリンクを作ると、自動的にリンク文字の下に下線が引かれます。
その下線を消したいときは、「text-decoration」プロパティに「none」を指定することで、下線を消すことができます。
<a href=”https://web-camp.io/”>
このリンクには下線を付けません。
</a>
a {
text-decoration: none;
}
表示イメージ
画像6
【応用編】マーカー線の引き方
CSSの「background: linear-gradient」プロパティへ「transparent 太さ, 色 透過率」を指定することで、蛍光ペンのようなマーカー線を引くことができます。
例えば、文字に対して50%の太さで、黄色（#FFFF00）のマーカー線を引きたい場合は、以下ように指定します。
<span>この文章に黄色のマーカー線が引かれます。</span>
span {
background: linear–gradient(transparent 50%, #FFFF00 0%);
}
表示イメージ
画像7
ワンポイントアドバイス
「linear-gradient」は、グラデーションを表現するためのプロパティで、上からグラデーションが開始される色と位置、終了する色と位置を指定します。
また、transparentとは「透明」という意味で、上記サンプルコードでは、透明（transparent）が50%から始まり、黄色（#FFFF00）が0%から始まるという意味になります。
まとめ
ということで今回は、HTMLやCSSで下線を引く方法をご紹介しました。
HTMLの<u>タグを使えば簡単に下線を引くことができますが、下線の種類、太さ、色を変えたい場合は、CSSを使う必要があります。
状況に応じて下線のスタイルを使い分けることで、文章内の重要なポイントを目立たせ、見栄えの良い、わかりやすいコンテンツに仕上げることがでるので、ぜひ試してみてください！
