【レイアウト構成】入門編：フォトサイト／1カラム

コーディングのヒント!

ヘッダー全体をheaderタグで囲みます。
ロゴをh1タグで記述します。

コーディングのヒント!

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

コーディングのヒント!

エリア全体をsectionタグで囲み、背景を白に設定します。
中のコンテンツ部分をdivタグで囲み、横幅を600pxに設定して中央に配置します。

タイトル

h2タグで記述します。

Indexリスト

番号付きのリスト、ol、liタグを使用します。
ちなみに、順序性のない箇条書きの場合は、ul、liタグを使用します。

コーディングのヒント!

エリア全体をsectionタグで囲みます。
中のコンテンツ部分をdivタグで囲み、横幅を600pxに設定して中央に配置します。

タイトル

h2タグで記述します。

画像とテキストエリアの横並び

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

著者、出版社、発行年

dl、dt、ddタグを使用します。
dtタグとddタグは、Flexboxで横並びに配置します。

コーディングのヒント!

フッター全体をfooterタグで囲みます。
コピーライトをpタグで記述します。