MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペだけ！フッターメニューのデザインレイアウト例

【HTML/CSS】コピペだけ！フッターメニューのデザインレイアウト例

CSS
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、サイトで重要となるフッターメニューのデザインレイアウト例を6つご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

【HTML/CSS】フッターメニューのデザインレイアウト例

ここでは、フッターメニューにおけるデザインレイアウト例を6つご紹介します。

フッターメニューのデザインレイアウト例
  • スタンダード・コーポレート型
  • ファットフッター
  • ミニマル・シンプル型
  • CTA・メルマガ特化型
  • アシンメトリー型
  • ユーティリティ・ボトムバー付き

スタンダード・コーポレート型

HTML
<footer class="cs-ftr-st1-env">
    <div class="cs-ftr-st1-inner">
        <div class="cs-ftr-st1-top">
            
            <div class="cs-ftr-st1-company">
                <a href="#" class="cs-ftr-st1-logo">
                    <img src="https://placehold.jp/333333/ffffff/200x50.png?text=CORPORATE+LOGO" alt="コーポレートロゴ">
                </a>
                <p class="cs-ftr-st1-address">
                    〒100-0000<br>
                    東京都千代田区〇〇 1-2-3<br>
                    〇〇ビル 4F
                </p>
                <p class="cs-ftr-st1-tel">TEL: 03-0000-0000</p>
                <p class="cs-ftr-st1-mail">Email: info@example.com</p>
            </div>

            <div class="cs-ftr-st1-links">
                <div class="cs-ftr-st1-col">
                    <div class="cs-ftr-st1-heading">企業情報</div>
                    <ul>
                        <li><a href="#">会社概要</a></li>
                        <li><a href="#">代表メッセージ</a></li>
                        <li><a href="#">アクセス</a></li>
                        <li><a href="#">お知らせ</a></li>
                    </ul>
                </div>
                
                <div class="cs-ftr-st1-col">
                    <div class="cs-ftr-st1-heading">事業内容</div>
                    <ul>
                        <li><a href="#">Web制作事業</a></li>
                        <li><a href="#">システム開発</a></li>
                        <li><a href="#">SEOコンサルティング</a></li>
                        <li><a href="#">UI/UXデザイン</a></li>
                    </ul>
                </div>
                
                <div class="cs-ftr-st1-col">
                    <div class="cs-ftr-st1-heading">採用情報</div>
                    <ul>
                        <li><a href="#">新卒採用</a></li>
                        <li><a href="#">中途採用</a></li>
                        <li><a href="#">社員インタビュー</a></li>
                        <li><a href="#">福利厚生</a></li>
                    </ul>
                </div>
            </div>
            
        </div>
    </div>
    
    <div class="cs-ftr-st1-bottom">
        <div class="cs-ftr-st1-bottom-inner">
            <ul class="cs-ftr-st1-legal">
                <li><a href="#">プライバシーポリシー</a></li>
                <li><a href="#">利用規約</a></li>
            </ul>
            <p class="cs-ftr-st1-copyright">© 2026 Your Company Name. All Rights Reserved.</p>
        </div>
    </div>
</footer>
CSS
/* =========================================
   1. フッター全体の大枠
========================================= */
.cs-ftr-st1-env {
    width: 100%;
    background-color: #1a222c;
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    box-sizing: border-box;
}

/* =========================================
   2. インナーコンテナ（800px幅最適化）
========================================= */
.cs-ftr-st1-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 30px; /* vwを使わずpxでスッキリと余白を確保 */
    box-sizing: border-box;
}

/* =========================================
   3. 企業情報とリンクエリアの分割
========================================= */
.cs-ftr-st1-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px; /* 企業情報とリンク群の隙間を縮小 */
}

/* --- 企業情報エリア --- */
.cs-ftr-st1-company {
    flex: 1 1 200px; /* 最低幅を280pxから200pxへ縮小 */
}
.cs-ftr-st1-logo img {
    max-width: 160px; /* ロゴも少しコンパクトに */
    height: auto;
    margin-bottom: 20px;
    display: block;
}
.cs-ftr-st1-address,
.cs-ftr-st1-tel,
.cs-ftr-st1-mail {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #b0bac9;
    margin: 0 0 8px;
    letter-spacing: 0.05em;
}

/* --- リンクエリア（右側） --- */
.cs-ftr-st1-links {
    flex: 2 1 350px; /* 最低幅を450pxから350pxへ縮小 */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px; /* カラム間の隙間を縮小 */
}

.cs-ftr-st1-col {
    min-width: 110px; /* リンクの最小幅を調整 */
    flex: 1;
}
.cs-ftr-st1-heading {
    font-size: 0.9rem; /* 見出しサイズ調整 */
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #324052;
    letter-spacing: 0.05em;
}

