【レイアウト構成】入門編:ブランドサイト(ジュエリー)/1カラム

目次

全体のレイアウト構成

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

解説!

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

div(#mainvisual)
メインビジュアルのエリアを囲みます。
header
ロゴとグローバルナビゲーションを囲みます。
main
ConceptとWorkのコンテンツ全体を囲みます。
footer
コンテンツ下のfooter部分を囲みます。

mainとfooter全体を囲むdivは、横幅を設定するためのdivです。

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

div(#mainvisual)

メインビジュアルのレイアウト構成

コーディングのヒント!

メインビジュアル全体をdivタグで囲み、マージンの設定を行います。

header

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

コーディングのヒント!

header
ロゴとグローバルナビをFlexboxで横並びに配置します。
ロゴ
h1タグで記述します。
グローバルナビ
navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。

section(#concept)

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

コーディングのヒント!

エリア全体をsectionタグで囲み、画像とテキストエリアをFlexboxで横並びに配置します。
画像とテキストエリアの横幅はそれぞれ50%で設定し、テキストエリアのテキスト位置をpaddingで調整します。

タイトル
h2タグで記述します。

section(#work)

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

コーディングのヒント!

レイアウトはConceptと同様で、画像とテキストの位置を入れ替えます。
CSSはConceptと共通のものを作成してみましょう。
スマホ時は、画像、テキストの順で縦に並べますが、そのまま縦に並べるとWorkだけテキストが上にきてしまうので、「flex-direction: column-reverse;」で並び順を逆にします。

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

コーディングのヒント!

フッター全体をfooterタグで囲みます。
ロゴとコピーライトをFlexboxで横並びに配置して両端で揃えます。

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

関連記事

コーディング練習一覧

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

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

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

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

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