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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダーメニューのデザインレイアウト例
  • 左ロゴ・右ナビゲーション
  • 中央ロゴ・スプリットメニュー
  • ナビ中央・右端ボタン固定
  • 上下2段構成・中央揃え
  • PCハンバーガーメニュー固定
  • 上部ユーティリティバー付き

左ロゴ・右ナビゲーション

HTML
<header class="cs-hdr-st1-env">
    <input type="checkbox" id="cs-hdr-st1-check" class="cs-hdr-st1-hidden-check">

    <div class="cs-hdr-st1-inner">
        <div class="cs-hdr-st1-logo">
            <a href="#">
                <img src="https://placehold.jp/24f8fa/2589d0/180x50.png?text=SITE+LOGO" alt="サンプルロゴ">
            </a>
        </div>

        <nav class="cs-hdr-st1-nav">
            <ul class="cs-hdr-st1-menu">
                <li><a href="#" class="cs-hdr-st1-link">ホーム</a></li>
                <li><a href="#" class="cs-hdr-st1-link">HTML</a></li>
                <li><a href="#" class="cs-hdr-st1-link">CSS</a></li>
                <li><a href="#" class="cs-hdr-st1-link">JavaScript</a></li>
                <li><a href="#" class="cs-hdr-st1-link">お問い合わせ</a></li>
            </ul>
        </nav>

        <label for="cs-hdr-st1-check" class="cs-hdr-st1-toggle" aria-label="メニューを開閉する">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>

    <div class="cs-hdr-st1-drawer">
        <label for="cs-hdr-st1-check" class="cs-hdr-st1-drawer-bg"></label>
        
        <ul class="cs-hdr-st1-drawer-menu">
            <li><a href="#">ホーム</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </div>
</header>
CSS
/* =========================================
   1. ヘッダー全体の大枠
========================================= */
.cs-hdr-st1-env {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #eef3f6;
    box-sizing: border-box;
    font-family: sans-serif;
    position: relative;
    z-index: 9999;
}

/* --- JSの代わりにする隠しチェックボックス --- */
.cs-hdr-st1-hidden-check {
    display: none;
}

/* =========================================
   2. インナーコンテナ
========================================= */
.cs-hdr-st1-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 80px;
    margin: 0 auto;
    padding: 0 4vw;
    box-sizing: border-box;
    position: relative;
    z-index: 10002; /* ドロワーより上に配置 */
}

/* =========================================
   3. 左側：ロゴエリア
========================================= */
.cs-hdr-st1-logo a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}
.cs-hdr-st1-logo img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* =========================================
   4. 右側：PC用ナビゲーション
========================================= */
.cs-hdr-st1-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px;
}
.cs-hdr-st1-link {
    display: block;
    color: #333333;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none !important;
    padding: 10px 0;
    position: relative;
    transition: color 0.3s ease;
}
.cs-hdr-st1-link:hover {
    color: #2589d0;
}
.cs-hdr-st1-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #2589d0;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.cs-hdr-st1-link:hover::after {
    width: 100%;
}

/* =========================================
   5. スマホ用：ハンバーガーボタン（デフォルト非表示）
========================================= */
.cs-hdr-st1-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
}
.cs-hdr-st1-toggle span {
    width: 100%;
    height: 2px;
    background-color: #333333;
    transition: all 0.3s ease;
    transform-origin: left center;
}

/* ▼ チェックが入った時（開いた時）のボタンアニメーション ▼ */
.cs-hdr-st1-hidden-check:checked ~ .cs-hdr-st1-inner .cs-hdr-st1-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(2px, -2px);
}
.cs-hdr-st1-hidden-check:checked ~ .cs-hdr-st1-inner .cs-hdr-st1-toggle span:nth-child(2) {
    opacity: 0;
}
.cs-hdr-st1-hidden-check:checked ~ .cs-hdr-st1-inner .cs-hdr-st1-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 2px);
}

/* =========================================
   6. スマホ用：ドロワーメニュー（デフォルト非表示）
========================================= */
.cs-hdr-st1-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none; /* 閉じている時はクリック無効 */
    transition: opacity 0.3s ease;
}

/* メニューの背景（ここをクリックしても閉じるようにする） */
.cs-hdr-st1-drawer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
}

.cs-hdr-st1-drawer-menu {
    position: relative;
    z-index: 10001;
    list-style: none;
    padding: 100px 0 0 0;
    margin: 0;
    text-align: center;
}
.cs-hdr-st1-drawer-menu li {
    margin-bottom: 30px;
}
.cs-hdr-st1-drawer-menu a {
    display: inline-block;
    color: #333333;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.cs-hdr-st1-drawer-menu a:hover {
    color: #2589d0;
}

/* ▼ チェックが入った時（開いた時）のドロワー表示 ▼ */
.cs-hdr-st1-hidden-check:checked ~ .cs-hdr-st1-drawer {
    opacity: 1;
    pointer-events: auto; /* 開いた時はクリック有効 */
}

/* =========================================
   7. レスポンシブ対応（画面幅900px以下）
========================================= */
@media screen and (max-width: 900px) {
    .cs-hdr-st1-nav {
        display: none; /* PC用ナビを非表示 */
    }
    .cs-hdr-st1-toggle {
        display: flex; /* ハンバーガーボタンを表示 */
    }
    .cs-hdr-st1-drawer {
        display: block; /* ドロワーの構造を有効化 */
    }
}

左端にサイトロゴ、右端に向けてグローバルナビゲーション（横並びのリンク）を配置したレイアウトになります。

特徴は、Webサイトの歴史上、最もユーザーが慣れ親しんでいる王道でありスタンダードな配置です。

迷ったらこれ、と言えるほど視線誘導（F型・Z型）の理にかなっており、あらゆるジャンルのサイトに適合します。

中央ロゴ・スプリットメニュー

HTML
<header class="cs-hdr-st2-env">
    <input type="checkbox" id="cs-hdr-st2-check" class="cs-hdr-st2-hidden-check">

    <div class="cs-hdr-st2-inner">
        <div class="cs-hdr-st2-mobile-spacer"></div>

        <nav class="cs-hdr-st2-nav cs-hdr-st2-nav-left">
            <ul class="cs-hdr-st2-menu">
                <li><a href="#" class="cs-hdr-st2-link">サービス</a></li>
                <li><a href="#" class="cs-hdr-st2-link">料金プラン</a></li>
            </ul>
        </nav>

        <div class="cs-hdr-st2-logo">
            <a href="#">
                <img src="https://placehold.jp/24f8fa/2589d0/160x60.png?text=SPLIT+LOGO" alt="サンプルロゴ">
            </a>
        </div>

        <nav class="cs-hdr-st2-nav cs-hdr-st2-nav-right">
            <ul class="cs-hdr-st2-menu">
                <li><a href="#" class="cs-hdr-st2-link">会社概要</a></li>
                <li><a href="#" class="cs-hdr-st2-link">お問い合わせ</a></li>
            </ul>
        </nav>

        <label for="cs-hdr-st2-check" class="cs-hdr-st2-toggle" aria-label="メニューを開閉する">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>

    <div class="cs-hdr-st2-drawer">
        <label for="cs-hdr-st2-check" class="cs-hdr-st2-drawer-bg"></label>
        
        <ul class="cs-hdr-st2-drawer-menu">
            <li><a href="#">サービス</a></li>
            <li><a href="#">料金プラン</a></li>
            <li><a href="#">会社概要</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </div>
