Web ページのレイアウト
HTML と CSS の概要を踏まえたうえで、Web ページをどのような構成にするかを考えていきましょう。サイトによってデザインの考え方、個性等もありますので必ずこのように構成しなけれいけないという決まりはありません。基本的な構成を用意したので、それを参考にWeb ページを制作してみましょう。
Web ページ構成例
- ヘッダー
- メインコンテンツ
- サブコンテンツ
- フッター
これらはどのサイトにもほぼ共通して設置されています。各分類を細かく見ていきましょう
ヘッダー
まずヘッダーです。サイトのタイトル、サイトの概要(説明文)、グローバルメニューが設置されていることが多いです。サイトタイトルは当然必要なものですがサイトの概要はトップページ以外では省略されることもあります。そしてグローバルメニューはサイトの各コンテンツにアクセスするために大切なナビゲーションです。サイト内のすべてのページへのリンクを貼ってしまうとサイトのページ数が多い場合かなり表示面積を取ってしまいますので、各カテゴリのトップページへのリンクに限定する等、コンパクトにまとめると良いでしょう。
メインコンテンツ
メインコンテンツはそのページ固有のメインとなる内容が入ります。ブログであればここに記事が入りますし、サイトのトップページならここに各コンテンツへの詳細なリンクを貼ることもできます。メインコンテンツにおけるリンク集はそのカテゴリやコンテンツがの概要や画像等を貼り付けてどんな内容なのか分かりやすくまとめると訪問者に対し親切です。
サブコンテンツ
メインコンテンツに関連する補足的内容や、関連するリンクのリストを記入できます。広告などを貼るのも良いでしょう。
フッター
フッターにはサイトの著作権情報(コピーライト)、ヘッダーより詳細なナビゲーションリンクを貼ると良いでしょう。フッターはページのいちばん下にあるためヘッダーと違い表示領域が大きくなることを気にする必要はありません。メインコンテンツを読み終えたサイト訪問者へ他のコンテンツを知らせるのに良い手段になります。