2月25日、rebane2001が「x86CSS」と題した記事を公開した。この記事では、CSSのみでx86アーキテクチャをシミュレートするCPUエミュレータについて詳しく紹介されている。
以下に、その内容を紹介する。
プロジェクトの概要
本プロジェクトは、ウェブサイトの装飾言語であるCSSのみを用いて、16bitのx86(Intel 8086)プログラムを実行可能にするものだ。最大の特徴は、JavaScriptを一切使用していない点にある。
通常、ブラウザ上で動作する複雑なロジックはJavaScriptが担うが、作者はC言語のソースコードをバイナリ形式のマシンコード(機械語)へコンパイルし、そのバイナリをCSSのロジックのみで読み込み、演算して実行することに成功した。
【補足】x86 / 8086とは
x86は、現代のPCの多くで採用されているCPUの基本設計(アーキテクチャ)の系譜だ。その原点とも言えるのが1978年に登場した「Intel 8086」である。今回のプロジェクトは、この伝説的なCPUの動作をCSSだけで再現している。
何が「ぶっ飛んでいる」のか
このプロジェクトの特異性は、単に「CSSで計算をした」というレベルに留まらない。
- バイナリの解読: コンピュータが直接理解する「0」と「1」の羅列(マシン語バイナリ)を、CSSが1命令ずつ読み取り、「この命令は加算だ」「これはメモリへの書き込みだ」と判断して処理を進める。
- 論理ゲートの構築: 本来、文字の色を変えるためのCSSを、スタイルクエリ(
@container)や最新のif()ステートメントを駆使することで、CPU内部の論理回路として機能させている。 - 自律駆動するクロック: CSSのみでロジックを回すには、通常「ユーザーがマウスを動かす」などのトリガーが必要だが、本プロジェクトは CSSアニメーションをCPUの「クロック信号」として利用。 ユーザーが何もしなくても、ブラウザを開くだけでプログラムが勝手に進んでいく。
これらは、Chromium系ブラウザの最新機能を「本来の意図とは異なる方向」へ極限まで引き出した結果であり、標準的なWeb開発の常識を大きく逸脱している。
「技術の超絶無駄遣い」にネット上でも盛り上がり
この極端なアプローチは、SNSや技術フォーラムで大きな注目を集めている。
- SNSでの反響: BlueskyやTwitter(X)では、「CSSでdivを中央に寄せることすら一苦労なのに、なぜCPUを作ってしまうのか」といった、驚きと困惑の混じった声が多数上がった。
- エンジニアの視点: Hacker News等では、CSSがチューリング完全であることを証明する極端かつ芸術的な例として注目されている。
- AI不使用の明言: 作者はGitHubにて、「AIは使用していない。この種のプロジェクトはLLMでは構築不可能だ」と述べており、人間の手による純粋なハックであることを強調している。
自作プログラムの実行と互換性
x86CSSは単なる固定デモではなく、汎用的なコンパイル環境も整備されている。
- 開発フロー: ユーザーが書いたC言語やアセンブリを
gcc-ia16でコンパイルし、付属のPythonスクリプト(build_css.py)を通すことで、実行可能なCSSを含むHTMLファイルが生成される。 - ハードウェア構成: 1.5kBのメモリ、キーボード入力、画面出力を備えており、独自のI/Oアドレスを介してこれらを制御できる。
「実用性は皆無だが、コンピュータはアートと楽しみのためにある」という作者の言葉通り、本プロジェクトはCSSの可能性を誰よりも「誤用」した、エンジニアリングの極致と言えるだろう。
詳細はx86CSSを参照していただきたい。