Categories: html css js

フッターの基本と美しいデザイン例：HTML＆CSSで作る実用サンプル付き解説

Webサイトの下部に表示される「フッター」は、サイト全体の印象を引き締める大切なパーツです。企業サイトや個人ブログ、ECサイトなど、どのようなジャンルのサイトでもフッターは必ずと言っていいほど設置されています。にもかかわらず、意外と軽視されがちなのが現実です。
本記事では、フッターの役割や基本構造、さらにHTMLとCSSを使った具体的なデザイン例を交えながら、実践的なコードも紹介していきます。これからWeb制作を始める方にも、もう一度フッター設計を見直したい方にも役立つ内容です。

フッターとは？その基本と役割
フッターに含めるべき主な要素
HTMLで作るフッターの基本構造
CSSで整えるフッターデザイン
よくあるデザインパターンと応用例
1. 1. カラム分割型
2. 2. フル幅タイプ＋コピーライト固定
スマホ対応（レスポンシブ）も忘れずに
フッター作成時に気をつけたいこと
まとめ

フッターとは？その基本と役割

フッター（footer）は、Webページの最下部に配置される領域で、主に以下のような役割を持ちます。

サイト全体の情報（コピーライト、サイト名など）を表示
ナビゲーションの補足（メニュー、リンク、カテゴリなど）
企業情報や所在地、問い合わせ先などの詳細案内
SNSリンクやニュースレター登録フォームなどの付加価値

特に多くのページに共通して表示されるため、ユーザーの信頼感や利便性にもつながります。

フッターに含めるべき主な要素

では、具体的にどのような情報をフッターに配置すべきかを整理してみましょう。

会社名またはサイト名
著作権表記（© 2025 〜）
プライバシーポリシーや利用規約へのリンク
お問い合わせへのリンク
サイトマップやカテゴリ一覧
SNSアイコン・リンク
所在地や営業時間などの基本情報

必要に応じてこれらを組み合わせ、ユーザーにとって「使いやすく」「わかりやすい」設計を目指します。

HTMLで作るフッターの基本構造

以下に、HTMLのみで書いたシンプルなフッターのコードを紹介します。

<footer>
  <div class="footer-inner">
    <p>&copy; 2025 YourWebsite. All rights reserved.</p>
    <ul class="footer-nav">
      <li><a href="/about">会社概要</a></li>
      <li><a href="/privacy">プライバシーポリシー</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </div>
</footer>

このように、<footer>タグを使うことで、HTMLの文書構造的にも意味のある設計ができます。

CSSで整えるフッターデザイン

上記のHTMLに対応する、基本的なCSSコードは以下の通りです。

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 20px;
  text-align: center;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.footer-nav a:hover {
  text-decoration: underline;
}

ポイントは、背景色と文字色のコントラストを強くすることと、中央揃えによるバランスの良い見た目を意識することです。

よくあるデザインパターンと応用例

1. カラム分割型

<footer class="footer-columns">
  <div class="col">
    <h4>会社情報</h4>
    <ul>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">沿革</a></li>
    </ul>
  </div>
  <div class="col">
    <h4>サポート</h4>
    <ul>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </div>
  <div class="col">
    <h4>SNS</h4>
    <a href="#">Twitter</a><br>
    <a href="#">Instagram</a>
  </div>
</footer>

.footer-columns {
  display: flex;
  justify-content: space-around;
  background-color: #222;
  color: #eee;
  padding: 40px;
}

.footer-columns .col {
  flex: 1;
  padding: 0 20px;
}

.footer-columns h4 {
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
}

2. フル幅タイプ＋コピーライト固定

<footer class="footer-full">
  <div class="footer-top">
    <a href="#">プライバシーポリシー</a>｜<a href="#">利用規約</a>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2025 WebDesignLab</p>
  </div>
</footer>

.footer-full {
  background: #111;
  color: #ccc;
  padding: 20px;
  font-size: 14px;
}

.footer-top {
  text-align: center;
  margin-bottom: 10px;
}

.footer-top a {
  color: #ccc;
  margin: 0 10px;
  text-decoration: none;
}

.footer-bottom {
  text-align: center;
}

スマホ対応（レスポンシブ）も忘れずに

レスポンシブ対応のためには、メディアクエリを使って調整しましょう。

@media screen and (max-width: 768px) {
  .footer-columns {
    flex-direction: column;
    text-align: center;
  }

  .footer-columns .col {
    margin-bottom: 20px;
  }
}

モバイル端末では縦並びにすることで、読みやすさと操作性が向上します。