WEB遺跡の
聖櫃発掘で甦る
古代WEB魔法 時に埋もれたWEBの古代魔法を、
最新CSSで覚醒させるプロジェクト

古代WEB魔法覚醒プロジェクト

• 今、覚醒する古代WEB魔法
  私の名はジェミパラ・トラッセンダー。
  魔法世界『ハピバリアント』の考古学・古代魔法を専門に発掘調査する魔導士だ。
  他のプロジェクト『国王ですら顔面蒼白』にも顔をだしたので、見知った方も多いのではないかな。
  もっかの研究課題は『失われし古代WEB魔法』。専門は古代魔法とはいっても、もちろん最新の聖CSSにも精通している。
  
  さて、仕方がないことだが、新しいWEB魔法が登場すると古い魔法は忘れ去られていく...。それが世のことわり。
  そう思っていたが最近、新しいCSS神聖魔法を研究しているうちに、まったく逆の現象が起きていることに気付いた。
  何十年も前に策定された魔法仕様の中に、今だからこそ輝きを放つ「古代WEB魔法」が数多く眠っていたのだ。
  以前この研究サイトでも紹介した :target疑似クラス魔法陣 もその一つ。魔道省CSS庁で勧告されたのは2011年。これを :has() 魔法陣など最新の聖CSS魔法で錬成し、新たな価値を覚醒させたことは記憶に新しい。
  さらに調査を進めると、details要素、dialog要素、attr()関数、counter() ……まるで聖櫃から聖遺物が発掘されるように、忘れられていた魔法が姿を現し始めた。
  
  もちろん、そのままでは扱いづらい魔法も少なくない。しかし、ここでCSS革命の出番だ。
  最新CSS神聖魔法という錬金術を組み合わせることで、古代魔法は現代でも第一線で戦える実用的な魔法へと覚醒する。
  これは、そんな「古代WEB魔法覚醒プロジェクト」の記録である。

古代WEB魔法を年代別に分類してみた

• 古代魔法にも時代がある
  一口に「古代WEB魔法」といっても、その歴史は実に幅広い。
  聖CSS2が誕生した頃からHTML5の黎明期、そしてモダンWebへと移り変わる時代まで、およそ20年以上にわたる巨大な地層が存在する。
  そこで今回の調査では、発掘年代を次の三つに分類してみた。
  
  ・第一次WEB遺跡発掘（1998〜2002）
  ・第二次WEB遺跡発掘（2003〜2012）
  ・第三次WEB遺跡発掘（2013〜2017）
  
  2017年までとしている理由もある。
  2018年前後になると、HTTPS式結界化の加速、ブラウザ魔法具による「保護されていない通信」の

  警告表示

  HTPPSでないと警告魔道通信がHTPPS暗号化されていないサイトをさも”危険なサイト”のように表示させた。
  そのため一気にHTPPS結界化が加速。

  、HTTP/2やWebAssemblyなど、Web魔法界そのものの基盤が大きく変化した。
  ここを境に、Web魔法界は「古代」と「現代」で空気そのものが変わったように感じる。
  とまあ、退屈な前置きはこの辺で...。
  
  さあ、それでは発掘を始めよう。

第一次WEB遺跡発掘（1998〜2002）

• WEB創世記に刻まれた古代魔法
  この時代の特徴としては神聖魔法CSS2が登場した頃。
  いわゆる第一次ブラウザ魔法具戦争の真っただ中になる。当時覇権を握っていた、『根助ギルド』に対して、マイクロギルド魔道商会が金の力と邪悪な禁術を行使し根助ギルドを蹂躙した。有名なWEB魔法界の黒歴史だ。
  また、高額なダイヤルアップ魔道接続料金が庶民に課され、信じられないことに魔画像、魔道画一枚表示されるまで、たばこ一本を吸うほどの時間、待たされることも珍しくなかったそうだ。
  そして、Flash。今でもまだ解析が進められているFlash魔法陣が救世主のように現れ、Macromedia魔道商会が躍進、PerlスペルやCGI術式がWeb魔法界を支えていたと碑文に記されている。
  そんな混沌の時代に誕生した魔法が、今でも現役で使われているのだから驚きだ。
  
• 発掘された古代魔法
  ・counter()
  ・quotes
  ・open-quote / close-quote
  ・attr()
  ・lang()
  
  中でも attr()魔法陣 は非常に興味深い。
  当時から「属性を取り出して利用する」という変数に近い発想を持っていたこの魔法は、現代のCSS神聖魔法 Typed attr() による錬成で新たな力が覚醒した。
  また counter()魔法陣 は説明画像の番号付けなど、この魔道研究サイトでも今なお現役で活躍している優秀な魔法陣だ。
  

第二次WEB遺跡発掘（2003〜2012）

• HTML5黎明期に封印された魔法
  この時代、Web魔法は「ページ魔法陣」から「アプリケーション魔法具」へ進化し始める。
  Ajax。jQuery。HTML5。
  そして2007年、iPhone魔道具の登場。
  さらに2010年、スティーブ・ジョブズ林檎魔導院長がFlash非対応を宣言したことで、Web魔法はHTML5エレメンツとCSS3神聖魔法へ大きく舵を切った。
  まさに現代Webの礎が築かれた黄金時代だった。
  
• 発掘された古代魔法
  ・details / summary
  ・target
  ・q要素
  ・ch単位
  ・tab-size
  ・lang()
  ・empty
  
  :target疑似クラス魔法陣は、このサイトでも何度も紹介してきた代表的な古代魔法。
  そして近年もっとも再評価されているのが details と summary だ。
  単なるアコーディオン術式では終わらない。
  Anchor Positioning や :has() で錬成することで、まったく新しいUI術式へ進化する可能性を秘めている。
  

第三次WEB遺跡発掘（2013〜2017）

• モダンWEB魔法の夜明け
  HTML5エレメンツが各ブラウザ魔法具へ本格実装され始めた時代。
  Flexbox魔法陣が普及し、レスポンシブデザイン術式が当たり前となり、React魔法体系も公開された。
  現在につながるモダンWeb魔法が、この頃から本格的に動き始める。
  
• 発掘された古代魔法
  ・dialog要素 / ::backdrop疑似要素 / showModal() JS関数
  ・@counter-style
  ・user-select
  ・caret-color
  
  このうち注目して欲しいのは

  dialog要素

  dialog要素の遍歴dialogエレメンツは2010年代に登場。
  先進的ギルド『ググル』の魔道具『クロム』がいち早く2014年に実装したが他のギルドは追従せず。
  主要なブラウザの対応が完了したのは2022年。2012年の仕様公開からなんと10年以上もかかった不遇なエレメンツ

  。このｄialog要素はHTMLの一要素なんだが、これだけでは何も魔法は発生しない。CSSの::backdrop疑似要素、JavaScriptのshowModal()関数、この二つを追加し、三つの魔法術式を同時に錬成して初めて強力な魔法が発生する。まるで現代のコンポーネント術式を先取りするような革命的な魔法が20年以上も前に策定されていたのだから驚きだ。

今回発掘された主要古代魔法

• 現代魔法への適正度も加味した一覧
  分かりやすい様に、現代魔法への錬成度も★の数で設定した。
  
  古代魔法発掘年代現代適性
  attr()第一次★★★★★counter()第一次 ★★★★★quotes第一次★★★★☆details / summary 第二次★★★★★dialog第三次★★★★★

いよいよ聖遺物をひとつずつ解析する

• 今回の調査では、多くの古代WEB魔法が眠っていることがわかった。
  しかし、本当の冒険はここから始まる。
  次回からは、発掘した聖遺物を一つずつ解析し、現代のCSS神聖魔法という錬金術を用いて、その真の力を解き放っていく。
  まずは第一次WEB遺跡より発見された attr()、quotes、counter()。
  続いて details / summary。
  そして最後は、HTML・CSS・JavaScriptが融合する三位一体の魔法 dialog。
  忘れ去られた古代魔法が、現代Web魔法でどのようによみがえるのか──。
  次回より、その封印を解いていこう。