旧Windowsのメニューに似たリンク

今回は、XP以前のWindows、つまり2000、Me、98や95などのバージョンで見られるようなメニューに似たリンクを作る技法をご紹介いたします。完成図は、以下のようになります。

例によって、サンプルだけ欲しい人は、リンク先のソースをテイクアウトして、お帰りはこちら〜(どこ)

作ってみよう

まず、HTMLソースから書いてみましょう。キーボードからの入力なので、それっぽいkbdのタグを使います。本番では、アクセスキーの指定は忘れないように！
<div id="x">
<a href="">ファイル(<kbd>F</kbd>)</a>
<a href="">編集(<kbd>E</kbd>)</a>
<a href="">表示(<kbd>V</kbd>)</a>
<a href="">ヘルプ(<kbd>H</kbd>)</a>
</div>

これでは、改行が余白になってしまって空きすぎますので、ちょっと細工をします。aの終了タグの閉じ括弧を、次の要素の開始タグ手前に持って行きます。
<div id="x">
<a href="">ファイル(<kbd>F</kbd>)</a
><a href="">編集(<kbd>E</kbd>)</a
><a href="">表示(<kbd>V</kbd>)</a
><a href="">ヘルプ(<kbd>H</kbd>)</a>
</div>
他にもまともな方法はありますが、今回は上辺の方法で行きます。方法については、次のページで紹介いたします。

では、スタイルシートを書いてみます。

まず、それっぽいフォントに変更します。本来ならメニューのフォントは[menu]で選択出来るはずですが、なぜか異なりますので、それっぽいフォントに変更します。
#x, #x kbd{
  font: icon;
}
kbdのフォント・サイズが小さくなり過ぎますので、これを調整します。他のどの単位でもなく、パーセントを使用している点に注目してみてください。
#x kbd{
  font-size: 110%;
}

a要素の下線を消し、kbd要素に下線を引きます。
#x a{
  text-decoration: none;
}
#x a kbd{
  text-decoration: underline;
}
文字の色も、黒にします。
#x a{
  color: #000;
}

全体を囲っているdiv要素に背景色を与え、リンクを装飾してもはみ出さないだけの余白と行高を持たせます。
#x{
  background: #ccc;
  line-height: 1.6;
  padding: 0 1px 1px 5px;
}
一つのプロパティにまとめたり、簡略表記を用いたりすることで小さくまとまります。
ついでに、メニューの区切りっぽいラインを引きます。
#x{
  border-bottom: 2px groove #dedede;
}

では、ボタンらしく見えるように細工をしていきます。

まず、何もしていない状態のリンクには、以下のように指定します。
#x a{
  border:1px solid #ccc;
}
背景と同色のボーダーを表示することで、一見ボーダーが表示されていないように見せかけているのです。次に、ホーバー時、アクティブ時のリンクです。
#x a:hover{
  border-color: #dedede #7b7b7b #7b7b7b #dedede;
}
#x a:active{
  border-color: #7b7b7b #dedede #dedede #7b7b7b;
}
簡単にボタンに似た状態になりました。後は、文字列とボーダーの間が狭すぎるのでパディングを調整します。
#x a{
  padding: 2px 4px;
}

完成図

最後に、もう一度完成図を見てみましょう。

オマケ

この場合、背景に画像を使うとうまくいきません。さて、どうしましょう。ちょっと考えてみてください。