![](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/mainvisual-l.jpg)
【特別編】コーポレートサイト/レイアウト
目次
全体のレイアウト構成
![サイト全体のレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/site-layout.jpg)
解説!
サイドメニュータイプのコーポレートサイトです。
全体をdiv(.wrapper)で囲み、headerとdiv(.container)を横並びに配置します。
各パーツのレイアウト構成は下記の通りです。
- header
- ロゴとグローバルナビを囲みます。
- div
- メインビジュアルのエリアを囲みます。
- section(#news)
- Newsコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section(#service)
- Serviceコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section(#company)
- Companyコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section(#Work)
- Workコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section(#contact)
- Contactコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- footer
- コンテンツ下のfooter部分を囲みます。
各パーツのレイアウト構成
header
![ヘッダーのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/header-layout.jpg)
解説!
- ロゴ
- h1タグで記述します。
- グローバルナビ
- navタグで囲んだ中に、ul、liタグを使用して記述します。
メニューとSNSはそれぞれ別のurタグで囲みます。
div
![mainvisualエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/mainvisual-layout.jpg)
解説!
メインビジュアルのエリアです。CSSでmarginなどのレイアウト調整を行うために、全体をdivタグで囲みます。
news
![newsエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/news-layout.jpg)
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- ニュース
- ニュースエリア全体をdlタグで囲み、日付をdtタグ、ニュース内容をddタグで記述します。
service
![serviceエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/service-layout.jpg)
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- サービス
- サービス内容のエリアをul、liタグで記述します。ulタグにflexboxを指定することで横並びに配置します。
company
![companyエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/company-layout.jpg)
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- 会社内容
- 会社内容のエリア全体をdlタグで囲み、項目をdtタグ、内容をddタグで記述します。dlタグにflexboxを指定することで、dtタグとddタグを横並びに配置します。
work
![workエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/work-layout.jpg)
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- 作品リスト
- 作品リストのエリアをul、liタグで記述します。liタグにflexboxを指定することで、中の画像とテキストを横並びに配置します。
contact
![contactエリアのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/contact-layout.jpg)
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- フォーム
- フォームエリア全体をformタグで囲み、フォーム内のラベルと入力フィールドをそれぞれdtタグ、ddタグで記述します。
footer
![フッターのレイアウト構成](https://code-jump.com/wpcj/wp-content/themes/code-jump/img/html/corporate/footer-layout.jpg)
解説!
- footer
- フッター全体をfooterタグで囲みます。
- コンテンツ
-
フッター内のコンテンツ全体をdivタグで囲み、その中の3つのコンテンツもそれぞれdivタグで囲みます。
外側のdivタグにflexboxを指定することで、中の3つのコンテンツを横並びに配置します。