ウェブサイトのフッターをリンク付きに仕上げる

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

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

ウェブサイトの作成において、フッターは重要な役割を果たします。

サイトの情報をまとめ、ユーザーが必要な情報をすぐに見つけられるようにするためのものです。

この記事では、

フッターを作成し、各ページへのリンクを追加する方法をご紹介します。

HTMLの編集

まず、以下の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="index.html">ホーム</a></li>
        <li><a href="about.html">会社情報</a></li>
        <li><a href="products.html">サービス</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© 2023 Company Name. All rights reserved.</p>
  </div>
</footer>

こうすることで、

フッター内の各リンクをクリックすると、該当のセクションまでスクロールするようになります。

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;
  }
}

このCSSは、フッターの見た目を制御します。

特に、@mediaのルールは、スクリーンが600px以下の幅のときに適用され、

コンテンツが縦方向にスタックされるように設定しています。

これにより、スマートフォンやタブレットなど、

幅の狭いデバイスでの表示も考慮したレスポンシブなデザインが可能になります。

テストと確認

更新したHTMLとCSSを保存したら、

ブラウザでページを開き、各リンクが適切に動作するか確認してください。

フッターの各リンクをクリックすると、

そのページの対応するセクションまでスクロールするはずです。

今回は、基本的なHTMLとCSSを使用したフッターの作成方法を学びました。

しかし、JavaScriptを使うことで、より高度な機能を持つフッターを作ることも可能です。

たとえば、ページの最下部にスクロールしたときにフッターが表示されるようにするなど、

ユーザー体験を向上させるためのさまざまなテクニックがあります。

まとめ

フッターはウェブサイトの重要な要素で、

訪問者がサイト内の他のページに簡単にアクセスできるようにする役割があります。

この記事では、フッター内のリンクを更新し、適切なページにリンクする方法を紹介しました。

このテクニックを使用すれば、

訪問者はサイト内を簡単にナビゲートでき、必要な情報をすぐに見つけることができます。

レッツチャレンジ！