タイピング風テキスト（CSS のみ）
文字が1文字ずつ打ち込まれるように現れ、末尾でカーソルが点滅する タイピング演出 です。JavaScript は使わず、 @keyframes と steps() 関数だけで実装しています。テキストを white-space:nowrap と overflow:hidden で一行に収め、 width を 0 から…
解説
文字が1文字ずつ打ち込まれるように現れ、末尾でカーソルが点滅するタイピング演出です。JavaScript は使わず、@keyframes と steps() 関数だけで実装しています。テキストを white-space:nowrap と overflow:hidden で一行に収め、width を 0 から文字数ぶん（24ch）まで steps(28) で段階的に広げることで、左から文字が露出していくように見せています。右端の border-right がカーソルになり、別の blink アニメで点滅します。
使う場面
- LP やポートフォリオのヒーロー見出し
- キャッチコピーやスローガンを印象づける導入
- ターミナル風・開発者向けサイトの演出
表示する文言を変えたら、type の width（24ch）と steps() の数値を実際の文字数に合わせて更新するのがコツです。ずれると途中で止まったり、最後の文字が欠けたりします。打鍵の速さは animation の秒数（3秒）で調整できます。文字幅が一定の等幅フォント（monospace）だと ch 指定がきれいに揃います。動きが苦手なユーザー向けに prefers-reduced-motion で全文表示に切り替える配慮を入れると安心です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
表示する文章を変えたら設定はどう直しますか？
@keyframes type の width を文章の文字数に合わせた値（例：24ch）に変え、steps() の数値も文字数に合わせます。ここがずれると途中で止まったり末尾が欠けるため、文字数とセットで調整してください。
タイピングの速度を変えるには？
typing__text の animation で type に指定した秒数（このコードでは3s）を変更します。長くするとゆっくり、短くすると速く打たれます。文字数を変えたときは steps() の値も合わせて見直してください。