ネオン文字とグリッチ文字を作る

文字を入れると、光るネオン文字と、色がずれたグリッチ文字ができて、そのまま貼れる CSS が出ます。 どちらも道具はおなじ1つ（text-shadow）です。

⭐ ネオンもグリッチも、道具は text-shadow ひとつです

まったく別の見た目に見えますが、使っているものは同じです。 文字に影を付ける text-shadow の3つの数と色を変えているだけで、新しい道具は1つも出てきません。

ネオンは同じ色の影を、ぼかしだけ大きくして重ねます。 上の道具の書き出しは0px 0px 4px #00e5ff, 0px 0px 8px #00e5ff, 0px 0px 16px #00e5ff, 0px 0px 32px #00e5ff という並びで、ぼかしが 4px・8px・16px・32px と倍になっていきます。

なぜ倍にするのかというと、にじみの帯の広さがぼかしの数で決まるからです。 仕様の注記によれば、色が薄れていく帯の幅はぼかしの数のおよそ2倍で、 しかも影のふちをまたいで内と外に半分ずつ広がります。 つまり外へ届く距離は、だいたいぼかしの数のぶん。 ぼかしを倍にすれば届く先も倍になり、内側の光のすぐ外に、次の光が続いてくれるわけです。

グリッチのほうは、ぼかしを 0 に戻して、左右にずらすだけです。 赤を右へ、水色を左へ同じだけずらすと、印刷がずれた看板のように見えます。光らせるのも、ずらすのも、同じ1つのプロパティだということです。

先に書いた影が上に来ます。1998年の決まりとは逆です

影を何枚も重ねるとき、どちらが手前かは決まっています。 仕様の言い方は「影は手前から奥へ適用される ── 最初の影がいちばん上」。先に書いたものが上です。

下の2つは、まったく同じ2枚の影（赤を右下に8px、水色を右下に16px）で、書く順番だけを入れかえたものです。 2枚が重なっている帯の色を見くらべてください。

数はまったく同じで、変えたのは書いた順番だけです。それだけで、 重なった帯の色が入れかわります。

ここでおもしろい歴史があります。この順番は1998年に決まったときは逆でした。当時のCSS2 の勧告（新しいタブで開きます）には「影は書いた順に適用される」とあり、例文の説明も「2つ目の影が1つ目の影の上に重なる」と書かれています。 いまの仕様は「ここで定めた描き順は、1998年のCSS2勧告のものとは逆である」とわざわざ注記を残しています。 20年以上前に、上下がひっくり返ったわけです。

この決まりが効いてくるのが、ネオンで小さい影から書く理由です。 細くて濃い光を先に書くので、それがいちばん手前に残ります。 逆に並べると、いちばん広い光が手前に来て、細い芯がそのうしろに沈んで見えなくなります。

左右にずらすグリッチでは、この違いはほとんど見えません。2枚が重なるところが文字のうしろに隠れてしまうからです。 仕様は影について「影どうしは重なりうるが、文字そのものの上には決して出ない」と定めています。だから上の図は、斜めにずらして重なりが文字の外へ出るようにしてあります。

ネオンは、読ませたい文章に使ってはいけません

これはこのページでいちばん伝えたいことです。光らせるほど、文字と背景の境は溶けていきます。上の道具で「光らせすぎ」を押すと、128px のぼかしまで重なって、何と書いてあるか読み取りにくくなるのが分かります。

やっかいなのは、数字のほうは何も教えてくれないところです。 読みやすさの目安であるコントラスト比は、文字の色と背景の色という2つの色だけで決まる計算です。 だから光を何枚重ねても、比の数字は1ミリも動きません。

つまり「4.5対1 を超えているから大丈夫」と数字だけで判断すると、 実際には読めない文字ができあがります。 上の道具が比の数字と一緒に 「この式に光は入っていません」と出しているのは、そのためです。

ではどこに使うか。見出し・看板・タイトル画像のような、短くて大きい飾りの文字です。読む人が形を覚えている短い言葉なら、多少にじんでも読み取れます。 長い文章では、1文字ずつ形を追うことになるので、にじみがそのまま読みにくさになります。

細い書体も向きません。にじみの帯は影のふちの内側にも半分入ってくるので、線の太さがぼかしの数より細い文字は、両側からにじみに挟まれます。 書き出す CSS が font-weight: 700 を付けているのは、この理由です。

動くグリッチには、止める手段が要ります

文字が細かくずれ続けるのを見ると、気分が悪くなる人がいます。 目が回るような感じ方をする人や、動くものがあると文章に集中できなくなる人です。

決まりの側もそうなっています。WCAG 2.2 の 2.2.2（新しいタブで開きます）は、ひとりでに始まって5秒より長く動き続けるもので、 ほかの内容と並んで出ているものには止める・停める・隠すための手段が要ると定めています。 グリッチはずっと繰り返すので、まさにここに当たります。

だからこの道具は、書き出す CSS にprefers-reduced-motion（新しいタブで開きます）の段落を必ず入れます。つまみで外すことはできません。 これは「動きを減らしたい」と機械の設定で伝えている人にだけ効く仕掛けで、 その人の画面では最初から止まって見えます。このページのプレビューも同じ CSS で動いているので、 その設定の人には、ここでも動きません。

動く速さも決め打ちにしてあります。1.6秒で1周、 ずれるのは1秒に2.5回までです。点滅についての決まり（2.3.1）（新しいタブで開きます）は「1秒に3回を超えて光るもの」の話で、位置がずれるだけの動きが当てはまるとは限りません。 それでも当てはまらないと決めつけずに、3回を超えないほうへ倒してあります。

もう1つ。グリッチのずれ方に乱数（ランダム）を使っていません。つまみの値に決まった倍率をかけた表から作っているので、 同じ設定ならいつ開いても同じ動きになります。 このサイトはページを先に作っておいて配る作りなので、 描くたびに違う数を使うと最初に届く絵と、動きだしてからの絵が食い違います。

文字の影に「広がり」と「inset」はありません

text-shadow の書き方は box-shadow とよく似ていますが、書ける数が少ないです。仕様が「広がりの値と inset キーワードは使えない」と、はっきり書いています。

• 1つ目 ── 横のずれ。正の数で右へ、負の数で左へ
• 2つ目 ── 縦のずれ。正の数で下へ、負の数で上へ
• 3つ目 ── ぼかし。省くと 0。マイナスは書けません
• 色 ── 省くと、その文字の色と同じになります

4つ目の数（広がり）を足しても、その影はまるごと読み飛ばされます。 影を大きくしたいときは、ぼかしを大きくするか、ずらした影をもう1枚足すことになります。

違いはもう1つあります。box-shadow の外側の影は箱の中では切り取られますが、文字の影は切り取られません。 そのかわりどちらも共通で、影はレイアウトに影響しません。 何枚重ねても、文字の場所も行の高さも1pxも変わらないということです。

このページの決まりは、すべて仕様の原文から取っています。 重ね順（先に書いた影が上）・ 広がりと inset が書けないこと・影が文字の上には出ないことはCSS Text Decoration Module Level 3（新しいタブで開きます）、にじみの帯がぼかしの約2倍になることと box-shadow の重ね順はCSS Backgrounds and Borders Module Level 3（新しいタブで開きます）、コントラスト比と動きの決まりはWCAG 2.2（新しいタブで開きます）です。 打った文字はどこにも送っていません。この道具は開いたあと、ブラウザの中だけで動きます。