CSS ネオン テキスト効果

機能

• text-shadow を重ねて光を作ります。層の数と半径は強さに追随します
• 管の色と文字色を別々に調整 —— 管の色をわずかに含む白は、純白より芯らしく見えます
• 強さ 0〜100 一つで層の数・半径・透明度を制御
• 入力欄に文字を打つとプレビューできます
• プレビューは暗い背景。ネオンのコントラストがすぐ成立します
• 下にそのままコピーできる CSS ルール（`.neon` セレクター付き）
• コードはシンタックス ハイライト付きで、コピーはボタン一つ
• 計算はすべてブラウザー内で完結します

使い方

1. 上の入力欄に文字を入れます
2. 管の色を選び、強さを動かして光の広がりの変化を見ます
3. より「明るく」したいときは文字色を白に近づけ、より「鮮やか」にしたいときは管の色と差をつけます
4. 良ければ CSS をコピーします

よくある質問

text-shadow を一つ書いてもネオンに見えないのはなぜですか？

ネオンの見え方は明るさの勾配から生まれます —— 芯が最も明るく、外へ急速に減衰します。影が一つだと半径も透明度も一つしかなく、濃すぎれば縁取り、薄すぎれば滲みになります。層を重ねるのはこの減衰を近似するためです：密着した不透明層、中間の半透明層、ごく薄い外層 —— これで目は「ここに光る管がある」と読み取り、「この文字は縁取りされている」とは読みません。

暗い背景が必須なのはなぜですか？

コントラストのためです。ネオンは暗い環境にある明るい光源を前提としています。明るい背景では光が背景に混ざり、文字は汚れて見えるだけです。明るい画面で使うには光を大幅に弱めるしかなく、それはもうネオンではありません。プレビューの背景を暗くしているのはそのためで、装飾ではなく効果の成立条件です。

光る文字はアクセシビリティに影響しますか？

二点あります。 第一にコントラスト —— 光は字の輪郭をぼかすため、長文を読むのはつらくなります。見出しやロゴ、装飾的な文字に向き、本文には向きません。第二に、強い光は視覚過敏や片頭痛のある方に負担になります。システムの「動きを減らす」設定（`prefers-reduced-motion`）は静的な光には効きませんが、効果を弱める切り替えを用意するか、ハイコントラスト モードで光を切る対応が考えられます。