.cs-ftr-st1-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-ftr-st1-col li {
    margin-bottom: 10px;
}
.cs-ftr-st1-col a {
    color: #b0bac9;
    text-decoration: none !important;
    font-size: 0.75rem; /* リンク文字サイズ調整 */
    transition: color 0.3s ease;
}
.cs-ftr-st1-col a:hover {
    color: #ffffff;
}

/* =========================================
   4. 最下部（コピーライト＆法的リンク）
========================================= */
.cs-ftr-st1-bottom {
    background-color: #11171e;
    padding: 15px 20px;
}
.cs-ftr-st1-bottom-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cs-ftr-st1-legal {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
}
.cs-ftr-st1-legal a {
    color: #7b889b;
    text-decoration: none !important;
    font-size: 0.7rem;
    transition: color 0.3s ease;
}
.cs-ftr-st1-legal a:hover {
    color: #b0bac9;
}

.cs-ftr-st1-copyright {
    margin: 0;
    font-size: 0.7rem;
    color: #7b889b;
}

/* =========================================
   5. レスポンシブ対応（プレビューに影響しないよう650pxで発動）
========================================= */
@media screen and (max-width: 650px) {
    .cs-ftr-st1-top {
        flex-direction: column;
        gap: 40px;
    }
    .cs-ftr-st1-links {
        gap: 30px 15px;
    }
    .cs-ftr-st1-bottom-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .cs-ftr-st1-legal {
        justify-content: center;
    }
}

日本の企業サイトやB2Bサービスで最もよく見られる、信頼感と分かりやすさを重視した王道のレイアウトです。

左端にロゴと会社情報（住所・電話番号など）を置き、右側に2〜3列のナビゲーションリンクを並べるフッターになります。

企業サイト、士業、病院、一般的なサービスサイトなどに適したフッターメニューになります。

ファットフッター

HTML
<footer class="cs-ftr-st2-env">
    <div class="cs-ftr-st2-inner">
        
        <div class="cs-ftr-st2-top">
            <div class="cs-ftr-st2-top-left">
                <a href="#" class="cs-ftr-st2-logo">
                    <img src="https://placehold.jp/eef3f6/2589d0/160x45.png?text=MEGA+FOOTER" alt="サイトロゴ">
                </a>
                <p class="cs-ftr-st2-desc">Webデザインとプログラミングの最新情報をお届けする情報メディアです。</p>
            </div>
            <div class="cs-ftr-st2-top-right">
                <div class="cs-ftr-st2-sns">
                    <a href="#" class="cs-ftr-st2-sns-link">X (Twitter)</a>
                    <a href="#" class="cs-ftr-st2-sns-link">Instagram</a>
                    <a href="#" class="cs-ftr-st2-sns-link">YouTube</a>
                </div>
            </div>
        </div>

        <div class="cs-ftr-st2-main">
            <div class="cs-ftr-st2-col">
                <div class="cs-ftr-st2-heading">カテゴリー</div>
                <ul>
                    <li><a href="#">HTML/CSS入門</a></li>
                    <li><a href="#">JavaScript基礎</a></li>
                    <li><a href="#">WordPress構築</a></li>
                    <li><a href="#">Webデザイン</a></li>
                    <li><a href="#">SEO対策</a></li>
                </ul>
            </div>
            
            <div class="cs-ftr-st2-col">
                <div class="cs-ftr-st2-heading">おすすめ記事</div>
                <ul>
                    <li><a href="#">CSS Flexboxの完全ガイド</a></li>
                    <li><a href="#">CSS Gridの基本と応用</a></li>
                    <li><a href="#">コピペで使えるボタン50選</a></li>
                    <li><a href="#">レスポンシブ対応の極意</a></li>
                    <li><a href="#">おすすめVSCode拡張機能</a></li>
                </ul>
            </div>
            
            <div class="cs-ftr-st2-col">
                <div class="cs-ftr-st2-heading">サービス</div>
                <ul>
                    <li><a href="#">テンプレート販売</a></li>
                    <li><a href="#">オンラインサロン</a></li>
                    <li><a href="#">個別メンタリング</a></li>
                    <li><a href="#">Web制作代行</a></li>
                </ul>
            </div>

            <div class="cs-ftr-st2-col">
                <div class="cs-ftr-st2-heading">サポート</div>
                <ul>
                    <li><a href="#">よくある質問 (FAQ)</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                    <li><a href="#">サイトマップ</a></li>
                    <li><a href="#">運営者プロフィール</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="cs-ftr-st2-bottom">
        <div class="cs-ftr-st2-bottom-inner">
            <ul class="cs-ftr-st2-legal">
                <li><a href="#">プライバシーポリシー</a></li>
                <li><a href="#">特定商取引法に基づく表記</a></li>
            </ul>
            <p class="cs-ftr-st2-copyright">© 2026 Your Media Name. All Rights Reserved.</p>
        </div>
    </div>
