CSSのbottomプロパティ：要素の垂直位置を正確に制御する
`bottom`は、CSSのプロパティの一つで、位置決めされた要素（`position`プロパティの値が`relative`、`absolute`、`fixed`、`sticky`のいずれかである要素）の下端を、その包含ブロックの下端からどれだけ離すかを指定するために使用します。
1. CSSのbottomプロパティとは？
`bottom`プロパティは、要素の下端の位置を制御するために使用します。ただし、このプロパティは、位置決めされた要素にのみ効果があります。 つまり、`position`プロパティの値が`static`（デフォルト値）以外の要素に対してのみ有効です。
`bottom`プロパティは、以下のような場合に役立ちます。
- 要素の垂直位置を微調整する場合
- オーバーレイやポップアップウィンドウを作成する場合
- 要素にアニメーション効果を実装する場合
2. bottomプロパティの値
`bottom`プロパティには、以下の値を設定することができます。
| 値 | 説明 |
|---|---|
<length> |
要素の下端と包含ブロックの下端との間の距離を、px、em、remなどの具体的な長さで指定します。 |
<percentage> |
要素の下端と包含ブロックの下端との間の距離を、包含ブロックの高さに対するパーセンテージで指定します。 |
auto |
ブラウザが他のプロパティに基づいて`bottom`の値を自動的に計算します。 |
2.1. <length>
`bottom`プロパティに具体的な長さを指定する場合は、px、em、remなどの単位を使用します。
<style>
.container {
position: relative;
height: 200px;
background-color: lightblue;
}
.box {
position: absolute;
bottom: 20px; /* 下端を包含ブロックの下端から20px上に配置 */
left: 20px;
width: 100px;
height: 50px;
background-color: red;
}
</style>
2.2. <percentage>
`bottom`プロパティにパーセンテージを指定する場合は、包含ブロックの高さを基準として計算されます。
<style>
.container {
position: relative;
height: 200px;
background-color: lightblue;
}
.box {
position: absolute;
bottom: 10%; /* 下端を包含ブロックの高さの10%上に配置 */
left: 20px;
width: 100px;
height: 50px;
background-color: red;
}
</style>
2.3. auto
`bottom`プロパティに`auto`を指定した場合、ブラウザは他のプロパティに基づいて`bottom`の値を自動的に計算します。
3. bottomプロパティと異なるposition値との相互作用
`bottom`プロパティは、`position`プロパティの値によって、その動作が異なります。
3.1. position: relative;
`position: relative;`の場合、`bottom`プロパティは、要素の本来の位置からのオフセットを指定します。
<style>
.box {
position: relative;
bottom: 20px; /* 元の位置から下に20px移動 */
width: 100px;
height: 50px;
background-color: red;
}
</style>
3.2. position: absolute;
`position: absolute;`の場合、`bottom`プロパティは、最も近い位置決めされていない祖先要素からのオフセットを指定します。
<style>
.container {
position: relative;
height: 200px;
background-color: lightblue;
}
.box {
position: absolute;
bottom: 20px; /* 包含ブロックの下端から20px上に配置 */
left: 20px;
width: 100px;
height: 50px;
background-color: red;
}
</style>
3.3. position: fixed;
`position: fixed;`の場合、`bottom`プロパティは、ビューポートからのオフセットを指定します。
<style>
.box {
position: fixed;
bottom: 20px; /* ブラウザウィンドウの下端から20px上に配置 */
left: 20px;
width: 100px;
height: 50px;
background-color: red;
}
</style>
3.4. position: sticky;
`position: sticky;`の場合、`bottom`プロパティは、スクロール位置に基づいて、`relative`と`fixed`を切り替えます。
<style>
.container {
height: 300px;
}
.box {
position: sticky;
top: 20px; /* スクロール位置に関わらず、画面上部から20pxの位置に固定 */
width: 100px;
height: 50px;
background-color: red;
}
</style>
4. ブラウザの互換性
`bottom`プロパティは、主要なブラウザすべてでサポートされています。ただし、古いブラウザの中には、一部のプロパティ値がサポートされていない場合があります。詳細については、Can I useをご参照ください。
5. まとめ
`bottom`プロパティは、位置決めされた要素の下端の位置を制御するために使用します。`bottom`プロパティを`position`プロパティと組み合わせて使用することで、要素を思い通りに配置することができます。
関連するQ&A
Q1: `bottom`プロパティと`top`プロパティを同時に指定できますか？
A: はい、指定できます。ただし、`position`プロパティの値によっては、両方のプロパティが有効にならない場合があります。例えば、`position: absolute;`の場合、`top`と`bottom`の両方を指定すると、`bottom`プロパティが無視されます。
Q2: `bottom`プロパティが効かないのですが、なぜですか？
A: `bottom`プロパティは、位置決めされた要素にのみ効果があります。要素に`position`プロパティが設定されているか、`static`以外の値が設定されているかを確認してください。
Q3: `bottom`プロパティを使って、フッターを画面下部に固定したいのですが、どのようにすればよいですか？
A: フッター要素に`position: fixed;`と`bottom: 0;`を指定することで、フッターを画面下部に固定することができます。