メニューの作り方です。
ここでは、リスト（箇条書き）を基本としたメニューを説明します。
<ul>〜</ul>タグと<li>〜</li>タグを使います。
★リストの基本を参照してください。
<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>
１．先頭記号を消して、２．横並びに変えて、３．幅を指定します。
CSSのコードを見たら、すぐわかりますね。
以降、縦並びのメニューについては、２．のCSSの「float: left;」部分をはずすだけで実現できます。
ul.menu1 {
list-style: none; /* 先頭記号を消す */
}
ul.menu1 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}
<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-color、color要素で背景色と文字色を指定します。
「display: block;」で背景色の範囲をブロックレベルにします。
「text-align: center;」で文字の位置を中央にします。
padding属性でブロックの大きさを調節します。ただし、
横方向は<li>要素で幅を指定しているので、ここでの例では結果的に無効になっています。
border属性でボックスの枠線を指定します。
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; /* 枠線 */
}
<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>
マウスカーソルをのせた時、クリックしたときの色を変えます。
スタイルシートに a:hoverと a:activeを加えました。
この記述順序は大事です。逆にすると反映されない場合があります。
| a:hover | ・・・マウスカーソルが乗っている状態 |
| a:active | ・・・マウスがクリックされている状態 |
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(スタイルシート) ))
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プロパティーで丸みをつけます。
コーナーの楕円の形状を水平方向と垂直方向の半径のセットで指定します。
値は、左上・右上・右下・左下の順で楕円の半径を指定します。
水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切りますますが、
ここでの例のように垂直方向を省略すると丸みは円となります。
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つなので、４分の１で25%を指定しています。
個々のタブの幅を変えたい場合は、それぞれの<ul>要素でスタイルを指定してください。
また、文字列の長さによって変えたいときは、width属性で指定せずに
<a>要素のpadding属性でバランスを調整します。
この時、<ul>要素にmin-width属性を指定することでで最小の幅を決めておくこともできます。
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:プロパティーを使います。
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 アコーディオンメニュー」で説明します。