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

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

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

メインコンテンツを作成しよう

必要なスタイルも揃ったので、「menu.html」を組み立てて完成させましょう!
入力する項目が多いので、前編と後編に分けて説明しています。

まずは「menu.html」を開きましょう。

「contentsbox」の挿入

「menu.html」を開いたら、「メインコンテンツのスタイル」で作成した「contentsbox」を挿入しましょう。

<div id="contents"></div>の間に <div class="contentsbox"></div>を入力します。

<div id="contents">

<div class="contentsbox">
</div>

</div>

[HTMLの記述例]
contentsboxの挿入

入力が完了したら、一度保存しておきましょう。

見出しと食事メニューの作成

次は見出しと食事メニューを作成しましょう。
「メニュー」と「お食事」の内容を入力します。

step.1

まずは<div class="contentsbox">の下に <h3 class="midashi">メニュー</h3>を入力しましょう。
この「midashi」も「メインコンテンツのスタイル」で作成したスタイルです。

<div id="contents">

<div class="contentsbox">
<h3 class="midashi">メニュー</h3>

</div>

</div>

step.2

次に、食事メニューの見出しを入力します。
<h3 class="midashi">メニュー</h3>の下に <h4>お食事</h4> を入力しましょう。

<div id="contents">

<div class="contentsbox">
<h3 class="midashi">メニュー</h3>

<h4>お食事</h4>

</div>

</div>

step.3

<h4>お食事</h4> の下に、食事メニューを作成しましょう。
前のページで作成した「minibox」スタイルを使い、商品画像とリンク先を設定します。

<h4>お食事</h4>
<div class="minibox"><a href="../img/food01.jpg" target="_blank"><img src="../img/food01_min.jpg" alt="ホットケーキ"></a></div>

<div class="minibox">でスタイルを呼び出し、<a href="../img/food01.jpg" target="_blank">で拡大用画像にリンクを設定します。target="_blank"で別ウィンドウで開くように指定できます。

<img src="../img/food01_min.jpg" alt="ホットケーキ">で小さい画像を表示し、最後に </a></div> で閉じます。

[HTMLの記述例]
見出しと食事メニューの入力図

step.4

このコードをあと3つ作成し、すべての食事メニューが表示できるようにしましょう。
上記と同じ要領で、残りのメニューを入力します。

<div class="minibox"><a href="../img/food02.jpg" target="_blank"><img src="../img/food02_min.jpg" alt="カリカリシュー"></a></div>

<div class="minibox"><a href="../img/food03.jpg" target="_blank"><img src="../img/food03_min.jpg" alt="とろ~りチーズピザ"></a></div>

<div class="minibox"><a href="../img/food04.jpg" target="_blank"><img src="../img/food04_min.jpg" alt="有機野菜サラダ"></a></div>

[HTMLの記述例]
ソースコードの入力例

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

説明文とclearの挿入

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

floatを解除しよう

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

さきほど入力した「有機野菜サラダ」のソースコードの下に、以下のコードを入力します。

<p class="clear">すべて手作り!おいしいメニューを取り揃えました。画像をクリックすると、別ウィンドウで拡大表示されます。</p>
[HTMLの記述例]
説明文のソースコード入力図

文書構造要素の入力

最後に文書構造要素を追加しましょう。
<h4>お食事</h4>から<p class="clear">~~</p>までを <section> で囲みます。

<section>
<h4>お食事</h4>
<div class="minibox"><a href="../img/food01.jpg" target="_blank"><img src="../img/food01_min.jpg" alt="ホットケーキ"></a></div>

<div class="minibox"><a href="../img/food02.jpg" target="_blank"><img src="../img/food02_min.jpg" alt="カリカリシュー"></a></div>

<div class="minibox"><a href="../img/food03.jpg" target="_blank"><img src="../img/food03_min.jpg" alt="とろ~りチーズピザ"></a></div>

<div class="minibox"><a href="../img/food04.jpg" target="_blank"><img src="../img/food04_min.jpg" alt="有機野菜サラダ"></a></div>

<p class="clear">すべて手作り!おいしいメニューを取り揃えてました。画像をクリックすると、別ウィンドウで拡大表示されます。</p>
</section>

[HTMLの記述例]
文書構造要素の入力図

これでひとまず、お食事メニューの完成です。
ここで一度、保存してブラウザで確認してみましょう。

覚えておきたいポイント

こまめに保存しよう

メニューページは前編と後編にわけて作成します。入力する項目が多いので、こまめに保存を行いましょう。
保存する際は「UTF-8N」を指定するのを忘れないようにしましょう。

ブラウザで確認しよう

ここまでの内容をブラウザで確認し、間違いがないか確かめましょう。
問題がなければ、以下のように表示されます。

[ブラウザでの表示例]
ブラウザで表示した画像

メニュー画像をクリックして、拡大画像が表示されるかも確認してください。

問題なく表示されたでしょうか?
OKであれば、次のページで飲み物メニューを入力し、「menu.html」を完成させましょう!

覚えておきたいポイント

動作も確認しよう

デザインの確認だけでなく、実際にメニュー画像をクリックして拡大画像が表示されるかも確認しましょう。

メニューページの組み立て[後編]
« 前のページへ メニューページのスタイル作成

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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