配置位置の設定に関わるbottomプロパティ。
他にも位置を決めるプロパティがありますが、bottomプロパティは下からの配置位置の設定に使われます。
ですが、
と悩みを抱く方もいるでしょう。
そこで今回は、bottomプロパティの
・応用的な使い方
について説明していきます。
目次
bottomプロパティとは
bottomプロパティの読み方
bottomは、「ボトム」と読みます。
下部や底面という単語で、CSSで使われるbottomプロパティも同様の使い方をします。
bottomプロパティの説明
bottomプロパティとは
ものです。
divタグなどの「ボックス要素」に対して配置の距離をbottomプロパティで指定していきます。
ですが、距離を指定する前に、positionプロパティという設定も必要になります。
positionプロパティの設定がない状態で、bottomプロパティの設定をしても、サイトに反映されません。
なぜpositionプロパティが必要になるのか、bottomプロパティの関係性についてこの記事内で詳しく説明していきます。
bottomプロパティで利用できる値
bottomプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| length | 数値にpx、emの単位を入れて指定をします。細かい数値を設定できるため、距離を調整するときなど、使用する機会が多くあります。 |
| percentage | %を指定する値です。bottomプロパティの場合、ボックス要素の高さに応じて変わります。 |
| auto | bottomプロパティの値をautoにした場合、topプロパティの値によって、位置が変わります |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
bottomプロパティの基本的な使い方
bottomプロパティの使い方
bottomプロパティの使い方を理解するために、設定したコードを見ていきましょう。
See the Pen
bottomプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
bottomプロパティは、ボックス要素の位置を下からの距離を決めるために使います。移動する距離は数値と値によって変わります。
ですが、bottomプロパティで移動させる前に、どこから動かすのか基準となる位置を決めなければいけません。
動かす基準となる位置をpositionプロパティの値で指定していきます。
なので、bottomプロパティを設定する前に、まず基準位置を指定するpositionプロパティが必要になることを覚えておきましょう。
bottomプロパティの設定で移動する距離を決める
「bottomプロパティの使い方」で紹介しましたコードで、bottomプロパティの設定をしている部分を抜粋したものが以下のコードです。
以下のコードのpositionプロパティとbottomプロパティの設定は、どのような意味があるのか詳しく説明していきます。
|
1 2 3 4 5 6 7 8 |
.box2{ width:200px; height:50px; background-color:#000000; color:#ffffff; position:absolute; bottom:10px; } |
bottomプロパティの設定に必要になるpositionプロパティは、「absolute」という値を指定しています。
absoluteは、親ボックス要素に対してpositionプロパティのstatic以外の設定がなければ、ウィンドウ全体の左上が基準の位置となります。
positionプロパティをabsoluteにして、bottomプロパティの値を10pxと指定をした場合ボックス要素の「.box2」は、ウィンドウの下から10px移動します。
bottomプロパティで指定する値を変えると、下から移動する距離が変えられます。
親ボックス要素にpositionプロパティのstatic以外を設定した時は、absoluteの基準位置が親ボックス要素の左上になります。
bottomプロパティの応用的な使い方
bottomプロパティでウィンドウの下にぴったり固定
positionプロパティとbottomプロパティの値次第で、ウィンドウの下に固定することが可能です。
実際にウィンドウの下に固定したコードを以下に記載します。
See the Pen
bottomプロパティでウィンドウの下に固定 by 吉井大輝 (@DaiW)
on CodePen.
まず固定するためには、positionプロパティの「fixed」という値が必要です。
fixedは、ウィンドウの左上が基準位置となりますが、設定した位置に固定する機能も合わせ持っています。
つまり、positionプロパティにfixedを指定すると、スクロールしたとしても設定した位置から動けないように固定できるというです。
次に、ボックス要素をウィンドウの下にぴったりと固定するには、fixedに加えてbottomプロパティの値を「0」にします。
値を0以外にしてしまうと下にぴったり固定できないので、設定するとき気をつけてください。
まとめ
いかがでしたでしょうか？
今回は、bottomプロパティの基本的な使い方と応用的な使い方についてご紹介しました。
bottomプロパティに必要なポイントを説明しているので、記述したコードを参考にすれば、設定の役に立つでしょう。
ぜひbottomプロパティの設定をしてみてください。
参考文献：MDN web docs｜bottomプロパティ :CSSのプロパティで、位置指定要素positioned elementsの垂直位置の設定に関与します。
