それでは、「さきちんカフェ」の構成を確認してみましょう。
さきちんカフェのレイアウトは2カラムレイアウトとなります。
ヘッダー、メニュー、メインビジュアル、メインコンテンツ、サイドナビ、フッターで構成されています。
2カラムレイアウトの構成で解説している2カラムレイアウトに、「メニュー」と「メインビジュアル」が追加され、「サイドナビ」が右に移動したタイプのレイアウトとなります。
それぞれの役割
ヘッダー
ヘッダーには、さきちんカフェのロゴや連絡先の画像が入り、その下にページメニューが配置されています。
ページメニューをクリックすると、それぞれのページへ移動します。
メニュー
ホームページのメニューです。ここからそれぞれのページへ移動することができます。
メインビジュアル
ホームページのメインとなる画像です。1番よく見られる、ホームページの「顔」ともいえる画像です。
メインコンテンツ
メインコンテンツエリアは左側に配置され、ここに主な情報が掲載されます。
トップページでは新着・更新情報やそれぞれのページへの案内画像、テキストなどが表示されます。
サイドナビ
サイドナビは右側に配置されています。ここには注目させたいコンテンツの画像が配置され、クリックするとそれぞれのページへ移動します。
また、予約や持ち帰りについても記載されています。
フッター
フッターには画像が配置され、コピーライトが入ります。
一見複雑そうに見えますが、分解してみると結構単純な構成です。
基本的にはHTMLとCSSでカラムを組んで、そこに文字や画像を配置しているだけです。
その他のページの構成
もちろん、トップページ以外のページも2カラムレイアウトです。
ヘッダー、メニュー、サイドナビ、フッターはトップページと共通し、メインコンテンツだけが異なります。
また、メインビジュアルは表示されません。
そのため、トップページをベースにメインビジュアルを削除し、メインコンテンツだけを書き換えれば他のページが作れてしまいます。
覚えておきたいポイント
分解してよく見てみよう
それぞれのパーツを分解して見てみると、意外と単純な構成をしています。
これまでに学習した内容で全て作成することができます。
