複数行タイプライター見出し
複数行タイプライター見出しは、2 行のキャッチコピーを上の行から順番に一文字ずつ表示する CSS だけのアニメーションです。JavaScript は使わず、各 h2 に overflow:hidden と white-space:nowrap を掛けたうえで、 width を 0 から目標値（ 8em / 10em…
解説
複数行タイプライター見出しは、2 行のキャッチコピーを上の行から順番に一文字ずつ表示する CSS だけのアニメーションです。JavaScript は使わず、各 h2 に overflow:hidden と white-space:nowrap を掛けたうえで、width を 0 から目標値（8em / 10em）まで steps() で刻んで広げることで「打ち込まれていく」見え方を作ります。右端の border-right がカーソルで、blink の @keyframes で点滅します。2 行目は animation-delay で 1 行目の完了後に始まります。
使う場面とカスタマイズ
ヒーローのストーリーテリング型導入、サービス紹介の冒頭、ポートフォリオのオープニングなど、最初の数秒で世界観を伝えたい箇所に向きます。文字数を変えたら、steps() の数と width の em 値を実際の文字数に合わせて調整してください。ずれると途中で切れたり余白が出ます。
- 速度は各
animationの秒数で調整（短いほど速い） - カーソル色は
border-color、本文色はcolor - 等幅フォント前提なので可変幅フォントだと幅計算がずれやすい
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
JavaScript は必要ですか。
不要です。表示は CSS の @keyframes と width アニメーションだけで成立します。ただし文字幅の計算が固定値（em 指定）なので、文言を変えたら steps() の数と幅を手動で合わせる必要があります。
3 行以上に増やせますか。
増やせます。h2 を追加し、それぞれに type と blink のアニメーションを delay をずらして割り当てます。前の行の表示時間を踏まえて各行の animation-delay を順に大きくしてください。