サンプルＨＰのレイアウト構成

サンプルＨＰのdiv要素の領域

当ホームページのサンプル html の div 領域についてご紹介します。

ホームページのレイアウトは、ヘッダーやフッターなど、div要素（入れ物の箱のこと）によって領域が区分けされていますが、当サイトのhtmlサンプルではこのようになっています。

このhtmlファイル上に記入されているそれぞれのdiv要素が、実際に表示されるホームページに対応する領域の箇所はこのような感じです。

ホームページ全体

htmlファイル上の赤い枠で囲っているホームページ全体の領域です。サンプルでは、homepageと設定しましたが、一般的には、container などの名前が指定されることが多いです。スタイルシートでは幅を960pxぐらいに設定しています。

ヘッダーの領域

ヘッダー部分の領域は、freehp としましたが、一般的には banner などのような名前がつけられることが多いです。html ファイル上では青い線で囲っている箇所です。以下、同じようになっています。

左サイドバー

右サイドバー

フッターの領域

div 要素は、必ず「開始タグ」と「終了タグ」が１セットになって機能します。レイアウトなどのデザインを変更させたい場合は、この要素に対応するスタイルシートの箇所を変更すればＯＫです。

ちなみに、当サイトのサンプルでは、freehp とかとなっていますが、この名前は何でもかまいません。

戻る：サンプルＨＰのカスタマイズ方法