ヘッダと配置の整備

　　この文字をクリックするとサンプルダウンロード出来ます。


紹介ページの概要を作成　←　｜　→　見出しをデザイン


●　ヘッダを設定して色を付けます

h1見出しと概要文までをヘッダとし、この領域に色を付けます。

ヘッダ部分をブロック要素にして、この中にh1見出しと概要文が入る様にします。

�@　スタイルシートに新たにIDセレクタを追加します。名前はheaderにします。

#header　{background-color: #66aa66;　背景色を濃い緑
　　　　　　padding: 5px 20px;}　　　　上下、左右の余白

・さらにヘッダ中の概要文だけに適用するスタイルを追加します。

#header p
　　　　{color: #222222;　　　文字色をほぼ黒
　　　　margin-top: 5px;}　　　上部余白


�A　htmlで、ヘッダとなる部分を＜div＞タグで囲みます。属性にはheaderを指定します。
・
・
　<div id="containertop">

　<div id="header">
　<h1>野辺山高原社</h1>
　<p>牛乳はもちろん、八ヶ岳の自然もお届けする牛乳の工房です</p>
　</div>
・ ・

---

●　ここまでの内容説明

�@新たにidセレクタを追加し、htmlも＜div＞を追加しました。２セットの＜div＞が入れ子になりました。

h1と概要文に適用されるプロパティが重複する場合には、最も近い＜div id="header＞のものが適用されます。

�A　#header p
＜div id="header＞が適用されるブロック内のpタグだけに適用されます。
前のページで出てきたリストタグのスタイル　li a　での方法と同じです。

サンプルを表示して見ます。

　　

---

●　コンテンツを左寄せにします

スタイルシートのcontainertopを変更して左寄せ設定にしてしまうと、折角中央に揃えたトップ画面も
コンテンツが左に寄ってしまいます。

この不都合を回避する為に、新たにidセレクタを追加します。

�@　スタイルシートに追加します。

内容はcontainertopから、text-align:center;　を外したものになります。
containertopを全てコピーし、名前を変更して、text-align:center;を削除します。

名前はcontainerとします。

#container
{border: solid 2px #bbffaa;
padding: 20px;
background-color: #ffffff;
width: 600px;
margin-left: auto;
margin-right: auto;
text-align:center;　}		この一文を消します

�A　htmlを修正します。
containertop　を　containerに修正します。
・
・
　<div id="containertop">
　↓　修正する
　<div id="container">　

　<div id="header">
　<h1>野辺山高原社</h1>
　<p>牛乳はもちろん、八ヶ岳の自然もお届けする牛乳の工房です</p>
　</div>
・
・
表示して見ます。下の様になって左に寄りました。