CSS プロパティ border-bottom

CSS プロパティ border-bottom：要素の下部にボーダーを設定する

CSS プロパティ border-bottom：要素の下部にボーダーを設定する

border-bottom プロパティは、要素の下側のボーダーのスタイル、幅、色を設定するために使用される CSS のショートハンドプロパティです。

1. 構文と値

border-bottom プロパティは、以下の３つのサブプロパティをまとめて指定することができます。

* `border-bottom-width`: ボーダーの幅を指定します。 * `border-bottom-style`: ボーダーのスタイルを指定します。 * `border-bottom-color`: ボーダーの色を指定します。

1.1 border-bottom-width

border-bottom-width プロパティは、ボーダーの幅を指定します。以下の値を設定することができます。

  • thin: 細いボーダー (通常 1px)
  • medium: 中くらいのボーダー (通常 3px)
  • thick: 太いボーダー (通常 5px)
  • <length>: 長さの値で指定 (px, em, rem など)

1.2 border-bottom-style

border-bottom-style プロパティは、ボーダーのスタイルを指定します。以下の値を設定することができます。

値 説明
none ボーダーを表示しません。
hidden ボーダーを表示しません。（border-collapse: collapse 時の動作が none とは異なります）
dotted 点線を表示します。
dashed 破線を表示します。
solid 実線を表示します。
double 二重線を表示します。
groove 彫り込まれたような効果のボーダーを表示します。
ridge 浮き出たような効果のボーダーを表示します。
inset 要素が埋め込まれているような効果のボーダーを表示します。
outset 要素が浮き出ているような効果のボーダーを表示します。

1.3 border-bottom-color

border-bottom-color プロパティは、ボーダーの色を指定します。以下の値を設定することができます。

  • <color>: 色のキーワード、16進数、RGB、RGBAなどで指定
  • transparent: 透明にします。

1.4 コード例


<style>
.example1 {
  border-bottom: 5px solid blue; 
}

.example2 {
  border-bottom: thick dashed red;
}
</style>

<p class="example1">青い実線のボーダー</p>
<p class="example2">赤い破線のボーダー</p>

2. border-bottom を使用するメリット

border-bottom プロパティを使用するメリットは以下の点が挙げられます。

* 簡潔性: ３つのプロパティをまとめて指定することでコードを簡潔に記述できます。 * 可読性: 特に下側のボーダーのみを設定する場合、コードの可読性が向上します。

3. 使用例と応用

3.1 基本的な例


<style>
.separator {
  border-bottom: 1px solid #ccc;
  margin: 20px 0;
}
</style>

<p>段落1</p>
<div class="separator"></div>
<p>段落2</p>

上記の例では、border-bottom を使用して段落間に水平線を作成しています。

3.2 応用例

* リストの項目間にボーダーを追加する * テーブルのセルに下線を引く * 特定の要素を視覚的に強調する

4. ブラウザの対応状況

border-bottom プロパティは、主要なブラウザで広くサポートされています。ただし、古いバージョンの Internet Explorer では、一部の値が正しく表示されない場合があります。詳しくは、Can I use...などのウェブサイトで対応状況を確認してください。

5. 関連リンク

* border * border-top * border-left * border-right

よくある質問

  1. Q: border-bottom と border の違いは何ですか？
    A: border は、要素のすべてのボーダー (上下左右) をまとめて設定するショートハンドプロパティです。一方、border-bottom は、要素の下側のボーダーのみを設定します。
  2. Q: border-bottom のスタイルを点線に設定するにはどうすればよいですか？
    A: border-bottom-style プロパティに dotted を指定します。例：border-bottom: 1px dotted red;
  3. Q: border-bottom の色を透明にするにはどうすればよいですか？
    A: border-bottom-color プロパティに transparent を指定します。例：border-bottom: 1px solid transparent;