【レイアウト構成】初級編:ストアサイト(和菓子)/縦書きレイアウト

目次

全体のレイアウト構成

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

解説!

レイアウト構成は下記の通りです。

header
背景画像を設定し、ロゴ、グローバルナビ、「オンラインストアを見る」ボタンを囲みます。
main
コンテンツのメインエリア全体を囲みます。
section(#news)
Newsコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#products1)
Products1コンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#products2)
Products2コンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
div(#shop)
Google Mapのエリアを囲みます。
footer
コンテンツ下のfooter部分を囲みます。

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

header

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

コーディングのヒント!

header
背景画像を設定し、ロゴ、グローバルナビ、「オンラインストアを見る」ボタンをそれぞれ配置します。
縦書きはCSSの「writing-mode」を使用します。
各ブラウザでの表示が崩れないようベンダープレフィックスも設定します。
ロゴ
h1タグで記述します。
グローバルナビ
navタグで囲んだ中に、ul、liタグで記述します。
「オンラインストアを見る」ボタン
CSSの「position」を使用して左下に配置します。
ボタンは「background」で透過にします。
中に白枠の線を引くために外側をdivで囲んでいます。

section(#news)

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

コーディングのヒント!

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

タイトル
タイトル全体をh2タグで囲みます。
英語と日本語のタイトルをそれぞれspanタグで囲みフォントやマージンの設定を行います。その際に、ブロック化するのがポイントです。
ニュース
ニュースはdl、dt、ddタグを使用してコーディングします。
スマホ時は、3件のみ表示して4件目以降を非表示にします。4件目以降という指定は「nth-of-type(n + 4)」を使用すると簡単にできます。

section(#products1)

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

解説!

コーディングのヒント!

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

タイトル
タイトル全体をh2タグで囲みます。
英語と日本語のタイトルをそれぞれspanタグで囲みフォントサイズやマージンの設定を行います。
画像とテキストエリアの重ね合わせ
画像とテキストエリアを「position」を使用して重ね合わせます。それぞれ画面幅に応じて伸縮させたいので、widthはパーセントで指定します。テキストエリアは「background」を使用して少し透過させます。

section(#products2)

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

解説!

コーディングのヒント!

基本的にはproducts1と同じですが、コンテンツの並びが逆になっているので「writing-mode」を変更して並び順を切り替えます。

div(#shop)

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

コーディングのヒント!

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

Google Map
Google マップの埋め込みは、公式サイトに説明がありますので、こちらを参考にしてください。他のユーザーとマップやルートを共有する
Google Mapの下にできるわずかな隙間は、「vertical-align: bottom;」で消すことができます。
フッターのレイアウト構成

コーディングのヒント!

フッター全体をfooterタグで囲み背景を黒色に設定します。
左側と右側のコンテンツをそれぞれdivタグで囲み、Flexboxで両端揃えに配置します。

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

関連記事

コーディング練習一覧

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

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

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

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

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