</header>
CSS
/* =========================================
   1. ヘッダー全体の大枠
========================================= */
.cs-hdr-st2-env {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #eef3f6;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    z-index: 9999;
}

.cs-hdr-st2-hidden-check {
    display: none;
}

/* =========================================
   2. インナーコンテナ
========================================= */
.cs-hdr-st2-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 90px; /* パターン1より少し高さを出して余白を演出 */
    margin: 0 auto;
    padding: 0 4vw;
    box-sizing: border-box;
    position: relative;
    z-index: 10002;
}

/* =========================================
   3. 中央：ロゴエリア
========================================= */
.cs-hdr-st2-logo {
    margin: 0 40px; /* ナビとの余白 */
    flex-shrink: 0;
}
.cs-hdr-st2-logo a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}
.cs-hdr-st2-logo img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* =========================================
   4. 左右：PC用スプリットナビゲーション
========================================= */
/* flex: 1; を指定することで、ロゴが左右の文字数に影響されず完全に中央に配置されます */
.cs-hdr-st2-nav-left {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.cs-hdr-st2-nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}
.cs-hdr-st2-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 35px; /* メニュー間の余白 */
}
.cs-hdr-st2-link {
    display: block;
    color: #555555;
    font-size: 0.95rem; /* 上品さを出すため少し小さめに */
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    padding: 10px 0;
    position: relative;
    transition: color 0.4s ease;
}
.cs-hdr-st2-link:hover {
    color: #2589d0;
}
/* 上品な下線アニメーション（左から右へ流れるように出現） */
.cs-hdr-st2-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px; /* 細い線で上品に */
    background-color: #2589d0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.cs-hdr-st2-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* =========================================
   5. スマホ用：ハンバーガーボタン＆スペーサー
========================================= */
/* ロゴを中央に保つための見えない箱 */
.cs-hdr-st2-mobile-spacer {
    display: none;
    width: 30px; 
}
.cs-hdr-st2-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
}
.cs-hdr-st2-toggle span {
    width: 100%;
    height: 1px; /* エレガントな細線ハンバーガー */
    background-color: #333333;
    transition: all 0.3s ease;
    transform-origin: left center;
}

/* ▼ チェックが入った時（開いた時）のボタンアニメーション ▼ */
.cs-hdr-st2-hidden-check:checked ~ .cs-hdr-st2-inner .cs-hdr-st2-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(1px, -1px);
}
.cs-hdr-st2-hidden-check:checked ~ .cs-hdr-st2-inner .cs-hdr-st2-toggle span:nth-child(2) {
    opacity: 0;
}
.cs-hdr-st2-hidden-check:checked ~ .cs-hdr-st2-inner .cs-hdr-st2-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(1px, 1px);
}

/* =========================================
   6. スマホ用：ドロワーメニュー
========================================= */
.cs-hdr-st2-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.cs-hdr-st2-drawer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
}

.cs-hdr-st2-drawer-menu {
    position: relative;
    z-index: 10001;
    list-style: none;
    padding: 120px 0 0 0;
    margin: 0;
    text-align: center;
}
.cs-hdr-st2-drawer-menu li {
    margin-bottom: 35px;
}
.cs-hdr-st2-drawer-menu a {
    display: inline-block;
    color: #333333;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.cs-hdr-st2-drawer-menu a:hover {
    color: #2589d0;
}

/* ▼ チェックが入った時の表示切替 ▼ */
.cs-hdr-st2-hidden-check:checked ~ .cs-hdr-st2-drawer {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   7. レスポンシブ対応（画面幅900px以下）
========================================= */
@media screen and (max-width: 900px) {
    .cs-hdr-st2-nav {
        display: none; /* 左右のPCナビを非表示 */
    }
    .cs-hdr-st2-mobile-spacer {
        display: block; /* ロゴ中央維持のためのスペーサー表示 */
    }
    .cs-hdr-st2-toggle {
        display: flex; /* ハンバーガーボタン表示 */
    }
    .cs-hdr-st2-logo {
        margin: 0; /* スマホ時は余白リセット */
    }
    .cs-hdr-st2-drawer {
        display: block;
    }
}

画面の真ん中にロゴを配置し、左右にナビゲーションリンクを均等（例えば左に2つ、右に2つ）に振り分けるレイアウトになります。

左右対称（シンメトリー）になるため、洗練されていておしゃれなブランド力のある印象を与えます。

アパレル、美容系、ポートフォリオサイトなどで大人気のデザインです。

ナビ中央・右端ボタン固定

無料で試す
無料で試す
HTML
<header class="cs-hdr-st3-env">
    <input type="checkbox" id="cs-hdr-st3-check" class="cs-hdr-st3-hidden-check">

    <div class="cs-hdr-st3-inner">
        <div class="cs-hdr-st3-logo-area">
            <a href="#" class="cs-hdr-st3-logo">
                <img src="https://placehold.jp/24f8fa/2589d0/150x45.png?text=SaaS+LOGO" alt="サンプルロゴ">
            </a>
        </div>

        <nav class="cs-hdr-st3-nav">
            <ul class="cs-hdr-st3-menu">
                <li><a href="#" class="cs-hdr-st3-link">機能</a></li>
                <li><a href="#" class="cs-hdr-st3-link">導入事例</a></li>
                <li><a href="#" class="cs-hdr-st3-link">料金</a></li>
            </ul>
        </nav>

        <div class="cs-hdr-st3-action">
            <a href="#" class="cs-hdr-st3-login">ログイン</a>
            <a href="#" class="cs-hdr-st3-btn">無料で試す</a>
        </div>

        <label for="cs-hdr-st3-check" class="cs-hdr-st3-toggle" aria-label="メニューを開閉する">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>

    <div class="cs-hdr-st3-drawer">
        <label for="cs-hdr-st3-check" class="cs-hdr-st3-drawer-bg"></label>
        
        <div class="cs-hdr-st3-drawer-content">
            <ul class="cs-hdr-st3-drawer-menu">
                <li><a href="#">機能</a></li>
                <li><a href="#">導入事例</a></li>
                <li><a href="#">料金</a></li>
            </ul>
            <div class="cs-hdr-st3-drawer-action">
                <a href="#" class="cs-hdr-st3-btn">無料で試す</a>
                <a href="#" class="cs-hdr-st3-login">ログインはこちら</a>
            </div>
        </div>
    </div>
</header>
CSS
/* =========================================
   1. ヘッダー全体の大枠
========================================= */
.cs-hdr-st3-env {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #eef3f6;
    box-sizing: border-box;
    font-family: sans-serif;
    position: relative;
    z-index: 9999;
}

.cs-hdr-st3-hidden-check {
    display: none;
}

/* =========================================
   2. インナーコンテナ
========================================= */
.cs-hdr-st3-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 75px; /* スタンダードな高さ */
    margin: 0 auto;
    padding: 0 4vw;
    box-sizing: border-box;
    position: relative;
    z-index: 10002;
}

