コード付き：グリッドを使ってフッターレイアウトを実例で解説！

CSS Gridを使って、フッターのレイアウトをわかりやすく整理する方法を解説します。

フッターにはロゴ、メニュー、お問い合わせボタンやSNSボタン、サイトマップにプライバシーポリシー、©などたくさんの情報が集まっています。

そのため、どうしてもHTMLが複雑になり、クラス名も増えがちです。

本記事では、Gridを使ってできるだけシンプルかつ柔軟に組める方法を紹介します。

FigmaのデータやAIのプロンプトも公開しています。コーディングの練習にもどうぞ。

今回作成するレイアウトはこちら

ばく

Figmaのデータはこちら

ばく

未経験、異業種からWeb制作の副業を経てフリーランスに。
学習ノウハウ、役に立った情報を初心者に寄り添った目線で発信します。

＼Figmaを学べる最新の書籍！／

リンク

1 全体の構造を考える
2 HTMLを組む
3 CSS gridでレイアウトを整える
- 3.1 SPのCSS
- 3.2 PCのCSS
4 AIに作ってもらう
5 まとめ：グリッドでフッターレイアウト

全体の構造を考える

最初に、全体の構造を考えて必要な要素を洗い出します。

ベースとしてはスマホの構造をみて、上から作っていきましょう。

今回の場合、

ロゴ
メニュー
アクセス
SNSボタン
©表示

の5つの要素が組み合わさってできてると見ます。

HTMLでgridの直下に来るように組んでいきます。

要素を考えたら、どのように分割できるかを考えてイメージしていきます。

SPはシンプルに縦に積んでいるイメージで、1×5の構造にします。

PCは2×4で分けて各配置を決めるイメージです。

構造を考えたら、スマホを基準にHTMLを組んでいきましょう！

ばく

HTMLを組む

HTMLの構造を考えます。

スマホの並び順を基準に、上から順番に作成していきます。


<footer class="footer">
  <div class="footer__inner">
    <!-- ロゴ -->
    <div class="footer__logo">
      <img src="/assets/img/logo.png" alt="ロゴ" />
    </div>

    <!-- メニュー -->
    <nav class="footer__nav">
      <ul class="footer__menu-list">
        <li class="footer__menu-item"><a href="#" class="footer__menu-link">メニュー</a></li>
        <li class="footer__menu-item"><a href="#" class="footer__menu-link">メニュー</a></li>
        <li class="footer__menu-item"><a href="#" class="footer__menu-link">メニュー</a></li>
        <li class="footer__menu-item"><a href="#" class="footer__menu-link">メニュー</a></li>
        <li class="footer__menu-item">
          <a href="#" class="footer__menu-link">プライバシーポリシー</a>
        </li>
        <li class="footer__menu-item">
          <a href="#" class="footer__menu-link">サイトマップ</a>
        </li>
      </ul>
    </nav>

    <!-- アクセス情報 -->
    <div class="footer__access">
      <h3 class="footer__access-title">アクセス</h3>
      <p class="footer__access-post">〒999-9999</p>
      <p class="footer__access-address">架空県サンプル市ホニャラ区 0-0-0 架空ビル 9F</p>
      <p class="footer__access-tel">TEL：0000-00-0000</p>
      <p class="footer__access-email">MAIL：info@example-fake.test</p>
    </div>

    <!-- SNS -->
    <div class="footer__sns">
      <a href="#" class="footer__sns-item"><img src="/assets/img/youtube.svg" alt="YouTube" /></a>
      <a href="#" class="footer__sns-item"
        ><img src="/assets/img/instagram.svg" alt="Instagram"
      /></a>
      <a href="#" class="footer__sns-item"><img src="/assets/img/x.svg" alt="X" /></a>
      <a href="#" class="footer__sns-item"><img src="/assets/img/facebook.svg" alt="Facebook" /></a>
    </div>

    <!-- コピーライト -->
    <div class="footer__copy">
      <small class="footer__copyright">©LOGO.corporation</small>
    </div>
  </div>
</footer>

<footer>の中にgrid用のラッパーとして<div class="footer__inner">をおいていきます。

グリッドの親要素はinnerで、子要素に以下の5要素を配置します。

ロゴ(footer__logo)
メニュー(footer__nav)
アクセス(footer__access)
SNSボタン(footer__sns)
©表示(footer__copy)

細かい調整、デザインはCSSで修正していきます。

CSS gridでレイアウトを整える

デザインを含むCSS。長いので折りたたみ。



.footer {
  background: #fff;
  padding: 40px 20px;
  color: #333;
}

.footer__inner {
  display: grid;
  gap: 40px;
  max-width: 500px;
  margin: 0 auto;
}

.footer__logo {
  text-align: center;
}
.footer__logo img {
  width: 160px;
  margin-bottom: 8px;
}
.footer__logo-text {
  font-size: 12px;
  color: #666;
}

.footer__menu-list {
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.footer__menu-link {
  color: #000;
  text-decoration: none;
  font-size: 16px;
}

.footer__access-title {
  font-size: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
}
.footer__access p {
  margin-bottom: 10px;
}

.footer__sns {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 20px;
  justify-content: center;
}
.footer__sns-item img {
  width: 40px;
  height: 40px;
}

.footer__copy {
  text-align: center;
  font-size: 12px;
  color: #555;
}

@media (min-width: 768px) {
  .footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4,auto);
    align-items: start;
    padding: 60px 20px;
    gap: 40px 120px;
  }

  .footer__logo {
    text-align: left;
  }

  .footer__access {
    margin-top: 20px;
 grid-row: span 2 / span 2;
  }

  .footer__nav {
    grid-row: span 2 / span 2;
    align-self: center;
  }

  .footer__menu-list {
    display: flex;
    flex-direction: row;
    gap: 20px 40px;
    justify-content: start;
    flex-wrap: wrap;
  }

  .footer__menu-item:nth-child(n+5) {
    grid-column: span 2;
  }

  .footer__sns {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
        grid-column-start: 2;
    grid-row-start: 3;

  }

  .footer__copy {
    grid-column: span 2 / span 2;
    grid-row-start: 4;
    text-align: center;
    margin-top: 40px;
  }
}

footer__innerにgridをつけて、配置を調整していきます。

.footer__inner {
  display: grid;
}

SPのCSS

スマホでのレイアウトは一列に並んでいるため特別指定することがありません。

HTMLもスマホのレイアウト前提の順番で考えているので.footer__innerにgridを設定するだけで出来ます。

高さの微調整はgapやmarginで行っていきたいですね。

PCのCSS

パソコンでのレイアウト考えます。

やりたいわけ方はこう▼

ジェネレーターにて、以下のように分けます。

カラムを2,ロウを4と分けます。ギャップはデザインに合わせて調整します。

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4,auto);
    gap: 40px 60px;

分けたグリッドをの中に、各要素を配置していきます。

各子要素に場所の指定をするために、ジェネレーターで出したCSSを入れていきます。

.footer__access {
 grid-row: span 2 / span 2;
}

.footer__nav {
  grid-row: span 2 / span 2;
}

.footer__sns {
  grid-column-start: 2;
  grid-row-start: 3;
}

.footer__copy {
  grid-column: span 2 / span 2;
  grid-row-start: 4;
}