ヘッダー初級

ニュースティッカー付きヘッダー

ヘッダー上部に、お知らせが自動で切り替わる（または流れる）ティッカー帯を備えた構成。新着・在庫・速報などを途切れず伝えられます。メディアやEC、コミュニティサイトで便利です。

#header#ticker#news#announcement

ライブデモ

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

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

HTML

<!-- Sakura：公式サイトのニュースティッカー付きヘッダー -->
<div class="htk-frame">
  <div class="htk-stack">
    <div class="htk-ticker">
      <span class="htk-tag">NEWS</span>
      <div class="htk-view">
        <div class="htk-track" id="htkTrack">
          <span class="htk-item">2nd LIVE TOUR「星降る夜の桜物語」開催決定 🌸</span>
          <span class="htk-item">先行抽選チケット、6/20まで受付中</span>
          <span class="htk-item">新メンバーのプロフィールを公開しました</span>
          <span class="htk-item">2nd写真集、本日より予約スタート</span>
        </div>
      </div>
    </div>
    <header class="htk-head">
      <a class="htk-logo" href="#" onclick="return false">✿ SAKURA</a>
      <nav class="htk-nav">
        <a href="#" onclick="return false">ライブ</a>
        <a href="#" onclick="return false">メンバー</a>
        <a href="#" onclick="return false">グッズ</a>
      </nav>
      <button class="htk-cta" type="button">FC入会</button>
    </header>
  </div>
  <div class="htk-stage">
    <h1>満開の、その先へ</h1>
    <p>上部の帯でお知らせが自動で切り替わります。</p>
  </div>
</div>

CSS

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

.htk-frame { position: relative; width: 100%; height: 380px; overflow: hidden; background: #fff0f6; }
.htk-stack { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.htk-ticker { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 18px; background: #2a0e2e; color: #fff; }
.htk-tag { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .12em; background: #f06595; color: #fff; padding: 3px 9px; border-radius: 999px; }
.htk-view { position: relative; height: 38px; overflow: hidden; flex: 1; }
.htk-track { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.htk-item { height: 38px; display: flex; align-items: center; font-size: 12.5px; color: rgba(255,255,255,.94); white-space: nowrap; }

.htk-head { display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 22px; background: #fff; border-bottom: 1px solid #ffd9e8; }
.htk-logo { font-size: 18px; font-weight: 800; color: #d6336c; text-decoration: none; letter-spacing: .04em; }
.htk-nav { display: flex; gap: 4px; margin-left: auto; }
.htk-nav a { color: #6a3050; text-decoration: none; font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 8px; transition: background .2s; }
.htk-nav a:hover { background: #ffe3ee; color: #d6336c; }
.htk-cta { font: inherit; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#f06595,#d6336c); border: none; padding: 8px 15px; border-radius: 999px; cursor: pointer; }

.htk-stage { display: grid; place-content: center; height: 100%; text-align: center; color: #6a2447; padding: 0 24px; }
.htk-stage h1 { margin: 0; font-size: 26px; font-weight: 800; }
.htk-stage p { margin: 12px 0 0; font-size: 13px; color: #a8718c; }

@media (prefers-reduced-motion: reduce) { .htk-track { transition: none; } }

JavaScript

// （デモと同じフックを流用）ティッカーを一定間隔で縦に切り替え
(() => {
  const track = document.getElementById('htkTrack');
  if (!track) return;
  const items = track.children;
  const n = items.length;
  if (!n) return;
  const H = items[0].offsetHeight || 38;
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  let i = 0;
  setInterval(() => { i = (i + 1) % n; track.style.transform = `translateY(${-i * H}px)`; }, 2600);
})();

実装ガイド

使いどころ

メディア・EC・公式サイトで、新着・速報・キャンペーンを途切れず伝えたいときに。ヘッダー上部の帯でお知らせが自動で切り替わります。

実装時の注意点

縦に積んだ項目を translateY で一定間隔ずつ送る、軽量なローテーション。1行分の高さでクリップし、setInterval で順送りします。reduced-motion では静止します。

対応ブラウザ

transform アニメーションと setInterval は全モダンブラウザ対応。1行高さの取得に offsetHeight を使用します。

よくある失敗

末尾から先頭へ戻る際の“巻き戻り”が気になる場合は、先頭要素を複製して継ぎ目なくループさせます。文章が長いと1行に収まらないので簡潔に。自動更新は読み切れない速さにしないこと。

応用例

横方向に流すマーキー化、緊急時のみ色を変える、クリックで該当記事へ遷移、在庫・価格のリアルタイム更新などに展開できます。

コード