意外に簡単！CSS3を使ったシンプルな横メニューの作り方

以前に「細部にこだわってみた！CSS3を使った美しい横メニューの作り方」というのを書きましたが、こちらの方が難しいと思います。

例によってCSS3はブラウザによって対応状況が違い、IE8以下だと今回紹介するCSS3プロパティに対応していません。他の主要ブラウザはよほど古いバージョンでない限り問題ないと思います。

ここら辺のCSS3の基礎について勉強したい方は「CSS3について知っておきたいことのまとめ」をご覧ください。

HTMLはこんな感じです。Internet Explorerだけ文字数の関係でIEと略させていただきました。

<ul id="menu">
  <li><a href="#">IE</a></li>
  <li><a href="#">Firefox</a></li>
  <li><a href="#">Chrome</a></li>
  <li><a href="#">Safari</a></li>
  <li><a href="#">Opera</a></li>
</ul>

HTMLは最後までこのままで、CSSのみ変更して見た目を変えていきます。

最初

よくある横メニューです。これだけでも普通に使えると思います。

#menu {
  width: 600px;
  height: 45px;
  padding: 0;
  margin: 0;
  list-style-type: none;
  background: #ff7400;
}
#menu li {
  width: 20%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  display: block;
}
#menu li a:hover {
  background: #ffa443;
}

テキストシャドウとボックスシャドウを使う

メニューの文字にテキストシャドウ、メニュー全体にボックスシャドウを使ってみます。テキストシャドウはRGBaカラーを使った方が自然な影になると思います。

#menu {
  width: 600px;
  height: 45px;
  padding: 0;
  margin: 0;
  list-style-type: none;
  background: #ff7400;
  box-shadow: 3px 3px 3px #aaa;
}
#menu li {
  width: 20%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  text-shadow: 0px -1px 1px rgba(0,0,0,0.7);
  display: block;
}
#menu li a:hover {
  background: #ffa443;
}

両端の角を丸くする

メニュー全体の両端を丸くしてみます。

#menu {
  width: 560px;
  height: 45px;
  padding: 0 20px;
  margin: 0;
  list-style-type: none;
  background: #ff7400;
  border-radius: 10px;
  box-shadow: 3px 3px 3px #aaa;
}
#menu li {
  width: 20%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  text-shadow: 0px -1px 1px rgba(0,0,0,0.7);
  display: block;
}
#menu li a:hover {
  background: #ffa443;
}

ulにpaddingを使って両端に間隔を空けていますが、これが気に入らないという方は「#menu」のpaddingを0にしてからこちらを追加します。

#menu li:first-child a:hover {
  border-radius: 10px 0 0 10px ;
}
#menu li:last-child a:hover {
  border-radius: 0 10px 10px 0 ;
}

背景をグラデーションにする

続いては背景をグラデーションにしてみます。ベンダープレフィックス付きも書いていますので、ちょっと多くなっています。

#menu {
  width: 560px;
  height: 45px;
  padding: 0 20px;
  margin: 0;
  list-style-type: none;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff7400), color-stop(0.00, #ffa443));
  background: -webkit-linear-gradient(#ffa443, #ff7400);
  background: -moz-linear-gradient(#ffa443, #ff7400);
  background: -o-linear-gradient(#ffa443, #ff7400);
  background: -ms-linear-gradient(#ffa443, #ff7400);
  background: linear-gradient(#ffa443, #ff7400);
  border-radius: 10px;
  box-shadow: 3px 3px 3px #aaa;
}
#menu li {
  width: 20%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  text-shadow: 0px -1px 1px rgba(0,0,0,0.7);
  display: block;
}
#menu li a:hover {
  background: #ffa443;
}

オンマウスでへこませる

マウスを乗せたときにへこむようにしています。背景色をRGBaカラーを使って暗くして、ボックスシャドウを加えるだけでいい感じにへこみます。

#menu {
  width: 560px;
  height: 45px;
  padding: 0 20px;
  margin: 0;
  list-style-type: none;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff7400), color-stop(0.00, #ffa443));
  background: -webkit-linear-gradient(#ffa443, #ff7400);
  background: -moz-linear-gradient(#ffa443, #ff7400);
  background: -o-linear-gradient(#ffa443, #ff7400);
  background: -ms-linear-gradient(#ffa443, #ff7400);
  background: linear-gradient(#ffa443, #ff7400);
  border-radius: 10px;
  box-shadow: 3px 3px 3px #aaa;
}
#menu li {
  width: 20%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin: 8px;
  padding: 5px 0 4px 0;
  text-decoration: none;
  text-shadow: 0px -1px 1px rgba(0,0,0,0.7);
  display: block;
  border-radius: 10px;
}
#menu li a:hover {
  background: rgba(0,0,0,0.3);
  box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
}

拡大してみるとこんな感じです。内側に暗めのシャドウを、外側に明るめのシャドウを入れています。

RGBaカラーはIE8以下では対応していませんので気になるという方は以下のコードを入れてあげるといいと思います。

#menu li a:hover {
  background: #ffa443¥9;
  background: rgba(0,0,0,0.3);
  box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
}

ということでCSS3を使った簡単なメニューを作ってみました。

そんなに難しくないと思いますので、初心者の方でも分かりやすいと思います。