CSSだけでマイクラが爆誕！その完成度が話題に
引用元：https://news.ycombinator.com/item?id=44100148
CSSで見た中で間違いなく一番すごいね。これ見てすぐに「A Single Div」[0]を思い出したよ、あれは11年間で見たCSSデモの中で一番クールだったんだ！今回のこれが一番だね。じっくり見るよ。ありがとう！
[0]： https://a.singlediv.com/
この最新すごい技術見た？
https://diana-adrianne.com/purecss-lace/
信じられないね。最初はすごく疑ってたんだけど、neckruffとかlacetopとか見てみたら、本当に全部background-imageで生成されてるんだね。でも画像じゃなくて特定の色gradientsとかbox-shadowsとか使ってるみたいだ。
うわー、Dark Readerで見たられいちゃん（作品のこと？）が完全にぐちゃぐちゃになったよ。
うわー、mobile Safariだとダメだねこれ。ズームしたりスクロールしたりするとページがしょっちゅうクラッシュするよ。
俺のiPhone 14ではちゃんと動いたよ。
実際、俺のMBPでも似たような問題があったなー。タブは落ちなかったけどね。ChromeとSafariでズームしたりスクロールしたりするとdivが再レンダリング（repaint？）されて、全部がそうなるわけじゃないんだ。例えばChromeだとこれ：
https://imgur.com/a/VWCAL9G
Firefoxだとスクロールは大丈夫だけどめちゃくちゃ遅いよ。
俺のPixel 8でFirefoxで見たら驚くほどスムーズだったよ。
面白いね。俺のMBPのSafariではちゃんと動いたよ。開発者ツールで使われてるスタイルも見て回ったんだ。
これまで見た中で一番好きなのはこれかな：
https://lyra.horse/css-clicker/
1852秒？ かけて良かった！ クリッカー系が嫌いじゃなきゃ，これやってみて．絶対愛を込めて作られてるよ．
僕の長いダメ人生選択リストにまた一つ追加されました，午前2時になっても寝ないで，1000万ビュー達成するの待ってるんだからさ :)))))
いやー，マジで最高だったね
あのエンドゲームはマジで完璧だよ
変だな，最後のブログ投稿見たらfirefoxが落ちたんだけど．
ヤバいね，完全にハマった！
彼女の講演を聞く機会があってさ．他にも素晴らしいCSS projectsをたくさんやってるんだよ．https://lynnandtonic.com/work/
Also love seeing Phoenix devs mentioned！
クッソ，あのサイト単体でもすごいのに，毎年新しいWeb technologies学ぶためにリデザイン／書き直してるんだってさ．https://lynnandtonic.com/archive/
これ，暇なときにインスピレーション得るためにブックマークしといたよ．
これ，めっちゃインタラクティブに見えるのにそうじゃないのが多いんだけど．これって僕がモバイルだから？ それとも何も動かないの？
最初のページのはどれもインタラクティブじゃないと思うな．次のページにいくつかあるかも（ホバーでペンの色が変わるの1個だけ見つけたよ）．
でも全部個別のdivなんでしょ
作者だよ！話題になってサイト落ちちゃったんで Github Pages を使ってね: https://benjaminaster.github.io/CSS-Minecraft/
3年前CSSの限界と :has() を試すために作ったんだ。
解説は Simon Willison が書いてくれたからもういいかな: https://simonwillison.net/2025/May/26/css-minecraft/
デスクトップの Chromium か Firefox 推奨。
ソースコードは Github: https://github.com/BenjaminAster/CSS-Minecraft。
動画もどうぞ: https://www.youtube.com/watch?v=OH8-Y9frP5k
これはマジで過小評価されてたね、すごいじゃん
これめっちゃ賢くて、かなりエレガントだね。どう動くか俺なりにまとめたノートをここに置いといたよ: https://simonwillison.net/2025/May/26/css-minecraft/
こういう感じでCSS CAPTCHA（Torサイト向け）とか、サインアップ/ログインのモーダルとか、色んなものが作られてるんだね。
いい記事だね、ありがとう。組み合わせ爆発について話してる！
でも全然実用的じゃないし、CSSの使い道としてはやりすぎでしょ。
当たり前じゃん… だから作ったんだよ。楽しむためと、できるかどうか試すためにね。
CSSを意図しない使い方しちゃう人が多すぎになりそうで心配だわ。今だってSVG使うべきなのにCSSでやろうとする人多すぎるし。
こういうCSS実験はCSSの歴史と同じくらい昔からあるんだよね。CSS Zen Gardenってサイトでは、みんなで基本的なHTMLをCSSだけで全然違う見た目にしてたコミュニティもあったし。（今ググったらCSS Zen Gardenだって。全然ダメな検索だったのにGoogleすげぇな。）
中には変なもの作る人もいたけど、CSSの限界を知ってその知識でCSSを進化させた人もいるわけ。だから、俺的にはやっちゃいけないことを見つけることから人は成長できるって信じてるんだ。
もっとコメントを表示（1）
CSS Zen Gardenって、この記事で言ってるみたいな実験とは違うよ。GardenはHTML要素を色々な方法でスタイルできるって見せるもので、この記事の主題にあるような画像を作ったり操作したりするためのものじゃないんだ。そうは言っても、俺もGardenを何年も見てないから、もしそういうのを見つけたなら、それは…一つだけ見つけたってことだね…んで、俺の最初のコメントに戻るんだけどさ：そういうのは実用的じゃないし、CSSの用途じゃないし、避けるべきだって。
つまりさ、あんたは実験から学ばないし、あんたの学習スタイルだけが正しいってわけ？…まあ議論する価値ないけど、科学はそれが間違いだって証明してるんだよね。認知心理学でも読んだ方がいいんじゃない？
これって要は”暴力的なビデオゲームは学校での銃乱射事件の原因だ”って考え方と一緒だよね。
CSS Minecraftとか、CSS CAPTCHAs、サインアップ・ログインモーダルみたいなのはSVGじゃ無理なんだよ。こういうのはJSなしのウェブサイト（例えばTorとかね）に必要なんだ。CSSとHTMLはこういう使い方にピッタリだよ。
むしろこういうテクニックはJSなしで何か作れるようにしてくれるんだ。俺は未だにW3Cの誰かがちゃんと仕事して、素のHTML + CSSでアクセス可能なハンバーガーメニューの仕様とか出してくれるのを待ってるんだけどね。
もしくは、JSなしで（操作なしでも）状態が変わるような、ちゃんとしたdetails要素とかさ。マジで頼むわ。
マジでムカつきたいなら、HTMLのチェックボックスでレンダリングされたDoomなんてどう？https://healeycodes.com/doom-rendered-via-checkboxes
どうやって状態を管理してるんだろう？って思った人いる？ソースコードをちょっと見たら、ラジオボタンを使ってて、HTMLには置ける全てのブロックが入ってるみたいだよ。
カメラの状態がどうなってるか気になる人いる？ボタンが:active状態の時にアニメーション動かして、そうじゃない時は一時停止させてるっぽいよ。
なるほど、確かにね。なんでワールドが9x9x9しかないんだろうって思ってたんだけど、4.6万行のコードで各ブロックが空気とか石とか草とか土とか木とか葉っぱとかガラスになりうることを表現してるのか。ちょっと好きかも。
CSSだけで気の利いたことやるならradio buttonsとかcheckboxesってマジで魔法だよね。前はピュアなHTML/CSSだけでタブとかトグルとか色々面白いのがあったけど、アクセシビリティの監査通らなかったんだよね。
いやー、CSSのデモで見た中で多分一番ハッキーなやり方だね。最高！
いつもそうだ、絶対radio buttonsだよ。
信じられないくらいすごいね。2年半前には全然気づかれなかったみたいだけど。
https://news.ycombinator.com/item?id=33579407
ほら、これマジでヤバいね。運って本当に色んなことの要因になってるんだな！
またHug of Deathか。ウェブサイトには”再度トラフィックを処理するにはFirebaseコンソール経由でアップグレードする必要があります”って書いてあるね。動いてた時のWayback Machineはこちら
https://web.archive.org/web/20250317122419/https://benjamina…
こういうサービスに依存してるウェブサイトってどれだけあるんだろうって考えさせられるね。ウェブっていつも脆かったけど、公開初日に5万人くらいのユーザーで落ちちゃうサイトを見るとちょっと悲しいな。問題起こしにくいGitHub Pagesですら前はリンク壊れたことあったしね。
[0]: https://github.blog/news-insights/product-news/new-github-pa…
これまで見た中で一番最高のAnti-Firebase投稿だわ。
あー、これ作者にとってものすごい負担にならないといいけどな :( 昨日の夜は動いてたのにね。
このプロジェクト、バックエンド使ってないじゃん、だからFirebaseいるの？GitHub Pagesなら帯域幅無制限なのに。
もしサイトが混んでて見れなかったら、こっちの代替URL見てみてね。
https://benjaminaster.github.io/CSS-Minecraft/
めっちゃ感動した！中年になって青春時代に戻ったみたいで（退行か進歩か）、HTMLとCSSだけでアプリとかサイトいっぱい作って、すごく楽しんでるんだ。
まだ解決されてないと思ってるのは、ピュアなCSSでランダムっぽい数字を作ること。数学関数とかブラウザ属性でほぼいけそうだけど、信頼できる方法が見つからないんだよね。
これ、使えるかな？
https://medium.com/hypersphere-codes/randomness-in-css-b55a0…
残念だけど、その解決策はFirefoxとかSafariでは動かないんだよね。
クリックできるものになら、複数のオブジェクトのz-indexをアニメーションさせることで、かなり簡単にランダム性を持たせられるよ。
へぇ、面白いね！このアプローチは知らなかったから、試してみるのが楽しみだよ。ジェネラティブカラーに使えるCSS変数設定に使えると思う？
役に立つかって？自分で確認せずに質問（というか、質問の形で解決策を提案すること）するのは変だと思うな。君の質問に答えると、LLMはCSSでランダムな数字は生成できないって断言してるよ。
ああ、どうやら問題を前にして”AI”って叫ぶのが、ソフト開発したことない人たちが開発分かってる風を装う最近のトレンドみたいだね。
HTML視点で見るとマジで信じられないレベルだけど、Minecraftのコンセプトがどれだけキャッチーでシンプルかってことの証明でもあると思うんだよね．．．．．．ちょっといじってみただけで、さっそく可愛い木と丘を作っちゃったよ： https://i.imgur.com/PjlDWo5.png
Minecraftが最初から達成したことを要件として設定すると想像してみてよ：1）史上最も成功したゲームの一つになること。2）基本的なゲームメカニクスがHTMLとCSSだけで（JSなしで）実装可能であること。こういう”偶然”すごいことが起こった時、この思考実験するの結構好きなんだ。
10年以上前のKeith Clarkさんのプロジェクトを思い出したよ。これとか：https://keithclark.co.uk/labs/css-fps/desktop/
あとこれ：https://keithclark.co.uk/labs/css-3d-shadows/
もっとコメントを表示（2）
ボタン要素の:active擬似クラスを使ってanimation-play-stateの値を変更することで、回転や移動の制御を実現してるのがマジで素晴らしいね。ここら辺見てみて：https://github.com/BenjaminAster/CSS-Minecraft/blob/main/mai．．．
”Bandwidth Quota Exceeded”って表示が出たよ。
Web Archiveでも見られるよ。https://web.archive.org/web/20250317122419/https://benjamina．．．
俺も同じだよ。サーバーレスの流行に乗っかるべきじゃなかったかもね．．．．．．結局スタティックなサイトなんだし :D
GitHubからアーカイブをダウンロードしてローカルで動かすって手もあるよ。ここから取れる：https://github.com/BenjaminAster/CSS-Minecraft/archive/refs/．．． 等々
Pugはこのデモの隠れた主役だね。このテンプレートエンジンのおかげで、4重のネストされたループでUIを力技で作れたんだ。すごい！
Pugってここで別のテンプレートエンジンとか、単なるカスタムスクリプトじゃできないような特別なことしてるの？文字列結合なんてそんなに複雑じゃないのにさ。
JSで全部要素作ってHTML保存すればいいんじゃね？HTML+CSSオンリーとか言いつつ結局HTML+CSS+JS使ってるし。
CSSはたった480行だってさ！
https://github.com/BenjaminAster/CSS-Minecraft/blob/main/mai……
でもHTMLは46022行もあるんだよね (3.07MB)
最近WebGLのシェーダーだけでQuakeを実装してるの見たけど、これは別次元だわ。
https://www.shadertoy.com/view/lsKfWd
HTML／CSSもプログラミング言語になったね。
すごいのはマジでわかるけど、あれは”Quake”全体じゃなくて；単にQuakeの難易度選択の通路だけなんだ。敵とかいないし。
俺の理解合ってるか教えてくんない？
これってvoxelは＜input type=”radio” /＞で実装されてるの？
各voxelの各面は＜label＞で設定されてて、それぞれCSSクラスが違う。
ブロックの種類ごとにvoxelがあって、一度に一つだけアクティブになる。＜input＞は9x9マスで高さ10ブロック、ブロック種類の数だけ並んでて（合計約6500個）。
これ全部、カメラ操作（上下見たり、上下移動したり、前後移動したり、回転したり）に対応するCSSクラスが付いた＜div＞で囲まれてるんだ？
マジ天才じゃん！
ちなみに、＜input＞タグは閉じスラッシュ使わないし必要ないよ。どのHTML仕様でもずっとそう。
https://html.spec.whatwg.org/dev/input.html#the-input-elemen…
それ、HTMLでの解釈を邪魔しないままXHTMLとも互換性持たせるために、たまにやることなんだよね。
XHTML使ってるならともかく、そうじゃないなら互換性のための手間とかいらないでしょ。あの人がXHTMLで配信してるなんて思えないし。
他にも終了タグ省略できるけど、自己終了タグにしちゃダメなタグとかあるよ。例えば＜ol＞＜li＞one＜li＞two＜/ol＞
文脈的におかしいタグが出てきた時に要素を自動で閉じるルールがあるから、最後の＜/ol＞すら省略できるんじゃないかって思う時もある。
それ知ってるよ、でも多くの開発者は知らないんだ。＜li＞タグみたいに自動で閉じないのは、なぜだ？って混乱するのが楽しみだね。曖昧さって危ないこともあるから、HTMLタグを閉めないのは、僕の経験だとそういう原因になることがあるんだ。
そういう”他の開発者”ってのは”hobbyists”って言うんだよ。他にも言い方あるけど、ここでは挙げないでおくね。
時々”他の開発者”は”coworkers”でもあるんだ。僕は曖昧さが少ない方が、可能ならより良いことだって分かったんだ。何も含められないタグをセルフクローズするのは、”hobbyists”のためにも曖昧さをなくす一つの例だね。
そのタグがセルフクローズだって知ってないと、終わりのスラッシュは付けられないよね？だから、もしそれがセルフクローズだって既に知ってるなら、なんで余計な負担を加える必要があるの？
意味ないじゃん。
もしセルフクローズの要素にコンテンツを追加したいなら、ここで話してる問題よりもっと大変な問題を抱えてるってことだよ。
それは例えば、出力がHTMLとXHTML両方で有効であってほしいライブラリによって行われることがあるんだ。HTMLではそれは構文エラーじゃないよ—HTMLには構文エラーがないからね。HTML5の仕様では、既存のHTML4パーサーのPostel’s lawの奇妙な癖を全て成文化しようとしたんだ。このケースでは、もしあなたがパーサーなら、余計な／をどう無視するかを教えてくれるよ。何も構文エラーじゃない。
構文エラーだなんて言ってないよ。標準で規定されてないって言ったんだ。スラッシュをそこに付けても意味ないし、何も効果ないし、ブラウザはそれを無視するだけだよ。むしろ、問題を引き起こす可能性すらあるんだ：https://github.com/validator/validator/wiki/Markup-%EF%BC%BB-Vo…
だから、全体としてやらないのが一番良いんだ。もしHTMLとXHTML両方に準拠する必要があるって思うなら、彼らはその努力を失敗させるであろう他のマークアップで、もっと大変な問題を抱えてる可能性が高いって賭けてもいいよ。
マジでびっくり。タブを何百個も開いてるけど、LinuxのChromeでは問題ないよ。
ある時点でタブの数は関係なくなると思うな、だってタブはアンロードされて状態はおそらくディスクに保存されるから。開かない限り、開いてるだけでブラウザが遅くなることはないはずだよ。
他にも、それを見て、どれだけ大変だったかって分かって、思わず汚い言葉が複数出ちゃった人いる？これマジ信じられないくらいすごいよ。
