先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。

• HTML 5 (W3C Working Draft 10 June 2008)
• HTML 5 (Editor’s Draft 12 December 2008)
• HTML 5 における HTML 4 からの変更点 (Working Draft 22 January 2008)
• HTML 5 の新要素
• HTML5が話題になっているので試しに書いてみた。｜CSS HappyLife
• 試しに添削してみた – vantguarde – web:g

HTML5で書かれた典型的なブログ記事のマークアップ例などはありますが、今回使用したサンプルのような企業サイトのマークアップ例を見つけることができませんでした。ですので上で挙げた仕様書や記事のサンプルを見つつ手探りで書いています。これをみて、そこはおかしいよ！などのご指摘ぜひお待ちしてます！

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

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

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

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

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

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

1. 去年も前のサイトで参加してました。 [back]
2. ま、HTMLの中身はdivdivしてるかもしれないけど;-P [back]

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

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

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

1. 例 : ハイフン"-"とかイコール"="とかシャープ"#"とかアスタリスク"*"とか [back]
2. 当時のブックマーク [back]

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

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

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

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

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

1. 画像OFF時に何も見えなくなりアクセシビリティ的にかなりよくない [back]