Skip to content

Instantly share code, notes, and snippets.

@matt-note
Forked from machida/html_practice.html
Last active June 19, 2018 14:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matt-note/f2649cec671032a087d94f733bba01f2 to your computer and use it in GitHub Desktop.
Save matt-note/f2649cec671032a087d94f733bba01f2 to your computer and use it in GitHub Desktop.
HTMLの練習(このレシピにマークアップをしてみましょう)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTMLの課題</title>
</head>
<body>
<article>
<h1>カレーのレシピ</h1>
<p>
誰でもできる、美味しいカレーの作り方です。旦那も息子もこのカレーが大好物。
</p>
<p>
ポイントは玉ねぎと人参はミキサーで細かくしてしまうところ。逆にコクのある美味しいカレーになります。
</p>
<dl>
<dt>レシピの作者</dt>
<dd>山田サチ子さん</dd>
</dl>
<h2>材料 ( 8皿分 )</h2>
<ul>
<li>豚肉(薄切り) 300g</li>
<li>じゃがいも(中) 4個</li>
<li>☆玉ねぎ 2個</li>
<li>☆人参(中) 1本半</li>
<li>☆にんにく 2個</li>
<li>ローリエ 2枚</li>
<li>市販のカレー粉(2種類合わせて)1箱分</li>
</ul>
<h3>調味料</h3>
<ul>
<li>ガラムマサラ 大2</li>
<li>こしょう 小1</li>
<li>ハチミツ 大4</li>
<li>中濃ソース 大1</li>
</ul>
<h2>作り方</h2>
<ol>
<li>材料を準備。
今回カレー粉
ジャワカレー辛口×こくまろカレー中辛
</li>
<li>
☆を2回に分けてフードプロセッサーにかけます。
(人参だけだと、水分が出ないので必ず玉ねぎと一緒に)
</li>
<li>
ジャガイモは角をとっておきます。
(省略可能)
</li>
<li>
油をしいた鍋で豚肉を炒めます。
少し白くなってきたら、塩コショウをして炒め、更にお酒を加えて水気がなくなるまで炒めます。
</li>
<li>
鍋に
2.を加え少し色が変わってきたら塩コショウします。
</li>
<li>
水分がある程度飛ぶまで炒めます。
(結構時間がかかります)
</li>
<li>そこに3.のジャガイモを取った角ごと入れ、簡単に火を通します。</li>
<li>水を加えます。ついでに、フードプロセッサーもキレイに!</li>
<li>鍋に水とローリエを加え焦げないよう、たまにかき混ぜながら20〜30分中火→弱火で煮ます。</li>
<li>火を止めてカレールウを入れて混ぜ、再度火をつけます。
(底が焦げ易いので、マメにかき混ぜて下さい)</li>
<li>
10分位煮立て、更に●を入れて10分位煮込みます。
※こしょうは最初少なめに入れ、辛さ調整しながら徐々に足していきます。
</li>
<li>
味が整ったら火を消し完成。
※この時点で多少スパイスがキツくても、置いておけばマイルドになっているので大丈夫です!
</li>
<li>
食べる前に再度火を通せばOK!
スパイスの効いた辛さの中に甘みのあるカレーです!
</li>
<li>
残った具は肉と小さなジャガイモのみ。
野菜嫌いでも快く食べられます!
</li>
</ol>
<h3>ポイント</h3>
<p>
甘さと辛さの調節はコショウとハチミツで!コショウで辛口に、ハチミツで甘さとコクを出します。
焦げやすいので、まめにかき混ぜて下さい。ルウを入れた後はお水を足しながら緩さ調整して下さい。
あればりんご1/3を、2.に投入して下さい。
</p>
<h3>このレシピの生い立ち</h3>
<p>
野菜嫌いなる主人、息子に野菜を食べてもらおうと、玉ねぎと人参はフードプロセッサーにかけ除けられないようにしたところ、これが我が家のカレーの定番になりました。
</p>
<h2>コメント</h2>
<p>うちでも試してみました。とても美味しかったです。ありがとうございます。</p>
<dl>
<dt>投稿者</dt>
<dd>岩鬼正美さん</dd>
</dl>
<p>うちの息子も野菜嫌いなのですが、このカレーは美味しく何度もおかわりしてました。</p>
<dl>
<dt>投稿者</dt>
<dd>殿馬数人</dd>
</dl>
</article>
</body>
</html>
@matt-note
Copy link
Author

matt-note commented Jun 18, 2018

バリデーションをクリアしました。
screenshot from 2018-06-18 23-12-59

@matt-note
Copy link
Author

最初、section要素を多めに入れたところ、warning が出現。訂正してクリアできたようです。
screenshot from 2018-06-18 23-03-05

@matt-note
Copy link
Author

「コメント」の文字を h2 要素にしたのは、クックパッドのつくれぽの文字部分が h2 だったためで、それを参考にしました。

@matt-note
Copy link
Author

再提出です。ご指摘の点を修正して、バリデーションができました。
screenshot from 2018-06-19 23-26-06

@matt-note
Copy link
Author

修正点:

  • h2 タグへの変更
  • ul, ol タグを使用したリスト化
  • dl タグを使用した定義リスト化

それぞれ文書構造に対応しました。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment