REDLINE MAGAZINE | CSSとうまく付き合う予備知識

CSSとうまく付き合う予備知識

●ブロックとインラインの違いを知る
この違いを知らないとどっかでcssレイアウトがうまくいかない時がある。以前別ブログで関連記事を書いたので参考までに。
>>RED LINE:ブロックレベルとインライン

●W3Cの検証ツールで文法エラーがないか確認する
これはすごく大切。
よくいろんなサイトやブログで(x)html、CSSともに「バリデータ通ってない」とか「Validな文書です」とか書いてあるのはこのサービスでチェックしてクリアしてるかどうかというのを指している。

cssソースに問題がなくても(x)htmlソースの記述におかしな点があればcssがうまく反映されず意図したデザインにならないこともある。その逆も然り。ただ、必ずしもこれらの検証サービスが100%正しいわけではない。意図ある部分でエラーが出ていたとしても制作者の目線でそれでもこれはこのケースでは正しいですからという根拠があるなら必ずしもValidでなくてもありだとは思う。
>>W3C Markup Validation Service
>>W3C CSS検証サービス

また、上記の検証ツールはFirefoxなどのブラウザの拡張機能を追加しても楽に使える。私が最高におすすめするのはコレ。
>>RedLine Magazine : Web Developer 1.1.3
多くのwebデザイナ、コーダーが愛用しているツールの一つで、上記検証サービスのほかにもいろいろとサイト制作に必要な機能がそろっている。

●CSS：idとclassをうまく使い分ける。
idというのは固有のもので１ページの中に１回だけ登場するもの。classというのは何回も登場するもの。使い分けが分からないという方は、idはレイアウトを作るものに指定、classはテキスト部分などよく出てくるものに指定するという風にしてみてはどうだろうか。もちろん一例であり、全てそうしなくてはならないということではない。

idを１ページ内で２回使うと当然文法上はエラーがでる。使い場所によっては表示上は問題ないように見えるものもあるが、使い場所によってはうまく機能しなかったりもするので注意（例えば同一ページ内リンクを利用した場合、最初に出てくるidの部分へしかリンクしないとか）

●CSS：「継承」「カスケーディング」という考え方を理解する
「継承」とは親要素に適応させたスタイルが子孫要素に引き継がれる事。そのスタイルが継承されるかどうかは各プロパティごとに決められている。決まりごとなのでなぜ継承されるのかとか最初は深く考えず丸覚えでもＯＫ。

一番簡単な例を挙げると、例えばbodyに対して文字色を指定した場合、他の要素に対して文字色を指定しなかった場合はどんなタグを使っててもbodyに指定した文字色と同じ色になります。これが継承。

「カスケーディング」とは1つの要素にいろんな場所からスタイルが指定されている場合どれを優先するのか、それを優先順位をつけてうまくまとめてくれるのがカスケーディングという考え方。CSS(Cascading Style Sheets)の言葉の中にも入っている事からもこのカスケーディングという考え方はcssを使う上で大切だと思う。簡単な例を･･･

cssソース
p{color:green;}
.pickup{color:red;}

(x)htmlソース
<p>サンプル<strong class="pickup">カスケーディング</strong>サンプルテキスト</p>

どんな表示になるだろうか？>>プレビューしてみる。

カスケーディングの基本的な原則としては「idセレクタを含むもの」＞「classセレクタを含むもの」＞「入れ子で絞り込まれたもの」の順で優先される。また、優先順位が同等の場合は後から記述した内容が優先されるという仕組み。ちとややこしくなってきたが、とりあえず自分が意図した指定どおりの表示にならない場合は、この優先順位を疑ってみると解決する場合も多い。という話の流れでcssでは後から記述する内容で指定の上書きができるということも覚えておくといいと思う。

2007年03月05日 14:22 | Red | パーマリンク