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

コーディングのヒント!

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

コーディングのヒント!

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

タイトル

サイトのタイトルをh1タグで記述します。

テキスト

pタグで記述します。

コーディングのヒント!

ul、liタグで記述して、Flexboxで横並びに配置します。
画像を全幅で均等に3枚並べるには、liタグのwidthにcalcを使うと便利です。
画像の高さを固定したまま、画面サイズに応じて画像を伸縮させるには、「object-fit: cover;」を使います。（※IEでは正しく動作しない為、注意が必要です。）

コーディングのヒント!

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

ボタン

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

コーディングのヒント!

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

SNSリンク

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

コピーライト

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