たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ホームページ作成講座   STEP10 メニュー


メニュー




メニューを作成します

■STEP10  メニュー

メニューの作り方です。

★メニューの基本

ここでは、リスト(箇条書き)を基本としたメニューを説明します。
<ul>〜</ul>タグと<li>〜</li>タグを使います。 ★リストの基本を参照してください。

ソースコード(HTML)

<ul>
<li><a href= "stepuphtml1.html"> STEP 1</a></li>
<li><a href= "stepuphtml2.html"> STEP 2</a></li>
<li><a href= "stepuphtml3.html"> STEP 3</a></li>
<li><a href= "stepuphtml4.html"> STEP 4</a></li>
</ul>


表示

★横並びのメニュー

1.先頭記号を消して、2.横並びに変えて、3.幅を指定します。
CSSのコードを見たら、すぐわかりますね。
以降、縦並びのメニューについては、2.のCSSの「float: left;」部分をはずすだけで実現できます。

ソースコード(CSS)

ul.menu1 {
list-style: none; /* 先頭記号を消す */
}
ul.menu1 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}


ソースコード(HTML)

<ul class= "menu1">
<li><a href= "stepuphtml1.html"> STEP 1</a></li>
<li><a href= "stepuphtml2.html"> STEP 2</a></li>
<li><a href= "stepuphtml3.html"> STEP 3</a></li>
<li><a href= "stepuphtml4.html"> STEP 4</a></li>
</ul>


表示

このページのトップ

★色をつける

メニューらしく色をつけてみましょう。
<a>要素に対してスタイルシートの追加です。HTMLコードは変わりません。
background-colorcolor要素で背景色と文字色を指定します。
display: block;」で背景色の範囲をブロックレベルにします。
text-align: center;」で文字の位置を中央にします。
padding属性でブロックの大きさを調節します。ただし、 横方向は<li>要素で幅を指定しているので、ここでの例では結果的に無効になっています。
border属性でボックスの枠線を指定します。

ソースコード(CSS)

ul.menu2 {
list-style: none; /* 先頭記号を消す */
}
ul.menu2 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}
ul.menu2 a {
background-color: blue; /* 背景色 */
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
}


ソースコード(HTML)

<ul class= "menu2">
<li><a href= "stepuphtml1.html"> STEP 1</a></li>
<li><a href= "stepuphtml2.html"> STEP 2</a></li>
<li><a href= "stepuphtml3.html"> STEP 3</a></li>
<li><a href= "stepuphtml4.html"> STEP 4</a></li>
</ul>

以降、HTMLのソースファイルは省略します。「class="menu2"」の"menu2"をCSSにあわせて変更してください。

表示

このページのトップ

★マウス操作で色を変える

マウスカーソルをのせた時、クリックしたときの色を変えます。
スタイルシートに a:hover a:activeを加えました。
この記述順序は大事です。逆にすると反映されない場合があります。

  a:hover・・・マウスカーソルが乗っている状態
  a:active・・・マウスがクリックされている状態

ソースコード(CSS) HTMLソースコードはmenu2を参照してください

ul.menu3 {
list-style: none; /* 先頭記号を消す */
}
ul.menu3 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}
ul.menu3 a {
background-color: blue; /* 背景色 */
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
}
ul.menu3 a:hover{/* マウスカーソルが乗っている状態 */
background-color: white; /* 背景色 */
color: blue; /* 文字色 */
}
ul.menu3 a:active{/* マウスがクリックされている状態 */
background-color: white; /* 背景色 */
color: red; /* 文字色 */
}


表示

このページのトップ

★下線と点線を消す

文字の下線はないほうがすっきりしますし、 ブラウザによって表示される選択後の点線も気になりますので消します。
text-decoration: none; で下線を消します。
outline: none; で選択時の点線枠線を消します。

【追記】outline: none;の記述で、点線枠線が消えない場合があります。その時は、
  タグにonfocus="this.blur();"を追加します。
例: <a href="test.html" onfocus="this.blur();" >
(参照:WEB制作(html,css(スタイルシート) ))

ソースコード(CSS) HTMLソースコードはmenu2を参照してください

ul.menu4 {
list-style: none; /* 先頭記号を消す */
}
ul.menu4 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}
ul.menu4 a {
background-color: blue; /* 背景色 */
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
}
ul.menu4 a:hover{/* マウスカーソルが乗っている状態 */
background-color: white; /* 背景色 */
color: blue; /* 文字色 */
}
ul.menu4 a:active{/* マウスがクリックされている状態 */
background-color: white; /* 背景色 */
color: red; /* 文字色 */
}


表示

このページのトップ

★丸みをつける

タブの感じを出すために、丸みをつけてみます。
border-radiusプロパティーで丸みをつけます。
コーナーの楕円の形状を水平方向と垂直方向の半径のセットで指定します。
値は、左上・右上・右下・左下の順で楕円の半径を指定します。
水平方向と垂直方向の半径のセットは、スラッシュ( / )で区切りますますが、 ここでの例のように垂直方向を省略すると丸みは円となります。

ソースコード(CSS) HTMLソースコードはmenu2を参照してください

ul.menu4 {
list-style: none; /* 先頭記号を消す */
}
ul.menu4 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}
ul.menu4 a {
background-color: blue; /* 背景色 */
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
border-radius: 8px 8px 0px 0px; /* タブに丸みをつける */
}
ul.menu4 a:hover{/* マウスカーソルが乗っている状態 */
background-color: white; /* 背景色 */
color: blue; /* 文字色 */
}
ul.menu4 a:active{/* マウスがクリックされている状態 */
background-color: white; /* 背景色 */
color: red; /* 文字色 */
}


表示

このページのトップ

★幅の調整

幅の調整方法です。 全体を固定の幅で指定する例と、可変にした例です。
言うまでもないと思いますが、タブが4つなので、4分の1で25%を指定しています。
個々のタブの幅を変えたい場合は、それぞれの<ul>要素でスタイルを指定してください。
また、文字列の長さによって変えたいときは、width属性で指定せずに <a>要素のpadding属性でバランスを調整します。 この時、<ul>要素にmin-width属性を指定することでで最小の幅を決めておくこともできます。

ソースコード(CSS) HTMLソースコードはmenu2を参照してください

ul.menu6 {
list-style: none; /* 先頭記号を消す */
width: 500px; /* メニュー全体の幅 */
}
ul.menu6 li {
float: left; /* リスト項目を横方向に並べる */
width: 25%; /* リスト項目の幅 */
}
-----------------------
ul.menu7 {
list-style: none; /* 先頭記号を消す */
width: 80%; /* メニュー全体の幅 */
}
ul.menu7 li {
float: left; /* リスト項目を横方向に並べる */
width: 25%; /* リスト項目の幅 */
}


表示

このページのトップ

★背景に画像を使う

背景に画像を使うこともできます。
背景画像を指定するには、background:プロパティーを使います。

ソースコード(CSS) HTMLソースコードはmenu2を参照してください
追加部分のみ

ul.menu8 a {
background: url(image/t10.gif); /* 通常の背景画像 */
}
ul.menu8 a:hover {
background: url(image/t9.gif); /* マウスが乗っている背景画像 */
}
ul.menu8 a:hover {
background: url(image/t9.gif); /* クリックしている背景画像 */
}

表示


もうひとつ、画像を変えた例

一応、ここまでをもって完成とします。このあと、プルダウン、縦型の展開メニューを
次ページ「STEP11 ドロップダウンメニュー」
次々ページ「STEP12 アコーディオンメニュー」で説明します。


▼STEP11へ

このページのトップ