【レイアウト構成】入門編：レシピサイト／レシピページ

コーディングのヒント!

画像全体をdivタグで囲み、横幅の設定を行います。
画像には、高さの設定と画面幅を変更した際に拡大縮小させるためのCSSの設定を行います。

コーディングのヒント!

エリア全体をdivタグで囲み、横幅とpaddingを設定します。

タイトル

ページタイトルのレシピ名をh1タグ、各リストのタイトルをh2タグで記述します。

材料

dl、dt、ddタグで記述します。
dtとddタグはFlexboxで横並びに配置します。
リストは点線で区切ります。

作り方

ol、liタグで記述します。
リストは点線で区切ります。

コーディングのヒント!

エリア全体をdivタグで囲み、中央寄せに設定します。

ボタン

aタグで記述します。
ボタンに幅と高さを持たせるために「display: inline-block;」を設定します。
横幅と高さは、widthとheightを使うか、またはpaddingで調整してもOKです。

コーディングのヒント!

フッター全体をfooterタグで囲みます。

SNSリンク

ul、liタグで記述して、Flexboxで横並びに配置します。

コピーライト

コピーライトをpタグで記述します。