読み込み中...

CSS初心者でもできる!一番下に要素を配置する方法と応用例

CSS 要素固定を徹底解説 CSS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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ページのレイアウトにおいて、より自由な表現が可能になります。

ぜひ、実際にコードを書いて試してみてください。