初心者のホームページ実践講座: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』になるようですね…。