/* =========================================
   3. 3分割レイアウトの設定（左・中央・右）
========================================= */
/* ロゴを左端、アクションを右端にしつつ、ナビゲーションを確実に中央に配置するため、左右のflexを1にします */
.cs-hdr-st3-logo-area {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}
.cs-hdr-st3-nav {
    display: flex;
    justify-content: center;
}
.cs-hdr-st3-action {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px; /* ログインとボタンの隙間 */
}

/* =========================================
   4. 各パーツのデザイン
========================================= */
/* --- ロゴ --- */
.cs-hdr-st3-logo {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}
.cs-hdr-st3-logo img {
    max-height: 45px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* --- 中央ナビゲーション --- */
.cs-hdr-st3-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 25px;
}
.cs-hdr-st3-link {
    display: block;
    color: #444444;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    padding: 10px 0;
    transition: color 0.2s ease;
}
.cs-hdr-st3-link:hover {
    color: #2589d0;
}

/* --- 右側アクション（ログインリンク＆ボタン） --- */
.cs-hdr-st3-login {
    color: #555555;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.cs-hdr-st3-login:hover {
    color: #2589d0;
}
.cs-hdr-st3-btn {
    display: inline-block;
    background-color: #2589d0;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 12px 24px;
    border-radius: 6px; /* 少し丸みのあるモダンなボタン */
    box-shadow: 0 4px 10px rgba(37, 137, 208, 0.2);
    transition: all 0.3s ease;
}
.cs-hdr-st3-btn:hover {
    background-color: #1c6fa8;
    box-shadow: 0 6px 15px rgba(37, 137, 208, 0.3);
    transform: translateY(-2px); /* ホバーで少し浮き上がる */
    color: #ffffff;
}

/* =========================================
   5. スマホ用：ハンバーガーボタン
========================================= */
.cs-hdr-st3-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
}
.cs-hdr-st3-toggle span {
    width: 100%;
    height: 2px;
    background-color: #333333;
    transition: all 0.3s ease;
    transform-origin: left center;
}
.cs-hdr-st3-hidden-check:checked ~ .cs-hdr-st3-inner .cs-hdr-st3-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(1px, -1px);
}
.cs-hdr-st3-hidden-check:checked ~ .cs-hdr-st3-inner .cs-hdr-st3-toggle span:nth-child(2) {
    opacity: 0;
}
.cs-hdr-st3-hidden-check:checked ~ .cs-hdr-st3-inner .cs-hdr-st3-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(1px, 1px);
}

/* =========================================
   6. スマホ用：ドロワーメニュー
========================================= */
.cs-hdr-st3-drawer {
    display: none;
    position: fixed; /* ドロワー自体は画面全体を覆う */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cs-hdr-st3-drawer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
}
.cs-hdr-st3-drawer-content {
    position: relative;
    z-index: 10001;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10%;
    box-sizing: border-box;
}

.cs-hdr-st3-drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    text-align: center;
}
.cs-hdr-st3-drawer-menu li {
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}
.cs-hdr-st3-drawer-menu a {
    display: block;
    color: #333333;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none !important;
    padding-bottom: 15px;
}

/* ドロワー内のアクションボタン */
.cs-hdr-st3-drawer-action {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}
.cs-hdr-st3-drawer-action .cs-hdr-st3-btn {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
}
.cs-hdr-st3-drawer-action .cs-hdr-st3-login {
    display: inline-block;
    padding: 10px;
}

