デジタルトレンドナビ
システム開発

2024.03.11

HTMLで下線を引く方法

HTMLで下線を引く方法

Webページで文字に下線を引くことは、重要部分を目立たせる・リンクを示すなど様々な場面で役立ちます。

HTMLで下線を引く方法はいくつかありますが、ここでは初心者でも簡単にできる2つの方法を紹介します。

この記事でわかること

  • <u>タグを使った下線の引き方
  • CSSを使った下線の引き方

1. <u>タグを使う

1. <u>タグを使う

<u>タグは、文字に下線を引くためのタグです。

使い方は簡単で、下線を引きたい文字を<u>タグで囲むだけです。

[HTML]

<p>これはデフォルトの下線です。<u>下線付きの文字</u>です。</p>

このコードを実行すると、以下のようになります。

これはデフォルトの下線です。下線付きの文字です。

注意点

  • <u>タグは、下線の色や太さを変更することはできません。
  • <u>タグは下線を引くために使用されますが、アクセシビリティの観点から意味のある下線(例えば強調や特定の文脈での使用)に限定して使用しましょう。

2. CSSを使う

2. CSSを使う

CSSを使用すると、下線の色や太さを自由に設定することができます。

[HTML]

<p>これは下線付きのテキストです。<span class="underline">下線を引く部分</span>です。</p>

[CSS]

.underline {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

このコードを実行すると、以下のようになります。

これは下線付きのテキストです。下線を引く部分です。

使用可能なCSSプロパティ

  • text-decoration:下線の種類を指定します。
  • text-decoration-color:下線の色を指定します。(上線や打ち消し線などの色指定にも使用されます)
  • text-decoration-style:下線のスタイルを指定します。
  • text-decoration-thickness:下線の太さを指定します。

注意点

  • text-decorationプロパティには、underline以外にも様々な値を設定できます。
  • 初心者の場合は、まずは<u>タグを使って下線を引くことをおすすめします。

まとめ

まとめ

Webページでの下線の引き方には複数の方法があります。初心者にも扱いやすい2つの方法をこの記事では紹介しました。

初心者にはまずはシンプルな<u>タグの使用から始めることをおすすめしますが、さらなるスタイルの制御が必要な場合はCSSの使用を検討しましょう。

投稿者

  • デジタルトレンドナビ編集部

    システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション(DX)など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。