人気ブログランキング | 話題のタグを見る

ブログ活用のヒントを満載
by vlsasaki2
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

CSSのトレーニング(1)・CSSのボックスモデル
CSSに関しては自分自身が勉強中の身ですが、現在までに理解できたことを整理したいと思います。
CSS入門の方は一緒に勉強しませんか。
解釈の誤りがあればぜひコメントに指摘してください。

CSSを勉強する上で重要になるのがボックスモデルという考え方です。
CSSではHTMLの各要素が四角いボックスの中に表示されていると考えることができます。

記事のタイトルを操作しながらCSSのボックスモデルを理解しましょう。
記事のタイトル部分は DIV.POST_HEAD ですね。
ペーパーの場合はこのように記述されています。

DIV.POST_HEAD {
        MARGIN : 10PX 0PX 15PX;
        }


これはタイトルの文字より外側に、上10px、左右0px、下15px の余白がありますという意味です。(pxはピクセル)

これは、以下のように書くこともできます。

MARGIN : 10PX 0PX 15PX 0PX;
        上10px 右0px 下15px 左0px


ブロックモデルを理解するには枠線を描いてみるのが一番よく分かります。

DIV.POST_HEAD {
        MARGIN : 10PX 0PX 15PX;
        border:2px solid red;   ← この行を追加
        }


これでプレビューすると、このようになりますね。
CSSのトレーニング(1)・CSSのボックスモデル_a0034054_2315046.jpg

by vlsasaki2 | 2004-09-25 23:00 | CSSのトレーニング Top↑
<< CSSのトレーニング(2)・背... ごじゅうがた >>