タイプライター（複数語ループ）
複数のキーワードがタイプライター風に切り替わり続ける演出。ヒーローの代名詞「Web 制作 / コーディング / デザイン」のように繰り返す。
解説
タイプライター（複数語ループ）は、見出しの一部分が文字を打ち込むように現れ、点滅するカーソルとともに繰り返される演出です。仕組みは、対象の語に overflow:hidden と white-space:nowrap を掛けて文字を隠し、@keyframes で width を 0 から徐々に広げることで「打っているように」見せています。右端の縦線は border-right で作ったカーソルで、別のアニメーションで点滅させています。steps() を使うことで一文字ずつカクッと進む質感が出ます。
向いている使いどころ
- ヒーローで「Web 制作 / コーディング / デザイン」のように得意分野を入れ替える見出し
- サービスの提供価値をリズムよく見せたいトップ
- キャッチコピーに動きと注目を持たせたいとき
表示する語は文言を差し替えるだけで変えられます。打つ速さや 1 語の表示時間は animation の秒数と steps() の数で調整します。カーソル色は border-color、文字色は color で変更できます。純粋な CSS なので、本来は複数語を順番に入れ替えるには文言や幅の調整が要る点に注意してください。動きを抑えたい利用者には prefers-reduced-motion で静止表示する配慮が望ましいです。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
打ち込むスピードを変えられますか？
幅を広げるアニメーションの秒数と steps() の段数で調整します。秒数を短くするか steps を細かくすると速く、逆にすればゆっくり打つように見えます。
カーソルの色を変えたいです。
語の右端の border-right で作っているカーソルの border-color を変更します。点滅の速さは別のキーフレーム（blink）の秒数で調整できます。