食事メニューの作成が完了したので、続いて飲み物メニューの作成を行いましょう。
手順は先程の食事メニューと一緒で、入力する文言が異なります。
見出しの挿入
まずは「飲み物メニュー」の見出しを挿入しましょう。
「お食事メニュー」の </section> の下に、 <h4>お飲み物</h4> を入力します。
これで見出しの入力は完了です。
商品画像の挿入
次は商品画像の挿入を行いましょう。
「お食事メニュー」と同じように、「minibox」スタイルを使って画像を表示させます。
さきほど入力した <h4>お飲み物</h4> の下に、以下のコードを入力しましょう。
お食事メニューの時と同じ要領で、残りのメニューを作成しましょう。
「カプチーノ」「グレープフルーツジュース」「天然ハーブティー」のコードを入力します。
<div class="minibox"><a href="../img/drink02.jpg" target="_blank"><img src="../img/drink02_min.jpg" alt="カプチーノ"></a></div>
<div class="minibox"><a href="../img/drink03.jpg" target="_blank"><img src="../img/drink03_min.jpg" alt="グレープフルーツジュース"></a></div>
<div class="minibox"><a href="../img/drink04.jpg" target="_blank"><img src="../img/drink04_min.jpg" alt="天然ハーブティー"></a></div>
すべて入力が完了したら間違いがないか確認し、ファイルを保存しましょう。
説明文とclearの挿入
最後に説明文を追加し、「minibox」で指定しているfloatを解除しましょう。
ここでも回りこみを解除しておかないと、レイアウトが崩れてしまいます。
しっかりと解除しておきましょう！
文書構造要素の入力
最後にセクション要素を追加しましょう。
<h4>お飲み物</h4> から<p class="clear">～～</p>までを <section> で囲みます。
<section>
<h4>お飲み物</h4>
<div class="minibox"><a href="../img/drink01.jpg" target="_blank"><img src="../img/drink01_min.jpg" alt="挽きたて珈琲"></a></div>
<div class="minibox"><a href="../img/drink02.jpg" target="_blank"><img src="../img/drink02_min.jpg" alt="もこもこカフェラテ"></a></div>
<div class="minibox"><a href="../img/drink03.jpg" target="_blank"><img src="../img/drink03_min.jpg" alt="グレープフルーツジュース"></a></div>
<div class="minibox"><a href="../img/drink04.jpg" target="_blank"><img src="../img/drink04_min.jpg" alt="天然ハーブティー"></a></div>
<p class="clear">ホッと一息。リフレッシュしたいときや食後、お食事と一緖にお飲み物はいかがですか？画像をクリックすると、別ウィンドウで拡大表示されます。</p>
</section>
それともう１つ、<section>を追加しましょう。
<div class="contentsbox"> </div> を <section>で囲みます。
[HTMLの記述例]
入力した内容に間違いがないか確認し、問題がなければ保存を行いましょう。
覚えておきたいポイント
入力する場所を間違えないように
入力するコードも多く、section要素の追加もあるので、よくよく確認しながら作業を行いましょう。
クリックして確認しよう
飲み物メニューの画像をクリックし、拡大画像が表示されるか確認しましょう。
もし表示されなかったり、別ウィンドウで開かない場合は入力ミスの可能性があります。
