ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

メニューページの組み立て[後編]

飲み物メニューを作成しよう

食事メニューの作成が完了したので、続いて飲み物メニューの作成を行いましょう。
手順は先程の食事メニューと一緒で、入力する文言が異なります。

見出しの挿入

まずは「飲み物メニュー」の見出しを挿入しましょう。

「お食事メニュー」の </section> の下に、 <h4>お飲み物</h4> を入力します。

<h4>お飲み物</h4>
[HTMLの記述例]
見出しの入力

これで見出しの入力は完了です。

商品画像の挿入

次は商品画像の挿入を行いましょう。

「お食事メニュー」と同じように、「minibox」スタイルを使って画像を表示させます。
さきほど入力した <h4>お飲み物</h4> の下に、以下のコードを入力しましょう。

<div class="minibox"><a href="../img/drink01.jpg" target="_blank"><img src="../img/drink01_min.jpg" alt="挽きたて珈琲"></a></div>
[HTMLの記述例]
ソースコードの入力図

お食事メニューの時と同じ要領で、残りのメニューを作成しましょう。
「カプチーノ」「グレープフルーツジュース」「天然ハーブティー」のコードを入力します。

<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>

[HTMLの記述例]
残りメニューのソースコード

すべて入力が完了したら間違いがないか確認し、ファイルを保存しましょう。

説明文とclearの挿入

最後に説明文を追加し、「minibox」で指定しているfloatを解除しましょう。

回り込みを解除しよう

ここでも回りこみを解除しておかないと、レイアウトが崩れてしまいます。
しっかりと解除しておきましょう!

<p class="clear">ホッと一息。リフレッシュしたいときや食後、お食事と一緖にお飲み物はいかがですか?画像をクリックすると、別ウィンドウで拡大表示されます。</p>
[HTMLの記述例]
説明文の入力図

文書構造要素の入力

最後にセクション要素を追加しましょう。
<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>

[HTMLの記述例]
section要素の追加範囲

それともう1つ、<section>を追加しましょう。

<div class="contentsbox"> </div> を <section>で囲みます。

[HTMLの記述例]
section要素の追加範囲

入力した内容に間違いがないか確認し、問題がなければ保存を行いましょう。

覚えておきたいポイント

入力する場所を間違えないように

入力するコードも多く、section要素の追加もあるので、よくよく確認しながら作業を行いましょう。

クリックして確認しよう

飲み物メニューの画像をクリックし、拡大画像が表示されるか確認しましょう。
もし表示されなかったり、別ウィンドウで開かない場合は入力ミスの可能性があります。

ブラウザで確認しよう

以上で「menu.html」ページの完成です!
キチンと入力できているかどうか、ブラウザで確認してみましょう。

[ブラウザでの表示例]
ブラウザでの表示図

問題がなければ、次は「kodawari.html」の作成を行いましょう!

覚えておきたいポイント

お手本通りに表示されない場合

デザインが崩れてしまう場合、多くは回り込みを解除していなかったり、ちょっとした入力ミス(スペルミス)の場合がほとんどです。

こだわりページの確認
« 前のページへ メニューページの組み立て[前編]

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。