小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

CSS詳細部の解説１

CSSレイアウト

解説第五弾です。
本コンテンツは、以下のページのHTML/CSSソースを解説しています。


少しづつテンプレートソースのCSSの詳細部を解説していきます。

/*--- Detail layout ---*/
/*--- body ---*/
body {
    font-family: "ＭＳ Ｐゴシック", sans-serif;
}
#main_container {
    border: 1px solid #cccccc;
    background-color: #eeffff;
}

/*--- header ---*/
#header_container {
    padding: 1em 20px 1em;
}

/*--- footer ---*/
#footer_container {
    padding: 1em 0px 1em;
    text-align: center;
}
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

body要素でプロポーショナルゴシック系のフォントをとりあえず指定しています。
該当フォントがない場合は、サンセリフ体のフォントが使用されます。

body {
    font-family: "ＭＳ Ｐゴシック", sans-serif;
}

main_containerには１ピクセルソリッドのボーダー線を引きます。色は「#cccccc」。
バックカラーはとりあえず「#eeffff」としました。

#main_container {
    border: 1px solid #cccccc;
    background-color: #eeffff;
}

header_containerはパディングを指定しています。
以下のように引数の数によって解釈が異なります。

  • 値が１つの場合 - 上下左右が同じ値が適応される。
  • 値が２つの場合 - 値１が上下、値２が左右に適応される。
  • 値が３つの場合 - 値１が上、値２が左右、値３が下に適応される。
  • 値が４つの場合 - 値１が上、値２が右、値３が下、値４左がに適応される。（時計の回る方向）

今回は３つなので、上と下が1emで、左と右が20pxになります。
ちなみに、emは、現在のフォントサイズを1とした相対指定で、pxは、ピクセルで色情報を持つ画素数指定。

/*--- header ---*/
#header_container {
    padding: 1em 20px 1em;
}

footer_containerもパディングを指定しています。
また、テキストを中央寄りにしています。

/*--- footer ---*/
#footer_container {
    padding: 1em 0px 1em;
    text-align: center;
}

関連ページ：