フッターしたい（`footer`）

<body>
    <main>...</main>

    <footer>
        <p>&copy; 2024 - KumaROOT</p>
    </footer>
</body>

footerタグは、そのまとまりの末尾に置く補足情報を表すタグです。 body直下に置けばサイト全体のフッター、articleの中に置けばその記事のフッターになります。

footerの中にheaderタグやfooterタグを入れることはできません。

参考

サイトフッターしたい

<body>
    <main>...</main>

    <footer>
        <p>&copy; 2024 - KumaROOT</p>
    </footer>
</body>

body直下に置くfooterタグは、サイト全体のフッターです。ページ末尾に表示するのでmainタグの後に配置します。

コピーライト情報やサイト全体のナビゲーション、SNSリンクなどを掲載することが多いです。

すべてのページで共通するパーツなので、 SSGやCMSを利用している場合は部分テンプレートとして作成しておくとよいです。

メガフッターしたい

<footer>
    <div class="footer-logo">ロゴ</div>
    <nav class="footer-nav">
        <!-- リンク集 -->
    </nav>
    <div class="footer-copyright">コピーライト</div>
</footer>

メガフッターとは、サイト全体のナビゲーションやリンク集を並べた大きめのフッターのことです。

footerの中にはロゴやコピーライトなど複数の区画を配置しますが、 headerやfooterは使えないのでdivにクラス名をつけて区分けします。 navにも、グローバルナビなど他のnavと見分けられるようfooter-navのようなクラス名をつけておくとよいです。

footer {
    display: block flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem;
}

.footer-logo {
    font-weight: bold;
}

.footer-nav ul {
    display: block flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
}

.footer-copyright {
    font-size: 0.875rem;
    color: #666;
}

display: block flexとjustify-content: space-betweenで、ロゴを左、コピーライトを右に寄せつつ、navを間に配置できます。 flex-wrap: wrapを指定しておくと、画面幅が狭いときに自動で縦積みに折り返ります。

記事フッターしたい

<article>
    コンテンツ本体

    <footer>
        <p>
            <img src="著者アイコンのパス" alt="著者名">
            著者名です。著者のプロフィールです。
        </p>
        <p>公開日: <time datetime="2026-08-23">2026年8月23日</time></p>
        <p>
            タグ:
            <a href="/tags/html">HTML</a>
            <a href="/tags/css">CSS</a>
        </p>
    </footer>
</article>

articleタグの中に置くfooterタグは、その記事のフッターです。著者プロフィールや公開日、タグなど、記事本体に付随する情報をまとめて掲載します。

articleの中に置くことで、サイト全体ではなくこの記事のフッターだと明示できます。

article > footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    font-size: 0.875rem;
    color: #666;
}

article > footer img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    vertical-align: middle;
}

article > footer p:first-child {
    display: block flex;
    align-items: center;
    gap: 0.5rem;
}

article > footer a {
    display: inline flow-root;
    padding: 0.25rem 0.75rem;
    background: #f0f0f0;
    border-radius: 999px;
    text-decoration: none;
}

border-topで本文との区切り線を入れ、フォントを小さめ・グレー系にすることで、補足情報であることを視覚的に分かりやすくしています。著者アイコンはborder-radius: 50%で丸くし、display: block flexでテキストと横並びにしています。タグのリンクはborder-radius: 999pxで丸みの強い「ピル型」のバッジとして表現しています。

フッターしたい（footer）

サイトフッターしたい

メガフッターしたい

記事フッターしたい

リファレンス

フッターしたい（`footer`）