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

目次

全体のレイアウト構成

サイト全体のレイアウト構成

解説!

レイアウト構成は下記の通りです。

main
コンテンツのメインエリア全体を囲みます。
div(#mainvisual)
メインビジュアルのエリアを囲みます。
div(タイトル、テキスト)
タイトルとテキストのエリアを囲みます。
ul、li(画像の横並び)
画像のエリアを囲みます。
div(ボタン)
ボタン全体を囲みます。
footer
コンテンツ下のfooter部分を囲みます。

各パーツのレイアウト構成

div(#mainvisual)

メインビジュアルのレイアウト構成

コーディングのヒント!

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

div(タイトル、テキスト)

タイトル、テキストエリアのレイアウト構成

コーディングのヒント!

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

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

ul、li(画像の横並び)

レシピ画像横並びのレイアウト構成

コーディングのヒント!

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

div(ボタン)

ボタンのレイアウト構成

コーディングのヒント!

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

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

コーディングのヒント!

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

SNSリンク
ul、liタグで記述して、Flexboxで横並びに配置します。
コピーライト
コピーライトをpタグで記述します。

コーディング練習メニューに戻る

Codejump

著者:Codejump運営者

X
Webサイト制作を学んでいく人、将来Webに関わる仕事をしていく人のために、役に立つ情報や学習コンテンツを提供していきます。
運営者情報

おすすめの記事

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】かんたんなHTML、CSSでできるシンプルな練習サイト

【中級編】かんたんなHTML、CSS、JavaScript(jQuery)を使用した複数ページの練習サイト

【上級編】少し複雑な HTML&CSS&JavaScript(jQuery)を使用した様々なレイアウトの練習サイト

【応用編】複雑なHTML&CSS&JavaScript(jQuery)を使用した動きのある練習サイト

【番外編】Webサイト制作でよく使うHTML、CSS、JavaScript(jQuery)を練習