【練習】HTMLマークアップをしてみよう

この記事では実際にHTMLマークアップをしていきます。

マークアップで大切なことは、与えられた情報から「見出し」や「段落」などを読み解いて正しい文書構造でマークアップすることです。

今回は、Webページの原稿をもとに練習をます。

見出しタグや段落タグと聞いてそれって何？となった方はこちらの記事で復習してから練習問題を解いてみましょう。

練習1

以下の文章をマークアップしてみましょう。

皆さんできましたか？上記の文章をマークアップすると以下のようになります。

答え

<h1>コーヒーについて</h1>
<p>コーヒーは、コーヒー豆を焙煎し、挽いたものをお湯で抽出した飲み物です。世界中で愛されているコーヒーは、その豊かな風味と香り、そして覚醒効果のあるカフェインが含まれていることから、多くの人々の日常に欠かせない飲み物となっています。</p>

解説

「コーヒーについて」はその後に続く文章の見出しとなるため、hタグを使用します。 h1~h6まである見出しタグの中でどれを使用するべきかについては、今回の場合は初めて見出しが出てくるのでh1タグを使用します。

練習2

以下の文章をマークアップしてみましょう。

答え

<h1>コーヒー豆の種類</h1>
<p>コーヒー豆には、主にアラビカ種とロブスタ種の2つの種類があります。</p>
<h2>アラビカ種</h2>
<p>味わいが豊かで酸味があり、繊細な風味が特徴です。高地で栽培され、気候の変動に敏感です。</p>
<h2>ロブスタ種</h2>
<p>苦味が強く、カフェイン含有量が高いのが特徴です。低地で栽培され、病害に強いという利点があります。</p>

解説

今回の例題は、1つ目の例題から少し応用して、見出しの使い分けがポイントです。 「コーヒー豆の種類」という大きな見出しの中に「アラビカ種」「ロブスタ種」と小見出しが2つという構成が例題の文章から読み取ることが重要です。

練習3

以下の文章をマークアップしてみましょう。

答え

<h1>ドリップコーヒーの淹れ方</h1>
<p>ドリップコーヒーは、手軽に美味しいコーヒーを楽しむための代表的な方法です。以下の手順に従って、ぜひお試しください。</p>
<h2>材料と道具</h2>
<ul>
  <li>コーヒー豆（中挽き）20g</li>
  <li>お湯 300ml</li>
  <li>ドリッパー</li>
  <li>ペーパーフィルター</li>
  <li>サーバーまたはカップ</li>
</ul>
<h2>手順</h2>
<ol>
  <li>お湯を準備する: 90～96度のお湯を用意します。沸騰したお湯を少し冷ますとこの温度になります。</li>
  <li>フィルターをセット: ドリッパーにペーパーフィルターをセットし、サーバーやカップに置きます。</li>
  <li>コーヒー粉を入れる: フィルターに中挽きのコーヒー粉を入れ、平らにならします。これにより、お湯が均等に行き渡り、ムラなく抽出できます。</li>
  <li>蒸らし: お湯を少量注ぎ、30秒間蒸らします。コーヒーの粉全体にお湯を行き渡らせることで、均一な抽出が可能になります。</li>
  <li>お湯を注ぐ: 中心から外側に向かって、ゆっくりと円を描くようにお湯を注ぎます。</li>
</ol>

解説

今回の例題では、リストのタグを使用しています。 順番のないulタグと、順番のあるolタグの使い分けが大切です。

まとめ

この記事では基本的なマークアップの練習を通して、正しい文書構造でマークアップすることを練習しました。与えられた情報（今回は原稿）から正しい構造を理解してそれを適切にマークアップすることがWeb制作において非常に大切です。