記事本文を飾り付けてみよう「（番外編）CSSのボックスについて」

　今回はCSSの利用時に作られる「ボックス」についてご説明しておきます。少し分かりにくいかもしれませんが、CSSでのレイアウトを考える時に基礎となる部分なので、頭の片隅にでも覚えておいて下さい。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

Yahoo!blogでCSSを利用できるのは、今のところテーブルなどに限られてしまっていますが、本来CSSはテキストや画像、その他様々な要素に適用することが出来ます。
こうした要素（Yahoo!blogの場合、テーブルなど）にCSSを適用すると、その要素に「ボックス」と呼ばれる領域を生成します。（図1）

[図1]

それでは、このボックスの詳細を見ていきましょう。

１、内容
文字列や画像などメインとなる内容を表示する部分です。テーブルにCSSを適用した場合は、その中に入っている文字列や画像が内容となります。

２、パディング
ボーダーまでの余白です。このパディング部分にはCSSで設定した背景色や背景画像が適用されますので、背景を大きく取りたい時には、このパディングを大きく設定してください。

３、ボーダー
パディングを囲む枠線です。線の太さや種類を設定することができます。

４、マージン
ボーダーの外にある余白です。この部分にはCSSで設定した背景色や背景画像は適用されません。無色の余白を取りたい時は、こちらを設定してください。

以上の内容からマージンまで全体がボックスとなります。
今後、これらの設定の仕方をご説明したいと思います。（図1）の構成を頭に入れておいてくださいね。

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。