2カラムのページを作ろう 2 CSSリセットから外枠の設定

今日は、スタイルのリセットと、外枠の設定。

短くて、ごめんなさい(>_<)

お詫びに↓↓↓管理人が作ったヘタクソ・アイコン良かった持って帰ってね!
白背景で使ってね。
ハートのアイコン赤  ハートのアイコンピンク

CSSリセットの設定

余分な余白を消すためにリセットします。
詳細はこちらのページ

bl_1step7css1.gif

↑↑↑お好きな所から、スタイルシートマネージャを開いて、下記の設定を行います。

タブ 項目 (プロパティ) 数値など
*(アスタリスク)の設定
レイアウト マージン 4方向 0 ピクセル
バッティング 4方向 0 ピクセル
フォント サイズ 100
*{
padding : 0px;
margin : 0px;
font-size : 100%;
}

BODYの設定

背景の色を設定します。
スタイルシートマネージャ開いてね!

タブ 項目 (プロパティ) 数値など
bodyタグの設定
色と背景 背景色 #efefe0
body{
background-color : #efefe0;
}

外枠

これも、1カラムの時と同じです。忘れちゃった方、詳細はこちらです。

外枠の説明図

今回は、幅を800ピクセルにします。
そして、このボックスが、真ん中にくるように設定をします。

タブ 項目 (プロパティ) 数値など
ID 名前は、box-sotowaku  #box-sotowaku
レイアウト マージン 左方向 自動
右方向 自動
位置 配置 800 ピクセル
#box-sotowaku{
margin-left : auto;
margin-right : auto;
width : 800px;
}

次回は、ヘッダー部分をつくります。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Post Navigation