ヘッダと配置の整備

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習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