【実例付】HTMLで下線を引く2つの方法を具体例付きで解説

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLでテキストに下線を引く方法は何だろうか？」
「HTMLの下線引きの書き方を学びたい」
「HTMLの下線引きの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

• HTMLでの下線引きの基本的な書き方
• 下線引きの応用法
• HTMLでの下線引きを用いた具体的な使用例

この記事では、HTMLでの下線引きの基本的な使い方から、スタイルシートを用いたより自由な下線のデザイン方法など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

HTMLとCSSを用いた下線の引き方

ここでは、HTMLとCSSを用いて下線を引く方法についてお伝えします。

下線はウェブページで情報を強調したり、文章の一部を目立たせるために使用されます。

• 下線の基本的な引き方
• 下線のデザイン：種類、太さ、色の変更
• ハイパーリンクの下線削除

下線の基本的な引き方

HTMLでは、下線を引くために<u>タグを使います。

このタグを使うと、タグで囲まれたテキストに下線が引かれます。

<p>下線を引くテキスト：<u>下線</u></p>

もしくはCSSで以下のように書くことも可能です。

<style>
  .underline {
    text-decoration: underline;
  }
</style>

<p class="underline">下線を引くテキスト：下線</p>

下線のデザイン：種類、太さ、色の変更

CSSを用いると、下線の種類、太さ、色を自由に変更できます。

たとえば、text-decorationプロパティを用いて下線の種類を指定可能です。

colorプロパティを用いて下線の色を変更し、border-widthプロパティで太さを指定することも可能です。

<style>
  .underline {
    text-decoration: underline dotted; /* 下線の種類を点線に設定 */
    text-decoration-color: red; /* 下線の色を赤に設定 */
    text-decoration-thickness: 2px; /* 下線の太さを2pxに設定 */
  }
</style>

<p class="underline">下線を引くテキスト：下線</p>

ハイパーリンクの下線削除

通常、HTMLではハイパーリンクに自動的に下線が引かれます。

しかし、CSSを用いると、この下線を削除することも可能。

そのためには、aタグに対してtext-decorationプロパティをnoneに設定します。

<style>
  a {
    text-decoration: none; /* ハイパーリンクの下線を削除 */
  }
</style>

<a href="#">ハイパーリンク</a>

CSSでの下線のデザイン方法

次に、CSSを用いて下線を更にデザインする方法を解説します。

これらのテクニックを学ぶことで、あなたのウェブページは更に洗練された見た目になるでしょう。

• 下線の色付け
• 点線の作成
• 下線の太さ調整
• 二重線の作成
• 下線の位置調整
• マーカー風の下線
• 波線型の下線

下線の色付け

HTMLで作成した下線の色を変更するには、CSSのtext-decoration-colorプロパティを用います。

このプロパティに色の値を指定することで、下線の色をカスタマイズすることが可能です。

例えば、下線を赤色にするには次のように指定します。

a {
  text-decoration-color: red;
}

点線の作成

下線を点線にするには、CSSのtext-decoration-styleプロパティにdottedを指定します。

これにより通常の直線ではなく、点線を表示できるようになるのです。

点線の下線を適用するには次のように指定します。

a {
  text-decoration-style: dotted;
}

ほかにも以下のようなものから選べます。

値	説明
solid	下線を実線で表示します。
double	下線を二重線で表示します。
dotted	下線を点線で表示します。
dashed	下線を破線で表示します。
wavy	下線を波線で表示します。
initial	ブラウザのデフォルトの下線スタイルを使用します。
inherit	親要素のtext-decoration-styleの値を継承します。

下線の太さ調整

下線の太さを調整するには、新しいCSSプロパティtext-decoration-thicknessを使用します。

このプロパティに値を指定することで、下線の太さを調節。

たとえば、下線の太さを2pxにするには次のようにしてください。

a {
  text-decoration-thickness: 2px;
}

二重線の作成

二重の下線を作成するには、CSSのtext-decoration-styleプロパティにdoubleを指定します。

一本の直線ではなく、二重の直線を下線として表示することが可能なのです。

二重線の下線を適用するには次のように指定します。

a {
  text-decoration-style: double;
}

下線の位置調整

下線の位置を調整するには、CSSのtext-underline-positionプロパティを使用します。

このプロパティにunderまたはoverを指定することで、下線の位置をテキストの下部または上部に調節することが可能になります。

下線をテキストの上部に表示するには次のように指定します。

a {
  text-underline-position: over;
}

マーカー風の下線

特定のテキストをマーカーで引いたように見せるためには、CSSのbackground-colorプロパティを使用します。

この方法では、下線ではなくテキストの背景色を変更することで、マーカーで引かれたような効果を作成することが可能です。

例えば、黄色のマーカーで引かれたように見せるためには、次のように指定します。

span {
  background-color: yellow;
}

した半分だけに引きたい場合は以下のように少し複雑になります。

.marker-highlight {
  position: relative;
}

.marker-highlight::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: yellow;
  z-index: -1;
}

波線型の下線

波線型の下線を作成するには、CSSのtext-decoration-styleプロパティにwavyを指定します。

一本の直線ではなく、波線型の下線が表示されるのです。

波線型の下線を適用するには次のように指定します。

a {
  text-decoration-style: wavy;
}

これらの方法を組み合わせることで、より洗練された、独自の下線スタイルを作成することが可能になります。

これらの方法を試して、自分のウェブページに最適なスタイルを見つけてみてください。

下線の削除

下線を削除する方法を具体的にご紹介します。

一部の場合、下線は必要ない、または視覚的に邪魔になることがあります。

• 段落すべての下線を消す
• 一部の下線を消す

段落すべての下線を消す

ページ内の全ての段落(<p>タグ)から下線を削除したい場合、次のようなCSSスタイルを適用しましょう。

p {
    text-decoration: none;
}

このコードを適用すると、全ての段落が下線なしで表示されます。

一部の下線を消す

タグ全体ではなく、一部に適用したい場合は、CSSクラスを使用すると良いでしょう。

例えば、「noline」クラスを作成し、それを下線を削除したいテキストに適用することができます。

.noline {
    text-decoration: none;
}

HTML内で下線を削除したいテキストに対してこのクラスを適用するのです。

<p class="noline">このテキストには下線がありません。</p>

HTMLのアンダーラインタグの利用

ここではHTMLに存在するアンダーラインタグの使い方について説明します。

特定のテキストに直ちに下線を引く際に役立つ<u>タグを利用する方法です。

<u>タグを用いると、以下のようにHTML内で直接下線を引けます。

<p>これは<u>下線が引かれた</u>テキストです。</p>

しかし、<u>タグを使用する際は注意が必要です。

一部のウェブアクセシビリティガイドラインでは、下線付きのテキストはハイパーリンクを示すため、<u>タグの使用は混乱を招く可能性があると指摘されています。

<u>タグはあくまで特殊な状況下や短時間での装飾が必要な場合に限定的に使用し、一般的な下線の使用はCSSのtext-decorationプロパティを利用することがおすすめです。

まとめ

当記事では、以下をお伝えしてきました。

• HTMLとCSSを用いて下線を引く方法
• <u>タグを活用する方法
• 下線のスタイルを変更する方法

これらの知識を活用して、より洗練されたウェブページを作成してみてください。