</footer>
CSS
/* =========================================
   1. フッター全体の大枠
========================================= */
.cs-ftr-st2-env {
    width: 100%;
    background-color: #f8f9fa; /* 明るく清潔感のあるライトグレー */
    color: #333333;
    font-family: sans-serif;
    box-sizing: border-box;
    border-top: 1px solid #eef3f6; /* 上部に境界線 */
}

/* =========================================
   2. インナーコンテナ
========================================= */
.cs-ftr-st2-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 30px;
    box-sizing: border-box;
}

/* =========================================
   3. 上段（ロゴ・説明 ＆ SNS）
========================================= */
.cs-ftr-st2-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #dee2e6; /* 区切り線 */
}
.cs-ftr-st2-top-left {
    flex: 1 1 300px;
}
.cs-ftr-st2-logo img {
    max-width: 160px;
    height: auto;
    display: block;
    margin-bottom: 10px;
}
.cs-ftr-st2-desc {
    font-size: 0.75rem;
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

.cs-ftr-st2-top-right {
    display: flex;
    align-items: center;
}
.cs-ftr-st2-sns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cs-ftr-st2-sns-link {
    display: inline-block;
    background-color: #ffffff;
    color: #555555;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}
.cs-ftr-st2-sns-link:hover {
    background-color: #2589d0;
    color: #ffffff;
    border-color: #2589d0;
}

/* =========================================
   4. 中段：メガメニュー（4カラム）
========================================= */
.cs-ftr-st2-main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px; /* 記事幅（800px）でも4カラムが収まるように隙間を調整 */
}

.cs-ftr-st2-col {
    flex: 1 1 130px; /* 最小幅を小さく設定して横並びを維持 */
    min-width: 130px;
}

/* ★ hタグを使わない見出し装飾 ★ */
.cs-ftr-st2-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 15px;
    padding-left: 8px;
    border-left: 4px solid #2589d0; /* 左側にアクセントカラーの線 */
    line-height: 1.2;
}

.cs-ftr-st2-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-ftr-st2-col li {
    margin-bottom: 8px;
}
.cs-ftr-st2-col a {
    color: #666666;
    text-decoration: none !important;
    font-size: 0.75rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}
/* ホバー時にテキストが少し右に動く遊び心 */
.cs-ftr-st2-col a:hover {
    color: #2589d0;
    padding-left: 4px;
}

/* =========================================
   5. 下段：コピーライト
========================================= */
.cs-ftr-st2-bottom {
    background-color: #ffffff; /* 最下部は白背景でスッキリと */
    padding: 15px 20px;
    border-top: 1px solid #eef3f6;
}
.cs-ftr-st2-bottom-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cs-ftr-st2-legal {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
}
.cs-ftr-st2-legal a {
    color: #888888;
    text-decoration: none !important;
    font-size: 0.7rem;
    transition: color 0.3s ease;
}
.cs-ftr-st2-legal a:hover {
    color: #2589d0;
}

.cs-ftr-st2-copyright {
    margin: 0;
    font-size: 0.7rem;
    color: #888888;
}

