セクション見出しキット

連番・小ラベル・大見出し・装飾下線・リード文が、画面に入ると順に組み上がる「セクションの顔」のひな形。ページ内の区切りに一貫したリズムを与えます。見出し設計のテンプレとして使えます。

#title#heading#section#reveal

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW：セクション見出しキットをカフェの「こだわり」節に適用 -->
<section class="tsh">
  <div class="tsh-head in" id="tshHead">
    <span class="tsh-num">02</span>
    <p class="tsh-label">OUR CRAFT</p>
    <h2 class="tsh-title">
      <span class="tsh-w">夜更けに、</span>
      <span class="tsh-w">豆と</span>
      <span class="tsh-w">向き合う。</span>
    </h2>
    <span class="tsh-rule"></span>
    <p class="tsh-lead">産地の個性を引き出す浅煎りから、深い余韻の中煎りまで。毎日の気温と湿度に合わせ、焙煎プロファイルを微調整しています。</p>
  </div>
</section>

CSS

/* MOON BREW（カフェ）：セクション見出しキットの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.tsh { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 40px 44px; background: #f5efe4; color: #3c2f22; }
.tsh-head { position: relative; max-width: 520px; }

.tsh-num { display: block; font-size: 64px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #d8cab2; margin-bottom: 6px; }
.tsh-label { margin: 0 0 12px; font-size: 12px; letter-spacing: .26em; font-weight: 700; color: #b07a3f; }
.tsh-title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.28; letter-spacing: .01em; font-family: "Hiragino Mincho ProN", serif; }
.tsh-w { display: inline-block; }
.tsh-rule { display: block; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #b07a3f, #7a4f2a); margin: 18px 0; }
.tsh-lead { margin: 0; font-size: 14.5px; line-height: 1.85; color: #6b5742; }

.tsh-num, .tsh-label, .tsh-w, .tsh-rule, .tsh-lead { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.tsh-rule { transform: scaleX(0); transform-origin: left; }
.tsh-head.in .tsh-num { opacity: 1; transform: translateY(0); transition-delay: .02s; }
.tsh-head.in .tsh-label { opacity: 1; transform: translateY(0); transition-delay: .12s; }
.tsh-head.in .tsh-w { opacity: 1; transform: translateY(0); }
.tsh-head.in .tsh-w:nth-child(1) { transition-delay: .22s; }
.tsh-head.in .tsh-w:nth-child(2) { transition-delay: .32s; }
.tsh-head.in .tsh-w:nth-child(3) { transition-delay: .42s; }
.tsh-head.in .tsh-rule { opacity: 1; transform: scaleX(1); transition-delay: .54s; }
.tsh-head.in .tsh-lead { opacity: 1; transform: translateY(0); transition-delay: .64s; }

@media (prefers-reduced-motion: reduce) { .tsh-num, .tsh-label, .tsh-w, .tsh-rule, .tsh-lead { opacity: 1; transform: none; transition: none; } }

JavaScript

// （デモと同じフックを流用）見出しの組み上がりを繰り返し実演
(() => {
  const head = document.getElementById('tshHead');
  if (!head) return;
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) { head.classList.add('in'); return; }
  const cycle = () => {
    head.classList.remove('in');
    setTimeout(() => head.classList.add('in'), 400);
    setTimeout(cycle, 4600);
  };
  setTimeout(cycle, 3600);
})();

実装ガイド

使いどころ

ページ内の各セクション冒頭に一貫したリズムを与えたいときの「見出しの型」。連番・小ラベル・大見出し・装飾下線・リードが、画面に入ると順に組み上がります。

実装時の注意点

各パーツに opacity/translateY と transition-delay を割り当て、in クラスの付与でまとめて再生します。装飾下線は scaleX(0)→1 で左から伸ばす演出。デモ/サンプルでは見やすさのため繰り返し再生していますが、実サイトでは IntersectionObserver で一度だけ発火させるのが定石です。

対応ブラウザ

transition・transform・text-stroke（連番のアウトライン）は全モダンブラウザで対応します。

よくある失敗

遅延の合計が長すぎると“もっさり”見えるため、全体を 0.7 秒程度に収めるのが目安。reduced-motion では即表示にフォールバックすること。番号やラベルだけ浮いて見出しと噛み合わないと統一感が出ないので、余白と色のトーンを揃えます。

応用例

連番を自動採番に、下線をブランドのアクセント形状に、左寄せ／中央寄せの2バリエーション化、入場方向を変えるなどの展開ができます。

コード