初心者のホームページ実践講座：link-leftスタイルシート
左サイド部分のスタイルシート(CSS)設定の解説です。どのようなスタイルシート(CSS)が指定されているでしょうか。
セレクタの解説に関しては、それぞれにスタイルシート(CSS)のセレクタ設定にリンクを貼ってありますので、参考にしてみてください。(セレクタの意味に関してはこちら→スタイルシートの基本構造)
#links-left {
font-weight:normal;
width:180px;
float:left;
margin: 0px 0px 0px 5px;
text-align:left;
border:#000 solid 2px;
background-color:#fff;
}
このスタイルシート(CSS)の設定は左サイド部分にスタイルシート(CSS)を適用させています。『class』と『id』のことはこちら→『class』と『id』の使い方
他にもタグから始める場合はこのbodyタグに設定するように、シャープやピリオドを省いて設定したいhtmlタグから始めましょう！
【font-weight】
フォント(文字)の太さを指定します。今回はnormalなので、普通と変わりません。今気がついたのですが、どうせなら太い文字にすればよかった。
【float】
『float』を設定することでブロック要素(ブロック要素とインライン要素を参照)をよこに並べることができます。『float』を指定した場合には『width』も一緒に指定することが多いです。ブロック要素と『float』の考え方は慣れるまで難しいと思います。(独学ではとくに……『float』は機会をつくってできるだけ詳しくやろうと考えています)
【width】
『float』を設定したので、『width』も指定しました。左サイドと右サイドとメインコンテンツの幅が総計でcontainerで設定した幅の850pxを超えないように気をつけなければいけません。もしも、超えた場合はカラム(段組)がくずれます。
【margin】
左サイドの枠外の余白を指定しました。左サイド、メインコンテンツと右サイドのレイアウトに関わる部分なので、見栄えがよい場所を選んでみましょう。それぞれのカラム(段組)と等間隔に並べたい場合は、左右を大体autoにすればそうなります！
【text-align】
文章が左揃えになります。
【border】
通常は枠の装飾に使いますが、今回はどこがヘッダーでどこがサイド部分なのかをわかりやすくするために枠線をつけました。５
【background-color】
メインコンテンツの背景色です。今回は白にしました。