/* =========================================
   6. レスポンシブ対応（650px以下）
========================================= */
@media screen and (max-width: 650px) {
    .cs-ftr-st2-top {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .cs-ftr-st2-sns {
        margin-top: 10px;
    }
    .cs-ftr-st2-main {
        gap: 30px 15px; /* 縦の余白を少し広げる */
    }
    .cs-ftr-st2-col {
        /* スマホ時は2カラム（50%）ずつになるように調整 */
        flex: 1 1 45%; 
    }
    .cs-ftr-st2-bottom-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .cs-ftr-st2-legal {
        justify-content: center;
    }
}

サイト内のあらゆる情報への導線をフッターに集約した、面積の広いフッターレイアウトです。

特徴として、カテゴリや主要記事、サービス一覧などがズラリと並びます。

ユーザーが迷子になった時の「サイトマップ」として機能します。

ECサイト、大規模メディア、ポータルサイトに適したフッターメニューになります。

ミニマル・シンプル型

HTML
<footer class="cs-ftr-st3-env">
    <div class="cs-ftr-st3-inner">
        
        <div class="cs-ftr-st3-logo">
            <a href="#">
                <img src="https://placehold.jp/ffffff/111111/140x40.png?text=MINIMAL" alt="ミニマルロゴ">
            </a>
        </div>

        <ul class="cs-ftr-st3-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="cs-ftr-st3-sns">
            <a href="#">Twitter</a>
            <a href="#">Instagram</a>
            <a href="#">Dribbble</a>
        </div>

        <p class="cs-ftr-st3-copyright">© 2026 Your Name / Your Brand. All Rights Reserved.</p>
        
    </div>
</footer>
CSS
/* =========================================
   1. フッター全体の大枠
========================================= */
.cs-ftr-st3-env {
    width: 100%;
    background-color: #ffffff; /* 完全な白背景で余白を強調 */
    color: #333333;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 少しスタイリッシュなフォント */
    box-sizing: border-box;
    border-top: 1px solid #f0f0f0; /* 主張しないごく薄い境界線 */
    text-align: center; /* 中身をすべて中央揃え */
}

/* =========================================
   2. インナーコンテナ
========================================= */
.cs-ftr-st3-inner {
    width: 100%;
    max-width: 800px; /* ミニマル型は広がりすぎないよう最大幅を絞る */
    margin: 0 auto;
    padding: 60px 20px; /* 上下にゆったりとした余白を持たせる */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* Flexboxでも中央揃えを強制 */
}

/* =========================================
   3. ロゴエリア
========================================= */
.cs-ftr-st3-logo {
    margin-bottom: 30px;
}
.cs-ftr-st3-logo img {
    max-width: 140px;
    height: auto;
    display: block;
}

/* =========================================
   4. ナビゲーションリンク
========================================= */
.cs-ftr-st3-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 画面が狭ければ折り返す */
    gap: 30px; /* リンク間のゆったりとした余白 */
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}
.cs-ftr-st3-nav a {
    color: #555555;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em; /* 文字間隔を少し開けて上品に */
    transition: color 0.3s ease;
}
.cs-ftr-st3-nav a:hover {
    color: #111111; /* ホバーで少し濃い黒に */
}

/* =========================================
   5. SNSリンク
========================================= */
.cs-ftr-st3-sns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 35px;
}
.cs-ftr-st3-sns a {
    color: #999999;
    text-decoration: none !important;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}
.cs-ftr-st3-sns a:hover {
    color: #2589d0; /* ホバー時にアクセントカラー */
}

/* =========================================
   6. コピーライト
========================================= */
.cs-ftr-st3-copyright {
    margin: 0;
    font-size: 0.7rem;
    color: #bbbbbb; /* 最も目立たない薄いグレー */
    letter-spacing: 0.02em;
}

/* =========================================
   7. レスポンシブ対応（500px以下）
========================================= */
@media screen and (max-width: 500px) {
    .cs-ftr-st3-inner {
        padding: 50px 20px;
    }
    .cs-ftr-st3-nav {
        gap: 15px 25px; /* スマホ時は折り返しを想定して縦横の余白を調整 */
    }
}

要素を極限まで削ぎ落とし、余白をたっぷり取った洗練されたフッターレイアウトです。

特徴として、リンクをあちこちに散らさず、必要最低限の情報だけを中央（または左右対称）に配置します。

デザイン性が高く、コンテンツの邪魔をしません。

ランディングページ（LP）、ポートフォリオ、個人ブログ、高級ブランドサイトに適したフッターメニューになります。

CTA・メルマガ特化型

HTML
<footer class="cs-ftr-st4-env">
    <div class="cs-ftr-st4-cta">
        <div class="cs-ftr-st4-cta-inner">
            <div class="cs-ftr-st4-cta-title">最新情報を無料で受け取る</div>
            <p class="cs-ftr-st4-cta-desc">Webデザインやコーディングに役立つ最新記事や限定テンプレートを定期的にお届けします。</p>
            
            <div class="cs-ftr-st4-form">
                <input type="email" placeholder="メールアドレスを入力してください" class="cs-ftr-st4-input" aria-label="メールアドレス">
                <a href="#" class="cs-ftr-st4-btn">メルマガに登録する</a>
            </div>
            <p class="cs-ftr-st4-spam-note">※スパムメールは送信しません。いつでも配信停止可能です。</p>
        </div>
    </div>

    <div class="cs-ftr-st4-main">
        <div class="cs-ftr-st4-main-inner">
            <div class="cs-ftr-st4-logo">
                <a href="#">
                    <img src="https://placehold.jp/1a222c/ffffff/160x45.png?text=SERVICE+LOGO" alt="サービスロゴ">
                </a>
            </div>
            
            <ul class="cs-ftr-st4-nav">
                <li><a href="#">運営会社</a></li>
                <li><a href="#">利用規約</a></li>
                <li><a href="#">プライバシーポリシー</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </div>
        
        <div class="cs-ftr-st4-copyright">
            © 2026 Your Service Name. All Rights Reserved.
        </div>
    </div>
