CSS Gridを使ったフッターデザインの作り方

こんにちは、フローです。

前回と前々回の記事では、

CSS Gridを使ってヘッダーとメインコンテンツエリアのデザインを作成しました。

今回は、同じくCSS Gridを使って、ウェブページのフッターデザインを作ります。

初心者の方でも理解できるように、

丁寧に解説しますので、ぜひ挑戦してみてください。

1 フッターとは
- 1.1 CSS Gridの基本
2 フッターデザインの作成
3 まとめ

フッターとは

フッターとは、ウェブページの最下部に表示される領域のことを指します。

通常、フッターにはサイトの基本情報（著作権情報やプライバシーポリシーへのリンクなど）、

サイトマップ、連絡先情報などが配置されます。

フッターはウェブサイトの全ページに共通するため、一貫性を保つことが大切です。

CSS Gridの基本

まず、CSS Gridの基本について簡単に説明します。

CSS Gridは、2次元（行と列）のレイアウトシステムを提供します。

これにより、ウェブページの各セクションを柔軟に配置することが可能になります。

また、レスポンシブデザインにも対応しているため、

さまざまなデバイスサイズに適応するレイアウトを簡単に作成することができます。

フッターデザインの作成

それでは、具体的なフッターデザインの作り方に移りましょう。

今回は、左側に著作権情報、中央にサイトマップ、右側に連絡先情報を配置する、

シンプルなフッターデザインを目指します。

HTML

まず、以下のようにHTMLを記述します。

<footer class="footer">
  <div class="footer-item copyright">© 2023 My Website</div>
  <div class="footer-item sitemap">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
  <div class="footer-item contact">Contact: info@mywebsite.com</div>
</footer>

CSSの記述

前提として、現代のWebデザインにおいてはレスポンシブデザインは必須の要素となっています。

多くのユーザーがスマートフォンなどのモバイルデバイスからWebサイトにアクセスしており、

それらのデバイスでも適切にコンテンツが表示されることが求められます。

そのため、フッターデザインにもレスポンシブデザインの原則を適用することが重要となります。

では早速、フッターデザインのCSSを見てみましょう。

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  color: #6c757d;
}

.footer-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

まず、

`.footer`セレクターでは、

display: grid;でこの要素をグリッドコンテナに指定します。

そしてgrid-template-columnsプロパティで、各グリッドアイテムのレイアウトを定義します。

ここでのrepeat(auto-fill, minmax(200px, 1fr))

という記述が非常に重要です。

この記述により、各グリッドアイテムは少なくとも200pxの幅を持ち、

可能であればそれ以上広がります。

そしてauto-fillにより、行に可能な限り多くのアイテムをフィットさせます。

ビューポートの幅が狭くなると、自動的にアイテムは下の行へと折り返されます。

これにより、デバイスの幅に関わらず、フッターコンテンツが常に適切に表示されるようになります。

最後に、

`.footer-item`セレクターで

フッター内の各アイテムが中央に配置されるようにスタイルを適用します。

ここではdisplay: flex;を使用し、

アイテム内のコンテンツを中央に寄せるためにjustify-content:

とalign-items: center;を使用しています。

そして、text-align: center;でテキストも中央に寄せています。

以上のようにCSS Gridを用いて、

レスポンシブなフッターデザインを作成することが可能です。

ただし、デザイン要件やコンテンツの内容により適切な設定は変わるため、

今回の設定が全てに適用可能というわけではありません。

それぞれのサイトやアプリケーションのニーズに合わせて調整してください。

この記事を通じて、

CSS Gridがレスポンシブデザインを実現するための有力なツールであることを理解していただければ幸いです。

CSS Gridはその柔軟性と強力な機能により、

さまざまなレイアウトを効率よく実装することができます。

まとめ

今回は、CSS Gridを使ってフッターデザインを作る方法を紹介しました。

CSS Gridは非常に柔軟性が高く、レスポンシブデザインにも対応しているため、

ウェブデザインにおいて非常に便利なツールです。

HTMLとCSSの基本的な知識があれば、誰でも簡単に使い始めることができます。

今回学んだ知識を元に、自分だけのオリジナルなウェブページデザインを作ってみてください。

レッツチャレンジ！

カテゴリー