おまたせしました。ひとり反省会、後半です。
ブラウザの対応
今回は以下のブラウザをターゲットとしました。
- Win / IE5.5?7、Firefox2、Opera9
- Mac / Safari2、Firefox2、Opera9
xml宣言を付加しているのでWinIE6は後方互換モードになってます。WinIE6の崩れ対応でWinIE5.5にも対処できたため、ハック用のCSSは「adjust.css」ひとつだけです。（ハック無しで書ければ素晴らしいんですが…。）
それともう一点、今回は対応に含めなかった“MacIE5.2”にCSSが適用されないように、import.cssにちょっとした細工をしています。コンテストとは別件で、MacIE5だけCSSを適用させない方法を調べていたとき、行き着いたのが「@import」で読み込みを制御する諸方法をまとめた以下のサイトでした。
- Hide CSS from browsers :: @import
- http://imfo.ru/csstest/css_hacks/import.php
以下の書き方でMacIE5.2（とWinIE4.x?5.0）を適用対象外にしています。
@import/**/"foo.css";WinIE5.5“も”と言うときは…
@import"foo.css"/**/;これを知るまでMacIE5.xを対象外にするには、以下のようにお馴染みの「バックスラッシュハック」を使えばいいかなと考えていたのですが、上記のほうがスマートで個人的には気に入ってます。
/* hide from mac_ie \*/
@import "reset.css";
@import "global.css";
/* end */CSSファイルを覗いて気づかれた方もいるかもしれませんが、CSSに関しては大藤 幹さんに倣うところが多いです。ちょっと前の号で手に入りにくいかもしれませんが、Web Designing の2007年2月号の特集がよくまとまっていてオススメです。
CSSのコメント記法
伊藤賞を受賞されたhaifunさんのCSSには目次がついていて、運営するときに分かりやすいなぁ（これこそ細かい仕事だなぁ）と思ったのですが、私の場合は見出し代わりのコメントにbodyのIDやクラスを併記するようにしています。言うより書けですね。こんな感じ。
/*----------------------------------------------------
products - body.products
----------------------------------------------------*/
body.products div#header{...
/* item individual - body#item
----------------------------------------------------*/
body#item div#main p#categoryTitle{...見出しとしての役割を果たす一方で、ページ毎のCSSをひとつのファイルにまとめて書いているときなど、テキストエディタの検索機能を使って該当箇所に一発ジャンプしたいがための記述です。
まとめ
改めてソースコードや、審査員の方々のコメントを見返していると、自分の積み重ねてきたものは逸れてなかったんだなぁとちょっと自信になりました。
CSSレイアウト歴は2年半ですが、実はCSSをさわり始めてからここまで来るのに約5年かかってます^^;。（フィードで情報収集という手が無かったし…）
あっちこっち逸れて、あれやこれや吸収するうちに、CSSソースは“ハウルの城”状態。
行き着くところまで行き着いてあがくことすらできなくなって気づいたのが、「引き算の頭で考える」ということでした。(x)htmlの構造をしっかり頭にたたき込んだうえで、引き算の頭で考えるようにするのが（今さらながら）最終兵器wだと思ってます。
最後にもう一度、主催・運営の平澤さん、各審査員のみなさま、このような機会をあたえてくださって本当にありがとうございました。そして、このコンテストを通してであえたみなさま、これからもtotoco.orgをどうぞよろしくお願いします！
今日の戯言>
Webデザインギャラリー「ikesai.com」さんに掲載していただいたみたいです。
ありがとうございます:D