CSS「border-bottom-width」プロパティを使いこなして、洗練されたWebサイトを構築しよう

border-bottom-widthプロパティは、要素の下部境界線の幅を設定するために使用されます。これは、要素の外観を制御し、セクションを区切ったり、視覚的な興味を引いたりするのに役立つ便利なツールです。

文法

border-bottom-width: <値>;

値

border-bottom-widthプロパティには、以下の値を指定できます。

キーワード
以下のいずれかのキーワードを使用できます。
- thin：細い境界線を設定します。
- medium：中程度の太さの境界線を設定します。
- thick：太い境界線を設定します。
- initial：初期値に戻します。
- inherit：親要素の値を継承します。
長さ
ピクセル、em、remなどの長さ単位で指定できます。

例

以下の例では、要素の下部境界線を 2 ピクセルの太さの黒線に設定します。

.element {
  border-bottom-width: 2px solid black;
}

境界線の色は、border-colorプロパティで設定できます。
境界線のスタイルは、border-styleプロパティで設定できます。有効な値は、none、solid、dashed、dottedなどです。
border-bottom-widthプロパティは、borderプロパティと組み合わせて使用できます。borderプロパティを使用すると、境界線のスタイル、色、幅を一度に設定できます。

例 1：境界線の太さをピクセル単位で設定する

.element {
  border-bottom-width: 5px solid red; /* 下部境界線を5ピクセルの太さの赤線に設定 */
}

この例では、.element クラスを持つすべての要素の下部境界線を、5ピクセルの太さの赤線に設定します。

例 2：境界線の太さをキーワードで設定する

.element1 {
  border-bottom-width: thin red; /* 下部境界線を細い赤線に設定 */
}

.element2 {
  border-bottom-width: medium blue; /* 下部境界線を中程度の太さの青線に設定 */
}

.element3 {
  border-bottom-width: thick green; /* 下部境界線を太い緑線に設定 */
}

この例では、3つの要素それぞれに異なる太さの境界線を設定しています。

.element3 には、thick キーワードを使用して太い緑色の境界線が設定されます。
.element2 には、medium キーワードを使用して中程度の太さの青い境界線が設定されます。
.element1 には、thin キーワードを使用して細い赤い境界線が設定されます。

例 3：`border`プロパティと組み合わせて境界線を設定する

.element {
  border: 2px solid black; /* 下部境界線を2ピクセルの太さの黒線に設定 */
}

この例では、.element クラスを持つすべての要素に、2ピクセルの太さの黒線で構成される境界線が設定されます。borderプロパティは、border-bottom-width、border-style、border-colorプロパティのショートカットとして機能します。

.element {
  border-bottom-width: 3px; /* 下部境界線の幅を3ピクセルに設定 */
  border-style: dashed; /* 境界線のスタイルを破線に設定 */
  border-color: #f00; /* 境界線の色を赤に設定 */
}

この例では、.element クラスを持つすべての要素の下部境界線に、以下の設定が適用されます。

色は赤
スタイルは破線
幅は3ピクセル

box-shadow プロパティを使用する

box-shadow プロパティは、要素の周りに影を落とす効果を作成するために使用できます。この影を使用して、下部境界線をシミュレートすることができます。

.element {
  box-shadow: 0 0 5px black; /* 下部に5ピクセルの黒い影を落とす */
}

この例では、.element クラスを持つすべての要素の下部に、5ピクセルの黒い影が落とされます。影の色やぼかし具合を調整することで、様々な外観を作成することができます。

border-image プロパティを使用する

border-image プロパティは、画像を使用して要素の境界線を作成することができます。この方法を使用すると、より複雑で装飾的な下部境界線を作成することができます。

.element {
  border-image: url('border.png') 1 1 repeat; /* 'border.png' 画像を使用して境界線を作成 */
}

この例では、.element クラスを持つすべての要素の境界線に border.png 画像が繰り返し表示されます。画像のサイズや繰り返し方法を調整することで、様々な外観を作成することができます。

偽要素を使用する

CSS 偽要素を使用して、要素の下に疑似的な境界線を作成することができます。この方法は、柔軟性とコントロール性に優れています。

.element::after {
  content: '';
  display: block;
  height: 5px;
  width: 100%;
  background-color: black; /* 下部に5ピクセルの黒い境界線を作成 */
}

この例では、.element クラスを持つすべての要素の下に、5ピクセルの黒い疑似境界線が作成されます。疑似要素のスタイルを調整することで、様々な外観を作成することができます。

CSS「border-bottom-width」プロパティを使いこなして、洗練されたWebサイトを構築しよう

例 1：境界線の太さをピクセル単位で設定する

例 2：境界線の太さをキーワードで設定する

例 3：borderプロパティと組み合わせて境界線を設定する

box-shadow プロパティを使用する

例 3：`border`プロパティと組み合わせて境界線を設定する