下層ページヘッダー（パンくず付き）

パンくず・ページタイトル・要約・メタ情報をまとめた下層ページの見出し帯。背景のグラデーションがゆっくり流れます。記事・一覧・サービス詳細など第2階層以下の冒頭に使える定型です。

#title#page-header#breadcrumb#heading

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- Sakura：下層ニュース記事のページヘッダー -->
<header class="tph">
  <div class="tph-inner">
    <nav class="tph-crumbs" aria-label="パンくず">
      <a href="#" onclick="return false">ホーム</a>
      <span class="tph-sep">/</span>
      <a href="#" onclick="return false">ニュース</a>
      <span class="tph-sep">/</span>
      <span class="tph-current">ライブ</span>
    </nav>

    <h1 class="tph-title">2nd LIVE TOUR「星降る夜の桜物語」開催決定</h1>
    <p class="tph-desc">全国6都市をめぐる2ndツアーの開催が決定しました。チケット先行抽選の受付スケジュールと、各公演の詳細をお知らせします。</p>

    <div class="tph-meta">
      <span class="tph-tag">Live</span>
      <span class="tph-dot">·</span>
      <span>2026.06.11</span>
      <span class="tph-dot">·</span>
      <span>by Sakura 運営</span>
    </div>
  </div>
</header>

CSS

/* Sakura（アイドル）：下層ページヘッダーの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif; }

.tph {
  width: 100%; min-height: 380px; display: grid; align-content: center;
  padding: 44px 40px; position: relative; overflow: hidden; color: #fff0f6;
  background: linear-gradient(115deg, #20101c 0%, #7b1d54 55%, #d6336c 100%);
  background-size: 200% 200%; animation: tph-drift 16s ease infinite;
}
@keyframes tph-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.tph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
}

.tph-inner { position: relative; z-index: 2; max-width: 560px; }
.tph-crumbs { display: flex; align-items: center; gap: 9px; font-size: 12.5px; margin-bottom: 18px; }
.tph-crumbs a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .18s ease; }
.tph-crumbs a:hover { color: #fff; }
.tph-sep { color: rgba(255,255,255,.45); }
.tph-current { color: #fff; font-weight: 600; }
.tph-title { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: .01em; }
.tph-desc { margin: 16px 0 22px; font-size: 14.5px; line-height: 1.85; color: rgba(255,255,255,.84); }
.tph-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.74); }
.tph-tag { font-weight: 700; color: #fff; background: rgba(255,255,255,.18); padding: 4px 12px; border-radius: 999px; }
.tph-dot { color: rgba(255,255,255,.45); }

@media (prefers-reduced-motion: reduce) { .tph { animation: none; } }

実装ガイド

使いどころ

記事・一覧・サービス詳細など第2階層以下のページ冒頭に。パンくず・ページタイトル・要約・メタ情報をまとめた、下層ページの定型見出し帯です。

実装時の注意点

背景はグラデのゆっくりドリフトに、薄いグリッドを ::after でマスク付き合成して質感を足しています。中身はパンくず→大見出し→説明→メタ（タグ・日付・著者）の縦並び。情報の階層が一目で伝わる構成です。

対応ブラウザ

gradient アニメーション・mask-image（-webkit- 併記）・flexbox は全モダンブラウザで対応します。

よくある失敗

パンくずは現在地を非リンクにし、区切り文字に余白を取ること。タイトルが長い場合の折り返しと行間に注意。背景が濃いとメタ情報が沈むので、十分なコントラストを確保します。SEO ではパンくずを構造化データ（BreadcrumbList）にすると効果的です。

応用例

背景をカテゴリ別に色分け、右側にサムネイルやシェアボタンを配置、タイトル下に目次やタブを足す、要約を折りたたみにするなどの拡張ができます。

コード