40代高卒者が製造業からIT転職する【悩み編3】

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

前回は、初心者の1番の悩み「レイアウト」のヘッダー部分の事を書きました。

今回はフッター部分を書こうと思います。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【悩み編2】

1 フッターレイアウト
2 フッターの例
3 まとめ

フッターレイアウト

WEBサイトのページの最下部に配置される領域で、

通常はサイト全体のナビゲーション、コンテンツの著作権情報、

連絡先情報、サイトマップ、プライバシーポリシー、利用規約などを表示するために使用されます。

ユーザーにとって非常に重要な役割を果たしています。

以下に、フッターに関する詳細を示します。

コンテンツの配置

ユーザーにとって重要な情報を表示することが推奨されています。

コンテンツの配置には、サイト全体のナビゲーション、

コンテンツの著作権情報、連絡先情報、サイトマップ、プライバシーポリシー、利用規約などが含まれます。

これらの情報は、ユーザーにとって役立つ情報であり、

フッターに表示することで、ユーザーが簡単にアクセスできるようになります。

スタイルの設定

サイトのデザインの一部であり、スタイルの設定が重要です。

色やフォント、スペースなど、サイトのスタイルに合わせた要素を含めることが推奨されています。

また、

サイトのトップにあるヘッダーと同じデザイン要素を使用することで、一貫性を保つことができます。

リンクの設置

サイトの内部リンクや外部リンクを設置することができます。

内部リンクは、サイト内の別のページにリンクすることができ、

外部リンクは、他のサイトやソーシャルメディアプラットフォームにリンクすることができます。

リンクを設置することで、ユーザーが他のページに簡単にアクセスできるようになります。

レスポンシブデザインの実装

現代のWEBサイトでは、レスポンシブデザインが重要です。

レスポンシブデザインは、デバイスのサイズに応じて、サイトの表示を調整する方法です。

フッターも、レスポンシブデザインに対応することが必要であり、

小さな画面でも正しく表示されるようにする必要があります。

プライバシーポリシーと利用規約の表示

プライバシーポリシーや利用規約など、重要な法的情報を表示することが推奨されています。

これらの情報は、

ユーザーにとって非常に重要であり、サイトの信頼性を高めることができます。

フッターにこれらの情報を表示することで、ユーザーが簡単にアクセスできるようになります。

また、これらの情報は、法的要件に従う必要があります。

フッターの例

フッターによくありそうな例です。

<footer>
  <div class="footer-content">
    <nav class="footer-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
    <div class="footer-info">
      <p>© 2023 My Website. All rights reserved.</p>
      <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
    </div>
  </div>
</footer>

footer {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

.footer-content {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  display: inline-block;
  margin-right: 20px;
}

.footer-nav a {
  text-decoration: none;
  color: #333;
}

.footer-info p {
  font-size: 14px;
  color: #999;
  margin: 10px 0;
}

.footer-info a {
  color: #333;
}

この例では、

ナビゲーション、著作権情報、プライバシーポリシー、利用規約へのリンクを含めています。

また、背景色を変更し、サイトのコンテンツから明確に区別されるように設定されています。

CSSでは、幅を制限し、フッターコンテンツのレイアウトを設定しています。