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

目次

全体のレイアウト構成

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

解説!

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

main
コンテンツのメインエリア全体を囲みます。
div(画像とテキスト)
画像とテキストを横並びに配置するため、全体をdivタグで囲みます。
div(ボタン)
ボタン全体を囲みます。
footer
コンテンツ下のfooter部分を囲みます。

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

div(画像)

画像のレイアウト構成

コーディングのヒント!

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

div(テキスト)

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

コーディングのヒント!

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

タイトル
ページタイトルのレシピ名をh1タグ、各リストのタイトルをh2タグで記述します。
材料
dl、dt、ddタグで記述します。
dtとddタグはFlexboxで横並びに配置します。
リストは点線で区切ります。
作り方
ol、liタグで記述します。
リストは点線で区切ります。

div(ボタン)

ボタンのレイアウト構成

コーディングのヒント!

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

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

コーディングのヒント!

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

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

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

他のコーディング練習にチャレンジする

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

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

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習

リクエスト受付中
【プレゼント特典あり】

当サイトを利用いただき誠にありがとうございます。

皆様の学習がより良いものになるよう、日々サイトの改善に努めております。

利用してみて、「分かりづらい、もっとこうしたほうが良い」という点、「こんな学習内容があればいいのに」というリクエストをお送りください。

特典としまして、当サイトでは公開していない追加の学習コンテンツをご案内させいただきます。

【プレゼント特典】

【特別編】コーポレートサイト/サイドメニュータイプ

学習内容は以下の通りです。

  • ・デモサイト
  • ・レイアウト構成解説
  • ・ソースコード

下記、アンケートフォームでご入力いただいたメールアドレスへ、学習ページのURLをお送りさせていただきます。

※メールが届かない場合、メールアドレスの入力間違いか、迷惑メールへ振り分けられている可能性がありますのでご確認ください。

    【アンケートフォーム】

    ※学習に関するご質問につきましては、質問箱からお願いいたします。

    (※学習コンテンツのURL送付以外の目的で使用いたしません。)