システム開発
2024.03.11
HTMLで下線を引く方法
Webページで文字に下線を引くことは、重要部分を目立たせる・リンクを示すなど様々な場面で役立ちます。
HTMLで下線を引く方法はいくつかありますが、ここでは初心者でも簡単にできる2つの方法を紹介します。
この記事でわかること
- <u>タグを使った下線の引き方
- CSSを使った下線の引き方
1. <u>タグを使う
<u>タグは、文字に下線を引くためのタグです。
使い方は簡単で、下線を引きたい文字を<u>タグで囲むだけです。
[HTML]
<p>これはデフォルトの下線です。<u>下線付きの文字</u>です。</p>
このコードを実行すると、以下のようになります。
| これはデフォルトの下線です。下線付きの文字です。 |
注意点
- <u>タグは、下線の色や太さを変更することはできません。
- <u>タグは下線を引くために使用されますが、アクセシビリティの観点から意味のある下線（例えば強調や特定の文脈での使用）に限定して使用しましょう。
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の使用を検討しましょう。
