CSSでアンダーバーを作る方法と使い方・対処法を徹底解説！

はじめに

CSSはWebデザインに欠かせない技術のひとつで、HTMLとともにウェブページの見た目を整えることができます。

CSSを使うことで、フォントや背景色、レイアウトなどを自由自在にカスタマイズできるため、デザイン性の高いウェブページを作ることができます。

その中でも、アンダーバーはテキストの下線としてよく使われます。

しかし、CSSでアンダーバーを作る方法がわからない初心者の方も多いのではないでしょうか。

本記事では、CSSでアンダーバーを作る方法と使い方、対処法について詳しく解説します。

さらに、応用例とサンプルコードも紹介するので、ぜひ最後までご覧ください。

●CSSでアンダーバーを作る方法

まずは、CSSでアンダーバーを作る方法について解説します。

アンダーバーを作る方法はいくつかありますが、ここでは主な方法を紹介します。

1.text-decorationプロパティを使う方法

text-decorationプロパティは、テキストに下線を引くことができるプロパティです。

下線のスタイルを指定することができるため、アンダーバーのような見た目にすることができます。

p {
  text-decoration: underline;
}

上記のコードでは、p要素内のテキストに下線を引くスタイルを適用しています。

text-decorationプロパティの値に「underline」を指定することで、下線を引くことができます。

2.border-bottomプロパティを使う方法

border-bottomプロパティは、要素の下部に線を引くことができるプロパティです。

下線の太さやスタイル、色を指定することができるため、アンダーバーのような見た目にすることができます。

p {
  border-bottom: 1px solid black;
}

上記のコードでは、p要素の下部に1ピクセルの黒色の実線を引くスタイルを適用しています。

border-bottomプロパティの値に、線の太さやスタイル、色を指定することで、アンダーバーのような見た目にすることができます。

3.::after擬似要素を使う方法

::after擬似要素は、要素の中身の後ろに内容を追加することができる擬似要素です。

この擬似要素を使うことで、アンダーバーを作ることができます。

p::after {
  content: "";
  display: block;
  border-bottom: 1px solid black;
}

上記のコードでは、p要素の中身の後ろに、高さ0のブロック要素を追加して、その下部に1ピクセルの黒色の実線を引くスタイルを適用しています。

擬似要素のcontentプロパティには空の文字列を指定することで、要素の中身の後ろに何も表示しないようにしています。

これらの方法を組み合わせることで、アンダーバーのスタイルを自由自在にカスタマイズすることができます。

●CSSでアンダーバーの使い方

次に、CSSでアンダーバーの使い方について解説します。

アンダーバーは、リンクや強調したいテキストなど、重要な情報を示すためによく使われます。

1.リンクのアンダーバー

リンクにアンダーバーをつけることで、ユーザーにクリックできることを示すことができます。

a {
  text-decoration: underline;
}

上記のコードでは、a要素に下線を引くスタイルを適用しています。

これにより、リンクにアンダーバーがつくようになります。

2.強調したいテキストのアンダーバー

特定のテキストにアンダーバーをつけることで、強調したい部分を目立たせることができます。

.emphasis {
  text-decoration: underline;
}

上記のコードでは、クラス名が「emphasis」の要素に下線を引くスタイルを適用しています。

これにより、クラス名が「emphasis」の要素内のテキストにアンダーバーがつくようになります。

●CSSでアンダーバーの対処法

アンダーバーは、本来はテキストの下線として使われるため、文字列にアンダーバーが含まれると、見た目が混乱することがあります。

そのため、アンダーバーの対処法について解説します。

1.エスケープシーケンスを使う方法

エスケープシーケンスを使うことで、アンダーバーを含む文字列に対して、アンダーバーを無効化することができます。

p {
  content: "This is an example of escaping an underscore: \_";
}

上記のコードでは、p要素内に、アンダーバーを含む文字列を表示するスタイルを適用しています。

アンダーバーの前にバックスラッシュをつけることで、アンダーバーを無効化しています。

2.別の記号に置き換える方法

アンダーバーを別の記号に置き換えることで、見た目の混乱を防ぐことができます。

p {
  content: "This is an example of replacing an underscore with a hyphen: -";
}

上記のコードでは、p要素内に、アンダーバーをハイフンに置き換えた文字列を表示するスタイルを適用しています。

アンダーバーを置き換える記号は、状況に応じて適切なものを選びます。

●CSSでアンダーバーの応用例

最後に、CSSでアンダーバーを使った応用例を紹介します。

1.タブのアンダーバー

タブの上部にアンダーバーをつけることで、アクティブなタブを強調することができます。

.tabs {
  display: flex;
  justify-content: space-between;
}

.tab {
  position: relative;
  padding: 10px;
}

.tab.active::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: black;
}

上記のコードでは、クラス名が「tabs」の要素内に、クラス名が「tab」の要素を複数配置し、flexboxを使って等間隔に配置しています。クラス名が「tab」の要素は、positionプロパティを「relative」に設定しています。

アクティブなタブには、クラス名が「active」が付与されるようにしています。

クラス名が「active」が付与された要素には、::after擬似要素を使って下線を引くスタイルを適用しています。

下線は、要素の下部に100%の幅を持つブロック要素を配置して、その下に線を引くことで表現しています。

2.テキスト入力欄のアンダーバー

テキスト入力欄にアンダーバーをつけることで、入力欄の境界線を明確にすることができます。

.input {
  border: none;
  border-bottom: 1px solid black;
  padding: 5px;
}

上記のコードでは、クラス名が「input」の要素に、下部に1ピクセルの黒色の実線を引くスタイルを適用しています。

borderプロパティを「none」に設定することで、上部・下部・左右の境界線を非表示にし、border-bottomプロパティで下部に線を引くことで、アンダーバーを表現しています。

まとめ

CSSでアンダーバーを作る方法や使い方、対処法について解説しました。

アンダーバーは、テキストの下線として使われるため、Webデザインには欠かせない要素のひとつです。

本記事で紹介した方法を使って、自分だけのアンダーバーを作ってみて下さい。