HTML/CSSで下線を引く方法｜アンダーラインはCSSで引こう

ウェブデザインにおいて、テキストの強調や視覚的な装飾を行うために、下線（アンダーライン）はよく利用されます。HTMLとCSSを組み合わせることで、簡単にテキストに下線を追加することができます。

本記事では、HTMLとCSSを使用した下線の引き方について詳しく解説します。

HTMLで下線（アンダーライン）を引く方法

HTMLでは、特定のテキストに下線を引くことが簡単にできます。アンダーラインは通常、リンクを示す際や重要な見出しを強調する場合に使用されます。下線を引くためには、<u>要素を使用します。

例として、以下のようなHTMLコードを見てみましょう。

上記のコードでは、<u>タグで囲まれた「アンダーラインの例」というテキストが、下線付きで表示されます。

<u>要素は非常にシンプルで、既存のテキストに下線を追加する際に便利です。しかし、この方法だと下線のスタイルを詳細に制御することが難しいため、特定のデザインに合わせてカスタマイズしたい場合は、CSSを活用することをお勧めします。

CSSで下線を引く方法

HTMLの<u>要素で下線を引く方法をご紹介しましたが、CSSを使用するとより柔軟で詳細な下線のスタイリングが可能です。CSSを活用することで、下線の色や太さ、破線などを自由に調整できます。

下線を引くためには、text-decorationプロパティを使用します。text-decorationプロパティは、テキストの装飾に関連するさまざまなスタイルを指定するために使われます。下線を引くには、このプロパティに値として「underline」を指定します。

例として、以下のようなHTMLコードを考えてみましょう。

上記のHTMLでは、<p>要素にunderline-textというクラスを指定しました。これに対してCSSで下線を追加するためのスタイルを定義します。

上記のCSSコードでは、.underline-textクラスに対してtext-decoration: underline;というスタイルを適用しています。これにより、指定したテキストに下線が引かれるようになります。

また、text-decorationプロパティには他にも以下のような値を指定することができます。

• none: 下線を引かない（デフォルト）
• underline: 下線を引く
• overline: 上線を引く
• line-through: 取り消し線を引く
• blink: 点滅する下線を引く（一部のブラウザでは非推奨）

CSSで下線の太さや種類を変える方法

CSSを使用すると、下線の太さや種類を簡単に変更することができます。下線は単に直線だけでなく、点線や波線などのさまざまなスタイルを持たせることができます。また、下線の太さも調整することができます。

下線のスタイルを変更するには、text-decoration-styleプロパティを使用します。そして、下線の太さを調整するには、text-decoration-thicknessプロパティを使用します。

例として、以下のようなHTMLコードを考えてみましょう。

上記のHTMLでは、<p>要素にcustom-underlineというクラスを指定しています。これに対してCSSで下線のスタイルと太さをカスタマイズするスタイルを定義します。

上記のCSSコードでは、.custom-underlineクラスに対してtext-decoration-style: dotted;とtext-decoration-thickness: 2px;のスタイルを適用しています。これにより、指定したテキストに2ピクセルの太さの点線の下線が引かれるようになります。

text-decoration-styleプロパティには以下のような値を指定できます。

• solid: 実線の下線を引く
• double: 二重線の下線を引く
• dotted: ドット（点線）の下線を引く
• dashed: ダッシュ（破線）の下線を引く
• wavy: 波線の下線を引く

text-decoration-thicknessプロパティは、下線の太さをピクセルやem（フォントサイズに相対的な単位）で指定します。

例えば、下線を二重線に変更し、太さを4ピクセルにする場合は次のようにします。

CSSを利用して、見栄えの良い下線を実現しましょう。試行錯誤しながら、デザインに合わせたカスタマイズを行ってみてください。

挫折することなくエンジニアを目指すなら

独学？スクール？

これからHTMLやCSSなどといったプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際に学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり