メニュー

a要素メニュー

a要素のみからなるメニューです。縦に並べるために、間にbr要素を入れることがあります。

1 a要素メニュー

<div class="menu">
  <a href="news.htm">ニュース</a>
  <a href="ningen.htm">人間科学部</a>
  <a href="kokusai.htm">国際学部</a>
  <a href="komisin.htm">コミュニティ振興学部</a>
  <a href="sitemap.htm">サイトマップ</a>
</div>

【結果】　a要素メニュー

a要素はインライン要素なので、横に並びます。縦に並べるには、間にbr要素を入れたり、a要素をdisplay:blockにしたりします。

また、インライン要素のままでは適用できないスタイル（width, heightなど） を適用するために、display:blockにすることもあります。

div要素メニュー

a要素をdiv要素にしたメニューです。

2 div要素メニュー

<div class="menu">
  <div><a href="news.htm">ニュース</a></div>
  <div><a href="ningen.htm">人間科学部</a></div>
  <div><a href="kokusai.htm">国際学部</a></div>
  <div><a href="komisin.htm">コミュニティ振興学部</a></div>
  <div><a href="sitemap.htm">サイトマップ</a></div>
</div>

【結果】　div要素メニュー

div要素がブロック要素なので、縦に並びます。横に並べる場合には、positionやfloatによる配置を使います。

リストメニュー

a要素をリスト（li要素）にしたメニューです。

3 リストメニュー

<div class="menu">
<ul>
  <li><a href="news.htm">ニュース</a></li>
  <li><a href="ningen.htm">人間科学部</a></li>
  <li><a href="kokusai.htm">国際学部</a></li>
  <li><a href="komisin.htm">コミュニティ振興学部</a></li>
  <li><a href="sitemap.htm">サイトマップ</a></li>
</ul>
</div>

【結果】　リストメニュー

リストなので縦に並びます。リストという意味がつくことや、スタイルシートの使えないテキストブラウザでもメニューがわかりやすく表示されるというメリットがあります。cssZenGardenでもリストメニューを使っています。

以降、リストメニューのHTMLにスタイルをつけていきます。

リストメニューアーカイブ

リストメニューアーカイブを展開すると、HTMLファイル（menu.htm)と画像ファイル2つが入っています。

menu.htmのhead要素内にあるstyle要素（6行目あたり）を編集して確認しながら学修してください。

例　a要素の状態

0a a要素の状態

#menu a:link { color:#0000ff; } /* 未読: 青*/
#menu a:visited { color:#9999ff; } /* 既読: 薄い青 */
#menu a:active { color:#00ff00; } /* クリック時: 緑 */
#menu a:hover { color:#ff0000; } /* ホバー（マウスが乗った）時: 赤 */

【結果】

ホバー状態が優先するため、クリック時の緑は確認できませんね。

例　a要素の特定の状態のみ指定

0b 特定の状態のみ指定

#menu a { color:#0000ff; } /* 全体 */
#menu a:hover { color:#ff0000; } /* ホバー時 */

【結果】

メニューでは未読・既読の区別はせず、ホバーのみ変更する上記のケースがよく使われます。

例　シンプルメニュー

マウスが乗った時に文字が赤くなるシンプルなメニューです。

1a シンプルメニュー　menu.htm

#menu {
    padding:10px; /* メニュー全体170px; */
    width:150px; /* リンク部分150px; */
}
#menu li {
    list-style-type:none; /* リスト記号なし */
    margin-bottom:5px;
}
#menu a {
    font-weight:bold;
    font-size:12px;
    color:#0000ff;
}
#menu a:hover { color:#ff0000; }

このままでは文字部分（a要素）のみがマウスの反応範囲となりますので、文字の右の空白部分はボタンとして反応しません。ボタンのように文字部分の左右もクリックできるようにするためには、a要素をdisplay:blockに指定します。

1b シンプルメニュー改　menu.htm

#menu a {
    display:block; /* ブロック表示 */
    font-weight:bold;
    font-size:12px;
    color:#0000ff;
}

例　反転メニュー(1)

マウスが乗った時に色が反転して背景色が現れるメニューです。

ホバー時に背景色と文字色を反転します。

2 反転メニュー(1)　menu.htm

#menu {
    padding:10px; /* メニュー全体170px; */
    width:150px; /* リンク部分150px; */
}
#menu li {
    list-style-type:none; /* リスト記号なし */
    margin-bottom:5px;
}
#menu a { 
    padding:5px; /* 背景を広げるための内側余白 */
    display:block;
    font-weight:bold;
    font-size:12px;
    color:#9999ff;
    text-decoration:none; /* 下線なし */
}
#menu a:hover {
    color:#ffffff;
    background-color:#9999ff;
}

