燈明日記 このページをアンテナに追加 RSSフィード

ごあいさつ

燈明日記へようこそ!!

燈明日記の主なテーマは、以下の通りです。

そして、燈明日記へ来られたのも『私』と『あなた』の何かのご縁です。なので、どうぞごゆっくりご覧下さい!


2009/3/11(水)

[] CSS詳細部の解説1

解説第五弾です。

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


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

/*--- Detail layout ---*/
/*--- body ---*/
body {
    font-family: "MS Pゴシック", 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: "MS Pゴシック", sans-serif;
}

main_containerには1ピクセルソリッドのボーダー線を引きます。色は「#cccccc」。

バックカラーはとりあえず「#eeffff」としました。

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

header_containerはパディングを指定しています。

以下のように引数の数によって解釈が異なります。

  • 値が1つの場合 - 上下左右が同じ値が適応される。
  • 値が2つの場合 - 値1が上下、値2が左右に適応される。
  • 値が3つの場合 - 値1が上、値2が左右、値3が下に適応される。
  • 値が4つの場合 - 値1が上、値2が右、値3が下、値4左がに適応される。(時計の回る方向)

今回は3つなので、上と下が1emで、左と右が20pxになります。

ちなみに、emは、現在のフォントサイズを1とした相対指定で、pxは、ピクセルで色情報を持つ画素数指定。

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

footer_containerもパディングを指定しています。

また、テキストを中央寄りにしています。

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

関連ページ:

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証