横並びメニュー｜CSSの小技(指定テクニック)

横並びメニュー｜上級CSSレイアウト講座

スポンサードリンク

ここでは横並びメニューサンプルとサンプルソースのみ掲載します。ロールオーバー及びfloatについては特に解説しません。

グローバルナビゲーション部分が#wraaper、#header等のボックス内に配置されているものとします。

テキストのみの場合

HTML

<div id="globalnavi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>

css

#globalnavi{
  margin: 0;
  padding: 0;
  width: ***;
}

#globalnavi ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#globalnavi li{
  float: left;
  width: 100px;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  text-align: center;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: black;
  color: white;
}

#globalnavi a:hover{
  background-color: red;
  color: white;
}

背景画像の場合

横並びメニューサンプル表示

背景画像

HTML

<div id="globalnavi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>

css

#globalnavi{
  margin: 0;
  padding: 0;
  width: ***;
}

#globalnavi ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#globalnavi li{
  float: left;
  width: 100px;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  text-align: center;
  display:block;
  padding: 0.5em 0;
  width:100%;
  background: url(画像のパス) no-repeat 0 50%;
  color:#000000;
}

#globalnavi a:hover{
  background: url(画像のパス) no-repeat -100px 50%;
  color: #ffffff;
}

全て画像の場合

横並びメニューサンプル表示

背景画像

HTML

<div id="globalnavi">
<ul>
<li id="menu1"><a href="#">Home</a></li>
<li id="menu2"><a href="#">menu</a></li>
<li id="menu3"><a href="#">menu</a></li>
<li id="menu4"><a href="#">menu</a></li>
<li id="menu5"><a href="#">menu</a></li>
<li id="menu6"><a href="#">menu</a></li>
<li id="menu7"><a href="#">menu</a></li>
</ul>
</div>

css

 #globalnavi{
  margin: 0;
  padding: 0;
  width: ***;
  height: 40px;
}

#globalnavi ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#globalnavi li{
  text-indent: -9999px;
  float:left;
  width: 100px;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  display: block;
  width: 100%;
  height: 40px;
  background-image: url(画像のパス);
  background-repeat: no-repeat;
}

#menu1 a{background-position: 0 0;}
#menu2 a{background-position: -100px 0;}
#menu3 a{background-position: -200px 0;}
#menu4 a{background-position: -300px 0;}
#menu5 a{background-position: -400px 0;}
#menu6 a{background-position: -500px 0;}
#menu7 a{background-position: -600px 0;}

#globalnavi a:hover{
  background-image: url(画像のパス);
  background-repeat: no-repeat;
}

#menu1 a:hover{background-position: 0 -40px;}
#menu2 a:hover{background-position: -100px -40px;}
#menu3 a:hover{background-position: -200px -40px;}
#menu4 a:hover{background-position: -300px -40px;}
#menu5 a:hover{background-position: -400px -40px;}
#menu6 a:hover{background-position: -500px -40px;}
#menu7 a:hover{background-position: -600px -40px;}

このCSS指定における注意事項

隠しテキストはGoogleのガイドライン違反をご確認下さい！(2010/01)

CSS指定によるロールオーバーで、この方法もかなり浸透して来たかと思いますが、最近(2008/07時点)ちょっと気になる事があります。Googleのウェブマスター向けガイドラインの一部に抵触するのでは？という点です。

当サイトも発足時からCSSロールオーバーを指定していますが、今のところ変化はないみたいです。因みに気になるのは下記点です。

以下はgoogleウェブマスター向けガイドラインからの引用です。

隠しテキストおよび隠しリンク

コンテンツに隠しテキストや隠しリンクが含まれていると、ユーザーに対するものと異なる情報が検索エンジンに提示されるため、信頼できないサイトと見なされる可能性があります。過度のキーワードといったテキストは、以下のような複数の方法で隠すことができます。

白の背景で白のテキストを使用する

テキストを画像の後ろに含める

CSS を使用してテキストを隠す

フォントサイズを 0 に設定する

隠しリンクとは、Googlebot でクロールされることを意図しているが、下記のようにユーザーからは読み取れないリンクのことです。

リンクが隠しテキストで構成されている (たとえば、テキストの色と背景色が同じ)。

CSS を使用して、高さが 1 ピクセル程度の非常に小さいハイパーリンクが作成されている。

リンクが小さな文字 (たとえば、段落中のハイフン) に組み込まれている。

偽装目的の隠しテキストや隠しリンクが含まれていると判断されたサイトは、Google のインデックスから削除され、検索結果ページに表示されなくなります。

「偽装目的の隠しテキストや隠しリンクが含まれていると判断されたサイト」とあるので多分大丈夫と思いますが、使用は自己責任でお願いします。

スポンサードリンク