HTML・CSSで下線を引く方法！デザインの変え方や注意点もご紹介

HTML・CSSを使うことで、簡単に文字に下線を引くことができます。

そこで今回は、

・HTMLだけで下線を引く方法
・CSSで下線を引く方法
・下線のデザインを変える方法

をご紹介します。

・文章の中で目立たせたい場所がある
・おしゃれな見た目に変更したい

という時に、ぜひ参考にしてみてください。

HTMLで文字に下線を引く方法

HTMLに<u>タグを追加するだけで簡単に下線を引くことができます。

HTML

表示イメージ

<u>〜</u>の間の文字全てに下線が引かれます。

とても簡単ですね。

ただし、<u>タグは

・綴りエラーの通知
・中国語の文字列の固有名詞記号の記述
・その他の形の注釈

に使われるという意味のものです。

・強調させたい場合
・見た目を変えたいだけの場合

は、<em>タグや<span>タグを使用し、CSSで見た目を変更することをオススメします。

CSSで文字に下線を引く方法

それでは、<em>タグや<span>タグを使った時に見た目を変更する方法をご紹介します。

HTMLにCSSを直接書く

HTMLファイルに直接CSSを書く場合、下線を引きたいタグの中にCSSを指定します。

まずはシンプルに下線を引くことができる「text-decoration: underline」を使った場合がこちら。

HTML

表示イメージ

下線を引きたい文字を<span>タグや<em>タグで囲い、タグの中にCSSを指定しています。

この方法はHTMLに直接指定するため、どこに下線が引かれたかわかりやすいのが特徴です。

ただし、もし他に同じような下線を引きたい場所があった場合、下線を引きたい場所に毎回同じように長い記述する必要があります。

さらにデザインを変更したくなった場合、タグが使われている全ての箇所を一つずつ修正する必要があるので手間がかかってしまいます。

HTMLにclass名をつけリンクしたCSSファイルからスタイルを指定する

そこで便利なのが、HTMLにclass名を指定し、別のCSSファイルからスタイルを変更する方法です。

HTML

CSS

表示イメージ

class名の「line」は好きな名前を指定できます。

これで、HTMLにCSSを直接書いた場合と同じ見た目になります。

この方法だと、HTMLファイル内で同じclass名を指定した箇所は、CSSファイルを編集するだけで一度にスタイルを変更することができて便利です。

下線のデザインを変える

CSSを使えば下線の見た目を自由に変更できますが、大きく分けて２つの方法があります。それぞれの特徴を把握して、どちらを使うか選びましょう。

・text-decorationの場合

シンプルな下線が引けます。「text-decoration」で下線を引いた場合、自動で文字色と同じ色になります。また、線の太さを変えることはできません。

・border-bottomの場合

borderは要素の周りに線を引くプロパティです。そのため、「border-bottom」というプロパティ名を使うことで要素の下に下線を引くことができるようになります。「border-bottom」を使うと、線の種類・太さ・色で下線のデザインを細かく指定できます。

下線の色を変えてみる

「border-bottom」プロパティを使って下線の色を変えてみましょう。「border-bottom」は、「種類・太さ・色」をまとめて１行で指定することができます。

HTML

CSS

表示イメージ

とすると、「#ff0000」が線の色になります。この場合、細い赤の実線が文字の下に引かれます。

下線の太さを変えてみる

太い線を引きたい時は、

HTML

CSS

表示イメージ

のように、「◯px」で線の太さを指定しましょう。数字に合わせて太さが変わります。

下線を点線にしてみる

下線を点線にしたい時は、

HTML

CSS

表示イメージ

「dotted」と記述しましょう。実線が点線に変わります。

まとめ

以上、HTML・CSSを使って文字の下に下線を引く方法をご紹介しました。

HTML・CSSのタグを使えば簡単に文字に下線が引けますね。

・文章を強調したい時
・見た目を変更したい時

など場面に合わせてHTML・CSSを使い、わかりやすいWebサイト作りを目指しましょう。