初心者のホームページ実践講座: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