プログラミングの独学サイトです。

CSS

CSSヘッダーデザイン集｜ロゴ・ナビ・固定ヘッダーの作り方

CSSで作るヘッダーデザインのコピペ集です。ロゴとナビの横並び、中央寄せ、固定ヘッダー、CTAボタン、検索窓、スマホ対応など、HTMLとCSSの例を20個紹介します。

更新 2026.07.12公開 2026.07.08 23分で読めます
この記事の目次
  1. 1. ロゴとナビを横並びにする基本ヘッダー
  2. 2. ロゴを中央に置くヘッダー
  3. 3. ロゴ上・ナビ下の中央寄せヘッダー
  4. 4. stickyで上部に固定するヘッダー
  5. 5. fixedで画面上に固定するヘッダー
  6. 6. ダークカラーのヘッダー
  7. 7. 問い合わせボタンつきヘッダー
  8. 8. 検索窓つきヘッダー
  9. 9. スマホで縦並びにするヘッダー
  10. 10. ハンバーガーボタンの見た目
  11. 11. アナウンスバー付きヘッダー
  12. 12. 2段ナビのヘッダー
  13. 13. 下線ホバーのナビ
  14. 14. ピル型ナビのヘッダー
  15. 15. 透明ヘッダーを画像の上に重ねる
  16. 16. ぼかし背景のヘッダー
  17. 17. ドロップダウンメニューの土台
  18. 18. 横スクロールできるカテゴリナビ
  19. 19. サイト幅にそろえるヘッダー
  20. 20. CSS変数で色を変えやすいヘッダー
  21. ヘッダーデザインで失敗しやすいポイント
  22. 使い分けの目安
  23. まとめ

ヘッダーは、サイト名やロゴ、ナビゲーション、検索、問い合わせボタンなどを置く重要なエリアです。

この記事では、CSSで作れるヘッダーデザインを20個まとめました。ロゴとナビの横並び、中央寄せ、固定ヘッダー、ボタン付き、検索付き、スマホで崩れにくい形などをコピーして使えるようにしています。

1. ロゴとナビを横並びにする基本ヘッダー

PCサイトでよく使う、ロゴ左・ナビ右の基本形です。

<header class="header-basic">
  <a href="#" class="header-logo">LOGO</a>
  <nav class="header-nav">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">お問い合わせ</a>
  </nav>
</header>
.header-basic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.header-logo {
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

.header-nav {
  display: flex;
  gap: 20px;
}

.header-nav a {
  color: #374151;
  text-decoration: none;
}

横並びの基本はflexです。詳しくは CSS flexの使い方 に内部リンクできます。

2. ロゴを中央に置くヘッダー

ブランド名やロゴを中央に見せたい場合の形です。

<header class="header-logo-center">
  <a href="#">ABOUT</a>
  <a href="#" class="logo">LOGO</a>
  <a href="#">CONTACT</a>
</header>
.header-logo-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.header-logo-center a {
  color: #111827;
  text-align: center;
  text-decoration: none;
}

.header-logo-center a:first-child {
  text-align: left;
}

.header-logo-center a:last-child {
  text-align: right;
}

.header-logo-center .logo {
  font-size: 20px;
  font-weight: 700;
}

左右の幅を 1fr にすると、中央のロゴが中央に置きやすくなります。

3. ロゴ上・ナビ下の中央寄せヘッダー

ブログや小規模サイトで使いやすい、縦並びのヘッダーです。

<header class="header-stacked">
  <a href="#" class="logo">Site Name</a>
  <nav>
    <a href="#">記事一覧</a>
    <a href="#">プロフィール</a>
    <a href="#">お問い合わせ</a>
  </nav>
</header>
.header-stacked {
  display: grid;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: #fff;
}

.header-stacked .logo {
  color: #111827;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}

.header-stacked nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.header-stacked nav a {
  color: #475569;
  text-decoration: none;
}

中央寄せの考え方は、CSS中央寄せまとめ とつなげられます。

4. stickyで上部に固定するヘッダー

スクロールしても上に残したい場合は、position: sticky; を使います。

<header class="header-sticky">
  <a href="#">LOGO</a>
  <nav><a href="#">Menu</a></nav>
</header>
.header-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

sticky が効かない場合は、親要素の overflow が影響していることがあります。

5. fixedで画面上に固定するヘッダー

常に画面上部に固定したい場合は、position: fixed; を使います。

<header class="header-fixed">
  <a href="#">LOGO</a>
</header>
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

body {
  padding-top: 57px;
}

fixedヘッダーは本文に重なりやすいので、本文側にヘッダー分の余白を用意します。

6. ダークカラーのヘッダー

背景を濃くした、コーポレートサイトにも使いやすいヘッダーです。

<header class="header-dark">
  <a href="#" class="logo">LOGO</a>
  <nav>
    <a href="#">Service</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
  </nav>
</header>
.header-dark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  background: #111827;
}

.header-dark a {
  color: #fff;
  text-decoration: none;
}

.header-dark nav {
  display: flex;
  gap: 18px;
}

濃い背景では、リンク文字のコントラストをしっかり確保します。

7. 問い合わせボタンつきヘッダー

ナビの最後にCTAボタンを置く、実務でよく使う形です。

<header class="header-cta">
  <a href="#" class="logo">LOGO</a>
  <nav>
    <a href="#">サービス</a>
    <a href="#">料金</a>
    <a href="#" class="cta">お問い合わせ</a>
  </nav>
</header>
.header-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
}

