CSS Zen Garden プロジェクト

 (csszengarden.com)
2 ポイント 投稿者 GN⁺ 2025-04-28 | 1件のコメント | WhatsAppで共有
  • CSS Zen Garden は、CSSベースのデザインの美しさを示すプロジェクト
  • HTML は同一のまま維持され、外部 CSS ファイルだけを変更することで多様なデザインを体験できる
  • 参加者は CSS を通じて Web デザインの力を示し、インスピレーションを与え、学習資料として活用できる
  • 主に CSS 1 と 2 を使用し、CSS 3 と 4 は限定的に使用する必要がある
  • 提出されたデザインはさまざまなブラウザーで一貫した結果を示す必要があり、少なくとも IE9+ および最新ブラウザーで動作しなければならない

CSS Zen Garden の重要性

  • CSS Zen Garden は、CSS の力を示し、デザイナーと開発者にインスピレーションを与えるためのプロジェクト
  • HTML は同一のまま維持され、外部 CSS ファイルだけを変更することで多様なデザインを体験できる
  • このプロジェクトは CSS の可能性を示し、Web デザインの美しさを強調する

参加方法

  • 強力なビジュアルデザインと CSS スキルが必要だが、初心者でもサンプルファイルを通じて始められる
  • スタイルシートは自由に修正できるが、HTML は変更できない
  • 完成した作品は Web サーバーにアップロードし、リンクを提出する必要がある

参加の利点

  • 認知度向上、インスピレーションの提供、CSS の驚くべき可能性を示す資料として活用できる
  • Web デザイナーや開発者にインスピレーションを与え、学習資料として活用できるサイト

要件

  • 主に CSS 1 と 2 を使用し、CSS 3 と 4 は限定的に使用する必要がある
  • さまざまなブラウザーで一貫した結果を示す必要があり、少なくとも IE9+ および最新ブラウザーで動作しなければならない
  • 独創的な作品を提出する必要があり、著作権を尊重しなければならない

著作権およびライセンス

  • 提出されたグラフィックは著作権を保持し、CSS は Creative Commons ライセンスで提供する必要がある
  • 他の人が学習できるように CSS を共有する必要がある

関連記事

1件のコメント

 
GN⁺ 2025-04-28
Hacker Newsのコメント

  • CSSが登場する前、Web開発者はグリッドを作るためにtable要素を多用し、画像をスライスしてテーブルに配置する方法でレイアウトを実装していた

    • CSSへの反発があり、多くの開発者がCSSを学ぶことを拒んでいた
    • CSSでは「退屈で箱のような」デザインしかできないという誤解があった
    • Dave SheaがCSS Zen Gardenを通じてCSSの可能性を示し、こうした誤解を払拭した
    • CSSで優れたデザインを作れることを証明し、論争に決着をつけた

  • このサイトは古いが、良い意味で素晴らしかった

    • 2000年代初頭、Microsoft ASP.NETから離れ、Linuxでアプリを開発するようになったきっかけだった
    • Alex RussellがDojo JSを通じて新しい情報をもたらし、技術ニュースの重要性を再認識させてくれた
    • Web.py、HTML、JS、CSSで構成されたツールキットを使っており、その後jQuery、Backbone、Underscore、React、TSなどが登場した

  • CSS Zen Gardenの主要なポイントは、意味のあるHTMLを最大限に活用することで、プレゼンテーションとコンテンツを完全に独立して運用できるということだった

    • CSSの制約の中でデザインを実装できた
    • スタイルを変更するにはDOMを直接修正しなければならないことが多かった
    • HTMLとJavascriptのレベルで、プレゼンテーションとコンテンツ構造の決定を混在させる必要があった

  • Zen GardenとEric Meyerを通じてCSSを学んだ者として、Tailwindのような現代のCSSツールはアンチパターンのように見える

  • TailwindとCSS-in-JSの暗黒時代に光をもたらす存在だった

    • 20年前のCSS Zen Gardenの重要性を理解するのは難しい

  • 古いが良いものだ

    • 低所得層の高校生にWebデザインを教える際の基礎になった
    • 学生たちはWebデザイン大会でCSSを説明しなければならず、多くの学生がデスクトップコンピュータを獲得した
    • Dave Shea、Eric Meyer、Andy Buddらに質問を送り、助けを得た

  • 2つのデザインを投稿したことがあり、今でもCSSの再利用依頼を受ける

  • このサイトは過去に大きな影響力を持っていた

    • 同じHTMLコンテンツに対してCSSと画像を投稿できた
    • 印象的なデザインの例がいくつもあった

  • 昔の思い出... CSS Zen Gardenは大好きだったが、Webサイトの主な目的が文書を提供することだった時代の哲学でもあった

    • メディアが豊富な世界では、このビジョンは過去のものになった

  • CSS Zen GardenをHNで見られてうれしい

    • TailwindのようなCSS「フレームワーク」への不満がある
    • TailwindはCSSの仕組みを学ばなくても「十分にまともな」結果を得られるようにしてしまう
    • HTMLが、コンテンツよりCSSクラスの方が多い状態になってしまう
    • 深い理解や習熟がオプション扱いされる傾向がある