今年もWebサイトが世界同時にすっ裸になる日がやってまいりました!!

去年は4月5日にあったのですが今年のCSS Naked Dayは4月9日だそうです^[1]。

このイベントの趣旨はカンタン。「あなたのWebサイトからCSSをすべて外して丸裸にしてしまおう」というものです。
目的は、正しい(X)HTMLの記述やセマンティックで構造的なマークアップなどのWeb標準のプロモーションです。逆に考えればCSSデザインの可能性を示すよい機会であると考えることもできます。どんなかっこよくて複雑なデザインを持っているサイトも、CSSを外せばこんなにシンプルに書かれているんだよって^[2]。

ちなみにこのサイトはWordPressで構築されているので、こちらのプラグインを使って自動でCSSをはずすようになっています。便利です:-)

ただ、あるお方こっちのお方がつぶやいていてハッと気づいたのですが、CSS外しちゃうとVicuna CMSを使用しているサイトの見た目はみんな同じになるわけです。つまり、Vicunaユーザは見た目がみんな同じで没個性な日だったりします。

たまには素のHTMLをじっくりみてみると思いつかなかった発見や新しいデザインが生まれるかもしれません。

CSSを書くときに、そのそれが何の役割をするのか(どこをスタイリングするのか)という概要をどう書いたらよいのか迷うことがあります。

特に大人数で作業している場合は形式を決めておきますが、他人が書いたものだとどうも区切り線^[1]や改行のタイミングが気に入らなかったりします。僕はというと、3ping.orgさんの「CSSのコメントの書き方コレアレ」という記事を参考に、import.cssに各CSSの概要をまとめて書いていました。

何か自分を納得できるような形式がないか探していて、DOASを見つけました。これはかなりよいのではないかと思って早4ヶ月^[2]、やっとエントリ書けました:-<

少し前に出た話題だけど、CSS(だけ)でブラウザのウィンドウの中央にボックスを表示させてみようと試みました。元ネタは以下の記事より。

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの^[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。

画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。

画像はCSS Nite LP3の課題のものを利用させていただいています。

今からやりますCSS Nite LP, Disk 3 -Coder’s High-。今回もMacを持ち込んでるので書けるだけライブで書きます。しかも今回も電源の近くの席をゲットしたからバッテリ切れはないんだぜ！

• [SESSION-1] ザ・コーディングの美学
• [SESSION-2] フィロソフィー・オブ・コーディング
• [SESSION-3] Dreamweaverのコーディング機能再点検
• [SESSION-4] LIVE コーディング (A)
• [SESSION-5] Microformats で上質コーディング
• [SESSION-6] プロはこう使う！ Another HTML-lint 徹底活用術
• [SESSION-7] LIVE コーディング (B)
• コーディングコンテスト表彰・講評
• 懇親会
• その後、一日を通して

かなり長いです＞＜