紹介ページabout.htmlのヘッダと配置整備

売れるホームページの作り方 ⇒ 速攻HTML ⇒ ヘッダと配置の整備


速攻HTML

ヘッダに色を付け、コンテンツ全体配置を左寄せにします

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



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


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>を追加しました。2セットの<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>



表示して見ます。下の様になって左に寄りました。


  個別ページ1