ごんたのお気楽な毎日

以下続き

1つのHTMLファイルに、提出されたCSSファイルをそれぞれ適用させる。これは、1人のモデルに、様々なデザインの洋服を着せるような感じだ。

スタイリストのコーディネートによって、モデルの雰囲気がガラリと変わるように、CSS作成者のセンスと技術によって、ウェブページの見た目が一変する。

CSSの本来の働きを知らない人は、「CSSファイルが違うだけで、こんなにもデザインが変わるのか」と驚かされるだろう。

用意されたHTMLファイルの文章構造が非常にシンプルなので、参加者の提出したCSSファイルが理解しやすく、非常に勉強になる。

大会で用意された部門

この大会には、「画像を極力控える部門 」と「画像を一切使用しない部門」の2つの部門が用意されている。

俺は今回、「画像を一切使用しない部門」に参加した。

この大会の存在を知った時には、「画像を極力控える部門」に参加しようとしていたが、大会公式サイトのgalleryに掲載された作品たちを見て、考えが変わった。

なぜならば、「画像を一切使用しない部門」の参加者のレベルが非常に高く、もし、画像を使った部門で参加した場合、「画像を使ったのに、画像を使ってないデザインよりもかっこ悪い」という結果になりそうだったからだ。

CSS適用前と適用後の比較

「俺が作成したCSSファイル」を適用する前のHTMLファイルと、適用させた後のHTMLファイルを見比べて欲しい。

• ごんた作成CSSを適用する前
• ごんた作成CSSを適用した後

大会公式サイトのgalleryでは、全ての参加者の「CSS適用後のページ」が見られる。奇抜なアイデアを使った作品が多く、CSSに興味のある俺は、見ているだけで楽しい(≧∀≦)

参加特典

この大会には、優勝という概念がないので、優勝商品などはない。その代わり、参加者には、「Safari（サファリ）のスクリーンショット画像」を貰う権利が得られる。

『Safari』とは、Apple社が「Mac OS X」用に開発したウェブブラウザのことである。俺は、Windowsユーザーなので、『Safari』を利用することが出来ない。

『Safari』だと、どんな風に見られるんだろうと、ワクワクしながら、主催者に貰ったスクリーンショット画像を見た。

(； ･`д･´)　な、なんだってー!!　(`･д´･ ；)

文字化けしまくってた！

機種依存文字を使った覚えはないのに……。なんか悔しいので対処法を調べてみた。

Safariの文字化け

『Studio Ponytail | Safari の CSS 文字化けバグを防ぐ』によると、文字化けは『Safari』のバグのようだ。

『Safari』には、CSSのcontentプロパティを使って日本語を表示させようとした時に、文字化けするバグがあるらしい。

Safariの文字化け対処法

『Safari』の文字化けの対処法は、意外と簡単だった。HTMLに記述された、外部CSSを呼び出す為のlink要素部分に、charset属性を明示する事で文字化けが回避できるらしい。

応募締め切り

大会の応募締め切り期日はない。だから、自由な時間に作成し提出することが出来る。また、複数の作品を投稿することも可能だ。

現在、2作目を考え中。ど～しよっかな（￣～￣）ξ

関連記事

• ブログのテンプレートをいじって、2カラムレイアウトにしてみた (2009/10/24)
• Yahoo!カテゴリに登録された【体験談】 (2008/10/24)
• Windows版Safariの日本語版を正式公開 (2008/03/21)
• 画像の使用を（略）CSS大会にまた投稿 (2007/04/29)
• 画像を極力控えるCSSデザイン大会に参加 (2007/04/20)