.header-cta a {
  color: #111827;
  text-decoration: none;
}

.header-cta nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-cta .cta {
  padding: 9px 14px;
  color: #fff;
  font-weight: 700;
  background: #2563eb;
  border-radius: 6px;
}

ボタンのバリエーションは、CSSボタンデザイン集 に分けるとよいです。

8. 検索窓つきヘッダー

メディアサイトや記事サイトに使いやすい、検索フォーム付きのヘッダーです。

<header class="header-search">
  <a href="#" class="logo">LOGO</a>
  <form>
    <input type="search" placeholder="検索">
    <button type="submit">検索</button>
  </form>
</header>
.header-search {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.header-search form {
  display: flex;
  overflow: hidden;
  width: min(100%, 320px);
  border: 1px solid #d1d5db;
  border-radius: 9999px;
}

.header-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border: 0;
}

.header-search button {
  padding: 0 14px;
  color: #fff;
  background: #111827;
  border: 0;
}

検索フォーム単体はフォーム記事へつなげられます。

9. スマホで縦並びにするヘッダー

簡単なサイトなら、スマホでは縦並び、PCでは横並びにすると作りやすいです。

<header class="header-responsive">
  <a href="#" class="logo">LOGO</a>
  <nav>
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">お問い合わせ</a>
  </nav>
</header>
.header-responsive {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.header-responsive nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 768px) {
  .header-responsive {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

リンクが多い場合は、無理に横一列にせず折り返せるようにします。

10. ハンバーガーボタンの見た目

開閉動作はJavaScriptが必要ですが、ボタンの見た目はCSSで作れます。

<button class="menu-button" type="button" aria-label="メニューを開く">
  <span></span>
  <span></span>
  <span></span>
</button>
.menu-button {
  display: inline-grid;
  gap: 5px;
  place-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.menu-button span {
  display: block;
  width: 20px;
  height: 2px;
  background: #111827;
}

ボタンには必ず aria-label を付け、何のボタンか伝えます。

11. アナウンスバー付きヘッダー

キャンペーンや重要なお知らせをヘッダー上部に置く形です。

<header class="header-announcement">
  <p>送料無料キャンペーン実施中</p>
  <div>
    <a href="#" class="logo">LOGO</a>
    <nav><a href="#">Menu</a></nav>
  </div>
</header>
.header-announcement p {
  margin: 0;
  padding: 8px 16px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: #2563eb;
}

.header-announcement div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid #e5e7eb;
}

アナウンスバーは短い文にして、ヘッダー全体を高くしすぎないようにします。

12. 2段ナビのヘッダー

上段にロゴ、下段にカテゴリナビを置く形です。

<header class="header-two-row">
  <div class="top">
    <a href="#" class="logo">LOGO</a>
    <a href="#">お問い合わせ</a>
  </div>
  <nav>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">WordPress</a>
  </nav>
</header>
.header-two-row .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}

.header-two-row nav {
  display: flex;
  gap: 18px;
  justify-content: center;
  padding: 10px 24px;
  background: #f8fafc;
}

.header-two-row a {
  color: #111827;
  text-decoration: none;
}

カテゴリが多いメディアサイトで使いやすい構成です。

13. 下線ホバーのナビ

ナビリンクにホバー時の下線を付けると、クリックできることが伝わります。

<nav class="nav-underline">
  <a href="#">Home</a>
  <a href="#">Works</a>
  <a href="#">Contact</a>
</nav>
.nav-underline {
  display: flex;
  gap: 22px;
}

.nav-underline a {
  position: relative;
  color: #111827;
  text-decoration: none;
}

.nav-underline a::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 2px;
  content: "";
  background: #2563eb;
  transform: scaleX(0);
  transition: transform 0.2s;
}

.nav-underline a:hover::after {
  transform: scaleX(1);
}

ホバー表現は CSSホバーエフェクト集 とも相性がよいです。

14. ピル型ナビのヘッダー

ナビ全体を丸い箱に入れるデザインです。

<header class="header-pill-nav">
  <a href="#" class="logo">LOGO</a>
  <nav>
    <a href="#">Top</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>
