NZサイト を作ったときの css コーディングの覚え書きというか、メモというか。

ちと、今回は、セレクタの階層をなるべく浅くやってみようというポリシーで作ってます。なので、ほとんどクラス名のみ。
このやり方で書くのは正直めんどくさい。 自分のサイトだからやってみたけど、仕事ではしないと思います。

ul.hoge > li とかやったほうが絶対楽なのはわかってんですけど、パフォーマンスに影響する とか、yahoo どっかで見た気がして、やってみようかと。

(とか思ったら、そんなに効果は無いっぽい？ CSSセレクタのパフォーマンスへの影響)

クラス名のみでやってると、当然ながら html のタグが変わっても多少粘れるっていうのはあるかも。
ま、div と span とっかえて、display 指定が無かった場合なんかは壊れますが。

あと、class 名のつけかた。相変わらずいきあたりばったりでつけているので、一貫性が無い。これはなんとかしたい。
やっぱり最後に整理しないといかん。

今回は less を使いました。コーディング時はファイルを分割して書き、プレビューするときに 1 つの css にまとめて表示させるようにしています。手動じゃやってられんので当然自動で。

今のところ、ちと気になる点が2つほどあって、
・less ファイル(cssも?)のプロパティの値を改行するとパースエラーになっちゃって、グラデーションの指定をするときに見辛くて大変困る。
・複数セレクタを指定しているとき、セレクタに疑似クラスが入っていると、レンダリング時に分割されてしまう。同じ指定がいくつもあるので無駄。

でも、 変数が使えたり計算できたりするのはかなり便利。-moz-hogehoge と -webkit-hogehoge をまとめたりするときに重宝してます。

デザインが落ち着いて、整理し始めたら、プロパティ別整理法っぽいこともやっています。
font-size とかフォント色・背景色とか。

/* font-size 12px がデフォ */
/* font-size: 9px */
.photo_info_title,
.exif_key
{
  font-size: 9px;
}

/* font-size 10px */
.header_navi,
.no_map,
.index_top_navi_item_ja,
.nogps,
.photo_section_title
{
  font-size: 10px;
}

/* font-size 18px */
.page_title,
.photo_title
{
  font-size: 18px;
}

これで、新しいクラスのフォントサイズを 10px にしたいなーって時には、10px んとこにクラス名を追加すると。制作も後のほうになってくると、他のクラスとの整合性なんかが気になってくるので、個人的にはこっちが好きです。が、プロパティ別なものと、クラス別なもの両方あったりするので、自分しか理解不能ってのはあるかも。そんなときの Firebug でw。

あと、同じ見た目にしたいけど、クラス名は同じにならんよなぁ〜っていう時にもこの方法でやってます。
class="hogehoge shadow1"
class=”shadow1″ なんて class=”red” と同じじゃん って感じなんで、やりたくない。けど、同じ影のプロパティつけたいし、後で変更するかもしれないし・・・ ってとき。

/* ボタン用シャドウ */
.footer_pagetop_link:hover,
.index_top_navi_item_link:hover,
.photo_prev_footer_link:hover,
.photo_next_footer_link:hover
{
  .box-shadow(0, 1px, 5px, rgba(0,0,0,0.3)); // .box-shadow を別のところで定義してます。
}

とか。

コメントを書いとかないと、何やってんだかわかんなくなるので、この部分に関してはなるべくコメント書くようにしてます。

ちょっとめんどくさいのは、セレクタの一番下のものにコンマをつけるとエラーになる （ま、そうですな) ので、一番したのものを消すときに行削除だけじゃすまないこと。 たまに忘れるんです。上の行のコンマ消すの。

使いたいのに使えない～。

12px 基準で考えてるから、11pxが欲しい。10pxだとちっこすぎるのね～。しかも、日本語フォントはそのままに、欧文だけ11pxになるので、欧文交じりだとガタガタorz。

画面上だと1px差ってけっこうあるからなぁ。

それと、Vista & Meiryo になったときにどうなるかわからんから、下手に XP / 2k 用にいじりたくないんだよなぁ。かといって、アクセスの多いブラウザは、しばらく IE6(7) on XP だろうし・・・。ふが～

もうこのさい全部flashで・・・(嘘

やっぱピクセル指定が一番楽なんかな～と思ったりする(ブラウザでPCに表示する場合は)。

まぁ、何をしていたかというと、最初 em 指定で0.87em とか、1.2em とか、うらうらやってたわけです。したら、IE6 と FF2 で大きさ違うんでやんの。それどころか、IE6で、和文と欧文のサイズが違うんでやんの・・・欧文はちっこくなってくけど、和文はそのまま・・・とか。

これじゃいかんってんで、%指定にしてみようと、いじっていると、IE6での和文と欧文のサイズ変化は同じなんだけど、ブラウザ間でサイズの変わるタイミングが違う。たとえばIE6は、171%で大きくなるけど、FFは172%で大きくなる。あと、100%未満で日本語の文字の高さが1pxずつ違う・・・。ふが～。

割合で指定してるときは、継承していった先も困る。bodyが 12px だとして、font-size 80% の div の中の font-size 92% のh3 テキストのサイズは何ピクセル？ って。スクリーンの解像度がすんごく高くて、たとえばベースが12pxで、その100%～80%まで滑らかに表示してくれるならいいんだけど、実際は、(12pt = 12px だとして・・・えらい強引だ・・・)12px, 11px, 10px,9px、の階調でしか表示できないうえに、ピクセル未満の値の扱いがブラウザや文字の種類によって違うとなると、どうしていいかわからん。アンチエイリアスが欧文でかかって和文でかからんとか。気にしだすときりがない。

そうすっと、ピクセルでいいんじゃ～んと。まぁ、ピクセルってったって、12px は画面上で何mmって話にはなるんだけど。

どこまで想定してこちらで対応するかを決めるのがすごく難しいです。とりあえず、今回は%でやろう・・・IE6め～!(笑。

サイズチェックに使ってみたJavaScriptコード


str = 'The quick brown fox jumps over the lazy dog. 1234567890';
str += ' すばしっこい茶色の狐は　のろまな犬を飛び越える';
for(var i = 200; i > 50; i-=1) {
    tag = '<p style="font-size:' + i + '%";>';
    tag += str;
    tag += ' ____ ' + i + '%</p>';
    document.write(tag);
}