HTML&CSSで作るフッター

はじめに

Webサイトの「フッター」は、ページの一番下に表示され、サイト全体の情報やリンクをまとめる重要な要素です。この記事では、HTMLとCSSだけで作れるシンプルかつおしゃれなフッターの基本と、ちょっとした工夫（Tips）を紹介します。初心者の方にも分かりやすいように、サンプルコード付きで解説します。

フッターの基本

まずは、HTMLとCSSだけで実装できるベーシックなフッターを作ってみましょう。

index.html

<!-- サンプル：基本的なフッター -->
<footer>
  <div class="footer-container">
    <small>&copy; 2025 MyWebsite. All rights reserved.</small>
    <ul class="footer-nav">
      <li><a href="#">プライバシーポリシー</a></li>
      <li><a href="#">利用規約</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </div>
</footer>

style.css

footer {
  background: #222;
  color: #fff;
  padding: 24px 0;
}
.footer-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.footer-nav {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
}
.footer-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95em;
}
.footer-nav li a:hover {
  text-decoration: underline;
}

• footerタグでセマンティックな構造
• flexで左右に配置
• サイト名やコピーライト、ナビゲーションをまとめる
• smallタグでコピーライトは小さめに表示

おしゃれなフッター

CSSを工夫することで、フッターも「おしゃれ」に演出できます。例えば、グラデーション背景やSNSアイコンの追加、アニメーションなどが考えられます。ここでは、グラデーションとフッターリンクのホバーアニメーションの例を紹介します。

style.css

/* ここから */
footer {
  background: linear-gradient(90deg, #222, #444);
  color: #fff;
  padding: 24px 0;
}
.footer-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.footer-nav {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
}
.footer-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95em;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s;
}
.footer-nav li a:hover {
  text-decoration: underline;
  color: #4fc3f7;
}
.footer-nav li a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #4fc3f7;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.footer-nav li a:hover::after {
  transform: scaleX(1);
}
/* ここまで差し替え */

hoverすると上の画像のように変化します。

• グラデーション背景で高級感UP
• ホバーで下線がアニメーション表示

Tips

• レスポンシブ対応
  メディアクエリでスマホ表示に最適化できます。

• SNSリンクの設置
  FontAwesomeやSVGでSNSアイコンリンクを追加すると便利です。

• アクセシビリティ
  フッター内のリンクにはわかりやすいラベルや説明を付けましょう。

最後に

HTMLとCSSだけでも、シンプルでおしゃれなフッターを作ることができます。ぜひ自分のWebサイトに合ったデザインをカスタマイズしてみてください。この記事がフッター作成の参考になれば幸いです。