【レイアウト構成】入門編：ブランドサイト（ジュエリー）／1カラム

コーディングのヒント!

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

コーディングのヒント!

header

ロゴとグローバルナビをFlexboxで横並びに配置します。

ロゴ

h1タグで記述します。

グローバルナビ

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

コーディングのヒント!

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

タイトル

h2タグで記述します。

コーディングのヒント!

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

コーディングのヒント!

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