.cs-hdr-st3-hidden-check:checked ~ .cs-hdr-st3-drawer {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   7. レスポンシブ対応（画面幅900px以下）
========================================= */
@media screen and (max-width: 900px) {
    .cs-hdr-st3-nav,
    .cs-hdr-st3-action {
        display: none; /* 中央ナビと右アクションを非表示 */
    }
    .cs-hdr-st3-toggle {
        display: flex;
    }
    .cs-hdr-st3-drawer {
        display: block;
    }
}

左にロゴ、中央にナビゲーションリンク群をギュッとまとめ、右端には目立つCTAボタン（「お問い合わせ」「資料請求」「無料登録」など）を配置するレイアウトになります。

近年の企業サイトやWebサービス（SaaS）で最も主流なモダンレイアウトです。

ユーザーに行動（コンバージョン）を促すことに特化しています。

上下2段構成・中央揃え

HTML
<header class="cs-hdr-st4-env">
    <input type="checkbox" id="cs-hdr-st4-check" class="cs-hdr-st4-hidden-check">

    <div class="cs-hdr-st4-top">
        <div class="cs-hdr-st4-mobile-spacer"></div>

        <div class="cs-hdr-st4-logo">
            <a href="#">
                <img src="https://placehold.jp/24f8fa/2589d0/220x60.png?text=MEDIA+LOGO" alt="メディアロゴ">
            </a>
        </div>

        <label for="cs-hdr-st4-check" class="cs-hdr-st4-toggle" aria-label="メニューを開閉する">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>

    <div class="cs-hdr-st4-bottom">
        <nav class="cs-hdr-st4-nav">
            <ul class="cs-hdr-st4-menu">
                <li><a href="#" class="cs-hdr-st4-link">トップ</a></li>
                <li><a href="#" class="cs-hdr-st4-link">HTML/CSS</a></li>
                <li><a href="#" class="cs-hdr-st4-link">WordPress</a></li>
                <li><a href="#" class="cs-hdr-st4-link">デザイン</a></li>
                <li><a href="#" class="cs-hdr-st4-link">SEO対策</a></li>
            </ul>
        </nav>
    </div>

    <div class="cs-hdr-st4-drawer">
        <label for="cs-hdr-st4-check" class="cs-hdr-st4-drawer-bg"></label>
        
        <div class="cs-hdr-st4-drawer-content">
            <ul class="cs-hdr-st4-drawer-menu">
                <li><a href="#">トップ</a></li>
                <li><a href="#">HTML/CSS</a></li>
                <li><a href="#">WordPress</a></li>
                <li><a href="#">デザイン</a></li>
                <li><a href="#">SEO対策</a></li>
            </ul>
        </div>
    </div>
</header>
CSS
/* =========================================
   1. ヘッダー全体の大枠
========================================= */
.cs-hdr-st4-env {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: sans-serif;
    position: relative;
    z-index: 9999;
}
.cs-hdr-st4-hidden-check {
    display: none;
}

/* =========================================
   2. 上段：ロゴエリア
========================================= */
.cs-hdr-st4-top {
    display: flex;
    justify-content: center; /* PCではロゴを中央寄せ */
    align-items: center;
    width: 100%;
    padding: 25px 4vw; /* 上下にゆったりとした余白 */
    box-sizing: border-box;
    position: relative;
    z-index: 10002;
}

.cs-hdr-st4-logo {
    display: flex;
    align-items: center;
}
.cs-hdr-st4-logo a {
    text-decoration: none !important;
}
.cs-hdr-st4-logo img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* =========================================
   3. 下段：ナビゲーションバー（PC用）
========================================= */
.cs-hdr-st4-bottom {
    width: 100%;
    background-color: #2589d0; /* メインカラーの背景 */
}

.cs-hdr-st4-nav {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4vw;
    box-sizing: border-box;
}

.cs-hdr-st4-menu {
    display: flex;
    justify-content: center; /* メニュー全体を中央寄せ */
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-hdr-st4-link {
    display: block;
    color: #ffffff; /* 白抜き文字 */
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 16px 30px;
    transition: background-color 0.3s ease;
}
.cs-hdr-st4-link:hover {
    background-color: rgba(255, 255, 255, 0.15); /* ホバー時にうっすら白く光らせる */
}

/* =========================================
   4. スマホ用：ハンバーガーボタン＆スペーサー
========================================= */
.cs-hdr-st4-mobile-spacer {
    display: none;
    width: 30px; /* ハンバーガーと同じ幅にしてロゴを中央に保つ */
}
.cs-hdr-st4-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
}
.cs-hdr-st4-toggle span {
    width: 100%;
    height: 2px;
    background-color: #333333;
    transition: all 0.3s ease;
    transform-origin: left center;
}

/* ▼ チェックが入った時のボタンアニメーション ▼ */
.cs-hdr-st4-hidden-check:checked ~ .cs-hdr-st4-top .cs-hdr-st4-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(2px, -2px);
}
.cs-hdr-st4-hidden-check:checked ~ .cs-hdr-st4-top .cs-hdr-st4-toggle span:nth-child(2) {
    opacity: 0;
}
.cs-hdr-st4-hidden-check:checked ~ .cs-hdr-st4-top .cs-hdr-st4-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 2px);
}

/* =========================================
   5. スマホ用：ドロワーメニュー
========================================= */
.cs-hdr-st4-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cs-hdr-st4-drawer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
}

.cs-hdr-st4-drawer-content {
    position: relative;
    z-index: 10001;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 100px 10% 0 10%;
    box-sizing: border-box;
}

.cs-hdr-st4-drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.cs-hdr-st4-drawer-menu li {
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}
.cs-hdr-st4-drawer-menu a {
    display: block;
    color: #333333;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none !important;
    padding-bottom: 15px;
    transition: color 0.3s ease;
}
.cs-hdr-st4-drawer-menu a:hover {
    color: #2589d0;
}

.cs-hdr-st4-hidden-check:checked ~ .cs-hdr-st4-drawer {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   6. レスポンシブ対応（画面幅900px以下）
========================================= */
@media screen and (max-width: 900px) {
    .cs-hdr-st4-bottom {
        display: none; /* スマホ時は下段ナビを非表示 */
    }
    .cs-hdr-st4-top {
        justify-content: space-between; /* ロゴを中央、ボタンを右に振り分け */
        padding: 15px 5vw;
        border-bottom: 1px solid #eef3f6; /* スマホ時は境界線を追加 */
    }
    .cs-hdr-st4-mobile-spacer {
        display: block;
    }
    .cs-hdr-st4-toggle {
        display: flex;
    }
    .cs-hdr-st4-drawer {
        display: block;
    }
}

上段の中央に大きくロゴを配置し、下段に横幅いっぱいのナビゲーションバー（背景色付きが多い）を配置する2段型のレイアウトになります。

カテゴリー数が多いサイトに向いています。

情報量が多くてもスッキリ見せることができ、ニュースサイトやオウンドメディアでよく採用されます。

PCハンバーガーメニュー固定

HTML
<header class="cs-hdr-st5-env">
    <input type="checkbox" id="cs-hdr-st5-check" class="cs-hdr-st5-hidden-check">

    <div class="cs-hdr-st5-inner">
        <div class="cs-hdr-st5-logo">
            <a href="#">
                <img src="https://placehold.jp/24f8fa/2589d0/140x50.png?text=MINIMAL" alt="ミニマルロゴ">
            </a>
        </div>

        <label for="cs-hdr-st5-check" class="cs-hdr-st5-toggle" aria-label="メニューを開閉する">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>

    <div class="cs-hdr-st5-drawer">
        <label for="cs-hdr-st5-check" class="cs-hdr-st5-drawer-bg"></label>
        
        <div class="cs-hdr-st5-drawer-content">
            <ul class="cs-hdr-st5-drawer-menu">
                <li><a href="#" data-text="HOME">HOME</a></li>
                <li><a href="#" data-text="WORKS">WORKS</a></li>
                <li><a href="#" data-text="ABOUT">ABOUT</a></li>
                <li><a href="#" data-text="SERVICE">SERVICE</a></li>
                <li><a href="#" data-text="CONTACT">CONTACT</a></li>
            </ul>
        </div>
    </div>
</header>
CSS
/* =========================================
   1. ヘッダー全体の大枠
========================================= */
.cs-hdr-st5-env {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    z-index: 9999;
}
.cs-hdr-st5-hidden-check {
    display: none;
}

/* =========================================
   2. インナーコンテナ
========================================= */
.cs-hdr-st5-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 100px; /* 余白を広めに取るため少し高めに設定 */
    margin: 0 auto;
    padding: 0 5vw; /* 左右の余白も広めに */
    box-sizing: border-box;
    position: relative;
    z-index: 10002; /* ドロワーより上に配置（閉じるボタンとして機能させるため） */
}

