Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

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

machida commented Dec 14, 2015

  • タイトルの下に空行があったりなかったりするので、統一するようにしてください。
  • tableの中、<td>豚肉(薄切り)</td> は <th></th> のほうがいいです。

今回は必要ないですが、場合によっては table の中に tbodyなど、ブロックで区切る場合があります(省略可)。
http://www.htmq.com/html5/tbody.shtml ここに詳しく書いてあります。
ついでにこれも参考にしておいてください。

あと、
http://taghtml.com/htmlref/abbr.html
abbr というタグがあるのですが、☆にんにくの☆をabbrで囲うと親切かも。

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