- ベストアンサー
CSSでホームページのメニュー作成方法について
- CSSでホームページのメニューを作成する際に、:hoverを使用してメニューのスタイルを変更する方法について説明します。
- 特に、メニューのアイテムをホバーした際に背景色を変更する方法について詳しく説明します。
- また、メニューのアイテム間の間隔、テキストのスタイルなどについてもカスタマイズする方法を解説します。
- ri19960913
- お礼率34% (33/95)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1です。実際に複数の環境で検証してみましたところ、ANo.1の対処だけでは解決できないものもある様でしたので、この際全面的に手直ししてみました。 質問者様の(X)HTMLのDOCTYPE等も不明ですので、とりあえずHTML4.01 Strict、文字コードはShift_JISでサンプルを作成し、検証しました。 ※以下はあくまで一例です。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <link rel="stylesheet" href="css/sample.css" type="text/css" media="all"> </head> <body> <div id="head"> <ul class="menu"> <li><a href="/">TOP</a></li><li><a href="/bbs/">BBS</a></li> </ul> </div> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin: 0; padding: 0; background: #fff; } #head { background:url("/images/imgX.png") repeat-x; line-height: 140%; } #head .menu { height: 100px; overflow: hidden; list-style: none; margin: 0; padding: 0; border-left: 1px solid #0ff; } #head .menu li { float: left; margin: 0; padding: 0; border-right: 1px solid #0ff; } #head .menu li a { display: block; padding: 40px; color: #000; } #head .menu li a:hover { background-color: #0ff; } ---------------------------------------------------------------------- 上記の対処で、（OSはWindows XP）IE6/7、Safari2/3、Opera9.52、Sfari3、上でほぼ同様に表示されています。 手直しのポイントとは以下の様なものです。 ■#headに適切なline-heightを指定。 ※もし既にここに設定済みなのを省略していたり、もしくは親要素（bodyなど）から継承しているなら無視して下さい。 ■.menuに#headの背景画像と同じ高さを指定（padding-topで余白を与えるのではなく）して子要素がfloatして高さが失われる状態を回避し、文字サイズの変更などによりはみ出す分は"overflow: hidden;"で隠す。更に、左側にのみ（理由は後述）liと同じ線を引く。 ■メニューのaではなくliの方をフロートさせ線を引く。線は右側にのみ。こうすると隣接する部分に線が重ならない為、均一に1pxの線が引かれるが、左端のliのみ線がなくなってしまうので、その分を前述の様に親要素であるulに指定して補う。 ■aをブロック要素化してpaddingと併用して文字部分以外のリンク領域を確保。 ■a:hoverでの指定はaで一括指定した部分と異なる部分（本件では背景色）のみを指定。他は継承されるので二重に指定する必要なし。 いかがでしょうか。 この方法（widthを指定せずpaddingで幅を確保）だと、現在のサンプルの様に「TOP」「BBS」とたまたま全く同じ字数なので各メニューの幅がほぼ同様に見えていますが、「PROFILE」などの様に字数の多いものだと当然それらよりも幅広く表示されますが、それは構わないのですよね？（それが悪いわけでも何でもないです）もし文字数にかかわらず各メニュー領域の幅を統一したいのであれば別のやり方が必要です。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
すみません、ANo.2にタイポがありましたので訂正しておきます。 【誤】（OSはWindows XP）IE6/7、Safari2/3、Opera9.52、Sfari3、上でほぼ同様に表示されています。 【正】（OSはWindows XP）IE6/7、Firefox2/3、Opera9.52、Safari3、上でほぼ同様に表示されています。
- abril
- ベストアンサー率69% (388/560)
HTML、CSS共に適切ではない指定や間違いがありますね。 ---------------------------------------------------------------------- <div class="menu"> <li><a href="/">TOP</a></li><li><a href="/bbs/">BBS</a></li> </div> ---------------------------------------------------------------------- liはリストタグ（ol、ul）の子要素ですから上記の様にdivの直接の子要素にはなり得ません。 ---------------------------------------------------------------------- <ul class="menu"> <li><a href="/">TOP</a></li><li><a href="/bbs/">BBS</a></li> </ul> ---------------------------------------------------------------------- とすべきですね。ただし、その場合はCSS側のmenuのクラス指定に、リストタグのスタイルを初期化するプロパティも追加しておかねばなりません。現在の崩れは再現画像（http://www5.atpages.jp/ri19960914/menu.png）の感じからして、リストのスタイルが初期化されていないが為に起きている様に思われます。ですので、例えば下記の様に： ---------------------------------------------------------------------- #head .menu { list-style: none; margin: 0; padding: 100px 0px; } ---------------------------------------------------------------------- とりあえず以上までは反映させて見て下さい。それで現在の症状は改善されると思います。 ただ、CSSの指定の仕方を見てると他の問題（特にIE以外の環境で）が出てくる（既に出てきている？）可能性が高いです。ここでは直接の質問内容ではないので省略させて頂きますが。常にHTMLの文法チェッカーやCSSのヴァリデイターで作成している内容が適切かどうかを確認しつつ、複数の環境での表示結果を試しながら進行される事をお奨めします。
お礼
いきました！ 細かいところまで説明しただきありがとうございました！