この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。
CSSといくつかの画像を用いてレイアウトを行っています。
世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。
ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。
誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。
そこで私は、テキストを主体にしたCSSで、かっこいいところは無いのかと、WWWをうろついてみました。残念ながら、私の求めているテキストベースの美しいデザインをまとめているサイトは、ありませんでした。
テキストを主体としたデザインというと、私が思い浮かべるのは、ボーダーを多用し、スペースがあまり活かされていない、正直なところ、美しくないデザインです。
ある日、私はInformation Architects Japanというサイトに出会いました。そのサイトは、画像の使用を最低限に控えたテキストが主体のサイトでした。私はとてもショックを受け、随分と長いことそのサイトを見つめていました。ボーダーに頼らず、スペースと見出しのバランスのみでも、美しいデザインが出来ることを、思い知りました。いいえ、思い知らされました。あぁ、きっと、こういうことを良いデザインだと言うのだと、そう思いました。
それ以来、私は次第に画像を多用したデザインを好まなくなりました。簡単に言うと、しつこいのです。とんかつやステーキ味のふりかけには、もう飽きました。私は、シンプルな梅しらすやおかかのふりかけが欲しいのです。
私は、そんな思いがあり、この企画「画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会」を立ち上げました。CSSやデザインに詳しい人、勿論そうでない人も歓迎です。どうか、皆さんで美しいCSSデザインに挑戦してみてください。
この企画に興味があり、企画に参加をしたい方は、下記をご覧下さい。
画像の使用を控え(あるいは一切使用しないで)、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSデザインが作れるか皆で挑戦しよう!
画像は一切使用してはいけません。
HTMLは、共通となっています。
参加者の自由です。
参加者の自由です。半角英数字でお願いいたします。
尚、ギャラリーに展示する際に、こちらでファイルの先頭に番号をふらせていただきます。あらかじめご了承下さい。
CSSは、HTMLに直接書き込まず、別のファイルにして、外部から読み込みむ形でお願いいたします。
ディレクトリの構成もご自由にどうぞ。また、リンクは相対パスでお願いいたします。
CSSファイル(画像使う人は画像も一緒に)をまとめて圧縮ファイルにしてもらって、サーバなどにアップロードの上、主催にご連絡下さい。
サーバなどにアップロードできない人は、まとめた圧縮ファイルをメールに添付し主催にお送り下さい。
圧縮するファイルの形式は、zip、lzh、rarのうちのいずれかでお願いいたします。
<link rel="stylesheet" type="text/css" media="screen,tv" href="/common/css/hoge.css" title="hogeスタイル">
のようにタイトルなどを記述したlink要素。提出するファイルは、よくご確認の上、提出してください。
メールの件名に「画像の使用を(略)CSS大会」の一文を添えてくれると嬉しいです。
Safariのスクリーンショット画像を記念にプレゼントします :D
※スクリーンショット画像は、欲しい方のみ受け付けます。提出時または提出後に、参加者した名前を併記の上、当方まで連絡下さい。
提出された画像やCSSのうち著作物足り得るものの著作権は提出者にあります。ただ、ここは実演の場であるとともに学習の場、練習するための場所でもありますので、CSSに関してはクリエイティブ・コモンズ 表示 3.0 一般のライセンスで公表してください。