スタイルシートメモ

枠で囲う

ブロックレベル要素とインライン要素でも少し話したのですが、ページを作成するHTMLの要素の中には、ブロックで表示される要素（ブロックレベル要素）があります。
このカテゴリでは、主に「ブロックレベル要素　div」や「ブロックレベル要素　p」などで利用できる「枠」のデザインについて語っていきます。
ちなみに、この「枠」。
私が勝手に命名しただけで、一般化されていません(-_-;)

枠の背景に色を塗る

囲ってある部分を他の部分と見分けるために、その枠に色をつけると便利です。
ちなみに、色の変わりに画像を引く事も出来ます。

枠の背景に画像をはる

囲ってある部分を他の部分と見分けるために…というよりはデザイン的に面白いから…ということで、画像を背景に敷く事が出来ます。

枠の周りに枠線を引く

囲ってある部分を他の部分と見分けるために…枠に線をつけることができます。
私は結構流用しています。

枠の内側にスペースをおく

枠の背景に色を塗るや枠の周りに枠線を引くを使用した場合、枠と文字の近さが気になったりしないでしょうか？
ぴったりとくっついている状態だと文字は良く見えないし…実際、そのままだとデザイン的によろしくない事が多々あります。

そういう時は、「paddig」設定で、枠の内側に空間を作りましょう。

枠の外側にスペースをおく

枠の背景に色を塗るや枠の周りに枠線を引くを使用して、せっかく別のものと分離させても、上下の情報とぴったりくっついていると、結局見づらかったりします。

そういう時は、「margin」設定で、枠の外側に空間を作りましょう。

枠の表示位置を指定する「position」について

枠の表示位置を指定する「position」です。マージンやパディング、floatがらみで妙な表示になったり、バグがでたりと…いろろいあるので使いどころがちょっと難しいです。