</footer>
CSS
/* =========================================
   1. フッター全体の大枠
========================================= */
.cs-ftr-st4-env {
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    box-sizing: border-box;
}

/* =========================================
   2. 上段：CTAエリア
========================================= */
.cs-ftr-st4-cta {
    background: linear-gradient(135deg, #2589d0 0%, #1c6fa8 100%); /* 目を引く鮮やかな青のグラデーション */
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
}
.cs-ftr-st4-cta-inner {
    width: 100%;
    max-width: 700px; /* テキストが読みやすいように幅を絞る */
    margin: 0 auto;
}

/* CTA見出し（hタグ不使用） */
.cs-ftr-st4-cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    letter-spacing: 0.05em;
}
.cs-ftr-st4-cta-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 30px 0;
    opacity: 0.9;
}

/* --- フォーム部分のレイアウト --- */
.cs-ftr-st4-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto 15px auto;
}
.cs-ftr-st4-input {
    flex: 1; /* 残りの幅をすべて埋める */
    padding: 14px 20px;
    font-size: 0.9rem;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    color: #333333;
}
.cs-ftr-st4-input::placeholder {
    color: #aaaaaa;
}
.cs-ftr-st4-btn {
    display: inline-block;
    background-color: #ff9900; /* コンバージョンを促すオレンジ */
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 14px 25px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* ボタン内のテキスト改行を防ぐ */
}
.cs-ftr-st4-btn:hover {
    background-color: #e68a00;
    color: #ffffff;
}

.cs-ftr-st4-spam-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* =========================================
   3. 下段：通常のフッターエリア
========================================= */
.cs-ftr-st4-main {
    background-color: #1a222c; /* ダーク系の背景で引き締める */
    padding: 40px 20px 20px;
}
.cs-ftr-st4-main-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cs-ftr-st4-logo img {
    max-width: 150px;
    height: auto;
    display: block;
}

.cs-ftr-st4-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
    flex-wrap: wrap;
}
.cs-ftr-st4-nav a {
    color: #a0aec0;
    text-decoration: none !important;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}
.cs-ftr-st4-nav a:hover {
    color: #ffffff;
}

.cs-ftr-st4-copyright {
    text-align: center;
    font-size: 0.7rem;
    color: #4a5568;
    border-top: 1px solid #2d3748;
    padding-top: 20px;
    margin: 0;
}

/* =========================================
   4. レスポンシブ対応（600px以下）
========================================= */
@media screen and (max-width: 600px) {
    .cs-ftr-st4-form {
        flex-direction: column; /* スマホ時は入力欄とボタンを縦積みに */
        width: 100%;
    }
    .cs-ftr-st4-input,
    .cs-ftr-st4-btn {
        width: 100%;
        text-align: center;
    }
    .cs-ftr-st4-main-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .cs-ftr-st4-nav {
        justify-content: center;
    }
}

フッターの直前（上段）に、ユーザーのアクションを強く促すエリアを設けた、マーケティング色の強いフッターレイアウトです。

特徴として、上段の背景色を変えて「メルマガ登録フォーム」や「無料トライアルはこちら」といった大きなCTA（コールトゥアクション）を配置し、下段に通常のフッター情報を置きます。

SaaS系ツール、ブログ、オンラインサロン、情報商材に適したフッターメニューになります。

アシンメトリー型

HTML
<footer class="cs-ftr-st5-env">
    <div class="cs-ftr-st5-inner">
        
        <div class="cs-ftr-st5-left">
            <div class="cs-ftr-st5-catch">Let's Work<br>Together.</div>
            
            <a href="#" class="cs-ftr-st5-contact-btn">
                プロジェクトの相談をする <span class="cs-ftr-st5-arrow">→</span>
            </a>
        </div>

        <div class="cs-ftr-st5-right">
            <div class="cs-ftr-st5-nav-group">
                <div class="cs-ftr-st5-nav-col">
                    <div class="cs-ftr-st5-heading">Menu</div>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Works</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
                <div class="cs-ftr-st5-nav-col">
                    <div class="cs-ftr-st5-heading">Social</div>
                    <ul>
                        <li><a href="#">X (Twitter)</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">Dribbble</a></li>
                        <li><a href="#">GitHub</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="cs-ftr-st5-company-info">
                <img src="https://placehold.jp/111111/ffffff/120x35.png?text=AGENCY" alt="ロゴ" class="cs-ftr-st5-logo">
                <p class="cs-ftr-st5-copyright">© 2026 Creative Agency.</p>
            </div>
        </div>
        
    </div>