.header-pill-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
}

.header-pill-nav nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 9999px;
}

.header-pill-nav nav a {
  padding: 8px 12px;
  color: #334155;
  text-decoration: none;
  border-radius: 9999px;
}

.header-pill-nav nav a:hover {
  background: #fff;
}

リンク数が少ないサイトで使いやすい形です。

15. 透明ヘッダーを画像の上に重ねる

ファーストビューの画像上にヘッダーを重ねる場合の例です。

<header class="header-overlay">
  <a href="#">LOGO</a>
  <nav><a href="#">Contact</a></nav>
</header>
.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
}

.header-overlay a {
  color: #fff;
  text-decoration: none;
}

画像の上に置く場合は、背景とのコントラストを必ず確認します。

16. ぼかし背景のヘッダー

固定ヘッダーの背景を少し透過させると、軽い印象になります。

<header class="header-blur">
  <a href="#">LOGO</a>
  <nav><a href="#">Menu</a></nav>
</header>
.header-blur {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(12px);
}

背景が透けるヘッダーは、文字が読みにくくならないように注意します。

17. ドロップダウンメニューの土台

PC向けのシンプルなドロップダウンです。タッチ操作も考えるならJSでの制御が必要です。

<nav class="nav-dropdown">
  <a href="#">Home</a>
  <div class="has-menu">
    <a href="#">Service</a>
    <div class="menu">
      <a href="#">制作</a>
      <a href="#">運用</a>
    </div>
  </div>
</nav>
.nav-dropdown {
  display: flex;
  gap: 20px;
}

.nav-dropdown a {
  color: #111827;
  text-decoration: none;
}

.has-menu {
  position: relative;
}

.has-menu .menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: none;
  min-width: 160px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.has-menu:hover .menu {
  display: grid;
  gap: 8px;
}

本格的に使う場合は、キーボード操作やスマホ操作も確認します。

18. 横スクロールできるカテゴリナビ

カテゴリが多い場合は、スマホで横スクロールにする方法があります。

<nav class="nav-scroll">
  <a href="#">HTML</a>
  <a href="#">CSS</a>
  <a href="#">JavaScript</a>
  <a href="#">WordPress</a>
</nav>
.nav-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 16px;
  white-space: nowrap;
}

.nav-scroll a {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: #334155;
  text-decoration: none;
  background: #f1f5f9;
  border-radius: 9999px;
}

タグ一覧に近いデザインは、CSSバッジ・ラベル・タグデザイン集 ともつなげられます。

19. サイト幅にそろえるヘッダー

ヘッダーの中身だけ最大幅にそろえる、よく使うレイアウトです。

<header class="header-contained">
  <div>
    <a href="#">LOGO</a>
    <nav><a href="#">Menu</a></nav>
  </div>
</header>
.header-contained {
  padding: 0 20px;
  border-bottom: 1px solid #e5e7eb;
}

.header-contained > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 0;
}

ページ全体の最大幅とヘッダーの最大幅をそろえると、レイアウトが安定します。

20. CSS変数で色を変えやすいヘッダー

複数ページで使い回すヘッダーは、色や余白をCSS変数にすると管理しやすくなります。

<header class="header-variable">
  <a href="#">LOGO</a>
  <nav>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>
.header-variable {
  --header-bg: #fff;
  --header-text: #111827;
  --header-border: #e5e7eb;
  --header-gap: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
  padding: 16px 24px;
  color: var(--header-text);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.header-variable a {
  color: inherit;
  text-decoration: none;
}

.header-variable nav {
  display: flex;
  gap: var(--header-gap);
}

色を変えたいときは、--header-bg と --header-text を変更します。

ヘッダーデザインで失敗しやすいポイント

  • スマホでナビが横にはみ出る
  • 固定ヘッダーが本文に重なっている
  • リンクのクリック範囲が小さい
  • 背景画像の上で文字が読みにくい
  • z-index を大きくしすぎて、他のUIと重なり順が壊れる

重なり順で困った場合は、z-indexが効かない原因 を確認します。

使い分けの目安

  • 基本の企業サイト: ロゴ左・ナビ右
  • ブログや個人サイト: ロゴ上・ナビ下
  • 問い合わせを増やしたいページ: CTAボタン付き
  • 記事数が多いサイト: 検索窓付き、カテゴリナビ付き
  • 常に導線を見せたいページ: stickyヘッダー

まとめ

CSSヘッダーは、ロゴ、ナビ、ボタン、検索、固定表示を分けて考えると作りやすくなります。

まずは基本の横並びヘッダーを作り、必要に応じて中央寄せ、固定、CTA、検索、スマホ対応へ広げると、実務でも使いやすいヘッダーになります。

RELATED

あわせて読みたい記事