/* =========================================
   3. 左側：ロゴエリア
========================================= */
.cs-hdr-st5-logo {
    position: relative;
    z-index: 10002;
}
.cs-hdr-st5-logo a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}
.cs-hdr-st5-logo img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* =========================================
   4. 右側：ハンバーガーボタン（PC・スマホ共通表示）
========================================= */
.cs-hdr-st5-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 36px; /* 少し大きめの優雅なボタン */
    height: 24px;
    cursor: pointer;
    position: relative;
    z-index: 10002;
}
/* ホバー時に少し線を広げるクリエイティブな演出 */
.cs-hdr-st5-toggle:hover span:nth-child(1) { transform: translateY(-2px); }
.cs-hdr-st5-toggle:hover span:nth-child(3) { transform: translateY(2px); }

.cs-hdr-st5-toggle span {
    width: 100%;
    height: 2px;
    background-color: #111111;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-origin: center;
}

/* ▼ チェックが入った時（開いた時）の「×」アニメーション ▼ */
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-inner .cs-hdr-st5-toggle span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-inner .cs-hdr-st5-toggle span:nth-child(2) {
    opacity: 0;
}
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-inner .cs-hdr-st5-toggle span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* =========================================
   5. 全画面ドロワーメニュー
========================================= */
.cs-hdr-st5-drawer {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* visibilityを追加 */
}

.cs-hdr-st5-drawer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(250, 250, 250, 0.98); 
    cursor: pointer;
}

.cs-hdr-st5-drawer-content {
    position: relative;
    z-index: 10001;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cs-hdr-st5-drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.cs-hdr-st5-drawer-menu li {
    margin-bottom: 20px;
    overflow: hidden; 
}

.cs-hdr-st5-drawer-menu a {
    display: inline-block;
    color: #111111;
    font-size: clamp(2.5rem, 6vw, 4rem); 
    font-weight: 900;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    position: relative;
    transition: color 0.3s ease;
    transform: translateY(100%);
    opacity: 0;
}

.cs-hdr-st5-drawer-menu a:hover {
    color: #2589d0;
    transform: translateX(10px) !important; 
}

/* ▼ チェックが入った時の表示切替とアニメーション ▼ */
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-drawer {
    visibility: visible; /* チェック時に可視化を追加 */
    opacity: 1;
    pointer-events: auto;
}

.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-drawer .cs-hdr-st5-drawer-menu li:nth-child(1) a {
    animation: cs-fadeUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s forwards;
}
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-drawer .cs-hdr-st5-drawer-menu li:nth-child(2) a {
    animation: cs-fadeUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s forwards;
}
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-drawer .cs-hdr-st5-drawer-menu li:nth-child(3) a {
    animation: cs-fadeUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s forwards;
}
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-drawer .cs-hdr-st5-drawer-menu li:nth-child(4) a {
    animation: cs-fadeUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s forwards;
}
.cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-drawer .cs-hdr-st5-drawer-menu li:nth-child(5) a {
    animation: cs-fadeUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s forwards;
}

@keyframes cs-fadeUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =========================================
   6. レスポンシブ対応（画面幅900px以下）
========================================= */
@media screen and (max-width: 900px) {
    .cs-hdr-st5-inner {
        height: 80px;
        padding: 0 5vw;
    }
    .cs-hdr-st5-toggle {
        width: 30px;
        height: 20px;
    }
    .cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-inner .cs-hdr-st5-toggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .cs-hdr-st5-hidden-check:checked ~ .cs-hdr-st5-inner .cs-hdr-st5-toggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

左（または中央）にロゴを置き、右端にはテキストリンクを置かず「ハンバーガーアイコン（三本線）」のみを配置するレイアウトになります。

本来スマホ用のUIですが、PCでもあえて採用することで画面の余白を極限まで活かすスタイルです。

デザイン会社や建築系など、写真や動画の世界観を邪魔したくないサイトで好まれます。

上部ユーティリティバー付き

受付時間: 平日 9:00 – 18:00（土日祝休）
よくある質問 アクセス English
お電話でのご相談
03-0000-0000
お問い合わせ
お問い合わせ
お電話でのご相談 03-0000-0000
HTML
<header class="cs-hdr-st6-env">
    <input type="checkbox" id="cs-hdr-st6-check" class="cs-hdr-st6-hidden-check">

    <div class="cs-hdr-st6-utility">
        <div class="cs-hdr-st6-utility-inner">
            <div class="cs-hdr-st6-utility-left">
                <span>受付時間: 平日 9:00 - 18:00（土日祝休）</span>
            </div>
            <div class="cs-hdr-st6-utility-right">
                <a href="#">よくある質問</a>
                <a href="#">アクセス</a>
                <a href="#">English</a>
            </div>
        </div>
    </div>

    <div class="cs-hdr-st6-main">
        <div class="cs-hdr-st6-main-inner">
            <div class="cs-hdr-st6-logo">
                <a href="#">
                    <img src="https://placehold.jp/24f8fa/2589d0/180x50.png?text=CORPORATE" alt="コーポレートロゴ">
                </a>
            </div>

            <nav class="cs-hdr-st6-nav">
                <ul class="cs-hdr-st6-menu">
                    <li><a href="#" class="cs-hdr-st6-link">企業情報</a></li>
                    <li><a href="#" class="cs-hdr-st6-link">事業内容</a></li>
                    <li><a href="#" class="cs-hdr-st6-link">サステナビリティ</a></li>
                    <li><a href="#" class="cs-hdr-st6-link">採用情報</a></li>
                </ul>
            </nav>

            <div class="cs-hdr-st6-action">
                <div class="cs-hdr-st6-tel-block">
                    <div class="cs-hdr-st6-tel-label">お電話でのご相談</div>
                    <div class="cs-hdr-st6-tel-number">03-0000-0000</div>
                </div>
                <a href="#" class="cs-hdr-st6-btn">お問い合わせ</a>
            </div>

            <label for="cs-hdr-st6-check" class="cs-hdr-st6-toggle" aria-label="メニューを開閉する">
                <span></span>
                <span></span>
                <span></span>
            </label>
        </div>
    </div>

    <div class="cs-hdr-st6-drawer">
        <label for="cs-hdr-st6-check" class="cs-hdr-st6-drawer-bg"></label>
        
        <div class="cs-hdr-st6-drawer-content">
            <ul class="cs-hdr-st6-drawer-menu">
                <li><a href="#">企業情報</a></li>
                <li><a href="#">事業内容</a></li>
                <li><a href="#">サステナビリティ</a></li>
                <li><a href="#">採用情報</a></li>
                <li class="cs-hdr-st6-drawer-sub"><a href="#">よくある質問</a></li>
                <li class="cs-hdr-st6-drawer-sub"><a href="#">アクセス</a></li>
                <li class="cs-hdr-st6-drawer-sub"><a href="#">English</a></li>
            </ul>
            <div class="cs-hdr-st6-drawer-action">
                <a href="#" class="cs-hdr-st6-btn">お問い合わせ</a>
                <div class="cs-hdr-st6-drawer-tel">
                    <span>お電話でのご相談</span>
                    <strong>03-0000-0000</strong>
                </div>
            </div>
        </div>
    </div>
</header>
CSS
/* =========================================
   1. ヘッダー全体の大枠
========================================= */
.cs-hdr-st6-env {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif; /* コーポレートによく合うフォント */
    position: relative;
    z-index: 9999;
}
.cs-hdr-st6-hidden-check {
    display: none;
}

/* =========================================
   2. 上部：ユーティリティバー
========================================= */
.cs-hdr-st6-utility {
    width: 100%;
    background-color: #f4f8fa;
    border-bottom: 1px solid #eef3f6;
}

.cs-hdr-st6-utility-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 36px;
    margin: 0 auto;
    padding: 0 15px; /* 余白を少し詰める */
    box-sizing: border-box;
    font-size: 0.7rem;
    color: #666666;
}

.cs-hdr-st6-utility-right {
    display: flex;
    gap: 15px; /* 隙間を詰める */
}
.cs-hdr-st6-utility-right a {
    color: #666666;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.cs-hdr-st6-utility-right a:hover {
    color: #2589d0;
}

/* =========================================
   3. 下部：メインヘッダー
========================================= */
.cs-hdr-st6-main {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #eef3f6;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.cs-hdr-st6-main-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 75px; /* 高さを少しスッキリさせる */
    margin: 0 auto;
    padding: 0 15px; /* 左右の余白を詰める */
    box-sizing: border-box;
    position: relative;
    z-index: 10002;
}

/* =========================================
   4. 各パーツのデザイン（800px幅最適化）
========================================= */
/* --- ロゴ --- */
.cs-hdr-st6-logo a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}
.cs-hdr-st6-logo img {
    max-height: 40px; /* 800px幅に合わせて少し縮小 */
    width: auto;
    object-fit: contain;
    display: block;
}

