第6話:CSSカオスの壁とスタイルの亡霊


前回のお話はこちら第5話:タグの呪いと閉じられぬ世界
霧のように漂う乱れたレイアウト、崩れゆく色彩、フォントの狂気。
それは「構造美人サイト」を蝕む“CSSカオス”だった。

「ちゃんと構造はできてるはずなのに……」
主人公は崩れたページを前に呆然と立ち尽くす。

段組みがズレ、ボタンが見切れ、フォントはページごとにバラバラ。

「これは、スタイルの亡霊が関わってるにゃ……」
チャッピーの言葉と同時に、闇の中から艶やかな影が現れる。

黒と赤のゴシックドレスをまとい、髪にCSSコードを浮かべた女。
その名は──スタイルドリフター・カスケード。

「あなたがどこに何を書こうが、私が一番強いのよ……!importantでね♡」

彼女が放つのは display: none、position: absolute、z-index: 9999──
構造美を無視した“闇のスタイル魔法”。

「構造なんて下地。最終的な美しさは、私が決めるのよ」

鈴が style.css を整えようとするも、継承の鎖と !important の圧力に弾かれる。

「z-indexを上げても、スタイルが適用されない……どうして……っ」

華恋がコードエディタを開き、全力で魔法詠唱。
「display: flex !important!! padding: 0 !important!!」

──だが、その力すらカスケードの“最終スタイル支配”に押し返される。

「最後に書いた私が、勝つのよ」

サイト全体が“スタイルの霧”に包まれていく。

フォントはぼやけ、メニューは反応せず、すべてが意思を失ったように。

そのとき──

「迷ってるなら、風に乗ればいい」

銀髪の少女・遥が現れ、スタイルの霧を裂いて現れる。

彼女は“秩序の風”を使うスタイル階層の守り人。

遥「順番には意味がある。正しいCSSは、秩序を守るために存在してる」

チャッピーが「スタイルビジョン」を発動。継承構造が空間に可視化される。

「見て……このクラス名、上から10回も上書きされてるにゃ」

主人公「最初に書かれてたベーススタイル……これが本当の“意図”だったんだ」

鈴がそっとコードを書き換える。

.primary-button {
  background-color: #ff69b4;
  font-size: 1.2rem;
}

チャッピー(解説)「CSSは、セレクターの“重み”──specificity(スペシフィシティ)と、書かれた“順番”で適用されるにゃ」

!importantに頼らず、正しい設計で整えれば美しさは保たれる。

カスケード「なんで……私より、弱いセレクターのくせに……」

その姿に変化が現れる。

「……私も、誰かのページに選ばれたかっただけ」

使われることなく放置された孤独なセレクター。
!importantという“力”に頼るしかなかった──

だが今、正しい構造の中で自然に選ばれた。

彼女は静かに微笑み、霧の中へと消えていく。

CSSの霧が晴れ、美しい構造美がよみがえる。

チャッピー「構造とスタイル、どっちもあって美人にゃ」

──安堵の空気。

……しかし、事件は終わっていなかった。

「ま、またトラブってるわね?」
女神スピトが突然現れた。

華恋「え、アンタまた!? もう片付いたはずでしょ!!」

スピト「ネットワークの揺らぎを感じたのよ!神として当然!」

チャッピー(小声)「降臨のしすぎでバッファ溢れてそうにゃ……」

スピト「私は光の女神スピト!全能にして全CSSの守護者よ!」

華恋「ふーん、昨日うちのテーマ崩れてたけど?」

スピト「それは……影の勢力による干渉がっ……」

鈴「2人とも落ち着いて……せっかく直ったんだし」

チャッピー「まったく、騒がしいにゃ……」

主人公(内心)「どこまでも混沌だな、この世界……」

その時──

ブラウザの裏で、小さなエラーが発生。

.infected-tag-01 {
  display: none;
  content: "0x001start";
}

──誰も気づかぬまま、“何か”が、増殖を始めていた……

画面の奥で、タグとタグが融合し、未知のエントリーポイントが開いていく。

最後のカット。

「ふふ……次は“構造を喰らう者”たちが来るわ」

遠く、影の中で“ゾンビのようにタグを引きずる何者か”が歩いていた。

そして鈴がふとつぶやく。

「……お姉ちゃんの気配がする」

──第7話へつづく。