HTML 本文（main body <div class="main"></div>）の構成例

次のような三部構成にします。

(div class="copy-container")(/div)　　　①見出し

(div class="contents")(/div)　　　　　　②詳しい説明

(div class="contact-form")(/div)　　　　③問合せフォーム

 

➀　見出し

----- HTML -----

(h1)ようこそ(span)弁当屋(/span)へ(h1)　　　　　　見出し

(h2)地元食材を使った安心弁当を食べよう(/h2)　　　小見出し

----- CSS -----

.copy-container h1 {
　　　font-size:140px;
}

.copy-container h2 {
　　　font-size:60px;
}

.copy-container span {　　　　　　　　　　　　　　(span)で囲った文字色の変更
　　　color:#ff4a4a;

}

②　詳しい説明

----- HTML -----

(h3 class="section-title") 選べるメニュー (/h3)

(div class="contents-item")

　　(img src="https://...")　　　画像貼り付け

　　(p) カレー (/p)　　　　　　メニュー表示

　　(img src="https://...")

　　(p) 焼肉 (/p)

　　(img src="https://...")

　　(p) ラーメン (/p)

(/div)

----- CSS -----

.contents {
height:500px;
}

.section-title {　　　　　　　　　　　　　　　「選べるメニュー」に下線を入れる
border-bottom: 2px solid #dee7ec;
}
.contents-item {　　　　　　　　　　　　　　　メニューをヨコ並び・左詰めにする
float:left;
}

③問合せ

----- HTML -----

(div class="contact-form")
        (h3 class="section-title")お問い合わせ(/h3)
        　　　(p)メールアドレス（必須）(/p)
        　　　(input)　　　　　　　　　　　　　　　　　入力欄
        　　　(p)お問い合わせ内容（必須）(/p)
        　　　(textarea)(/textarea)　　　　　　　　　　　入力欄
        　　　(p)※必須項目は必ずご入力ください(/p)
        　　　(input class="contact-submit" type="submit" value="送信")　　送信ボタン
(/div)

----- CSS -----

input, textarea {
  　　width: 400px;
  　　margin-top:10px;　　　　　外側余白
  　　margin-bottom:30px;
  　　padding:20px;　　　　　　内側余白
  　　font-size:18px;
  　　border:1px solid #dee7ec;
}