1bのソースコードとの違いを赤で表しています。ボタン風にするために、リンクの下線を無くしています。

例　反転メニュー(2)

マウスが乗った時に色が反転して背景色が現れるメニューです。通常時に背景色を持っています。

同じ色の背景と枠をつけ、ホバー時に背景色と文字色を反転します。反転時に枠が残るのがポイントです。

3 反転メニュー(2)　menu.htm

#menu {
    padding:10px; /* メニュー全体170px; */
    width:150px; /* リンク部分150px; */
}
#menu li {
    list-style-type:none; /* リスト記号なし */
    margin-bottom:5px;
}
#menu a { 
    border:1px solid #9999ff;
    padding:5px;
    display:block;
    font-weight:bold;
    font-size:12px;
    color:#ffffff;
    text-decoration:none;
    background-color:#9999ff;
}
#menu a:hover {
    color:#9999ff;
    background-color:#ffffff;
}

2のソースコードとの違いを赤で表しています。

例　ボタンメニュー

立体のボタン風メニューです。

ボタンの色とボタンの外の色を同じにして枠線色を明・暗・暗・明にすることで、左上から光が当たってボタンが浮き出たように見せます。ホバー時には、枠線の明暗を逆にして背景色を暗くし、文字をずらすことで、ボタンが沈み込んだように見せます。

4 ボタンメニュー　menu.htm

#menu {
    background-color:#9999ff;
    padding:10px; /* メニュー全体170px; */
    width:150px; /* リンク部分150px; */
}
#menu li {
    list-style-type:none;  /* リスト記号なし */
    /* margin-bottom:5px; */
}
#menu a {
    border:solid 2px;
    border-color:white darkblue darkblue white;
    padding:5px;
    display:block;
    font-weight:bold;
    font-size:12px;
    color:#ffffff;
    text-decoration:none;
    background-color:#9999ff;
}
#menu a:hover {
    border-color:darkblue lightblue lightblue darkblue;
    padding:7px 3px 3px 7px; /* 文字を右下にずらす */
    background-color:#5555ff;
}

ホバー時に文字を右下にずらす処理として、paddingを使っています。通常時は、上下左右5pxずつのpaddingが設定されていますが、上と左を+2pxして7px、右と下を-2pxして3pxにすることで右と下に2pxずらす効果を実現しています。増やす大きさと減らす大きさを揃えましょう。

例　カラフル反転メニュー

反転メニュー(2)をベースにして、項目ごとに色を変えたメニューです。a要素にそれぞれlink0〜link3のようなクラスをつけてあります。

5 カラフル反転メニュー　menu.htm

#menu {
    padding:10px; /* メニュー全体170px; */
    width:150px; /* リンク部分150px; */
}
#menu li {
    list-style-type:none; /* リスト記号なし */
    margin-bottom:5px;
}
#menu a {
    border:solid 1px;
    padding:5px;
    display:block;
    font-weight:bold;
    font-size:12px;
    color:#ffffff;
    text-decoration:none;
}

#menu a.link0 { background-color:#9999ff; border-color:#9999ff; }
#menu a.link1 { background-color:#0000ff; border-color:#0000ff; }
#menu a.link2 { background-color:#ff0000; border-color:#ff0000; }
#menu a.link3 { background-color:#00ff00; border-color:#00ff00; }

#menu a.link0:hover { color:#9999ff; background-color:#ffffff; }
#menu a.link1:hover { color:#0000ff; background-color:#ffffff; }
#menu a.link2:hover { color:#ff0000; background-color:#ffffff; }
#menu a.link3:hover { color:#00ff00; background-color:#ffffff; }

反転メニュー(2)と違うのは、クラスごとに通常時カラーとホバー時カラーが設定されている部分です。

例　画像メニュー

ボタン部分に背景画像を使ったメニューです。CSS2では背景画像の大きさに合わせて文字の大きさ・余白・位置を指定します。逆に言えば、使用する大きさの背景画像を用意する必要があるということになります。

6 画像メニュー　menu.htm

#menu {
    padding:10px; /* メニュー全体170px; */
    width:150px; /* リンク部分150px; */
}
#menu li {
    list-style-type:none;
}
#menu a {
    display:block;
    height:24px; /* 画像の大きさに合わせて高さも指定 */
    background-image:url(blue.gif);
    background-repeat:no-repeat;
    line-height:24px; /* 文字の縦位置を行間で調整 */
    text-align:center;
    color:#ffffff;
    font-weight:bold;
    font-size:12px;
    text-decoration:none;
}
#menu a:hover {
    background-image:url(red.gif);
}

反転メニュー(1)と違うのは、背景色の代わりに背景画像を使用している点と大きさの指定です。