【レイアウト構成】初級編:コーポレートサイト/1カラム

目次

全体のレイアウト構成

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

解説!

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

header
ロゴ、グローバルナビ、お問い合わせボタンを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div(#mainvisual)
メインビジュアルのエリアを囲みます。
section(#news)
Newsコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#about)
Aboutコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#business)
Businessコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#company)
Companyコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。

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

header

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

コーディングのヒント!

header
ロゴとグローバルナビのグループとお問い合わせのボタンをFlexboxの両端揃えで横並びに配置します。
ロゴ
h1タグで記述します。
グローバルナビ
navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。
お問い合わせボタン
「display: inline-block;」を設定してから、widthとheightでボタンの横幅と高さを設定します。
スマホ表示の場合だけ非表示にするため、レスポンシブのCSSでボタンのクラスに対して「display: none;」を設定します。

div(#mainvisual)

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

コーディングのヒント!

画像の高さを画面下にあわせるために、heightに100vhを指定するのですが、ヘッダーの高さの80px分だけはみ出てしまうためマイナスします。
高さを固定したまま画像を拡大縮小させるため、「object-fit: cover;」を使用します。

section(#news)

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

コーディングのヒント!

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

タイトル

タイトル全体をh2タグで囲みます。
英語と日本語のタイトルをそれぞれspanタグで囲みフォントやマージンの設定を行います。縦に並べるためブロック化するのがポイントです。
下線は、疑似要素(after)を使用します。

※spanタグの使い方やdivタグとの使い分けについては、「divタグとspanタグの違いと使い分けについて」で詳しく解説しています。

ニュース
ニュースはul、liタグを使用してFlexboxで横並びに配置します。
間の罫線はborderで設定しますが、中の2つだけになるよう疑似クラスを使用して工夫します。
日付はtimeタグを使用してコーディングしてみましょう。

section(#about)

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

解説!

コーディングのヒント!

エリア全体をsectionタグで囲み、画像とテキストエリアを横並びに配置します。

画像
横幅は画面幅にあわせて変動するようパーセントで設定します。
画像の高さを固定して、「object-fit: cover;」を設定します。
テキストエリア
タイトルは、NEWSと同じです。
横幅と左右のpaddingは画面幅にあわせて変動するようパーセントで設定します。

section(#business)

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

コーディングのヒント!

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

タイトル
NEWSと同じです。
画像リスト
スマホのレイアウトを確認すると左のブロックから順に1列に並んでいるため、左右のブロックをそれぞれdivで囲み、Flexboxで横並びに配置します。
スマホ時は「flex-direction: column;」で、このブロックを縦に並べます。
このように変則的な画像の並び方をしている場合は、PCとスマホ両方のレイアウトを確認してからdivのグルーピングを考えると手戻りがなくなります。

section(#company)

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

コーディングのヒント!

エリア全体をsectionタグで囲み、「position: relative;」を設定します。

positionプロパティの使い方については、「【CSS】positionプロパティの使い方について」で詳しく解説しています。

タイトル
NEWSと同じです。
テキストエリア
「position: absolute;」を設定して、左に配置します。
会社情報は、dl、dt、ddタグを使用します。
dt、ddタグはFlexboxで横並びに配置します。
画像
「position: absolute;」を設定して、右に配置します。

スマホ表示の際は、「position: static;」を設定して、relativeとabsoluteを解除します。

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

コーディングのヒント!

フッター全体をfooterタグで囲み、背景を白色に設定します。
内側をdivタグで囲み、ロゴと会社情報を両端揃えの横並びに配置します。
コピーライトをpタグで記述します。

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

おすすめの記事

関連記事

コーディング練習一覧

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

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

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

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

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