HTMLでアンダーライン(下線)を引く方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでアンダーライン(下線)を引く方法について、基本的な引き方と線の特徴を指定する引き方に分け、簡単に解説していきます。

基本的な引き方

アンダーラインはCSSのtext-decorationプロパティで引くことができます。

text-decorationプロパティの値をunderlineに設定するとアンダーラインが引かれます。

.txt-underline{text-decoration:underline;}

上記のコードをstyleタグ内に書くことで、txt-underlineのクラスを持つ要素内の文字列にアンダーラインが引けます。

線の特徴を指定する引き方

アンダーラインの特徴を指定するには、border-bottomプロパティを指定します。

border-bottomプロパティの値では、線の種類と太さ、色の順番でアンダーラインの詳細を指定できます。

.bor-underline{border-bottom:solid 1px #000;}

上記のコードをstyleタグ内に書くことで、1ピクセルの太さの黒色の実線をbor-underlineクラスの要素全てに引くことが可能です。

リンクのアンダーラインを消す方法

aタグで囲われた文字列のアンダーラインはtext-decorationプロパティで消すことができます。

aタグのtext-decorationプロパティの値はデフォルトではunderlineとなっているため、これをnoneに変えることで消せます。

a{text-decoration:none;}

上記のコードをstyleタグ内に書くことによって、全てのaタグで囲われたリンクの文字列のアンダーラインを消すことが可能となります。