CSSのbottomで要素の垂直位置を調整し、レイアウトを制御する方法をわかりやすく解説

2024.09.13
スポンサーリンク

bottomプロパティは、要素を親要素の底部（下）からどれくらい離すかを指定するためのプロパティです。このプロパティは、positionがrelative、absolute、またはfixedに設定されている要素に対してのみ適用されます。

スポンサーリンク

bottomプロパティの値とその効果

  • 数値(px, %, etc.): 親要素の底部から指定した距離だけ離して配置します。
  • auto: ブラウザが自動的に要素の位置を決定します（通常はデフォルトの位置）。
  • 0: 要素を親要素の底部にぴったりと配置します。

注意点と関連情報

bottomプロパティは、要素の配置を調整する際に重要な役割を果たしますが、要素にpositionがstaticに設定されている場合は無効になります。relativeやabsoluteといった配置を変更するプロパティと一緒に使用することが前提です。また、パーセンテージで指定する場合は、親要素の高さに対して割合が適用されます。

bottomが効かない理由として考えられること

positionプロパティがstaticに設定されている

bottomはpositionプロパティがrelative、absolute、またはfixedに設定されている場合にのみ機能します。デフォルトのposition: static;ではbottomは無視されます。
対策：positionをrelative、absolute、またはfixedに設定し、要素が上下方向に移動できるようにします。例えば、position: relative;を設定します。

要素がコンテナ内にない

bottomは親要素がposition: relative;などに設定されている場合、相対的に動作します。親要素が正しく設定されていないと期待通りに動作しません。
対策：親要素にposition: relative;などを設定して、要素の配置が相対的に計算されるようにします。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        height: 300px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        position: relative;
        background-color: #f9f9f9;
    }
    .css-sample-item {
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
        color: white;
        text-align: center;
        line-height: 100px;
        font-size: 16px;
        position: absolute;
    }

bottom: 50px

bottom: 50pxは、要素を親要素の底部から50px離して配置します。この例では、緑色の要素が下から50pxの位置に配置されています。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-bottom-50px">Bottom: 50px</div>
    </div>

CSSコード

.css-sample-bottom-50px {
    bottom: 50px;
}

表示結果

Bottom: 50px

bottom: 0

bottom: 0は、要素を親要素の底部にぴったり配置します。この例では、緑色の要素が親要素の下端に接して配置されています。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-bottom-0">Bottom: 0</div>
    </div>

CSSコード

.css-sample-bottom-0 {
    bottom: 0;
}

表示結果

Bottom: 0

bottom: auto

bottom: autoは、要素の位置をブラウザが自動的に決定する設定です。通常は、要素のデフォルトの位置に配置されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-bottom-auto">Bottom: auto</div>
    </div>

CSSコード

.css-sample-bottom-auto {
    bottom: auto;
}

表示結果

Bottom: auto

bottom: 20%

bottom: 20%は、親要素の高さに対して20%の位置に要素を配置します。親要素の高さが変わると、配置される位置も変わります。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-bottom-20">Bottom: 20%</div>
    </div>

CSSコード

.css-sample-bottom-20 {
    bottom: 20%;
}

表示結果

Bottom: 20%

まとめ

bottomプロパティを使用することで、要素を親要素の下端からの距離を柔軟に指定することができます。特にabsoluteやfixedレイアウトでの配置に便利です。パーセンテージ指定を活用すると、親要素のサイズに応じて位置が変わるレスポンシブなデザインを実現できます。

スポンサーリンク