初心者のホームページ実践講座：contentsスタイルシート
メインコンテンツ部分のスタイルシート(CSS)設定の解説です。どのようなスタイルシート(CSS)が指定されているでしょうか。
セレクタの解説に関しては、それぞれにスタイルシート(CSS)のセレクタ設定にリンクを貼ってありますので、参考にしてみてください。(セレクタの意味に関してはこちら→スタイルシートの基本構造)
#content {
margin:0px 10px 15px 10px;
float:left;
width:410px;
height:350px;
font-size:12px;
padding-bottom:10px;
border:#000 solid 2px;
background-color:#fff;
}
このスタイルシート(CSS)の設定はメインコンテンツ部分にスタイルシート(CSS)を適用させています。『class』と『id』のことはこちら→『class』と『id』の使い方
他にもタグから始める場合はこのbodyタグに設定するように、シャープやピリオドを省いて設定したいhtmlタグから始めましょう！
【margin】
上が0px 、右が0px、下が15pxで左が10pxのメインコンテンツの枠外に空白があります。marginの空白の設定は『上』から始まって、時計回りに『右』、『下』、『左』の順番になります。
【float】
『float』を設定することでブロック要素(ブロック要素とインライン要素を参照)をよこに並べることができます。『float』を指定した場合には『width』も一緒に指定することが多いです。ブロック要素と『float』の考え方は慣れるまで難しいと思います。(独学ではとくに……『float』はできるだけ詳しくやろうと考えています)
【width】
『float』を設定したので、『width』も指定しました。左サイドと右サイドとメインコンテンツの幅が総計でcontainerで設定した幅の850pxを超えないように気をつけなければいけません。もしも、超えた場合はカラム(段組)がくずれます。
【height】
普通メインコンテンツ部分に高さの指定はしません！高さの指定をしないとテンプレートの見栄えがかなり悪かったので、わざと指定しておきました。コンテンツ内の文章量が少ない場合は敢えて指定するというのも一つの手かもしれませんね。
【font-size】
メインコンテンツ内のフォントの大きさを表しています。指定しなくても、大きすぎてカラム(段組)が崩れることはないですし、文章が長くてもカラム(段組)枠の端で自動で折り返されます。しかし、見栄えに関する部分で大きすぎたりすると悪くなりますし、小さすぎると読みにくくなるので気をつけてください。
【padding-bottom】
メインコンテンツの枠内の下部分の空白です。メインコンテンツの下部分に文章がピッタリくっついていると見栄えが悪いので指定しました。
(フッターの『margin-top』で余白を持たせることでも似たような効果を得ることができます)
【border】
通常は枠の装飾に使いますが、今回はどこがヘッダーでどこがサイド部分なのかをわかりやすくするために枠線をつけました。
【background-color】
メインコンテンツの背景色です。今回は白にしました。