文字を1文字ずつ出すタイピング風アニメーションをCSSで作る｜コピペで使える3種類と、使う長さの決め方

トップページを開くと、キャッチコピーが1文字ずつ打ち込まれていく。パソコンでタイピングしているような、この見せ方は、CSSのアニメーションだけで作れます。JavaScriptは要りません。

使いどころ

短い一文を「読ませたい」ときに、1か所だけ使う。2秒ほどで打ち終わる長さまで。説明の文章や、急いでいる人が読む情報には使わない。

今回は、タイピング風に1文字ずつ出す形、英数字のコード画面風、1文字ずつふわっと出す形の3種類を、コピペ用のコードつきで紹介します。あわせて、日本語と英数字で数え方が変わる理由、steps() の数の決め方、読み上げソフトや動きが苦手な人への配慮もまとめました。

連載「WEBの技術」の21回目です。
今回は「文字を1文字ずつ出す」。見せ方としては楽しいのですが、読む人を待たせる技術でもあるので、使う長さの判断まで見ていきます。

完成見本：ページを開いたときから、自動で動く

下の見本は、ページを開いたときから自動で動いています。キャッチコピーが1文字ずつ現れて、右はしでカーソルが点滅します。

TYPEWRITER1. タイピング風に1文字ずつ出すトップページの見出し・キャッチコピー

※ 見本は何度でも見られるよう、6秒ごとに最初から動かしています（そのための短いJavaScriptは見本用で、コピペ用のコードには入っていません。コピペ用のコードは1回動いて止まります）。見本は読み上げソフトでは読まれないようにしています。端末の「動きを減らす」設定がオンのときは、最初から全部の文字が見えます。

コピペ用のコード

使いたい見本のHTMLを、文字を出したい場所に入れます。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-type は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

共通のCSS（動きを減らす設定の人には、動かさない）

/* 「動きを減らす」設定の人には、動かさずに全部の文字を見せる */
@media (prefers-reduced-motion: reduce) {
  .kd-type-line,
  .kd-type-code,
  .kd-type-fade [aria-hidden] span {
    animation: none;
  }
}

「動きを減らす」設定のCSSは、3種類のどれを使うときも一緒に入れてください。使わない見本のクラス名は、消してもかまいません。

1. タイピング風に1文字ずつ出す

文字を左から1文字ずつ見せていき、右はしでカーソル（縦の線）が点滅する形です。文字そのものは最初から全部HTMLに書いてあり、見えている幅（width）を0から少しずつ広げています。steps(13) で幅を13回に分けて「カクッ、カクッ」と広げるので、1文字ずつ打っているように見えます。

HTML

<p class="kd-type-line">伝わるデザインを、一緒に。</p>

CSS

