かっこいいＷｅｂページを作ろうと、WordPress を調べていると、かっこいい企業のＷｅｂページの例、で使われているメニューが気になって、調べてみた。
どうやら、スタイルシートで、表示される画像を切り替えているらしい、と解ったので、この方向で調べることにした。
スタイルシートには、「a:hover」という議事クラスがあって、これを使うとマウスが通過した際に、表示を変更できるようだ。
表示する図形を別のものにしたり、背景色を切り替えたり、できる。
両方試してしたが、個人的には、図形のまわりの枠からはみ出して見える背景色を変えるのがいいように思う。
スタイルシートの記述は、こんな感じ。（背景色だけなら意外と簡単）
li.Menu {
display: inline-block;
}
div.Menu {
width: 100px;
padding: 2px 2px 2px 2px;
background-color : lightgray;
}
div.Menu:hover {
background-color : red;
}
これに対応するＨＴＭＬは、＜ｕｌ＞タグと＜ｌｉ＞タグで、メニューを作って、メニューを図形で作り、その図形の上をマウスが通過すると、図形のまわりが薄い灰色から赤に変わって、マウスの動きについていくように見せるやりかた。
「div.Menu:hover」で、＜ｄｉｖ ｃｌａｓｓ＝”Ｍｅｎｕ”＞タグを、マウスが通過したら、という設定となる。
かっこよく見せるなら、やっぱり図形を切り替える方がいいでしょうね。
私が見たWordPressの企業向けの例では、通常の表示する図形と、マウスが通過した際に表示する図形とを切り替えて、動くように見せるページがあり、それがかっこいいなと、思いました。こういうのに、プロの技を、と感じます。