</footer>
CSS
/* =========================================
   1. フッター全体の大枠
========================================= */
.cs-ftr-st5-env {
    width: 100%;
    background-color: #111111; /* クリエイティブさを引き立てる深い黒 */
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

/* =========================================
   2. インナーコンテナ
========================================= */
.cs-ftr-st5-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 画面幅に応じて折り返す */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    gap: 40px; /* 左右ブロック間の余白 */
    box-sizing: border-box;
}

/* =========================================
   3. 左側：タイポグラフィ＆CTA
========================================= */
.cs-ftr-st5-left {
    flex: 1 1 300px; /* 記事幅でも潰れないように最低幅を確保 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 大迫力のキャッチコピー */
.cs-ftr-st5-catch {
    font-size: clamp(2rem, 5vw, 3rem); /* 画面サイズに合わせて文字が縮小・拡大します */
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: 30px;
}

/* テキストリンク風のモダンなボタン */
.cs-ftr-st5-contact-btn {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 2px solid #2589d0; /* アクセントカラーの下線 */
    transition: color 0.3s ease, border-color 0.3s ease;
    align-self: flex-start;
}
.cs-ftr-st5-arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}
.cs-ftr-st5-contact-btn:hover {
    color: #2589d0;
}
.cs-ftr-st5-contact-btn:hover .cs-ftr-st5-arrow {
    transform: translateX(5px); /* ホバーで矢印がスッと右に動く演出 */
}

/* =========================================
   4. 右側：ナビゲーションと企業情報
========================================= */
.cs-ftr-st5-right {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- ナビゲーション群 --- */
.cs-ftr-st5-nav-group {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}
.cs-ftr-st5-nav-col {
    flex: 1;
}
/* hタグを使わない見出し（小さめの英字でおしゃれに） */
.cs-ftr-st5-heading {
    font-size: 0.75rem;
    font-weight: 700;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}
.cs-ftr-st5-nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-ftr-st5-nav-col li {
    margin-bottom: 12px;
}
.cs-ftr-st5-nav-col a {
    color: #cccccc;
    text-decoration: none !important;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}
.cs-ftr-st5-nav-col a:hover {
    color: #ffffff;
}

/* --- 右側下部：ロゴ＆コピーライト --- */
.cs-ftr-st5-company-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #333333; /* 区切り線 */
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.cs-ftr-st5-logo {
    max-width: 120px;
    height: auto;
    display: block;
}
.cs-ftr-st5-copyright {
    margin: 0;
    font-size: 0.7rem;
    color: #666666;
}

/* =========================================
   5. レスポンシブ対応（650px以下）
========================================= */
@media screen and (max-width: 650px) {
    .cs-ftr-st5-inner {
        flex-direction: column; /* スマホ時は上下に分割 */
        gap: 60px;
    }
    .cs-ftr-st5-company-info {
        flex-direction: column;
        align-items: flex-start; /* スマホ時は左揃えにする */
    }
}

画面を左右に大きく分割し、それぞれに異なる役割を持たせる現代的なフッターレイアウトです。

特徴として、左側（または上部）に非常に大きなタイポグラフィで「Let's Talk（お問い合わせ）」と見せ、右側に細々としたリンクを配置するなど、デザインのアクセントとして機能します。

デザイン会社、クリエイティブエージェンシー、スタートアップ企業に適したフッターメニューになります。

ユーティリティ・ボトムバー付き

HTML
<footer class="cs-ftr-st6-env">
    
    <!-- =========================
         上段：メインフッターエリア 
    ========================= -->
    <div class="cs-ftr-st6-main">
        <div class="cs-ftr-st6-main-inner">
            
            <!-- 左側：ブランド情報とメインアクション -->
            <div class="cs-ftr-st6-brand">
                <a href="#" class="cs-ftr-st6-logo">
                    <img src="https://placehold.jp/2589d0/ffffff/150x40.png?text=SERVICE+LOGO" alt="サービスロゴ">
                </a>
                <p class="cs-ftr-st6-desc">
                    スマホで簡単にタスク管理ができる<br>次世代のアプリケーション。
                </p>
                <!-- アプリストアリンク風のボタン -->
                <div class="cs-ftr-st6-app-links">
                    <a href="#" class="cs-ftr-st6-store-btn">App Store</a>
                    <a href="#" class="cs-ftr-st6-store-btn">Google Play</a>
                </div>
            </div>

            <!-- 右側：ナビゲーション（2カラム） -->
            <div class="cs-ftr-st6-nav">
                <div class="cs-ftr-st6-col">
                    <div class="cs-ftr-st6-heading">Product</div>
                    <ul>
                        <li><a href="#">機能一覧</a></li>
                        <li><a href="#">料金プラン</a></li>
                        <li><a href="#">導入事例</a></li>
                        <li><a href="#">よくある質問</a></li>
                    </ul>
                </div>
                <div class="cs-ftr-st6-col">
                    <div class="cs-ftr-st6-heading">Company</div>
                    <ul>
                        <li><a href="#">運営会社</a></li>
                        <li><a href="#">ニュース</a></li>
                        <li><a href="#">採用情報</a></li>
                        <li><a href="#">お問い合わせ</a></li>
                    </ul>
                </div>
            </div>
            
        </div>
    </div>

    <!-- =========================
         下段：ユーティリティ・ボトムバー 
    ========================= -->
    <div class="cs-ftr-st6-bottom">
        <div class="cs-ftr-st6-bottom-inner">
            <!-- 左側：法的リンク -->
            <div class="cs-ftr-st6-bottom-links">
                <a href="#">プライバシーポリシー</a>
                <a href="#">利用規約</a>
                <a href="#">特定商取引法に基づく表記</a>
            </div>
            
            <!-- 右側：言語切り替えとコピーライト -->
            <div class="cs-ftr-st6-bottom-right">
                <div class="cs-ftr-st6-lang">
                    <a href="#" class="cs-ftr-st6-lang-active">JP</a> / <a href="#">EN</a>
                </div>
                <div class="cs-ftr-st6-copy">© 2026 App Company.</div>
            </div>
        </div>
    </div>
    
</footer>
CSS
/* =========================================
   1. フッター全体の大枠
========================================= */
.cs-ftr-st6-env {
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    box-sizing: border-box;
    background-color: #ffffff; /* メイン部分は白背景 */
    border-top: 1px solid #eef3f6;
}

/* =========================================
   2. メインフッターエリア（上段）
========================================= */
.cs-ftr-st6-main {
    width: 100%;
}
.cs-ftr-st6-main-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 20px 40px;
    gap: 30px;
    box-sizing: border-box;
}