.kd-type-line {
  /* 1行のまま、はみ出した文字を隠す */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  /* 日本語は1文字 = 1em。13文字なので 13em */
  width: 13em;
  /* 文字の間を詰める設定があると、幅がずれるので戻す */
  letter-spacing: 0;
  font-feature-settings: normal;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
  /* カーソル（打ち終わると消える） */
  border-right: 3px solid transparent;
  animation:
    kd-type-line 2.6s steps(13) both,
    kd-type-caret .8s step-end 5;
}
@keyframes kd-type-line {
  from { width: 0; }
}
@keyframes kd-type-caret {
  0%  { border-right-color: #0284C7; }
  50% { border-right-color: transparent; }
}

2. コード画面風（英数字）

黒い画面に、コマンドを打ち込んでいるように見せる形です。英数字は1文字の幅がそろっていないので、monospace（どの文字も同じ幅になる「等幅」の書体）にして、ch（数字の「0」1文字ぶんの幅）で数えます。15文字なので 15ch、steps(15) です。

HTML

<p class="kd-type-code">$ npm run build</p>

CSS

.kd-type-code {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  /* 英数字は等幅の書体にして、ch で数える。15文字なので 15ch */
  font-family: Menlo, Consolas, monospace;
  width: 15ch;
  letter-spacing: 0;
  margin: 0;
  padding: 10px 0 10px 14px;
  border-radius: 8px;
  background: #10283A;
  color: #E6EEF4;
  font-size: 18px;
  line-height: 1.5;
  /* 幅に、左の余白とカーソルのぶんを足す */
  box-sizing: content-box;
  border-right: 10px solid transparent;
  animation:
    kd-type-code 1.8s steps(15) .4s both,
    kd-type-block .8s step-end 5;
}
@keyframes kd-type-code {
  from { width: 0; }
}
@keyframes kd-type-block {
  0%  { border-right-color: #7DD3FC; }
  50% { border-right-color: transparent; }
}

3. 1文字ずつ、ふわっと出す

1文字ずつ、下から浮かび上がるように出す形です。1文字ずつ <span> で囲み、--i（自分で名前を付けた数値の入れもの＝カスタムプロパティ）に「何文字目か」を書きます。CSSで calc(var(--i) * 0.08s) と計算して、1文字ごとに0.08秒ずつ遅らせて動かします。幅で隠さないので、2行に折り返しても使えます。

HTML

<p class="kd-type-fade">
  <span class="kd-type-sr">ひとことずつ、届けたい。</span>
  <span aria-hidden="true"><span style="--i:0">ひ</span><span style="--i:1">と</span><span style="--i:2">こ</span><span style="--i:3">と</span><span style="--i:4">ず</span><span style="--i:5">つ</span><span style="--i:6">、</span><span style="--i:7">届</span><span style="--i:8">け</span><span style="--i:9">た</span><span style="--i:10">い</span><span style="--i:11">。</span></span>
</p>

CSS

.kd-type-fade {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #10283A;
}
.kd-type-fade [aria-hidden] span {
  display: inline-block;
  animation: kd-type-fade .5s ease-out both;
  /* 何文字目か（--i）× 0.08秒、遅らせる */
  animation-delay: calc(var(--i) * 0.08s);
}
@keyframes kd-type-fade {
  from { opacity: 0; transform: translateY(.5em); }
  to   { opacity: 1; transform: none; }
}
/* 読み上げ用の文字：画面には出さず、読み上げソフトには読ませる */
.kd-type-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

文章を変えるときは、1と2では文字数を数えて、width の数字と steps() の数字を両方そろえます。3では、1文字ずつ <span style="--i:何文字目"> で囲み直し、読み上げ用の kd-type-sr の中の文章も同じものに書きかえます。

仕組み：文字は最初から全部ある

1. 幅で隠して、少しずつ見せる

1と2のタイピング風は、文字を1つずつ足しているわけではありません。文章はHTMLに最初から全部書いてあり、overflow: hidden（はみ出た部分を見せない指定）と white-space: nowrap（折り返さずに1行で並べる指定）で、「横長の1行を、窓からのぞいている」状態にしています。その窓の幅を、0から文章の長さまで広げていくと、左から文字が現れて見えます。

@keyframes kd-type-line { from { width: 0; } } には、始まりの形しか書いていません。終わりの形を書かないと、ブラウザは「もともと指定してある幅（13em）」を終わりの形として使います。アニメーションが終わったあとも、その幅のまま残るので、文章が全部見えた状態で止まります。

2. steps() で、1文字ぶんずつ広げる

ふつうのアニメーションは、幅をなめらかに広げます。それだと、文字の左半分だけが見える瞬間ができてしまいます。steps(13) は、動きを13の段に分けて、段から段へ一気に進める指定です。13文字の文章なら、1段で1文字ぶん広がるので、文字が欠けずに1つずつ現れます。

3. 日本語は em、英数字は ch で数える

幅を「文字数ぶん」にするには、1文字の幅が決まっている必要があります。ひらがなや漢字などの日本語は、ふつうの書体では1文字の幅が文字の大きさと同じなので、em（文字の大きさを1とする単位）で数えます。13文字なら 13em です。

英数字は「i」と「m」で幅が違うので、そのままでは数えられません。そこで2では、どの文字も同じ幅になる等幅の書体にして、ch（数字の「0」1文字ぶんの幅）で数えています。日本語と英数字がまざった文章は、どちらの単位でもぴったり合わないので、タイピング風には向きません。

1のCSSに入れている letter-spacing: 0 と font-feature-settings: normal は、文字の間を空けたり詰めたりする設定を打ち消すためのものです。サイトによっては、見出しの文字の間を詰める設定が入っていて、そのままだと1文字の幅が1emからずれ、最後の文字が欠けたり、余白が残ったりします。

4. カーソルは右の線を点滅させる

カーソルは、border-right（右側の線）です。線の色を「青 → 透明」と切りかえるアニメーションを、0.8秒で5回くり返しています。もともとの線の色は透明にしているので、5回の点滅が終わると、カーソルは消えます。

5. ふわっと出すのは、1文字ずつ遅らせる

3は、幅ではなく、1文字ずつに同じアニメーションを付けています。違うのは、動き始める時間だけです。--i に書いた「何文字目か」を、calc(var(--i) * 0.08s) で0.08秒ずつ遅らせるので、左から順番に浮かび上がって見えます。

数値を変えるとどうなるか

steps() の数（1の見本の steps(13)）

同じ13文字の文章で、steps() の数だけを変えて並べました。

steps(13)：1文字ずつ、きれいに出る

steps(8)：数が合わず、文字が途中で切れる

linear：なめらかに広がり、文字が欠けて見える

steps の数が文字数と合っていないと、1段で進む幅が1文字ぶんにならず、文字の途中で止まる瞬間ができます。linear（一定の速さで、なめらかに）にすると、ずっと文字が欠けたまま広がっていきます。steps の数は、文字数と同じにします。

変えるところ	小さくすると	大きくすると
かける時間（1の 2.6s）	速く打ち終わる。1秒を切ると、打っているように見えない	ゆっくりになり、読む人を待たせる
文字の数（1の 13文字）	すぐ読み終わり、動きの意味が伝わりやすい	打ち終わるまで待つ時間が長くなる。1行に入らないと使えない
遅らせる間隔（3の 0.08s）	一斉に出てくるように見える	1文字ずつがはっきりするが、最後まで出るのが遅くなる
カーソルの点滅の回数（1の 5回）	早く消える	長く点滅する。5秒を超えると、止める方法が必要になる

KAKERUでは、1文字あたり0.2秒前後、全体で2〜3秒を目安にしています。1の見本は、13文字を2.6秒で打つので、1文字0.2秒です。

スマホと、見る人への配慮

1行に入る長さにする

1と2は、折り返さない1行の文章です。スマホの幅に入りきらない長さにすると、右側が画面の外へはみ出します。13文字・22pxの1の見本は、幅が約290pxで、スマホの画面にも入ります。それより長い文章を出したいときは、折り返せる3の「ふわっと出す」を使います。

読み上げソフトには、文章のまま届ける

1と2は、文字を幅で隠しているだけなので、HTMLには文章がそのまま入っています。読み上げソフトも、検索エンジンも、ふつうの文章として読み取れます。

3は、1文字ずつ <span> で区切っているので、そのままだと読み上げのされ方が崩れる場合があります。そこで、区切った文字には aria-hidden="true"（読み上げソフトに読ませない指定）を付け、別に「画面には出さず、読み上げソフトには読ませる」文章（kd-type-sr）を置いています。

動きが苦手な人には、最初から全部見せる

画面の中で文字が動いていると、気分が悪くなったり、読みにくくなったりする人がいます。iPhoneの「視差効果を減らす」など、端末の「動きを減らす」設定がオンのときは、prefers-reduced-motion で受け取って、アニメーションを止めます。止めると、最初から全部の文字が見えます。文字が隠れたまま残ることはありません。

点滅は、5秒より前に止める

W3Cのアクセシビリティの基準（WCAG 2.2）では、自動で始まり、5秒より長く続き、ほかの内容と一緒に出ている点滅には、止める・隠す方法を用意することとされています。1と2のカーソルは、0.8秒×5回＝4秒で点滅が終わるようにしています。点滅の回数を増やすときは、5秒を超えないかを確かめます。

やりすぎ注意

タイピング風は、文章が出そろうまで、読む人が待つ見せ方です。ページの中の何か所にも使うと、そのたびに待たされます。お店の電話番号や営業時間など、急いで知りたい情報に使うのも向きません。

1文字ずつ出すのは、「この一文を読んでほしい」という場所に1か所だけ。
読む人を待たせてでも伝えたい言葉かどうかで決めています。

AIに頼むなら

タイピング風の文字も、Claudeなどの生成AIに頼めばすぐ作ってもらえます。そのときは「文章」「文字数」「時間」「カーソルの点滅の回数」「動きを減らす設定」まで、まとめて伝えると手直しが少なく済みます。

「伝わるデザインを、一緒に。」（13文字）を、CSSだけでタイピング風に1文字ずつ出して。
width を 0→13em、steps(13) で2.6秒。カーソルは border-right で4秒だけ点滅して消える。
prefers-reduced-motion のときは動かさず、最初から全部見せる。JavaScriptは使わない。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

width と steps の数が、文字数と合っているか。文章を書きかえたときに、数字がそのままになっていることがよくあります。最後の文字が欠けていないか、右に余白が残っていないかを見ます
スマホの幅で、右がはみ出していないか。1行のまま折り返さない作りなので、スマホの画面でいちばん右の文字まで見えるかを確かめます
カーソルがずっと点滅し続けていないか。infinite が入っていたら、回数の数字に書きかえて、5秒より前に止まるようにします

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

トップページの、短いキャッチコピー。ページを開いた人が、最初に読む一文に1か所だけ使います。2〜3秒で打ち終わる、15文字くらいまでの長さにします
制作会社やエンジニア向けのページの飾り。2の「コード画面風」は、作る仕事をしている会社の雰囲気を出すのに合います。中身の説明ではなく、飾りとして短く使います
折り返す長さの見出し。2行になる見出しは、幅で隠す1と2ではなく、3の「ふわっと出す」を使います

使わない場面

説明の文章や、本文の段落。何行もある文章を1文字ずつ出すと、読み終わるまで待たされます。読む文章は、最初から全部見せます
電話番号・営業時間・料金など、すぐ知りたい情報。探しに来た人を待たせることになります
日本語と英数字がまざった文章を、1と2の形で出すこと。1文字の幅がそろわず、文字が欠けたり余白が残ったりします。まざる文章は、3の形にします

「動きがあったほうが目を引く」より先に、その言葉が待たせる価値のある一文かを考えます。
迷ったら、動かさずに大きく見せるほうを選びます。

まとめ

タイピング風の文字は、CSSのアニメーションだけで作れる。文章は最初から全部HTMLにあり、見える幅を広げているだけ
steps() の数は文字数と同じにする。日本語は em、英数字は等幅の書体にして ch で数える
2行になる文章や、日本語と英数字がまざる文章は、1文字ずつ遅らせて出す3の形にする
カーソルの点滅は5秒より前に止める。動きを減らす設定の人には、最初から全部見せる
使うのは、読ませたい短い一文に1か所だけ。説明の文章や急いで知りたい情報には使わない

まずは1の「タイピング風」のコードをコピーして、自分のサイトのキャッチコピーで試してみてください。文字数を数えて、width と steps() の数字を書きかえるのを忘れずに。

参考にした資料

いずれも2026年10月24日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「animation」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
※animation で、時間・速さの変わり方・遅らせる時間・くり返す回数をまとめて指定できること
MDN「steps()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/steps
※動きを、指定した数の段に分けて「カクッ、カクッ」と進めること
MDN「<length>」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length
※em が文字の大きさ、ch が数字の「0」1文字ぶんの幅であること
MDN「@keyframes」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes
※始まりや終わりの形を書かないと、要素にもともと指定してある見た目が使われること
MDN「white-space」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space
※nowrap で、文字を折り返さずに1行で並べること
MDN「var()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var
※自分で名前を付けた値（カスタムプロパティ）を、ほかの指定の中で使えること
MDN「calc()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc
※数値どうしを計算して、指定に使えること
MDN「prefers-reduced-motion」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
※端末の「動きを減らす」設定を、CSSで受け取る方法
Apple サポート「iPhone、iPad、iPod touch で画面の視差効果を減らす」
https://support.apple.com/ja-jp/111781
※iPhoneの「視差効果を減らす」の場所
W3C「Understanding SC 2.2.2 Pause, Stop, Hide」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
※自動で始まり、5秒より長く続き、ほかの内容と一緒に出ている点滅や動きには、止める・隠す方法を用意すること