フッターデザインの作り方とレスポンシブ対応

programming
学習コースキャンペーンバナー

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

今回はウェブサイト作成の最後の部分、

フッターのデザインについて解説していきます。

フッターはウェブサイトの最下部に位置し、

企業情報、サイトマップ、プライバシーポリシーなど重要な情報を掲載する場所です。

フッターの基本的な構造

以下はフッターを構成する基本的なHTMLのコードです。

<footer>
  <div class="footer-content">
    <div class="footer-section">
      <h3>About Us</h3>
      <p>ここに企業情報を書きます。</p>
    </div>
    <div class="footer-section">
      <h3>Contact</h3>
      <p>ここに連絡先情報を書きます。</p>
    </div>
    <div class="footer-section">
      <h3>Links</h3>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© 2023 Company Name. All rights reserved.</p>
  </div>
</footer>

フッターは大きく2つの部分に分けられます。

footer-contentには3つのセクション（About Us, Contact, Links）を置き、

それぞれに企業情報、連絡先情報、そして重要なリンクを配置します。

また、footer-bottomには著作権情報を掲載します。

CSSでのデザイン

次にCSSを用いて、このフッター部分をデザインします。

以下に基本的なスタイルを示します

footer {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.footer-section {
  width: 30%;
}

.footer-bottom {
  text-align: center;
  padding: 10px 0;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
  }
  .footer-section {
    width: 100%;
    margin-bottom: 20px;
  }
}

ここでは、

全体のフッターに背景色とパディングを設定しています。

.footer-contentはフレックスコンテナとして設定し、

各.footer-sectionを等間隔に配置しています。

.footer-bottomでは、テキストを中央揃えにし、上下にパディングを設けています。

レスポンシブ対応のために、

ビューポートの幅が600px以下の場合のスタイルをメディアクエリを用いて設定しています。

フレックスの方向を列に変更し、各セクションの幅を100%に設定。

そして、各セクションの下に余白を作るためにマージンを設定しています。

このようにフッターをデザインすることで、

訪問者に対して企業の基本情報を伝え、

サイト全体のナビゲーションを支える役割を果たします。

また、レスポンシブ対応を行うことで、スマホからの訪問者に対しても適切な表示を提供できます。

まとめ

以上で、WEBサイトを作ってみようシリーズは終わりです。

ヘッダー、メイン、フッターと各デザインを作って来ました。

ウェブサイトの作成はこれで一通り終わりですが、より具体的なデザインや、さらに応用的な技術についてはこれからも順次解説していきます。

次回もお楽しみに！

レッツチャレンジ！