Web標準の日々3(X3)

１日目の３セッション目はX3「これからはじめるCSSレイアウト術。読めるソースが優良といっても過言ではないのだ」を受講。
講師はウィルシステムの伊藤学さんです。
ワークショップを交えながらCSSの概念や記述についてコツを解説され、非常にわかりやすい内容でした。
以下まとめです。
------
CSSはCascadingStyleSheetの略です。
Cascadingを辞書で引くと、「段々になっている滝」という訳されています。つまりは階層構造のことをさしています。

ブラウザーはデフォルトでCSSを持っていますので、まずはこれらのデフォルトCSSをリセットしてあげる必要があります。
頭に『＊』をつけるユニバーサルリセットが一般的ですが、最近、海外では要素毎にリセットするタイプが多く見られるようになりました。ユニバーサルリセットは要素に関係なく反映されてしまうため、リソースを喰うから、必要な要素だけリセットしようという考えのようです。
http://meyerweb.com/　などリセットソースを配布しているサイトもあります。

続けてセレクタについて
・親子関係
・グルーピング
・スタイルシートの順位
・個別性
というものがあります。

親子関係とは
p.note em { color: red; }　の場合p.noteが親要素、emが子要素となるというもの。
なぜ「親子」なのかというとhtml headの部分を「祖先タグ」body以下を「子孫タグ」というからだそうです。

グルーピングは同じ内容のもを『,』で区切って一括設定すること。

スタイルシートの順位は
デフォルトCSS＜ユーザーCSS＜制作者CSS
という順で適応されます。

また!importantがある場合は
デフォルトCSS＜ユーザーCSS＜制作者CSS＜制作者CSS＋!important＜ユーザーCSS＋!important
の順になります。

そして一番重要なのが個別性になります。
これは、CSSの優先順位を位置づけるもので、点数として計算できます。

•style 属性がある場合は、1をカウント (= a)
•セレクタに含まれている id 属性の数をカウント (= b)
•セレクタに含まれている id 以外の属性と、擬似クラスの数をカウント(= c)
•セレクタに含まれている 要素、擬似要素の数をカウント (= d)

といった計算方式があるそうですが、わかりにくいとのことで益子さんが簡単な計算方式を考えられたそうです。

* (0点) < 要素タイプ (1点) < class/属性 (10点)< id (100点) < style= (1,000点)

として計算します。
この式に当てはめると
p.note em { color: red; }　は　p（要素タイプ/１点）、.note（class属性/10点）、em（要素タイプ/1点）で合計12点になります。
が、同じCSSでも
div#content p.note em { color: blue; }とした場合、div（要素タイプ/１点）、#content（id/100点）、p（要素タイプ/１点）、.note（class属性/10点）、em（要素タイプ/1点）で113点となってしまいます。
そうすると、12点の赤字よりも、113点の青字の方が優先されます。
なんかCSSが効かないという場合、この1点の差で効かない場合があります。
ですから、CSSはできるだけ省略せずにbody（あるいはdivから）書くことが望ましいです。

CSSを設計するにあたり、モジュール化、バリューデザインというものを考える必要があります。
モジュール化とはパーツ毎に分けること、バリューデザインとは作業を効率化しデザインの価値を高めることを言います。

一枚のスタイルシートに全てのCSSを書き込むのではなく、
baseのCSS、layoutのCSS、classをまとめたCSSという具合に分割し、それらをインポート用のCSSに読み込ませてから、htmlに読み込ませるといったものがモジュール化です。

CSSを設計する場合
・カラムレイアウト
・セレクターリセット
・モジュール化
の3点を押さえましょう。

実際にCSSを作るにあたり大事なポイントは以下になります。

・親子関係はしっかり
・要素はできるだけ省略しない
・インデントで見やすく
・適宜コメントアウト&目次
・グルーピング
・全部入りリーフページをつくろう

もちろん(X)HTMLをしっかりと書くことも重要です。
divばかりのxhtmlにしないように気をつけましょう。

そのためにはまずdiv要素を考えずにマークアップしていき、一つにまとめられる部分をdivでまとめます。
divは輪ゴムのようなものと考えてください。

次にid属性とclass属性ですが、id属性は固有名詞、class属性はグループ名やモジュール名になります。
つまり名札のようなものです。

CSSを記述するにあたり、見やすいように書くことが大事です。
省略せず、階層構造が分かるように書くこと、またインデントを効果的に使い見やすく整理することも大事です。

さらにCSSの頭に見だしや目次をつけることでわかりやすすがぐっと違ってきます。

/*
======Contents=======
last-update：　17.jun 2007;

1.univaersal reset[2007.07.15]
2.~~~~~
3.~~~~~
====================
*/

と言った感じで、修正日の日付をいれるとわかりやすいです。
また、修正を行った行にも同様に日付を入れると良いでしょう。

また共通している部分は一つにまとめてしまいましょう。
省略せずに書くことは、共通部分が見つけやすくするためでもあります。

サイト内でもっともテンプレートを使うのはリーフページ（末端ページ）になります。
ならば、全ての要素をリーフページに入れることで、第二のデフォルトページを作りましょう。

カラム分けはテトリスの要領で。
背景に色をつけると、どこが崩れているのか一目でわかります。
IEではwidthの値が変わってしまう、ボックスバグがあるので注意してください。
まずIE以外のブラウザーで設計し、途中途中でIEで確認するのが良いでしょう。

自分の為にも、他人の為にも見やすいソースとバージョン管理をしていくべきです。
要素タイプのdivについては、慣れてきたらつけなくてもOKですが、1点の違いで変わってきてしまいます。
仕様書も一度はちゃんと読むようにしましょう。
------

メンテナンス性というのはいつも気になっていました。
CSSの最初に目次などを入れるというのはすごく良いアイディアだと思うので、今後実践してみたいと思います。
たまにCSS効かないなーってのはこの個別性のせいだったんですねー。（＾＾；；
全部の要素を書くのは見た目ももったりしてめんどくさそうですが、やっぱりいろいろ考慮すると書いた方がいいんですかねぇ・・・。
とにかくわかりやすく勉強になる講義でした。

講演の資料はこちらで公開されています。
http://www.freesia.org/2007/07/webx3.html