クックパッド風レシピページを構成しよう（所要時間の目安: 15〜20分）

要件

本書で学習をした、HTML要素の知識を使い、クックパッド風のレシピページを構成してみましょう。

完成見本は以下です。

スターターフォルダを、以下よりダウンロードして取り組んでください。

スターターフォルダ名は、「lesson1-cookpad-starter」です。

スターターフォルダ

以下の項目をヒントに取り組みましょう。

1. まずHTMLの宣言文を含めましょう
2. html要素、head要素、body要素の順で、用意をしましょう
3. head要素内には、metaタグ、title要素などの情報が入ります
4. ブラウザに表示をさせたいコンテンツは、body要素内の範囲に書きます
5. セマンティクスタグで、全体のざっくりとした構造の雛形を作りましょう
6. class属性を使い、同じ要素同士でも、区別がつくように工夫しましょう
7. 画像の読み込みには、相対パスを使いましょう
8. ブロック要素とインライン要素の違いを意識しましょう
9. 材料名と量、「作り方」の箇所には、table要素を使用しましょう