次のような三部構成にします。
(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;
}