サイト名称変更のお知らせ

【レイアウト構成】初級編:ストアサイト(書店)/1カラム

目次

全体のレイアウト構成

サイト全体のレイアウト構成

解説!

1カラムのシンプルなレイアウトです。
レイアウト構成は下記の通りです。

header
全体を背景画像にして、右上にロゴを配置します。
main
コンテンツのメインエリア全体を囲みます。
section(#magazine)
Magazineコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#fashion)
Fashionコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(.catalog-antique)Catalogエリア
Catalogコンテンツのエリアを囲みます。Antiqueエリアと共通のCSSを使用するので、名前はidではなくclassで記述します。
section(.catalog-antique)Antiqueエリア
Antiqueコンテンツのエリアを囲みます。Catalogエリアと共通のCSSを使用するので、名前はidではなくclassで記述します。
footer
コンテンツ下のfooter部分を囲みます。

各パーツのレイアウト構成

header

ヘッダーのレイアウト構成

コーディングのヒント!

  • ・header全体を背景画像にして、全画面表示にします。
  • ・高さは単位にvhを使用することで、ブラウザの高さにあわせて可変になるようにします。
  • ・右上のロゴの配置は、positionを使用します。

section(#magazine)

Magazineエリアのレイアウト構成

コーディングのヒント!

エリア全体をsectionタグで囲みます。

タイトル
sectionのタイトルをh2タグで記述します。
画像
全体をdivタグで囲み、CSSのflexboxで画像を横並びに配置します。
横並びに配置した画像の上に、positionで半透明のボックスを重ね、タイトルとテキストを記述します。
半透明はbackground-colorのrgbaの指定でできます。

section(#fashion)

fashionエリアのレイアウト構成

コーディングのヒント!

エリア全体をsectionタグで囲み、背景に画像を設定します。

背景画像
background-sizeで背景画像の表示サイズを指定します。
高さはブラウザ幅変更時に変化しないよう固定で設定します。
タイトル
sectionのタイトルをh2タグで記述します。
ボタン
ボタンをaタグで記述します。

section(.catalog-antique)Catalogエリア

Catalogエリアのレイアウト構成

コーディングのヒント!

エリア全体をsectionタグで囲み、背景カラーを設定します。

  • ・画像とテキストのエリアをdivタグで囲み、flexboxで横並びに配置します。
  • ・画面幅を狭めた際に画像が縮小するよう、画像を囲むdivタグの横幅はパーセントで指定します。

section(.catalog-antique)Antiqueエリア

Antiqueエリアのレイアウト構成

コーディングのヒント!

Catalogエリアと同様です。
テキスト下にaタグでボタンを配置します。

フッターのレイアウト構成

コーディングのヒント!

フッター全体をfooterタグで囲み、背景カラーを設定します。

ロゴとテキストのエリアをdivタグで囲み、flexboxで横並びに配置します。

最後に、コピーライトをpタグで記述します。

コーディング練習メニューに戻る

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習