SITEMAP [初めてのホームページ講座] [CSS] [初心者向け講座(3)]

Cascading Style Sheets

初心者向け講座

いきなり「スタイルシートを使いましょう!」では何をして良いのかわからない・・・、そんな方々へ送る「初心者向け講座」です。 ここで何をしていけば良いのか、感覚だけでも掴んでスタイルシートをマスターしましょう!


3. 使いこなすにはここを!


3-1. 継承の原理を覚える

継承」という原理がCSSにはあります。 これはCSSの大きな特徴の1つで、これ無しではCSSの有り難みが半減してしまう程です。

HTMLの要素は通常、その要素の中に子供の要素を持つことが多々あります。 この子供要素は、文脈的に親要素と意味合いが同じ場合が多くあります。 意味合いが同じであれば、スタイルも似たようなもので良く、要素ごとにわざわざスタイル指定するのでは面倒です。

そこで、スタイルを親要素から子供要素に引き渡してしまいます。これを「継承」と言います。 例えばフォントサイズや行間などは「継承」の影響を受けます。ただし、一部マージンなどは継承しないものあるので注意が必要ですが、 大抵の場合は、直感的に継承できないことが理解できます。

「継承」を理解すれば、無駄なスタイル指定を無くし、スマートなCSSが書けるようになり、更にメンテナンスが楽になります。 良いこと尽くめなので是非理解するようにしましょう。

[Go To Top]

3-2. 本来のHTMLを知る

マージンやパディングなど、レイアウトに拘るようになってきたら、試行錯誤だけで何とかなるCSSも、HTMLを知らなければ思い通りにならなくなってきます。 例えば、ブロックレベル要素インライン要素の意味を覚える必要があります。 また、本来のHTMLが意味している文書構造も同時に把握していくことで、更に思い通りのスタイルの実現が可能になります。

そのための第1歩として、HTML4.0を理解することです。 そして、HTMLで見栄えの調整をしないように心掛け、特にフォント関係の調整は使用しないようにすることです。 普段から、これを実践していけば自ずとCSSを理解していくことでしょう。 以下にその心得をあげておきますので、1つ1つクリアしていけるようにしていきたいものです。

この他にも挙げればキリが無いでしょうが、徐々にこういうことを意識していくようにしています。

インライン要素とブロック要素という言葉が頻繁にでてくるCSS。 HTMLでいうそれとは若干意味合いが異なる場合がありますが、CSSでいう場合は以下のようなことです。 HTMLでは、各要素がそれぞれに属していたりして、すでに決められたものですが、CSSの場合はそれをも指定することが可能です。

インライン要素
改行されない要素(EM,STRONG,Qなど)
ブロック要素
改行を伴う要素(P,H1,TDなど)
[Go To Top]

Copyright(C)1999 Miyazaki , All Rights Reserved.