Home > Web作成 > CSS Archive

CSS Archive

CSSの基礎2　ボックスモデルについて

  • Posted by: nboze
  • 2010年1月11日 23:22
  • CSS
1）ボーダー・マージン・パディング・内容領域に関して

内容領域：テキストや画像などの要素自体が持つ領域（つまり生の文字ってことかなぁ）
ボーダー：基準になる線
マージン：ボーダーから外側の余白
パディング：ボーダーから内側の内容領域までの余白

cssbasic2.jpg

2）指定したボックスのwidthに関して。

指定したボックスの
内容領域widthが500pxで
左右のパディングが5px
左右のボーダーが5px
左右のマージンが10pxとした場合

500+5×2+5×2+10×2=540px

540pxがそのボックスモデルの幅となる。
指定するwidthとは実質内容領域の幅を指している事になる。

しかしIE5.5以前とIE6や7の後方互換モードでは
このwidthの扱いが違い
width=内容領域＋左右パディング＋左右ボーダー幅となり

先の例でのwidth500pxと指定した場合は
内容領域が

500-5×2-5×2=480px

となってしまう。

つまり目的としているボックスモデルの幅がこの例でいくと本来は540pxだが
モダンブラウザでは520pxになってしまい、
内容領域が500pxが480pxとなってしまう。

今回は幅に関して説明したがこれは高さでも同じ扱いになるので注意が必要である。


CSSの基礎1　構文について

  • Posted by: nboze
  • 2010年1月11日 15:55
  • CSS
_はスペース

cssbasic.jpg
@charset "UTF-8";
@media screen {
    p_{
     color:_#000;
     font-size:_small;
    }
}


pを「セレクタ」（selector）
colorを「プロパティ」（property）
_#000を「値」（value）

color:_#000;のプロパティ＋値が「宣言」（declaration）


{}に挟まれた
{
 color:_#000;
 font-size:_small;
}
宣言のまとまりが宣言ブロック（declarationblock）

pから括弧内の宣言ブロックまでを規則集合（ruleset）

@media screenが＠規則となる

@charset "UTF-8";が@charset規則で文字コードの指定
どの規則よりも先に記載する事


宣言の後のセミコロン；は宣言ブロックが一行の場合は
いらないが行数で使い分けるのは大変なので
入れても問題ない事から；を入れる事に統一しといたほうが
よい。

コメントの記述
/* ココにコメント */


mt.Vicunaをローカルで編集

MTでテンプレートデザインをするにあたって感覚的にCSS構造をまとめてくれているmt.Vicunaを使用しているのですが、適用スキンの変更や、今後のオリジナルデザインの適用などに
リアルタイムでローカルにて確認できるキットまで配布していただいておりとても感謝です。

MTにmt.Vicunaを設置する前にこれで感覚を掴むのもよいのかもしれません。

いろいろなこの辺の技術的な初心者には本当にありがたいです。

Vicunaのスキンをローカルで編集・調整する方法－3.5ping.org
http://3ping.org/2007/07/28/1516

wu先生ありがとうございます。ホップ本もかなり役にたってます。

これからスキンデザイン変更をガシガシやっていきたいと思います。

Index of all entries

Home > Web作成 > CSS Archive

Tag Cloud
Search
Photos
Feeds
Categories
Links

Return to page top