/* --- 中央：メインナビゲーション --- */
.cs-hdr-st6-menu {
    display: flex;
    list-style: none;
    padding: 0 !important;
    margin: 0;
    gap: 15px; /* メニュー間の隙間を詰める */
}
.cs-hdr-st6-link {
    display: block;
    color: #333333;
    font-size: 0.8rem; /* 1行に収めるためのサイズ調整 */
    font-weight: 700;
    text-decoration: none !important;
    padding: 10px 0;
    transition: color 0.2s ease;
}
.cs-hdr-st6-link:hover {
    color: #2589d0;
}

/* --- 右側：アクションエリア --- */
.cs-hdr-st6-action {
    display: flex;
    align-items: center;
    gap: 15px; /* 電話番号とボタンの隙間を詰める */
}

/* 電話番号ブロック */
.cs-hdr-st6-tel-block {
    text-align: right;
    white-space: nowrap; /* 強制的な改行を防ぐ */
}
.cs-hdr-st6-tel-label {
    font-size: 0.65rem;
    color: #666666;
    margin-bottom: 2px;
}
.cs-hdr-st6-tel-number {
    font-size: 1.1rem; /* 少しコンパクトに */
    font-weight: 900;
    color: #111111;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* お問い合わせボタン */
.cs-hdr-st6-btn {
    display: inline-block;
    background-color: #e65c00;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 12px 20px; /* ボタンの余白を少し削る */
    border-radius: 4px;
    white-space: nowrap; /* ボタン内の文字改行を防ぐ */
    transition: all 0.3s ease;
}
.cs-hdr-st6-btn:hover {
    background-color: #cc5200;
    color: #ffffff;
}

/* =========================================
   5. スマホ用：ハンバーガーボタン
========================================= */
.cs-hdr-st6-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
}
.cs-hdr-st6-toggle span {
    width: 100%;
    height: 2px;
    background-color: #333333;
    transition: all 0.3s ease;
    transform-origin: left center;
}
.cs-hdr-st6-hidden-check:checked ~ .cs-hdr-st6-main .cs-hdr-st6-main-inner .cs-hdr-st6-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(2px, -2px);
}
.cs-hdr-st6-hidden-check:checked ~ .cs-hdr-st6-main .cs-hdr-st6-main-inner .cs-hdr-st6-toggle span:nth-child(2) {
    opacity: 0;
}
.cs-hdr-st6-hidden-check:checked ~ .cs-hdr-st6-main .cs-hdr-st6-main-inner .cs-hdr-st6-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 2px);
}

/* =========================================
   6. スマホ用：ドロワーメニュー
========================================= */
.cs-hdr-st6-drawer {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cs-hdr-st6-drawer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
}

.cs-hdr-st6-drawer-content {
    position: relative;
    z-index: 10001;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 80px 8% 0 8%;
    box-sizing: border-box;
    overflow-y: auto;
}

.cs-hdr-st6-drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}
.cs-hdr-st6-drawer-menu li {
    border-bottom: 1px solid #eef3f6;
}
.cs-hdr-st6-drawer-menu a {
    display: block;
    color: #333333;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 16px 0;
}

/* ユーティリティバーのリンクをドロワー内に小さく表示 */
.cs-hdr-st6-drawer-sub a {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #666666 !important;
}

.cs-hdr-st6-drawer-action {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 50px;
}
.cs-hdr-st6-drawer-action .cs-hdr-st6-btn {
    text-align: center;
    padding: 16px;
    font-size: 1rem;
}
.cs-hdr-st6-drawer-tel {
    text-align: center;
    padding: 15px;
    background-color: #f4f8fa;
    border-radius: 4px;
}
.cs-hdr-st6-drawer-tel span {
    display: block;
    font-size: 0.8rem;
    color: #666666;
    margin-bottom: 4px;
}
.cs-hdr-st6-drawer-tel strong {
    display: block;
    font-size: 1.4rem;
    color: #111111;
}

