HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】

初心者向けにHTMLで文字(テキスト)にアンダーラインを付ける方法を解説しています。下線をつけることで文章が読みやすくなり、目立たせることができるはずです。難しい知識は必要ないので、HTML初心者でもぜひ覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLは文字を表示するための言語という印象が強いですが、簡単なデザインならHTMLのみでCSSを使用することなく実現することができます。

今回はその簡単な例として、テキストにアンダーラインを記述する方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

アンダーラインを付けるタグとその書き方

アンダーラインはタグを追加するだけで簡単に記述することができます。

<u>アンダーラインが引かれます。</u>

このようにするとフォントと同じ色のアンダーラインが引かれます。

<u>タグは、<u>内の文字列にアンダーラインを引くという意味のタグなので、見出しなどにもアンダーラインを引くことができます。

<u><h1>見出しにアンダーラインが引かれます。</h1></u>

このようにすると、見出しの下にアンダーラインが引かれます。

<u>タグでも確かに線は引けるのですが、フォントと同じ色の線で太さなども変えることができません。そのため実際のWebデザインで使用するには少し不自由を感じます。

 

そこでアンダーラインを引く時に使用されるのが、spanタグです。

<span style="border-bottom: solid 1px red;">アンダーライン</span>

spanタグはこのようにcssを直接埋め込むことができるので、直感的なHTML記述が可能です。

 

大石ゆかり

HTMLのuタグと、CSSどちらを使ったらいいんですか?

田島悠介

下線を引く場合は、CSSのほうがいいよ。aタグと見た目が似てるから、混同されそうだし。

大石ゆかり

CSSだと、これぞ下線!というふうに表現できるんですか?

田島悠介

出来るよ!では実際に、uタグとcssの場合の下線を書いてみよう!

 

実際に書いてみよう

それでは実際にアンダーラインを記述していきましょう。

まずuタグですが上に挙げた例と同じように文字をuタグで加工だけで実現することができます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <u>アンダーラインが引かれます。</u>
  </body>
</html>


次にspanタグですが、少し太めのアンダーラインを引いてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <span style="border-bottom: solid 5px red;">アンダーライン</span>
  </body>
</html>

文字の下に赤い太線が書かれているのが分かりますね。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

まとめ

今回はHTMLでテキストにアンダーラインをつける方法について解説していきました。書くと分かるように、とても簡単にアンダーラインを引くことができたと思います。

また、spanタグではstyle指定の他にも様々なプロパティを設定することができるので気になる方は調べてみてください。

HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。

 

大石ゆかり

CSSで下線を表現した方が良さそうですね♪でも、spanタグって?

田島悠介

spanタグは、テキストと同じインライン要素なんだ。spanタグ自体に特に意味はなく、単にインライン要素を示すんだ。

大石ゆかり

じゃあ、インライン要素に装飾をしたい場合、spanタグを使うってことですね。

田島悠介

そうだよ♪

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。