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

コーディングのヒント!

header

ロゴとグローバルナビのグループとお問い合わせのボタンをFlexboxの両端揃えで横並びに配置します。

ロゴ

h1タグで記述します。

グローバルナビ

navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。

お問い合わせボタン

「display: inline-block;」を設定してから、widthとheightでボタンの横幅と高さを設定します。
スマホ表示の場合だけ非表示にするため、レスポンシブのCSSでボタンのクラスに対して「display: none;」を設定します。

コーディングのヒント!

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

コーディングのヒント!

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

タイトル

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

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

ニュース

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

解説!

コーディングのヒント!

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

画像

横幅は画面幅にあわせて変動するようパーセントで設定します。
画像の高さを固定して、「object-fit: cover;」を設定します。

テキストエリア

タイトルは、NEWSと同じです。
横幅と左右のpaddingは画面幅にあわせて変動するようパーセントで設定します。

コーディングのヒント!

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

タイトル

NEWSと同じです。

画像リスト

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

コーディングのヒント!

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

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

タイトル

NEWSと同じです。

テキストエリア

「position: absolute;」を設定して、左に配置します。
会社情報は、dl、dt、ddタグを使用します。
dt、ddタグはFlexboxで横並びに配置します。

画像

「position: absolute;」を設定して、右に配置します。

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

コーディングのヒント!

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