x86CSS — CSSだけで動くx86エミュレータ

Web
x86CSS — CSSだけで動くx86エミュレータ

x86CSS — CSSだけで動くx86エミュレータ

x86CSSは、JavaScriptを一切使わずに「CSSだけ」で8086系の機械語（ネイティブx86バイナリ）を実行するという実験的プロジェクトです。GCCでコンパイルしたCプログラムを8086マシンコードにした上で、compile_c.pyなどのツールでそのバイナリを大量のCSSルールとHTML構造へ変換し、ブラウザのCSSレンダリング機構（アニメーション・セレクタ・擬似要素など）を駆使して命令の実行やレジスタ／メモリの状態を再現します。デモサイトも公開されており、表現の限界やブラウザ機能の面白さを学べるプロジェクトです。

https://github.com/rebane2001/x86CSS

概要

x86CSSは「CSSのみ」で動作するx86（8086相当）エミュレータ／コンピュータを実現した実験リポジトリです。GCCでコンパイルしたCプログラムを8086マシンコードへ変換し、そのバイナリをCSSルールとHTMLに置き換えることで、ブラウザ上で命令フェッチ・実行・メモリ更新・レジスタ表示といった動作をCSSのレンダリング機構だけで再現します。JavaScriptを使わずに「スタイルシートでプログラムを動かす」こと自体が狙いで、視覚的デモと教育的価値があります。ライブデモは公開されており、ソースを変換するツールやサンプルCコードも収録されています。

GitHub

リポジトリの統計情報

  • スター数: 55
  • フォーク数: 1
  • ウォッチャー数: 55
  • コミット数: 5
  • ファイル数: 12
  • メインの言語: HTML

主な特徴

  • CSSだけで8086の機械語を「実行」する独創的なエミュレーション実験
  • GCCでコンパイルしたCプログラムを入力に、バイナリ→CSSへ変換するツールを同梱
  • ブラウザのCSS機能（アニメーションや擬似要素など）を活用した非伝統的な実装
  • ライブデモ公開で視覚的に動作確認が可能

技術的なポイント

x86CSSの本質は「状態（レジスタ・メモリ・フラグ）と制御（命令のステップ）を、ブラウザのCSS表現で表す」ことにあります。READMEが示す通り、実際の8086マシンコードを用いており、リポジトリにはその変換に使うスクリプト（compile_c.py）やテンプレート（base_template.html）、サンプルCソースが含まれています。

実現手法として考えられる主要アプローチは次の通りです（実装詳細はソースを参照してください）：

  • バイナリの各バイトや命令ごとにHTML要素・CSSセレクタを生成し、該当命令に応じて擬似要素の表示やスタイル変更で「動作」を表す。
  • CSSアニメーションやanimation-delayをクロックやステップ制御に流用し、連続した状態変化（フェッチ→デコード→実行）を時間的に表現する。
  • CSSの擬似要素（::before/::after）やcontentプロパティ、カウンタ（counter）を使って数値表示やビット列表示を作ることで、レジスタ値やメモリダンプを可視化する。
  • 属性セレクタや大量のルールで状態マッチングを実現し、compile_c.pyはバイナリをこれらのルール群に変換してHTML/CSSを生成する役割を担う。
  • JavaScriptを使わないため、インタラクションはアンカー(:target)やチェックボックスハック(:checked)、もしくはアニメーションの自動進行を用いて行う可能性が高い（実装により手法は異なる）。

こうした手法は「CSSの本来想定されていない用途」への応用であり、利点としては「ブラウザの標準機能だけで表現できる面白さ」と「教育的インパクト」が挙げられます。一方で課題も明確で、生成されるCSS/HTMLのサイズ爆発、パフォーマンス制約、ブラウザ互換性、動的入力の難しさ（外部データやユーザーイベントの処理）などは避けられません。とはいえ、compile_c.pyやテンプレートの存在により、C→バイナリ→CSSという変換パイプラインが用意されており、実際のコンパイラ出力を素材に実験できる点は貴重です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • README.md: file
  • base_template.html: file
  • c: dir
  • compile_c.py: file

…他 7 ファイル

（注）c ディレクトリにはサンプルCソースやコンパイル対象が入っており、compile_c.pyはそれらのコンパイル結果（バイナリ）をCSS/HTMLへ変換するためのユーティリティです。base_template.htmlは生成されたスタイルと要素を埋め込むための土台を提供します。

まとめ

CSSの表現力を極限まで利用した教育的かつ挑戦的な実験プロジェクトです（約50字）。

リポジトリ情報：

READMEの抜粋：

x86CSS

Check out the live website here.

x86CSS is a working CSS-only x86 CPU/emulator/computer. Yes, the Cascading Style Sheets CSS. No JavaScript required.

What you’re seeing above is a C program that was compiled using GCC into native 8086 machine code being executed fully within CSS.

Frequently Asked Questions

Is CSS a programming langu…