/* --- ブランド情報 --- */
.cs-ftr-st6-brand {
    flex: 1 1 280px; /* 最小幅を確保 */
}
.cs-ftr-st6-logo img {
    max-width: 150px;
    height: auto;
    display: block;
    margin-bottom: 15px;
}
.cs-ftr-st6-desc {
    font-size: 0.8rem;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* アプリリンクボタン風 */
.cs-ftr-st6-app-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cs-ftr-st6-store-btn {
    display: inline-block;
    background-color: #111111;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}
.cs-ftr-st6-store-btn:hover {
    background-color: #333333;
}

/* --- ナビゲーション群 --- */
.cs-ftr-st6-nav {
    flex: 1 1 300px;
    display: flex;
    gap: 20px;
}
.cs-ftr-st6-col {
    flex: 1;
}

/* hタグ不使用の見出し */
.cs-ftr-st6-heading {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 15px;
}
.cs-ftr-st6-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-ftr-st6-col li {
    margin-bottom: 10px;
}
.cs-ftr-st6-col a {
    color: #666666;
    text-decoration: none !important;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}
.cs-ftr-st6-col a:hover {
    color: #2589d0;
}

/* =========================================
   3. ボトムバーエリア（下段）
========================================= */
.cs-ftr-st6-bottom {
    width: 100%;
    background-color: #f4f8fa; /* 薄いグレーブルーで帯を作る */
    border-top: 1px solid #eef3f6;
}
.cs-ftr-st6-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 20px;
    gap: 15px;
    box-sizing: border-box;
}

/* --- ボトムバー左側（法的リンク） --- */
.cs-ftr-st6-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
}
.cs-ftr-st6-bottom-links a {
    color: #666666;
    text-decoration: none !important;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}
.cs-ftr-st6-bottom-links a:hover {
    color: #2589d0;
}

