画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会

この文書について

この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。

CSSといくつかの画像を用いてレイアウトを行っています。

何でこの企画を立ち上げたか

まとめサイトが無い気がするよ

世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。

ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。

誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。

そこで私は、テキストを主体にしたCSSで、かっこいいところは無いのかと、WWWをうろついてみました。残念ながら、私の求めているテキストベースの美しいデザインをまとめているサイトは、ありませんでした。

ある種の可能性に出会う

テキストを主体にしたデザイン、というと思い浮かべるもの

テキストを主体としたデザインというと、私が思い浮かべるのは、ボーダーを多用し、スペースがあまり活かされていない、正直なところ、美しくないデザインです。

テキスト主体でかっこいいデザインのサイトに出会う

ある日、私はInformation Architects Japanというサイトに出会いました。そのサイトは、画像の使用を最低限に控えたテキストが主体のサイトでした。私はとてもショックを受け、随分と長いことそのサイトを見つめていました。ボーダーに頼らず、スペースと見出しのバランスのみでも、美しいデザインが出来ることを、思い知りました。いいえ、思い知らされました。あぁ、きっと、こういうことを良いデザインだと言うのだと、そう思いました。

それ以来、私は次第に画像を多用したデザインを好まなくなりました。簡単に言うと、しつこいのです。とんかつやステーキ味のふりかけには、もう飽きました。私は、シンプルな梅しらすやおかかのふりかけが欲しいのです。

私は、そんな思いがあり、この企画「画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会」を立ち上げました。CSSやデザインに詳しい人、勿論そうでない人も歓迎です。どうか、皆さんで美しいCSSデザインに挑戦してみてください。

この企画に興味があり、企画に参加をしたい方は、下記をご覧下さい。


大会の参加要項

大会の趣旨

画像の使用を控え(あるいは一切使用しないで)、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSデザインが作れるか皆で挑戦しよう!

大会の大まかな流れ

  1. 参加部門を選ぶ
    • 画像を極力控える部門
    • 画像を一切使用しない部門
  2. HTMLをダウンロード(HTMLは全て共通です)
  3. CSSを記述
  4. 完成したらCSS(あれば画像も一緒に)ファイルを提出
  5. 私、壱茉が確認後にギャラリーに展示します

部門について

  • 画像を極力控える部門
  • 画像を一切使用しない部門

部門別のルール

画像を極力控える部門
画像使用の制限
画像のサイズ
四方50ピクセル以内とする。
画像の形式
jpg、png、gifの3種とする。
画像の点数
5点を上限とする。
画像を一切使用しない部門

画像は一切使用してはいけません。

大会公式HTMLのダウンロード

HTMLは、共通となっています。

作成するCSSファイルについて、いくつかの注意点

文字コード

参加者の自由です。

ファイルの名称

参加者の自由です。半角英数字でお願いいたします。

尚、ギャラリーに展示する際に、こちらでファイルの先頭に番号をふらせていただきます。あらかじめご了承下さい。

CSSの書き方

CSSは、HTMLに直接書き込まず、別のファイルにして、外部から読み込む形でお願いいたします。

ディレクトリの構成もご自由にどうぞ。また、リンクは相対パスでお願いいたします。

ファイルの提出方法

CSSファイル(画像使う人は画像も一緒に)をまとめて圧縮ファイルにしてもらって、サーバなどにアップロードの上、主催にご連絡下さい。

サーバなどにアップロードできない人は、まとめた圧縮ファイルをメールに添付し主催にお送り下さい。

圧縮するファイルの形式は、zip、lzh、rarのうちのいずれかでお願いいたします。

ファイルの提出の際に、一緒に通知して欲しい情報

  • お名前(ハンドルネームで結構です。ギャラリーに展示の際に併記します。)
  • ご自分のサイトのURL(無ければ結構です。あれば、ギャラリーに展示の際に併記します。)
  • メールアドレス(連絡する際に使用させていただきます。他の用途では使用しません。)
  • 参加した部門
  • がんばった点や力を入れた点(200〜300字以内で簡潔にお願いします。無くても結構です。ギャラリーに展示の際に併記します。)
  • <link rel="stylesheet" type="text/css" media="screen,tv" href="/common/css/hoge.css" title="hogeスタイル">のようにタイトルなどを記述したlink要素。
  • その他(参加特典のsafariのスクリーンショット画像が欲しい!など。)

提出するファイルは、よくご確認の上、提出してください。

大会の連絡先

  • jamgraffiti.css@gmail.com

メールの件名に「画像の使用を(略)CSS大会」の一文を添えてくれると嬉しいです。

参加特典のようなもの

Safariのスクリーンショット画像を記念にプレゼントします :D

※スクリーンショット画像は、欲しい方のみ受け付けます。提出時または提出後に、参加者した名前を併記の上、当方まで連絡下さい。

最後にお願い

提出された画像やCSSのうち著作物足り得るものの著作権は提出者にあります。ただ、ここは実演の場であるとともに学習の場、練習するための場所でもありますので、CSSに関してはクリエイティブ・コモンズ 表示 3.0 一般のライセンスで公表してください。

Credit Title

作成日
2007年4月11日
更新
2007年4月12日