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

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

メニューの作成

メニュー表示部を作成しよう

次はメニューを完成させましょう。

メニューの出来上がりイメージとソースコードは、以下のようになります。

[HTMLの記述例]
メニューのHTML記述例
[完成図]
メニューの完成図

「HOME」「MENU」「Quality」「Store Info」の4画像を挿入します。

※それぞれの画像に<a>タグ(リンク)が入っていますが、今回は無視して後ほど入力します。

<li>リスト表示タグの入力

まずは<li>タグを使って、画像を挿入するための下地を用意します。
<nav>と</nav>の間に、<ul>と<li>を入力しましょう。
※<li>を忘れてしまった場合は「リストの表示」を見て思い出しましょう。

[入力するコード]

<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

メニューは合計で4つ必要なので、<li>も4つ入力します。
この<li>に1つずつ、メニュー画像を入れていきます。

[HTMLの記述例]
listタグの入力例

画像の挿入

次は<img>タグを使って、画像を入れていきましょう。

挿入する画像ファイルは「img」フォルダ内の、「menu_home.gif」「menu_menu.gif」「menu_quality.gif」「menu_store.gif」の4つとなります。

[挿入する画像ファイル]
挿入する画像ファイル

<li>と</li>の間に、画像を挿入するコードを入力しましょう。

[入力するコード]
<nav>
<ul>
<li><img src="img/menu_home.gif" alt="ホーム"></li>
<li><img src="img/menu_menu.gif" alt="メニュー"></li>
<li><img src="img/menu_quality.gif" alt="こだわり"></li>
<li><img src="img/menu_store.gif" alt="店舗案内"></li>
</ul>
</nav>

「img」フォルダから画像を呼び出すので、画像ファイル名の前に「img/」を付けるのを忘れないようにしましょう。
また、alt属性を付けておきましょう。

[HTMLの記述例]
imgタグの入力例

ここまで入力したら、間違いがないか確認して「index.html」ファイルを保存しましょう。

ブラウザで確認してみよう

一旦ここで、ブラウザ確認してみましょう。
以下のように表示されていれば問題ありません。

ブラウザ確認の画像

無事表示されたでしょうか?
もし上の画像と違うように表示された場合、どこかが間違っている可能性があります。
もう一度見なおしてみましょう。

次は縦並びになっているメニュー画像を横並びにしましょう。

覚えておきたいポイント

リストの数について

さきちんカフェのメニューでは4つのメニューボタンを作成するため、<li>タグを4つ入力します。
メニューボタン数を増やしたい場合は、<li>タグの数を増やせばOKです。
もちろん、それに応じて画像ファイルも必要となります。

メニューの名称

作成しているメニューのように、どのページにも表示されアクセス可能なメニューリストのことを「グローバルナビ」といいます。
反対に、特定のページにしか表示されないメニューリストを「ローカルナビ」といいます。

横並び表示にするためのスタイルを作成する

<li>タグに画像を入れただけでは縦に並んでしまい、横並びのメニュー項目として表示されません。
縦に並んだ画像を横に並ぶよう、スタイルを作成しましょう。

「style.css」を開き、以下のスタイルを入力します。

[入力するコード]

#menu {
margin:0px;
padding:0px;
}

#menu li {
float:left;
list-style-type:none;
}

#menu

まずは「#menu」というスタイルを作り、領域内余白、領域間余白共に0pxに指定しましょう。

#menu li

次に「#menu」内の<li>タグに適用するスタイルを作成します。「#menu li」と入力し、「float:left;」「list-style-type:none;」のプロパティを入力しましょう。

「float:left;」で左に回り込み指定し、横並びになるようにします。
「list-style-type:none;」は画像の横の●を非表示にします。

横並びのスタイル
[CSSの記述例]
CSSの入力例

入力内容に間違いがなければ、「style.css」ファイルを保存しておきましょう。

覚えておきたいポイント

子セレクタの使用

ここでは「子セレクタの設定」で学習した子セレクタが出てきます。#menu liはmenuの中のliだけに適用されるスタイルとなります。

スタイルを適用しよう

さきほど作成したスタイル使って、メニュー項目を横並びにしてみましょう。

<ul>に「menu」スタイルを適用するよう入力します。
<ul>を<ul id="menu">と書き換えましょう。

[入力するコード]
<nav>
<ul id="menu">
<li><img src="img/menu_home.gif" alt="ホーム"></li>
<li><img src="img/menu_menu.gif" alt="メニュー"></li>
<li><img src="img/menu_quality.gif" alt="こだわり"></li>
<li><img src="img/menu_store.gif" alt="店舗案内"></li>
</ul>
</nav>

これで<ul>と<ul>内の<li>に、さきほど作成した「#menu」「#menu li」のスタイルが適用されます。

[HTMLの記述例]
ソースコードを書き換えた図

入力が完了したら、間違いがないか確認して保存しましょう。
この状態でブラウザ確認すると、メニュー項目が横並びとなっているはずです。

ブラウザで確認してみよう

では、問題なく表示されるかブラウザで確認してみましょう。
下画像のようにキレイに横並びに表示されていれば成功です。

メニューが横並びされた様子

もし、上画像通りに横並び表示されていない場合は、どこかが間違っている可能性があります。
もう一度よく確認をしてみましょう。

覚えておきたいポイント

リンク設定は後ほど入力

完成サンプルでは他ページへのリンクが入っていますが、ここではリンクを入力しません。
後ほどまとめて、他ページへのリンク設定を行います。

メインビジュアルの作成
« 前のページへ ヘッダーの作成

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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