初心者のホームページ実践講座:bannerスタイルシート

 ヘッダー部分のスタイルシート(CSS)設定の解説です。どのようなスタイルシート(CSS)が指定されているでしょうか。
 セレクタの解説に関しては、それぞれにスタイルシート(CSS)のセレクタ設定にリンクを貼ってありますので、参考にしてみてください。(セレクタの意味に関してはこちら→スタイルシートの基本構造)

#banner{
font-family:arial, Helvetica;
margin-bottom:20px;
text-align:left;
background-color:#fff;
padding:10px 50px;
height:80px;
border:#000 solid 2px;
}

 このスタイルシート(CSS)の設定はヘッダー部分にスタイルシート(CSS)を適用させています。『class』と『id』のことはこちら→『class』と『id』の使い方
 他にもタグから始める場合はこのbodyタグに設定するように、シャープやピリオドを省いて設定したいhtmlタグから始めましょう!

 【font-family
 ヘッダー内のフォント(文字)の字体です。

margin-bottom
 ヘッダー部分の枠外の空白です。bottomは枠の下の部分の余白を表します。

 【text-align
 文章は左揃えです。

 【background-color
 ヘッダー部分の背景色です。今回は白です。

 【padding
 ヘッダー部分の枠内の余白を表しています。今回はこの余白を利用して、『<h1>サイトタイトル</h1>』の表示位置を決定しています。

height
 ヘッダー部分の高さです。今回は80pxに設定していますが、ヘッダー内部に入れた大見出しのh1タグの枠外の余白(margin)に押されて、80px以上になっているようです。適当ですみません(笑)

border
 通常は枠の装飾に使いますが、今回はどこがヘッダーでどこがサイド部分なのかをわかりやすくするために枠線をつけました。5