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

Latest topics

2019.01.22
長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。
2007.04.15
公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。
Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。
よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。
2007.04.13
よくありそうな質問の項目に大会の締切日（特にありません）とHTML書き換えは原則として不可とさせていただく旨を明文化させました。
バナー作りました。
2007.04.12
htmlを少し書き足しました。(画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会・公式HTML)
構造化用のdivが増えています。既存のものをダウンロードした方には申し訳ないのですが、上書きをお願いいたします。
2007.04.11
html公開しました。(画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会・公式HTML)
期待していた方には申し訳ないのですが、id,class,div排除版は無しとなりました。
基本的なルールに変更は無いのですが、以前のものより少しだけ詳しくルールを書き直したので、参加する方は今一度大会の要項に目を通してくださると幸いです。
ギャラリーの公開は、まだ行っていません。
2007.03.31
htmlの公開が延びました。申し訳ないです…。

過去のトピックス

feed配信中。feed配信中

大会の参加要項

大会の趣旨

画像の使用を控え（あるいは一切使用しないで）、スペース、ボーダー、配色などを駆使し、どれだけ美しい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 一般のライセンスで公表してください。

よくありそうな質問

誰でも参加できるの?

HTMLとCSSの知識が必要になりますが、特に資格というものは設けていません。お気軽にご参加下さい。

ブラウザの対応具合はどうするの?

各人の判断にお任せいたします。Internet Explorer6を最低ラインと考え、縛りをかけるのも自由ですし、モダンブラウザのみでヨシとするのも自由です。しかし、閲覧者を思う心があるのであれば、配慮があるほうが良いかもしれません。

id,class,div排除版はどうしたの?

当初は存在したのですが、色々と思うところがあり却下しました。大会用のHTMLには、classやdivなどが記述されています。しかし、それらのモジュールを使用するかしないかは、参加者の自由です。

id,class,divなど、一切使用しなかった場合は、提出時に一言添えて下さると嬉しいです。

CSSを修正したいんですけど

以下の項目を明記し、ファイルをまとめて圧縮して、大会の連絡先(jamgraffiti.css@gmail.com)まで、お送り下さい。

  • 参加した名前
  • 既に提出した、あるいは展示されているCSSのファイル名
  • 修正点

締め切りは?

特に設けていません。気が向いたときに、いつでもご参加下さい。追記：終了いたしました。（2019年1月22日）

HTMLは書き換えてもいいの?

原則として、HTMLの書き換えは、記述されているテキストを含め、不可とさせていただきます。

ご自分の環境であれこれといじる分には一向に構いませんが、この企画で適用されるHTMLは原則として、画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会・公式HTMLのみとなっております。ご了承下さい。

CSSデザインは、1人1個しか提出できないの?

「画像を極力控える部門」「画像を一切使用しない部門」共にお一人何個でもデザインを提出できます。

ご応募お待ちしております :-)

大会のバナー

参加した方、主張したい方、とにかくバナーが貼りたい方、どうぞ。ダウンロードしてお使い下さい。

  • 200*40のバナー
  • 88*31のバナー
  • 80*15のバナー
  • 16*16のバナーというよりアイコン

200*40と88*31のバナーはRusicaさんが作成したものをgif形式からpng形式に変換させていただきました。(参考：画像を極力（中略）デザインする大会)

Last-Modified : 2019/01/22

jamgraffiti.css@gmail.com

Creative Commons License