![](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/brand/mainvisual-l.jpg)
【レイアウト構成】入門編:ブランドサイト(ジュエリー)/1カラム
目次
- 全体のレイアウト構成
- 各パーツのレイアウト構成
全体のレイアウト構成
![サイト全体のレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/brand/layout.jpg)
解説!
レイアウト構成は下記の通りです。
- div(#mainvisual)
- メインビジュアルのエリアを囲みます。
- header
- ロゴとグローバルナビゲーションを囲みます。
- main
- ConceptとWorkのコンテンツ全体を囲みます。
- footer
- コンテンツ下のfooter部分を囲みます。
mainとfooter全体を囲むdivは、横幅を設定するためのdivです。
各パーツのレイアウト構成
div(#mainvisual)
![メインビジュアルのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/brand/layout-mainvisual.jpg)
コーディングのヒント!
メインビジュアル全体をdivタグで囲み、マージンの設定を行います。
header
![ヘッダーのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/brand/layout-header.jpg)
コーディングのヒント!
- header
- ロゴとグローバルナビをFlexboxで横並びに配置します。
- ロゴ
- h1タグで記述します。
- グローバルナビ
- navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。
section(#concept)
![Conceptエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/brand/layout-concept.jpg)
コーディングのヒント!
エリア全体をsectionタグで囲み、画像とテキストエリアをFlexboxで横並びに配置します。
画像とテキストエリアの横幅はそれぞれ50%で設定し、テキストエリアのテキスト位置をpaddingで調整します。
- タイトル
- h2タグで記述します。
section(#work)
![Workエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/brand/layout-work.jpg)
コーディングのヒント!
レイアウトはConceptと同様で、画像とテキストの位置を入れ替えます。
CSSはConceptと共通のものを作成してみましょう。
スマホ時は、画像、テキストの順で縦に並べますが、そのまま縦に並べるとWorkだけテキストが上にきてしまうので、「flex-direction: column-reverse;」で並び順を逆にします。
footer
![フッターのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/brand/layout-footer.jpg)
コーディングのヒント!
フッター全体をfooterタグで囲みます。
ロゴとコピーライトをFlexboxで横並びに配置して両端で揃えます。