はじめに
Webページを作る際に欠かせないのがCSSです。
しかし、初心者にとってはCSSの使い方がわからなかったり、イメージ通りに表示されなかったりと、とっつきにくいと感じる方も多いのではないでしょうか。
本記事では、CSS初心者でもわかるように、一番下に要素を配置する方法と応用例を紹介します。
最短コードもあるので、使い方をしっかり覚えてスキルアップしましょう！
●一番下に要素を配置する方法
Webページをデザインする際、特定の要素をページの一番下に配置する必要がしばしばあります。
よく見る例として、フッターの情報や著作権表示がこれに該当します。
それを実現する方法の一つとして、CSSのpositionプロパティを使用する方法があります。
○画面の一番下に要素を固定する
まず、画面の一番下に要素を固定する方法を見てみましょう。
この場合、画面をスクロールしても要素は常に画面の一番下に表示されます。
.footer-fixed {
position: fixed;
bottom: 0;
}このコードは、position: fixed;というプロパティを用いて、要素をユーザーの画面に固定しています。
このfixedの値は、要素を常に一定の位置に固定するためのものです。
次に、bottom: 0;というプロパティが追加されており、これは要素の下端を画面の下端に合わせる役割を果たします。
したがって、このスタイルを適用した要素は、ユーザーがページをどれだけスクロールしても、常に画面の最下部に表示されることになります。
○親要素に対して一番下に配置する
一方、ある要素の下に別の要素を配置したい、つまり親要素の一番下に子要素を配置したい場合もあります。
この時、親要素の一番下に子要素を配置する方法として、position: absolute;を利用します。
position: absolute;
bottom: 0;このコードの中で、まず親要素にposition: relative;を指定しています。
このプロパティの設定により、子要素の絶対位置の基準点が親要素になります。
次に、子要素にposition: absolute;を指定することで、その要素を親要素からの相対的な位置で配置することが可能になります。
bottom: 0;というプロパティは、子要素の下端を親要素の下端に合わせる役割を果たします。
したがって、このスタイルを適用することで、子要素は親要素の最下部に位置するようになります。
このように、positionプロパティを活用することで、要素をページの特定の位置に配置することができます。
それぞれのケースに応じて、適切な値を選び、ページのデザインやレイアウトを最適化することが可能です。
●応用例
一番下に要素を配置する方法を使った応用例をいくつか紹介します。
【応用例1】フッターの作成
フッターは、Webページの最下部に表示される要素です。
下記のコードを使って、フッターを作成してみましょう。
<footer>
<p>Copyright © 2023 Japan シーモア</p>
</footer>footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}このコードでは、footer要素に対して、position: fixed;とbottom: 0;を適用し、画面の一番下に固定するように指定しています。
また、width: 100%;を指定することで、画面の幅に合わせたフッターを表示するようにしています。
その他にも、背景色、文字色、パディングなどのスタイルを指定しています。
【応用例2】スクロールバーの非表示
スクロールバーを非表示にすることで、Webページがスッキリと見えるようになります。
次のコードを使って、スクロールバーを非表示にしてみましょう。
body {
overflow-y: scroll;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}このコードでは、body要素に対して、overflow-y: scroll;を指定することで、縦方向のスクロールバーを表示するようにしています。
また、scrollbar-width: none;を指定することで、スクロールバーを非表示にします。
ただし、このプロパティは一部のブラウザでしか使えないため、::-webkit-scrollbarを使用して、WebKitベースのブラウザで非表示にするように指定しています。
【応用例3】フッターの高さを可変にする
フッターの高さが可変の場合には、下記のようなコードを使って、上部の要素との間隔を保ちながら、画面の一番下に表示されるようにしてください。
<footer>
<div class="footer-inner">
<p>Copyright © 2023 Your Company</p>
</div>
</footer>footer {
position: absolute;
bottom: 0;
width: 100%;
}
.footer-inner {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}このコードでは、footer要素に対して、position: absolute;とbottom: 0;を指定し、画面の一番下に配置するようにします。
また、width: 100%;を指定することで、画面の幅に合わせたフッターを表示するようにします。
そして、footer要素内に、footer-innerというクラスを持つdiv要素を作成し、その中にフッターの内容を記述します。
footer-inner要素には、背景色、文字色、パディングなどのスタイルを指定しています。
このようにすることで、フッターの高さが可変でも、画面の一番下に表示されるようになります。
まとめ
本記事では、CSS初心者でもわかるように、一番下に要素を配置する方法と応用例を紹介しました。
要素を一番下に配置する方法は、position: fixed;とbottom: 0;を適用する方法と、position: absolute;とbottom: 0;を適用する方法の2つがあります。
また、応用例として、フッターの作成、スクロールバーの非表示、フッターの高さを可変にする方法を紹介しました。
CSSの基礎を学び、この記事で紹介した方法を覚えることで、Webページのレイアウトにおいて、より自由な表現が可能になります。
ぜひ、実際にコードを書いて試してみてください。
