カーソル点滅タイプライター
文字が左から1文字ずつ現れ、末尾の縦棒カーソルが点滅するタイプライター演出です。JavaScriptを使わずCSSだけで実現しているのが特徴で、 width を0から 14ch （文字数ぶんの幅）まで steps() で広げて文字を順に見せ、同時に右端の border-right を点滅させてカーソルに見立てていま…
解説
文字が左から1文字ずつ現れ、末尾の縦棒カーソルが点滅するタイプライター演出です。JavaScriptを使わずCSSだけで実現しているのが特徴で、width を0から 14ch（文字数ぶんの幅）まで steps() で広げて文字を順に見せ、同時に右端の border-right を点滅させてカーソルに見立てています。white-space:nowrap と overflow:hidden で1行に収め、はみ出た文字を隠すことで「打っている」ように見せています。
向いている場面
- サイトを開いた瞬間の導入見出しやキャッチコピー
- チャット風UIやストーリー仕立てのページ冒頭
- 順を追って読ませたい説明の最初の一文
表示する文字数を変えたら、width のゴール値と steps() の数を実際の文字数に合わせるのがポイントです。打つ速さは animation の秒数、カーソルの色は border-right の色で調整できます。CSSだけのため何度も繰り返し打ち直す制御は苦手で、その場合はJavaScript版が向きます。ch 単位は等幅でない日本語だと幅がずれやすいので、フォントに合わせて微調整してください。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
表示する文章を変えるとずれてしまいます。
文字数に合わせて、幅のゴール値である14chと、steps に指定した11という回数を実際の文字数へ更新してください。日本語は文字幅が一定でないため、ch の値は見た目を確認しながら微調整すると安定します。
打ち終わったあと繰り返し再生できますか？
このCSSのみの実装は一度打って止まる作りです。何度も打ち直したり文章を切り替えたりしたい場合は、JavaScriptで文字を順に追加する方式のほうが向いています。