HTMLスキル - 第6章 チャレンジ

テキスト系タグを使った、カフェメニューページを作ろう!(解説)

テキスト系タグを使った、カフェメニューページを作ろう!

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

テキスト系のHTMLタグを利用して、カフェのメニューページを作成してみよう。



チャレンジ内容

・適切なタグの記述ができるかどうか
・見出しタグの使い方を理解しているかどうか
・リストタグの使い方を理解していかどうか



文章に必要なタグを書いていこう


今回のチャレンジは、見本を見ながら、テキストに必要なタグを記述してマークアップしていきましょう。
Webサイトのタイトルですでに<h1>が使われているので、コンテンツの見出しは<h2>で囲んでいきましょう。



<h2>Drink Menu</h2>

<h2>Ranking</h2>


次に、見出しの下の説明文を<p>タグで囲んでいきましょう。


<h2>Drink Menu</h2>
<p>当店では、100%カカオを使用したノンカフェインチョコレートドリンクをご用意しています。</p>

<h2>Ranking</h2>
<p>当店の人気メニューランキングです。</p>



cafeメニューは見出し3になるので、<h3>で囲み、その下の説明文は<p>タグで囲みます。
また、メニューとメニューの間には区切り線がついているので、その部分に<hr>タグを入れましょう。



<h3>チョコレートドリンク</h3>
<p>ほどよい甘さのチョコレートドリンクです。</p>
<hr>

<h3>ココア</h3>
<p>ほっと一息、ノンカフェインココアです</p>
<hr>

<h3>オーガニック珈琲</h3>
<p>オーガニック焙煎豆を使用した、ノンカフェイン珈琲です</p>
<hr>

<h3>ミルクチョコ</h3>
<p>チョコレートドリンクよりもミルクがたっぷり入っています。</p>
<hr>

<h3>抹茶ココア</h3>
<p>抹茶オレとココアをミックスさせました</p>
<hr>

<h3>黒豆チョコレート</h3>
<p>黒豆とチョコレートの甘さが絶妙にマッチ!</p>




最後に、ランキングの作成をしましょう。
ランキングの文章を<li>タグで囲んでください。
リストの前に数字を表示させたいので、<ul>タグではなく<ol>タグを使います。


<ol>
<li>黒豆チョコレート</li>
<li>抹茶ココア</li>
<li>ミルクチョコ</li>
</ol>




このようなcafeメニューが出来上がりました。