CSS Zen Gardenプロジェクト
(csszengarden.com)- CSS Zen Gardenは、同じHTML文書でもCSSベースのデザインだけでまったく異なる視覚体験になり得ることを示すデモプロジェクト
- デザイン一覧からスタイルシートを選ぶと、HTMLはそのままに外部CSSだけが切り替わり、ページのレンダリングが変わる
- 参加者はサンプルのHTML/CSSをダウンロードしてローカルで作業するが、提出時に変更できるのはスタイルシートのみ
- 完成したCSSファイルと関連アセットを自分のWebサーバーにアップロードし、リンクで提出する。選ばれた作品はCSS Zen Gardenのサーバーに配置される
- 実験的な機能より実用的なCSSが優先され、検証可能なCSSと、IE9+および最新のChrome・Firefox・iOS・Androidブラウザでの動作が求められる
同じHTMLをまったく違って見せるCSS実験
- CSS Zen Gardenは、CSSの表現力を示すためのデモ
- ユーザーはデザイン一覧から好きな項目を選び、現在のページにそのスタイルシートを適用できる
- 中核となる制約は、HTMLを変更せず外部CSSファイルだけを差し替える点にある
- 同じ文書構造を保ったまま、視覚的な結果だけが変わる
- デザインとコーディングが、Webの視覚的可能性をどこまで広げられるかを示す
- 参加とインスピレーションを促し、CSSで実際に実装可能な成果を共有する学習用プロジェクトと見ることができる
参加方法と提出フロー
- 参加者は強いビジュアルデザインとCSSスキルをもとに、このページを再デザインする
- サンプルファイルにはコメントがあり、CSS初心者も出発点として活用できる
- 高度なチュートリアルとヒントはCSS Resource Guideで提供されている
- 作業はサンプルのHTMLとCSSをダウンロードし、ローカルコピーで進められる
- 提出するには、完成したCSSファイルと関連アセットを自分が管理するWebサーバーにアップロードしたうえで、提出リンクから送る必要がある
- 未完成の作品の提出は推奨されない
- 選ばれた提出物はCSS Zen Garden側がダウンロードしてサーバーに配置する
- 参加の報酬は、認知、インスピレーション、そしてCSSの可能性を示す共有資料への貢献にある
CSS要件とライセンス
- 要件は最新の実験的機能よりも、機能的で実用的なCSSに重点が置かれている
- 可能な箇所ではCSS 1 & 2の使用が好まれる
- CSS 3 & 4は広くサポートされている要素に限定するか、強力な代替策を用意する必要がある
- CSSは検証を通過する必要がある
- 最新のユーザーエージェントとモバイル環境まで考慮すると、すべてのプラットフォームでピクセル単位に同一のレイアウトを実現するのは難しい場合がある
- デザインは少なくともIE9+、最新のChrome、Firefox、iOS、Androidブラウザで動作する必要がある
- 提出物は独創的なアートワークでなければならず、著作権法を尊重する必要がある
- 不快感を与え得る素材は最小限にすべき
- 庭園関連のデザインはすでに十分あるため、独特で興味深い視覚テーマが推奨される
- グラフィックの著作権は提出者に残るが、CSSはサイトと同じCreative Commons BY-NC-SA 3.0ライセンスで公開し、他の人が学習に活用できるようにする必要がある
1件のコメント
Hacker Newsの意見
これが作られていた時期にWeb開発をしたことがない人には、見えにくい文脈がある。
CSS以前は、レイアウトを作るためにtable要素をグリッドのように乱用し、画像を細かく切って各セルに入れていた。今ではその程度のことは覚えられているが、当時のCSSへの反発はかなり忘れられているように思う。
現状維持に満足してCSSを学びたがらないWeb開発者は多く、「CSSでは退屈で四角いデザインしか作れない」という神話もしぶとく残っていた。Dave SheaがCSS Zen Gardenで見事なデザインを集めて見せたことで、その主張は事実上終わった。あまりに完勝だったので、今ではそういう論争があったこと自体まで忘れられているのが面白い。
border-radiusでさえ2011年ごろになってようやく入ったし、比較的シンプルなhttps://90s.dev/のようなサイトでも、現代のCSSでhttps://90s.dev/style.cssを見ると約420行が必要になる。ネストや、流れを変えた
:hasをかなり使ってもそうだ。当時のCSSには根本的な限界があったため、直感的には作れない形を実装するために、CSSとHTML構造の両方を変えなければならなかった記憶がある。CSS Zen Gardenは、その時点でCSSでどこまで可能かを示すための存在だったと思う。
安定して予測可能なグリッドが必要ならtableレイアウトを使ったし、特に密で複雑なレイアウトではなおさらだった。ナビゲーションだけがtableレイアウトという場合もよくあり、当時の目標はピクセルパーフェクトだった。
2000年ごろのspacer要素を覚えているだろうか？ 結局定着せず、ピクセルGIFのほうが一般的で予測しやすかった。
2014年にflexboxが普及するまで、CSSのfloatレイアウトは皿回しのようなものだった。空のdivとコンテンツ入りのdivの挙動が違って苦しめられた。その時間は取り戻せないが、少なくとも報酬はもらった。
初期のCSSが素晴らしい「Zen Garden」的レイアウトを簡単に与えてくれた、という考えは私の経験とは合わない。ただし私は、面白いアートサイトではなく情報メディアサイトを作っていた。
このサイトは古い。そして、それは良い意味でだ。
2000年代の私にとってカルチャーショックで、Microsoft ASP.NETから離れてLinuxでアプリを作るようになった。inline styleパラメータを持つ「server controls」が完全に間違ったやり方、いわば「反インターネット的」なやり方だと気づいた。
Dojo JSを作ったAlex Russellがあるカンファレンスでそうした視点を示していて、Microsoftのチャネル経由で技術ニュースに触れていた間に、自分がどれほど多くの情報を見逃していたのかに衝撃を受けた。
数年間、私の道具はWeb.py、HTML、JS、CSS程度で、その後jQuery、Backbone、Underscoreが来た。そしてReactとTypeScriptが、また新しい「フルスタック」を鈍重なものにしたように感じる。
皮肉にも、古いものがまた新しいものになった。Next.js方面ではview stateを再発明しているし、Tailwindはinline stylingを、shadcnはReactコンポーネントを使っていて、ほぼ一周して戻ってきたようなものだ。
しばらくはセマンティックなマークアップとCSSが先行していたが、最近のトレンドは確かめる気すらなくなった。「JavaScriptの中のHTML」（JSX）あたりで関心を失った。
Linuxへ移る必要もなかった。IT部門がLinuxデスクトップを許可していなかったので、Windowsですべて作り、WindowsとLinuxサーバーの両方にデプロイしていた。
CSS Zen Gardenの核心は、セマンティックHTMLを最大限に活用すれば、表現とコンテンツを分離し、完全に独立して扱えるという点だったように感じる。
今でもZen Garden程度までは可能だが、実際にはCSSの限界の中で動いている。「CSSでこれができるから、こういうデザインを作る」に近く、「こういうデザインが欲しいから、このCSSを使う」という流れではない。
DOMを直接変えなければ可能にならないスタイル選択も多く、純粋なCSSではできないことがある。W3Cの議論でも、「divをもう1つラップすればいいのに、なぜ新しいCSSプロパティが必要なのか」といった調子を見たことがある。
画像の挿入や差し替えは簡単だが、スタイリング可能なSVGの差し替えは、SVGノードをHTMLに直接入れなければならないので不可能だ。結局、HTMLとJavaScriptのレベルで表現とコンテンツ構造の判断を混ぜることになり、単純なデザイン変更でもスタック全体に手を入れることになる。
GUIを30年書いてきて、今ではその線を引く場所が間違っていると確信している。代わりに意図を隔離すべきだ。私のプロジェクトのCompositesがその役割を担っていて、来週公開できるのをとても楽しみにしている。
Zen Garden や Eric Meyer のような資料で CSS を学んだ立場からすると、Tailwind のような現代の CSS ツールはアンチパターンのように見える
HTML がスタイル情報で覆い尽くされる。HTML を読むというのはコンテンツと意味を見ることであるべきで、
pl-16 pr-8 bg-olive-500 text-gray-700が「たぶんカードヘッダーだろう」と解読することではないはずだ。最近は人々が HTML を読まないとも言えるが、こうしたフレームワークを使う開発者が HTML をひどい混沌にしてしまったら、誰が読むのか。フレームワークのクラスが多すぎると、HTML にはコンテンツよりノイズのほうが多くなり、だから HTML を読むことがなくなり、また開発者がさらに多くのクラスやスタイルを積み上げるという自己強化サイクルになる。
Web 開発者はスタイルの重複もひどい。
.buttonのようなものの代わりに、text-white rounded bg-gray-aaaのような組み合わせが何百か所にも散らばる。Tailwind の問題なのか開発者の問題なのかは分からないが、大規模プロジェクトでは、似た UI 要素全体のスタイルを変えようとすると、どの要素のどの inline スタイルを探せばいいのかというモグラたたきになる。そうすると CSS のアイデアの道具箱はすぐにできるが、CSS をうまく動かすための細部を見落としてしまう。
position: absoluteとtransformで奇妙な問題を回避することはできたが、ブロック整形コンテキストやボックスモデルの細かな部分は知らなかった。CSS の知識が、いい加減な CSS 知識の上に貼った絆創膏でしかないなら、燃料を燃やしているだけだ。そのときは、組み合わせ可能なスタイルの道具箱を持ち込み、多くの CSS の落とし穴を避けさせてくれるやり方が魅力的に見えることもある。
自分の考えを変えたのは、HTML/CSS を基礎から教える短いオンライン書籍形式のシリーズだった。すべてを第一原理から説明し、なぜそうなっているのかを教えてくれたのであって、「div を中央揃えする 10 の方法」だけを投げて終わりではなかった。午後に全部読んで、Web 開発の見方が変わったのだが、本の名前がどうしても思い出せない。「
display: blockは Word 文書のようなもので、display: flexは人々が期待する挙動に近い」という一文が特に記憶に残っている。Tailwind と CSS-in-JS の暗黒時代に差す、少しの光のようだ。
20 年ほど前に CSS Zen Garden がどれほど重要だったかは、今では実感しにくい。
昔、このサイトは自分にものすごい影響を与えた。
知らない人のために説明すると、同じ HTML コンテンツに対して、CSS と画像だけでデザインを投稿できた。特に印象深かった例は次のとおり。
https://csszengarden.com/202/
https://csszengarden.com/189/
https://csszengarden.com/177/
https://csszengarden.com/136/
https://csszengarden.com/206/
スクロールすると
position: fixedの剣が「ページを中央で切り裂く」デザインもあったが、今は一覧にはないようだ。もう 1 つは、ページ最上部が海面で、下にスクロールすると海中の底にタコ、潜水艦、ダイバーのいずれかがいるデザインだったと記憶している。そこにデザインを 2 つ載せていて、今でも CSS の再利用許可を求めるメールを受け取る
今日HNでCSS Zen Gardenを見かけて、本当に懐かしかった。あの頃はよかった。
でも、そろそろ少し愚痴らせてほしい。
Tailwindやそれに類するCSS「フレームワーク」、そして現代のソフトウェア開発全般でいちばん心配なのは、基盤となるシステムを理解していないことをだんだん誇らしげに捉えるようになっている点だ。
Tailwindは手早く表面的な解決策を与えてくれる。ユーティリティクラスをページに貼り付ければ、CSSが実際にどう動くのかを学ばなくても「十分それっぽく見える」結果が出る。HTMLがコンテンツよりもCSSクラスのほうが多い混沌としたものになることは気にしない。
「どう動くかなんて何が重要なの？きれいなページができたじゃないか。成功だ！」という態度だ。
これはTailwindだけの問題ではなく、業界全体のより大きな流れだ。無知を称賛し、本当の理解を積み上げないまま結果だけを急ぐ。
いつから、知らないことが自慢になったのか。深さや熟練が任意のもの、さらには望ましくないものとして扱われるのは悲しいことだ。
テキストコンテンツの文字数よりクラス数のほうが多く、クラス名だけで約9kBある。それがタイムライン上のすべての投稿ごとに繰り返されている。
divを数個、クラスを数個、アイコンごとに1つのクラス、CSSを数行で十分なはずだ。本当に、投稿1つのクラス名の文字数より少ない文字数で、タイムラインのすべての投稿をスタイリングできる。
プロの開発者たちがどうやってこんなにも馬鹿げた肥大化したHTMLを作れるのか理解できない。
過去から飛んできたような感じだ。CSS Zen Gardenは好きだったが、その目標と哲学は、Webサイトの主な目的が文書の提供だった世界に合っていた。
リッチメディアの世界が、2000年代半ば頃にそのWebのビジョンを置き去りにしたように思う。
https://blog.danieljanus.pl/2019/10/07/web-of-documents/
いくつかの地図アプリを除けば、Webの大半は今でも何かを読むことであり、これほど多くの余計なものは必要ない。開発者たちが単純さより複雑さを好むから、より複雑になっているだけだ。
Gardenが戻ってきてうれしい。CSSベースのWebデザインが最先端で、人々が深くネストしたtableの代わりに深くネストしたdivを使い始めていた頃、CSS Zen GardenとSpoonoは私のお気に入りのWebサイトだった。
本もよかった。