ヘッダーの部分は、サイトの内容を要約して記入しましょう

ヘッダーに内容を要約したり、見出しタグを記述しましょう

レイアウト     

制作したホームページが最初に見られるピンクのAの部分がヘッダーと呼ばれる部分です。ここには、制作するホームページの看板のようなものです。制作するホームページの内容やテーマを考えて作成しましょう

    

では、ヘッダー作成の際の注意点とは、

      
          
  • 制作するホームページのテーマにあった画像を用意する
  •       
  • 商用に利用する場合連絡先を解りやすく表示する
  •       
  • メールはクリックしたらメールソフトを起動できるようリンクを設置する
  •       
  • 他のサイトに移動したような錯覚を起こさないように、同じ画像ファイルを利用する

ヘッダーの背景画像をCSSで設定するには

  

ヘッダーに画像ファイルに設定するためには、CSSに
  #head{height: 200px;width: 160px;background-image: url(../img/指定した画像名.jpg');background-repeat: no-repeat;background-position: center center;} と記述しました。ではこの記述例と注意点は

  1. height: 200px;width: 160px;で内容領域を指定します。画像ファイルは、内容領域に合わせて作成してください
  2. background-image: url(../img/指定した画像名.jpg');でimgフォルダの画像ファイルをしていします。../は画像ファイルの場所の相対パスの指定でフォルダの場所にご注意下さい
  3. background-repeat: no-repeat;では、背景画像の並べ方の記述方法です。ここでは、背景画像は、ひとつだけと指定しましたあと内容領域より小さい画像を敷き詰める記述方法も有ります
  4. background-position: center center;で、背景画像の位置の記述りです。記述例は、縦も横も中央の記述をしました。

htmlに記述しましょう
表事例

さらに、#headにh1などの見出しタグをCSSで設定します。例えば見出しタグを14ピクセルの赤い文字の太字で上から100ピクセル、横から30ピクセルの指定した位置で表示したい場合は、
CSSにh1{font-size: 14px;color: #FF0000;font-weight: bold;padding-top: 100px;padding-left: 30px;}と記述します

上記の内容をhtmlに記述すると
<div id="head"><h1>こんな感じで表示されます</h1></div>
ピンクの部分の画像は指定したものとなります。

inserted by FC2 system