CSS を使ったデザインで視覚的にどんなことができるかの例です。リストからスタイルシートを選択してこのページに適用してみてください。

html文書サンプルcss文書をダウンロード。

悟りへの道

あるブラウザ特定のタグ、互換性のない DOM、使えない CSS サポートといった過去の遺物が暗く荒涼としたウェブの小道を散らかしているのが現在の状態です。

今日、私たちは過去のやりかたを頭から消し去らなければいけません。ウェブの悟りは、W3CWaSP、そして大手ブラウザメーカーといった人たちの絶えまざる努力のおかげで達成に至りました。

css Zen Garden は達人の大事な教えについてゆったりと瞑想することをおすすめします。澄んだ心でものごとを見、新しくパワフルな(未来の)伝統的技術を学びましょう。ウェブと一体化するのです。

このサイトって何のためにあるの?

グラフィックデザイナーが CSS を真剣にとらえる必要性が確実に存在します。Zen Garden の狙いは、みんなを感化し、創作意欲をかきたて、参加を励ますこと。とりあえず、すでにリストにのっているデザインを見てみてください。クリックすると、そのスタイルシートがこのページそのものに直接適用されます。ページ自体のコードはそのままで、リンクされたスタイルシートが変わるだけ。いや、ホントに。

CSS はハイパーテキスト文書の完全でトータルなコントロールをもたらしてくれる。これを説明するのにみんなをうきうきさせるような方法といったら、実際やってみせるしかない。このサイトは、構造から美を生み出すことのできる人たちの手にかかったら、ウェブの真の姿がどんなものになり得るかのデモンストレーションです。 今日まで、かっこいい技とかテクニックの多くは、構造だのコードだのを専門にする人々によって紹介されてきています。デザイナーの出番はまだのようです。この事実は変えなきゃいけません。

参加

グラフィックアーティスト以外はお断り。 このページをいじくっているんだから、CSS は使いこなせないとダメだけど、デザイン例はわかりやすくコメントが入れてあるから CSS 初心者でもここから始められるようになっています。CSS に関しての上級テクニックチュートリアルとかコツについては CSS 関連情報ガイドをぜひ見てみてください。

スタイルシートはどれだけいじってもかまわないけど、HTML は触らないで欲しい。これってやったことのない人は初めは手強いと思うかもしれない。でも、紹介しているリンクを参考に、知らないことをどんどん学んで、サンプルを生かして色々試してみてください。

サンプル html 文書css 文書 をダウンロードして、コピーを作って遊んでみてください。傑作が完成したら、(お願い:未完成なものは提出しないでね。).css 文書を自分のサーバーにアップロードします。そうしたらそのファイルへのリンクを送ってください。もしそのデザインが選ばれたら、関連の画像に検索をかけます。最終的には私たちのサーバーへ置かせてもらいます。

アップデート:翻訳してくれる人を募集しています。英語とその他の言語に流暢なあなた、翻訳することもこのプロジェクトに参加するひとつの方法です。詳しくは(英語で)メールをください 。日本語訳:清水麻遊(まゆう) Japanese Translation by Mayu Shimizu

特典

何のために参加するか?名前を売るため、感化を受けるため、そして CSS を使ったデザインの促進のため、みんなの情報源となる場を作るため。 これは今現在でもまだ必要です。スタイルシートを使ったデザインへと移行する大企業もどんどん増えてはいますが、まだまだ少なすぎる。いつかこのギャラリーも、こんな試みもそういえばあったよね、と言われるものに変わる日がくるでしょう。でもそれはまだ先のこと。

必要条件:

できるだけ CSS1 を活用してください。 CSS2 は広くサポートされている要素のみに抑えましょう。 css Zen Garden の目的は機能的で実用的な CSS を使うことで、ここはサイトユーザーの2%しか見ることのできない最先端技術を見せるための場所ではありません。 唯一の実際の必要条件は、CSS がスタンダードに準拠していることです。

残念なことに、このやり方でデザインすることは CSS の様々なサポートの欠陥を浮きだたせることにつながります。違ったブラウザは違った表示をするし、スタンダードにちゃんと準拠している CSS でさえ、時にはブラウザによって異なった表示をします。ひとつの壊れた部分の修理が他の故障につながる時、これはどうしようもない状態になります。 解決策のいくつかについては、関連情報ガイドページをご覧ください。完璧なブラウザ準拠はいまだに夢のまた夢ということもあるし、すべてのマシンで一ピクセルのずれもない完全なコードを期待しているわけでもありません。でも、できるだけ多くのブラウザでテストして欲しい。少なくとも IE5+ウィンドウズ版と Mozilla (あわせて人口の90%以上が使用、)でうまく表示されないデザインは、ここでは受けつけられません。

オリジナルの作品を提出するようお願いします。著作権を守りましょう。きわどいものは最小限におさえてください。例えば芸術的なヌードはセーフですが、あからさまなポルノは却下されます。

ここは実演の場であるとともに学習の場、練習するための場所でもあります。 提出された画像の著作権はすべてあなたに属しますが、CSS の著作権は他の人があなたの作品から学ぶことができるように、Creative Commons のライセンスの元に放棄することをお願いしています。 Zen Garden の著作権もこれに基づいています。

バンドウィズは DreamFire Studiosからありがたくいただいています。