いきなり「スタイルシートを使いましょう！」では何をして良いのかわからない・・・、そんな方々へ送る「初心者向け講座」です。 ここで何をしていけば良いのか、感覚だけでも掴んでスタイルシートをマスターしましょう！
「継承」という原理がCSSにはあります。 これはCSSの大きな特徴の１つで、これ無しではCSSの有り難みが半減してしまう程です。
HTMLの要素は通常、その要素の中に子供の要素を持つことが多々あります。 この子供要素は、文脈的に親要素と意味合いが同じ場合が多くあります。 意味合いが同じであれば、スタイルも似たようなもので良く、要素ごとにわざわざスタイル指定するのでは面倒です。
そこで、スタイルを親要素から子供要素に引き渡してしまいます。これを「継承」と言います。 例えばフォントサイズや行間などは「継承」の影響を受けます。ただし、一部マージンなどは継承しないものあるので注意が必要ですが、 大抵の場合は、直感的に継承できないことが理解できます。
「継承」を理解すれば、無駄なスタイル指定を無くし、スマートなCSSが書けるようになり、更にメンテナンスが楽になります。 良いこと尽くめなので是非理解するようにしましょう。
マージンやパディングなど、レイアウトに拘るようになってきたら、試行錯誤だけで何とかなるCSSも、HTMLを知らなければ思い通りにならなくなってきます。 例えば、ブロックレベル要素やインライン要素の意味を覚える必要があります。 また、本来のHTMLが意味している文書構造も同時に把握していくことで、更に思い通りのスタイルの実現が可能になります。
そのための第１歩として、HTML4.0を理解することです。 そして、HTMLで見栄えの調整をしないように心掛け、特にフォント関係の調整は使用しないようにすることです。 普段から、これを実践していけば自ずとCSSを理解していくことでしょう。 以下にその心得をあげておきますので、１つ１つクリアしていけるようにしていきたいものです。
この他にも挙げればキリが無いでしょうが、徐々にこういうことを意識していくようにしています。
インライン要素とブロック要素という言葉が頻繁にでてくるCSS。 HTMLでいうそれとは若干意味合いが異なる場合がありますが、CSSでいう場合は以下のようなことです。 HTMLでは、各要素がそれぞれに属していたりして、すでに決められたものですが、CSSの場合はそれをも指定することが可能です。