初心者のホームページ実践講座：containerスタイルシート
ホームページレイアウトの大枠のスタイルシート(CSS)設定の解説です。どのようなスタイルシート(CSS)が指定されているでしょうか。
セレクタの解説に関しては、それぞれにスタイルシート(CSS)のセレクタ設定にリンクを貼ってありますので、参考にしてみてください。(セレクタの意味に関してはこちら→スタイルシートの基本構造)
#container{
margin:0px auto 0px auto;
width:850px;
background-color:#FD8B2A;
color:#888888;
}
このスタイルシート(CSS)の設定はレイアウトの大枠全体にスタイルシート(CSS)を適用させています。『class』と『id』のことはこちら→『class』と『id』の使い方
他にもタグから始める場合はこのbodyタグに設定するように、シャープやピリオドを省いて設定したいhtmlタグから始めましょう！
【margin】
ホームページレイアウトの大枠外の空白です。ここでホームページのセンタリングを行います。『0』は上下の空白で、『auto』は左右の空白を表しています。『auto』にすることにより、ホームページのレイアウトがセンタリングされます。
【width】
大枠の全体の幅を指定するスタイルシート(CSS)です。訪問者のパソコンの画面の幅を考えて指定しなければなりません。760〜800pxがよいといわれていますが、今回は850pxにしてみました。特に理由はありません。
【background-color】
大枠の背景色です。今回はわかりやすく派手な色にしようと思い、オレンジにしてみました。
【color】
フォント(文字)の色の指定です。通常はわかりやすく黒がいいと思います。
bodyタグのスタイルシート(CSS)で『padding』を設定していたのですが、大枠では指定していませんでした。とくに指定していなければ、paddingは『0』になるようですね…。