Skip to content

Instantly share code, notes, and snippets.

@ryosuke-endo
Forked from machida/html_practice.html
Last active September 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ryosuke-endo/74677604b328c2055fbf to your computer and use it in GitHub Desktop.
Save ryosuke-endo/74677604b328c2055fbf to your computer and use it in GitHub Desktop.
HTMLの練習(このレシピにマークアップをしてみましょう)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="誰でもできる美味しいカレーのレシピです">
<title>誰でもできる美味しいカレーのレシピ</title>
</head>
<body>
<header>
<h1>カレーのレシピ</h1>
</header>
<article>
<h2>誰でもできる、美味しいカレーの作り方です。</h2>
<p>旦那も息子もこのカレーが大好物。</p>
<p>ポイントは玉ねぎと人参はミキサーで細かくしてしまうところ。</p>
<p>逆に<strong>コクのある美味しいカレー</strong>になります。</p>
<table>
<caption>レシピの作者 山田サチ子さん</caption>
<thead>
<tr>
<th colspan="2" style="background:orange;">材料 ( 8皿分 )</th>
</tr>
</thead>
<tbody>
<tr>
<td>豚肉(薄切り) 300g</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>
<tr>
<td class="recipe" colspan="2" style="background:orange;">調味料</td>
</tr>
<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>
</tbody>
</table>
<h2>作り方</h2>
<ol>
<li>
材料を準備。
<ul>
<li>今回カレー粉</li>
<li>ジャワカレー辛口×こくまろカレー中辛</li>
</ul>
</li>
<li>
☆を2回に分けてフードプロセッサーにかけます。<br>
(人参だけだと、水分が出ないので必ず玉ねぎと一緒に)
</li>
<li>ジャガイモは角をとっておきます。(省略可能)</li>
<li>油をしいた鍋で豚肉を炒めます。</li>
<li>少し白くなってきたら、塩コショウをして炒め、更にお酒を加えて水気がなくなるまで炒めます。</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!</li>
<li>スパイスの効いた辛さの中に甘みのあるカレーです!</li>
<li>残った具は肉と小さなジャガイモのみ。</li>
<li>野菜嫌いでも快く食べられます!</li>
</ol>
<h2>ポイント</h2>
<ul>
<li>甘さと辛さの調節はコショウとハチミツで!コショウで辛口に、ハチミツで甘さとコクを出します。</li>
<li>焦げやすいので、まめにかき混ぜて下さい。ルウを入れた後はお水を足しながら緩さ調整して下さい。</li>
<li>あればりんご1/3を、2.に投入して下さい。</li>
</ul>
<h2>このレシピの生い立ち</h2>
<p>野菜嫌いなる主人、息子に野菜を食べてもらおうと、玉ねぎと人参はフードプロセッサーにかけ除けられないようにしたところ、これが我が家のカレーの定番になりました。
</article>
<aside>
<h2>コメント</h2>
<p>うちでも試してみました。とても美味しかったです。ありがとうございます。<br>
投稿者 岩鬼正美さん</p>
<p>うちの息子も野菜嫌いなのですが、このカレーは美味しく何度もおかわりしてました。<br>
投稿者 殿馬数人 </p>
</aside>
</body>
</html>
@machida
Copy link

machida commented Sep 17, 2015

image

インデントを揃えてくださいー。
あと、空行があったりなかったりするので、そこに意味のあるルールが必要です。
(例えば、article や aside などのブロックの間は空けて、pの後は開けないなど)
まずはこれらの修正をお願いします。

@ryosuke-endo
Copy link
Author

訂正ありがとうございます。

@machida
Copy link

machida commented Sep 23, 2015

@ryosuke-endo

インデントの修正ありがとうございます。

では、レビューの続きです。

css

image

HTMLに書くことはほとんどないので、消してしまって大丈夫です。
HTMLは意味に忠実にしなくてはいけないので、見た目は無視したほうがいいです。見た目に気を取られると正しいHTMLではなくなってしまうことが多いので、HTMLのプレビューはcssやJSを書くときは見る必要があるのですが、HTMLのときはプレビューはする必要はないです。
もしHTMLにcssを書く場合は、cssもheadの中身なので、それに合わせてインデントをしてください。

article

現状では、

  • 材料で一つのarticle
  • 作り方で一つのarticle
  • このレシピの生い立ち aside
  • コメント aside

となっています。

ここは解釈によって異なるのですが、解釈の一つの例として、材料と作り方とこのレシピの生い立ちがないとこの記事が成立しない、という解釈だと、材料と作り方とこのレシピの生い立ちで一つのarticleにします。

<article>
材料
作り方
生い立ち
</article>
<aside>
コメント
</aside>

作り方

ここも解釈によって異なるのですが、作り方は順番のあるリスト(order list => ol)で書くことが多いです。

はパラグラフ(段落)なので、作り方を一つの文章として解釈するならpでいいのですが、今回の場合は手順の工程の羅列なので、リストがいいかなーと思います。

<ol>
  <li>
    材料を準備。
    <ul>
      <li>今回カレー粉</li>
      <li>ジャワカレー辛口×こくまろカレー中辛</li>
    </ul>
  </li>
  <li>☆を2回に分けてフードプロセッサーにかけます。<br>
      (人参だけだと、水分が出ないので必ず玉ねぎと一緒に)</li>
  <li>ジャガイモは角をとっておきます。(省略可能)</li>
  以下略
</ol>


結構細かく br が使われてますが、今回のようなマークアップだけを行う場合は、そこまでbrを付けなくて大丈夫です。マークアップはそもそも文章のそれぞれの要素の意味の解釈をHTMLに反映させる作業です。br は意味よりも読みやすくするために見た目を整えるのに使われるので、cssを使って見た目を作るときに付けるで大丈夫です。

@ryosuke-endo
Copy link
Author

訂正ありがとうございます。

自分の勝手な思い込みで

      は同時に使えないと考えてたので、今回のような場合にすごく納得しました。
      HTMLのマークアップの考え方が、「ページの文章・構造に意味を持たせ、機械に理解させる」という役割だと思うのですが、それを「ホームページ上にかっこよく載せるためのソース」という風に考えている感じがしました。
      認識を変えるようにします。

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