ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

ホームページの構成

さきちんカフェの構成

それでは、「さきちんカフェ」の構成を確認してみましょう。

さきちんカフェのレイアウトは2カラムレイアウトとなります。
ヘッダー、メニュー、メインビジュアル、メインコンテンツ、サイドナビ、フッターで構成されています。

各パーツの構成図

2カラムレイアウトの構成で解説している2カラムレイアウトに、「メニュー」と「メインビジュアル」が追加され、「サイドナビ」が右に移動したタイプのレイアウトとなります。

それぞれの役割

ヘッダー

ヘッダー画像

ヘッダーには、さきちんカフェのロゴや連絡先の画像が入り、その下にページメニューが配置されています。
ページメニューをクリックすると、それぞれのページへ移動します。

メニュー

メニュー画面

ホームページのメニューです。ここからそれぞれのページへ移動することができます。

メインビジュアル

メインビジュアル画像

ホームページのメインとなる画像です。1番よく見られる、ホームページの「顔」ともいえる画像です。

メインコンテンツ

メインコンテンツ画像

メインコンテンツエリアは左側に配置され、ここに主な情報が掲載されます。
トップページでは新着・更新情報やそれぞれのページへの案内画像、テキストなどが表示されます。

サイドナビ

サイドナビ画像

サイドナビは右側に配置されています。ここには注目させたいコンテンツの画像が配置され、クリックするとそれぞれのページへ移動します。
また、予約や持ち帰りについても記載されています。

フッター

画像タイトル

フッターには画像が配置され、コピーライトが入ります。

一見複雑そうに見えますが、分解してみると結構単純な構成です。
基本的にはHTMLとCSSでカラムを組んで、そこに文字や画像を配置しているだけです。

その他のページの構成

もちろん、トップページ以外のページも2カラムレイアウトです。
ヘッダー、メニュー、サイドナビ、フッターはトップページと共通し、メインコンテンツだけが異なります。
また、メインビジュアルは表示されません。

その他のページ構成

そのため、トップページをベースにメインビジュアルを削除し、メインコンテンツだけを書き換えれば他のページが作れてしまいます。

覚えておきたいポイント

分解してよく見てみよう

それぞれのパーツを分解して見てみると、意外と単純な構成をしています。
これまでに学習した内容で全て作成することができます。

ホームページの確認
« 前のページへ 制作するホームページ

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。