bottom
ボトム(レイアウトとボックスモデル)
意味 下辺の位置
bottomとは?
bottomプロパティは、絶対位置または相対位置に配置された要素の下辺の位置を指定するために使用します。このプロパティは、要素がpositionプロパティで'absolute', 'relative', 'fixed', 'sticky'のいずれかに設定されている場合にのみ動作します。
bottomの具体的な使い方
絶対位置で下からの距離を指定する例
<style>
#example {
position: absolute;
bottom: 20px;
background-color: tomato;
}
</style>
<div id='example'>
この要素は親要素の下端から20ピクセル上にあります。
</div>
idが'example'の要素を親要素の下端から20ピクセル上に配置します。
固定位置でフッターを画面下部に配置する例
<style>
.sticky-footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
<div class="sticky-footer">
この固定フッターは常に画面の下部に表示されます。
</div>
画面下部に固定されたフッターを作成する例。
bottomに関するよくある質問
CSSのbottomについても学べる書籍の紹介
「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか?
プログラミング単語帳には、CSSのbottomやmargin-top、margin-bottom、padding-top、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。
よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。
HTML編、CSS編、JavaScript編、PHP編、Ruby編、その他単語編の6シリーズ分が公式ストアにて販売中です。気になった方はぜひ購入してみてください。
CSSを学べる「プログラミング単語帳」アプリ
プログラミング単語帳がアプリになりました!CSSはもちろん、10種類のプログラミング言語の中から、よく使われる単語をスマホで学習できます。
収録単語は2,000単語以上!
現在は、HTML、CSS、JavaScirpt、PHP、Laravel、Ruby、Python、MySQL、Linux、など10カテゴリーの単語帳が1つのアプリに収録されています。
いつでも、どこでも、隙間時間を有効活用して、プログラミングを効率的に学べるので、ぜひダウンロードしてみてください。
2024年7月アップデート情報:「Laravel」カテゴリーが追加されましました!
2024年8月アップデート情報:「MySQL」「Linux」カテゴリーが追加されましました!