/* --- ボトムバー右側（言語・コピーライト） --- */
.cs-ftr-st6-bottom-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.cs-ftr-st6-lang {
    font-size: 0.75rem;
    color: #999999;
}
.cs-ftr-st6-lang a {
    color: #999999;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.cs-ftr-st6-lang a.cs-ftr-st6-lang-active,
.cs-ftr-st6-lang a:hover {
    color: #111111; /* アクティブな言語は濃く表示 */
    font-weight: 700;
}
.cs-ftr-st6-copy {
    font-size: 0.75rem;
    color: #888888;
}

/* =========================================
   4. レスポンシブ対応（650px以下）
========================================= */
@media screen and (max-width: 650px) {
    .cs-ftr-st6-main-inner {
        flex-direction: column;
        gap: 40px;
    }
    .cs-ftr-st6-nav {
        flex-wrap: wrap; /* スマホ時はナビゲーションも縦に並ぶ可能性を考慮 */
        gap: 30px 15px;
    }
    .cs-ftr-st6-bottom-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .cs-ftr-st6-bottom-links {
        justify-content: center;
    }
    .cs-ftr-st6-bottom-right {
        justify-content: center;
    }
}

メインのフッターエリアとは別に、最下部に色の違う細い帯（ボトムバー）を敷いた実用的なフッターレイアウトです。

特徴として、メインエリアにはサイトの回遊を促すリンクやロゴを置き、最下部の帯には「利用規約」「プライバシーポリシー」「運営会社」といった法的・事務的なリンクとコピーライトをひっそりとまとめます。

アプリ紹介サイト、Webサービス、多言語対応サイトに適したフッターメニューになります。

まとめ

ここでは、本記事のまとめを記載します。

本記事のまとめ
  • display: flex;とflex-wrap: wrap;を組み合わせ、カラムの横並び配置と画面縮小時の自動折り返し（縦積み）を制御する。
  • インナー要素にmax-widthとmargin: 0 auto;を指定し、大画面でもコンテンツが広がりすぎないよう中央に束ねる。
  • gapプロパティを使用し、カラム間やリンク間の余白（縦横）を簡潔に管理する。
  • メディアクエリ（@media）を用いて、スマートフォン閲覧時のレイアウト（縦積みへの変更、テキストの中央揃え、余白の再調整など）を最適化する。
  • WordPressテーマ（SWELLなど）のデフォルトスタイルとの干渉を防ぐため、フッター内の見出しにはhタグを使用せず、divタグとクラス指定で装飾を行う。
  • clamp()関数を活用し、画面幅に応じて文字サイズが滑らかに可変する巨大なタイポグラフィを実装する。
  • 背景色や上部ボーダー（border-top）を設定し、メインコンテンツエリアとフッターエリアの境界を視覚的に明確にする。
  • フッター全体および構成要素にbox-sizing: border-box;を指定し、パディングによる意図しない横幅のはみ出しを防止する。

よくある質問（FAQ）

コンテンツが少ないページでもフッターを画面の最下部に固定するには？

Flexboxを使用するのが現代の主流かつ最も簡単な方法です。

Webページ全体を囲むタグ（<body>や<div class="wrapper">など）に対して、display: flex;とflex-direction: column;を指定し、高さをmin-height: 100vh;に設定します。

その上で、フッター要素に対してmargin-top: auto;を指定すると、コンテンツ量に関わらずフッターが常に画面の最下部に押し下げられます。

PCでは横並び、スマホでは縦並びに切り替えるレスポンシブなフッターの作り方は？

CSSのFlexboxとメディアクエリ（@media）を組み合わせます。

フッター内のコンテナにdisplay: flex;を指定し、PC表示では横並びにします。

さらに、CSSファイルの下部に@media screen and (max-width: 768px)のようなブレイクポイントを記述し、スマホサイズになった際のみflex-direction: column;が適用されるように上書きすることで、自動的に縦並びへ切り替わります。

フッターの左右に謎の白い隙間（余白）ができてしまう原因は？

ブラウザがデフォルトで持っている<body>タグの標準マージンが原因である可能性が高いです。

これを解消するためには、CSSの先頭付近にbody { margin: 0; padding: 0; }と記述し、デフォルトの余白をリセットしてください。

同時に、フッター要素自体にwidth: 100%;とbox-sizing: border-box;が指定されているかどうかも確認します。

フッター内の複数のリンクやテキストを、きれいに中央揃えにするには？

要素の構造によって2つの方法を使い分けます。

単なるテキストやインライン要素（<a>や<span>）の集まりであれば、親要素にtext-align: center;を指定するだけで中央に揃います。

リストタグ（<ul>と<li>）などを Flexbox で横並びにしている場合は、text-alignは効かないため、親要素の Flexコンテナに対してjustify-content: center;を指定してください。

フッターには最低限、どのような情報やリンクを含めるべきですか？

サイトの目的により異なりますが、一般的なWebサイトで推奨される必須項目は以下の3点です。

  • コピーライト（著作権表示）
    &copy; 202X 会社名 All Rights Reserved.のような表記。
  • 法的ページのリンク
    「プライバシーポリシー」「利用規約」「特定商取引法に基づく表記（ECサイトの場合）」への導線。
  • 運営者情報・連絡先
    会社概要ページへのリンク、または簡単な所在地と「お問い合わせフォーム」へのリンク。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次