ウェブサイトのレイアウト

多くの場合、Web サイトはヘッダー、メニュー、コンテンツ、およびフッターに分割されます。

さまざまなレイアウトデザインから選択できます。ただし、上記の構造は最も一般的なものの1つであり、このチュートリアルで詳しく見ていきます。

ヘッダー

ヘッダーは通常、Webサイトの上部(または上部のナビゲーションメニューのすぐ下)にあります。多くの場合、ロゴやWebサイト名が含まれています。

ナビゲーションバー

ナビゲーション バーには、訪問者がWebサイトをナビゲートするのに役立つリンクのリストが含まれています。

コンテンツ

このセクションのレイアウトは、多くの場合、対象ユーザーによって異なります。最も一般的なレイアウトは、次のいずれか (またはそれらを組み合わせたもの) です。

• 1列（モバイルブラウザでよく使用されます）
• 2列（タブレットやラップトップによく使用されます）
• 3列のレイアウト(デスクトップのみに使用)

3列のレイアウトを作成し、小さい画面では1列のレイアウトに変更します。

不均等な列

メインコンテンツは、サイトの最大かつ最も重要な部分です。

これは列幅が等しくない場合によく見られることで、スペースのほとんどがメインコンテンツ用に確保されます。サイドコンテンツ (存在する場合) は、代替ナビゲーションとして、またはメインコンテンツに関連する情報を指定するためによく使用されます。幅はお好みに合わせて変更してください。ただし、合計が100%になるように注意してください。

フッター

フッターはページの下部に配置されます。多くの場合、著作権や連絡先情報などの情報が含まれています。

レスポンシブWebサイトのレイアウト

上記のCSSコードの一部を使用して、レスポンシブWebサイトレイアウトを作成しました。これは、画面幅に応じて2列と全幅列の間で変化します。

自分で試してみる»