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>で下線を引きたい文章を囲むだけです。

表示イメージ

画像1

これだけで、文字（フォント）と同じ色の下線が引かれます。

また、<u>タグは以下のように、見出しなどにも下線を引くことができます。

表示イメージ

画像2

<u>タグのデメリット

HTMLの<u>タグを使えば簡単に下線を引くことができますが、下線の種類や色、太さを変えたりすることはできません。

しかし、CSSを使うことで、下線の色や太さを変えたり、点線や二重線、マーカー線など、さまざまな下線を表現することができます。

それでは、CSSで下線を引く方法を見ていきましょう。

CSSで下線を引く方法

text-decorationプロパティの使い方

CSSで下線を引く最も簡単な方法は、「text-decoration」プロパティを使う方法で、以下のサンプルコードのように、「underline」を指定することで下線を引くことができます。

表示イメージ

画像3

ワンポイントアドバイス

「text-decoration」は、その名の通り文字を装飾するためのプロパティで、下線以外にも上線（overline）、取り消し線（line-through）なども引くことができます。

下線の色を変える方法

text-decoration-colorプロパティを使う

前述の「text-decoration: underline;」に加えて、「text-decoration-color」プロパティを利用することで、下線に色を付けることができます。

色の指定方法は、「red」や「blue」などの英語表記または、「#FF0000」のようにカラーコードを指定します。

表示イメージ

画像4

しかしながら、「text-decoration」や「text–decoration–color」では、下線の種類や太さを変えることはできません。

下線の太さや種類を変える方法

border-bottomプロパティを使う

「border-bottom」プロパティを使えば、「線の種類」、「太さ」、「色」の3つのパラメータを同時に指定することができます。

パラメータは半角スペースで区切り「種類　太さ　色」の順番で指定します。

border-bottomで表現できる下線の種類

• solid（実線）
• double（二重線）
• dotted（点線）
• dashed（破線）
• wavy（波線）

例えば、赤色の太さ2pxの二重線を引きたい場合は、以下のように指定します。

表示イメージ

画像5

下線を消す方法（下線なし）

text-decorationプロパティに「none」を指定する

HTMLの<a>タグ使ってリンクを作ると、自動的にリンク文字の下に下線が引かれます。

その下線を消したいときは、「text-decoration」プロパティに「none」を指定することで、下線を消すことができます。

表示イメージ

画像6

【応用編】マーカー線の引き方

CSSの「background: linear-gradient」プロパティへ「transparent　太さ,　色　透過率」を指定することで、蛍光ペンのようなマーカー線を引くことができます。

例えば、文字に対して50%の太さで、黄色（#FFFF00）のマーカー線を引きたい場合は、以下ように指定します。

表示イメージ

画像7

ワンポイントアドバイス

「linear-gradient」は、グラデーションを表現するためのプロパティで、上からグラデーションが開始される色と位置、終了する色と位置を指定します。

また、transparentとは「透明」という意味で、上記サンプルコードでは、透明（transparent）が50%から始まり、黄色（#FFFF00）が0%から始まるという意味になります。

まとめ

ということで今回は、HTMLやCSSで下線を引く方法をご紹介しました。

HTMLの<u>タグを使えば簡単に下線を引くことができますが、下線の種類、太さ、色を変えたい場合は、CSSを使う必要があります。

状況に応じて下線のスタイルを使い分けることで、文章内の重要なポイントを目立たせ、見栄えの良い、わかりやすいコンテンツに仕上げることがでるので、ぜひ試してみてください！