.cs-hdr-st6-hidden-check:checked ~ .cs-hdr-st6-drawer {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   7. レスポンシブ対応（画面幅900px以下）
========================================= */
@media screen and (max-width: 900px) {
    .cs-hdr-st6-utility {
        display: none; /* スマホ時は上部バーを非表示 */
    }
    .cs-hdr-st6-nav,
    .cs-hdr-st6-action {
        display: none; /* 中央ナビとアクションエリアを非表示 */
    }
    .cs-hdr-st6-main-inner {
        height: 70px;
    }
    .cs-hdr-st6-toggle {
        display: flex;
    }
}

メインヘッダーのさらに上部に、細いバー（ユーティリティバー）を配置するレイアウトになります。

そこに「電話番号」「営業時間」「言語切り替え」「SNSアイコン」などの細かい情報を詰め込み、下段にロゴとメインナビを置くスタイルです。

病院、不動産、B2B企業など、ユーザーに電話や問い合わせをしてほしい、あるいは情報量が多いビジネス系のサイトで鉄板のレイアウトです。

ヘッダーメニューを上部に固定する方法

ここでは、ヘッダーを「スクロールしても画面上部に固定（追従）させる方法」を解説します。

CSSでヘッダーを固定するには、主にfixedとstickyという2つのプロパティを使用します。

それぞれの特徴と注意点を理解して、サイトに合った方法を選んでみてください。

ヘッダーメニューを上部に固定する方法
  • ヘッダーメニューを上部に固定する｜position: fixed;
  • ヘッダーメニューを上部に固定する｜position: sticky;

ヘッダーメニューを上部に固定する｜position: fixed;

position: fixed;は、要素を「画面（ブラウザのウィンドウ）の決まった位置に完全に固定して浮かせる」方法です。

スクロール量に関係なく、常に画面の一番上に張り付きます。

▼ デモ：【fixed】の挙動（画面に完全固定）
スクロールしても常に上部に固定されますが、コンテンツの先頭文字（赤い文字）がヘッダーの裏に隠れてしまっていることに注目してください。
Fixed Header（固定）

←ここはコンテンツの先頭ですが、裏に隠れています！

下にスクロールできます ↓
コンテンツ 2
コンテンツ 3
HTML
<div class="cs-fixed-demo-wrap">
    <div class="cs-fixed-demo-title">▼ デモ：【fixed】の挙動（画面に完全固定）</div>
    <div class="cs-fixed-demo-desc">
        スクロールしても常に上部に固定されますが、<strong>コンテンツの先頭文字（赤い文字）がヘッダーの裏に隠れてしまっている</strong>ことに注目してください。
    </div>
    
    <div class="cs-fixed-demo-window">
        <div class="cs-fixed-demo-header">Fixed Header（固定）</div>

        <div class="cs-fixed-demo-scroll-area">
            <div class="cs-fixed-demo-content">
                <p class="cs-fixed-demo-alert">←ここはコンテンツの先頭ですが、裏に隠れています！</p>
                <div class="cs-fixed-demo-box">下にスクロールできます ↓</div>
                <div class="cs-fixed-demo-box">コンテンツ 2</div>
                <div class="cs-fixed-demo-box">コンテンツ 3</div>
            </div>
        </div>
    </div>
</div>
CSS
/* --- fixedデモ用のCSS） --- */
.cs-fixed-demo-wrap {
    margin-bottom: 40px;
    font-family: sans-serif;
}
.cs-fixed-demo-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    border-left: 4px solid #2589d0;
    padding-left: 10px;
}
.cs-fixed-demo-desc {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.6;
}
.cs-fixed-demo-desc strong {
    color: #d9534f;
}

/* 疑似ブラウザウィンドウ（外枠はスクロールさせない） */
.cs-fixed-demo-window {
    width: 100%;
    height: 350px;
    border: 4px solid #444;
    border-radius: 8px 8px 0 0;
    background-color: #fafafa;
    position: relative; /* ヘッダー固定の基準点 */
    overflow: hidden; /* 外枠からはみ出た部分を隠す */
}

/* スクロールエリア（中身だけをスクロールさせる） */
.cs-fixed-demo-scroll-area {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.cs-fixed-demo-scroll-area::-webkit-scrollbar { width: 8px; }
.cs-fixed-demo-scroll-area::-webkit-scrollbar-track { background: #f1f1f1; }
.cs-fixed-demo-scroll-area::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }

/* ヘッダーデザイン（絶対配置で擬似的にfixedを再現） */
.cs-fixed-demo-header {
    position: absolute; /* fixedの代わりにabsoluteを使用 */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2589d0;
    color: #fff;
    padding: 15px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

/* ダミーコンテンツ */
.cs-fixed-demo-content {
    padding: 20px;
    padding-bottom: 400px; /* スクロール用 */
}
.cs-fixed-demo-alert {
    margin-top: 0;
    color: #d9534f;
    font-weight: bold;
    font-size: 0.95rem;
}
.cs-fixed-demo-box {
    width: 100%;
    height: 120px;
    background-color: #eef3f6;
    border: 2px dashed #b0c4de;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-weight: bold;
}

ブラウザの表示領域を基準にするため、どこにHTMLを書いても確実に画面上部に固定されます。

最も古くから使われている手法で、すべてのブラウザで安定して動作します。

ただし、ヘッダーが「宙に浮いた状態」になるため、ヘッダーの高さの分だけ、すぐ下にあるコンテンツ（メインビジュアルなど）が裏側に隠れてしまいます。

そのため、ヘッダーのすぐ下にある要素（またはbodyタグ）に対して、ヘッダーの高さと同じだけのpadding-top（上部の余白）を設定して、隠れないように押し下げる必要があります。

ヘッダーメニューを上部に固定する｜position: sticky;

position: sticky;は、近年主流になっている便利なプロパティです。

最初は通常のレイアウト通りに配置されていますが、スクロールして画面の上端に到達した瞬間にピタッと吸着（固定）されます。

▼ デモ：【sticky】の挙動（スクロール吸着）
最初は黒いお知らせバーの下にありますが、スクロールして上端に触れた瞬間にピタッと吸着します。コンテンツが裏に隠れることもありません。
お知らせバー（スクロールで消えます）
Sticky Header（吸着）

←コンテンツの先頭が隠れずに見えています！

下にスクロールできます ↓
コンテンツ 2
コンテンツ 3
HTML
<!-- =========================================
     体験デモ：position: sticky; の挙動
========================================= -->
<div class="cs-sticky-demo-wrap">
    <div class="cs-sticky-demo-title">▼ デモ：【sticky】の挙動（スクロール吸着）</div>
    <div class="cs-sticky-demo-desc">
        最初は黒いお知らせバーの下にありますが、<strong>スクロールして上端に触れた瞬間にピタッと吸着</strong>します。コンテンツが裏に隠れることもありません。
    </div>
    
    <div class="cs-sticky-demo-window">
        <div class="cs-sticky-demo-topbar">お知らせバー（スクロールで消えます）</div>
        <div class="cs-sticky-demo-header">Sticky Header（吸着）</div>
        <div class="cs-sticky-demo-content">
            <p class="cs-sticky-demo-safe">←コンテンツの先頭が隠れずに見えています！</p>
            <div class="cs-sticky-demo-box">下にスクロールできます ↓</div>
            <div class="cs-sticky-demo-box">コンテンツ 2</div>
            <div class="cs-sticky-demo-box">コンテンツ 3</div>
        </div>
    </div>
</div>
CSS
/* --- stickyデモ用のCSS --- */
.cs-sticky-demo-wrap {
    margin-bottom: 40px;
    font-family: sans-serif;
}
.cs-sticky-demo-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    border-left: 4px solid #e65c00;
    padding-left: 10px;
}
.cs-sticky-demo-desc {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.6;
}
.cs-sticky-demo-desc strong {
    color: #e65c00;
}

/* 疑似ブラウザウィンドウ */
.cs-sticky-demo-window {
    width: 100%;
    height: 350px;
    overflow-y: auto;
    border: 4px solid #444;
    border-radius: 8px 8px 0 0;
    background-color: #fafafa;
    position: relative;
}
.cs-sticky-demo-window::-webkit-scrollbar { width: 8px; }
.cs-sticky-demo-window::-webkit-scrollbar-track { background: #f1f1f1; }
.cs-sticky-demo-window::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }

/* お知らせバー */
.cs-sticky-demo-topbar {
    background-color: #333;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    padding: 8px;
}

/* ヘッダーデザイン（sticky） */
.cs-sticky-demo-header {
    position: -webkit-sticky; /* Safari対応 */
    position: sticky;
    top: 0;
    background-color: #e65c00;
    color: #fff;
    padding: 15px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

/* ダミーコンテンツ */
.cs-sticky-demo-content {
    padding: 20px;
    padding-bottom: 400px; /* スクロール用 */
}
.cs-sticky-demo-safe {
    margin-top: 0;
    color: #2589d0;
    font-weight: bold;
    font-size: 0.95rem;
}
.cs-sticky-demo-box {
    width: 100%;
    height: 120px;
    background-color: #eef3f6;
    border: 2px dashed #b0c4de;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-weight: bold;
}

固定されるまでは通常の要素として場所を確保するため、下のコンテンツが裏側に隠れる心配がありません。（padding-topでの調整が不要です）

お知らせバー（ユーティリティバー）の下にメインヘッダーがある場合など、「ある程度スクロールしてから固定させたい」時に大活躍します。

親要素（ヘッダーを囲んでいる外側のタグなど）にoverflow: hidden;やoverflow: clip;というCSSが設定されていると、stickyが全く効かなくなります。（初心者が最もつまづきやすいポイントです）

親要素の高さの範囲内でしか追従しないため、HTMLの構造を正しく組む必要があります。

初心者におすすめなのはposition: sticky;です。

裏側にコンテンツが隠れるレイアウト崩れが起きないため、追加のCSS調整の手間が省けます。

もしstickyを設定してもスクロールで固定されない（効かない）場合は、親要素のどこかにoverflow: hidden;がかかっている可能性が高いです。

その場合はposition: fixed;を使い、コンテンツの頭出し（padding調整）を行うのが確実です。

まとめ

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

本記事のまとめ
  • display: flex;を用い、ロゴやナビゲーションの左右配置・中央揃え（justify-content/align-items）を制御する。
  • @mediaを使用し、画面幅に応じてPC用ナビゲーションとスマホ用ドロワーメニューの表示状態を切り替える。
  • 隠しチェックボックスと:checked疑似クラス（チェックボックスハック）を活用し、JS不要でメニューの開閉機構を実装する。
  • z-indexを設定し、ヘッダーや全画面ドロワーが他のコンテンツより前面（上層）に表示されるよう管理する。
  • position: fixed;は画面の決まった位置に完全固定されるが、後続のコンテンツが裏に隠れるため padding-top等での余白確保を要する。
  • position: sticky;はスクロール位置に応じて吸着しコンテンツも隠れないが、親要素に overflow: hidden;が指定されていると機能しない。
  • transitionやtransformを組み合わせ、ボタンの変形（ハンバーガーから×への変化）やホバー時の下線アニメーションを実装する。
  • width: 100%;とbox-sizing: border-box;を指定し、記事枠や画面幅からの意図しないはみ出しを防止する。
  • インナーコンテナにmax-widthとmargin: 0 auto;を設定し、大画面でもコンテンツが広がりすぎないよう中央に束ねる。

よくある質問（FAQ）

ヘッダーを画面の上部に固定するにはどうすればいいですか？

CSSのpositionプロパティを使用します。

主に以下の2つの方法があります。

  • position: fixed;
    画面の決まった位置に完全に固定します。
    常に上部に表示されますが、後続の要素が裏に回り込んでしまうため、padding-topで余白の調整が必要です。
  • position: sticky;
    スクロールして指定した位置（top: 0;など）に到達した瞬間に吸着させます。
    要素が裏に隠れる心配がなく、最近の主流な手法です。
ロゴとナビゲーションメニューを左右に分けて配置するには？

Flexbox（フレックスボックス）を使用するのが簡単で確実です。

ヘッダーの親要素に対してdisplay: flex;を指定し、続けてjustify-content: space-between;を設定することで、中の要素（ロゴとメニュー）が自動的に左右の両端へ振り分けられます。

縦方向の中央揃えにはalign-items: center;を併用します。

position: fixed;にすると、下のコンテンツがヘッダーの裏に隠れてしまいます。

fixedを指定した要素は、通常のレイアウトから「宙に浮いた状態」になるため、本来あったはずのスペースが詰められてしまうのが原因です。

ヘッダーの実際の高さ（例：80px）を確認し、そのすぐ下にある要素（またはbodyタグ）に対してpadding-top: 80px;を指定し、隠れてしまう分を物理的に下に押し下げてください。

PCとスマホでヘッダーのデザインを変える（レスポンシブ化）には？

CSSのメディアクエリ（@media） を使用して、画面幅に応じて適用するスタイルを切り替えます。

一般的なアプローチとして、PCでは横並びのメニュー（display: flex;）を表示しておき、画面幅が狭くなった時（例：@media screen and (max-width: 900px)）に、そのメニューをdisplay: none;で非表示にします。

代わりに、スマホ用のハンバーガーボタン（三本線）を表示させるように組みます。

スクロールすると「透明」から「白背景」に変わるヘッダーはどう作りますか？

CSSだけでは「どれくらいスクロールしたか」を検知できないため、JavaScriptとの組み合わせが必要です。

  • CSS
    ヘッダーの初期状態をbackground-color: transparent;にし、変化を滑らかにするためtransition: background-color 0.3s;を設定します。
    さらに、背景が白くなる用のクラス（例：.is-white）も作っておきます。
  • JS
    「画面が〇〇pxスクロールされたら、ヘッダーに.is-whiteクラスを追加する」という簡単なプログラムを記述して制御します。
あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

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

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

この記事を書いた人

sugiのアバター sugi Site operator

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

関連記事

目次