細部にこだわってみた!CSS3を使った美しい横メニューの作り方

画像を一切使わずCSS3で表現した横メニューを作ってみました。順を追って説明していきますので参考になればと思います。

リストに1pxのラインを追加するだけで、印象がぐっとよくなる」、「CSS3の勉強になるかも!?画像を使わないボタンの作成手順」が好評だったので、第3弾ということで。

css3Menu0.png

どこかで見たようなメニューですが、これを画像を使わずにCSS3をたくさん使って装飾していきます。

今回も別サーバーにサンプルを用意してみました。 - サンプル

IE対策については「CSS3を使うにあたって知っておきたいIE対策のまとめ」をご参考に。ただ、完璧な再現はできません。

1.基本形

CSS3メニューサンプル

これが基本形になります。ここに色々加えていきます。

HTML
<ul id="menu">
  <li><a href="#">html</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">Perl</a></li>
</ul>

HTMLは最後まで変更しません。

CSS
#menu {
  width:530px;
  padding:0;
  margin:0;
  list-style-type: none;
}
#menu li {
  width:20%;
  float:left;
  padding:0;
  margin:0;
  text-align:center;
}
#menu li a {
  width:auto;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  padding:10px 0;
  text-decoration:none;
  display:block;
  background:#666;
}
#menu li a:hover {
  background:#555;
}

このCSSに色んなプロパティを追加していきます。

2.背景をグラデーションにしてみる

CSS3メニューサンプル

背景をグラデーションにするだけでかなりよくなりますね。長々書くのもわずらわしいので、今回はChrome、Safari、Firefox用にしています。

CSS
#menu {
  width:530px;
  padding:0;
  margin:0;
  list-style-type: none;
}
#menu li {
  width:20%;
  float:left;
  padding:0;
  margin:0;
  text-align:center;
}
#menu li a {
  width:auto;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  padding:10px 0;
  text-decoration:none;
  display:block;
  background:#666;
  background-image: -moz-linear-gradient(top, #888 0%, #777 50%, #666 50%, #777 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.50, #777), color-stop(0.50, #666), color-stop(1, #777));
}
#menu li a:hover {
  background:#555;
  background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #333 50%, #444 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
}

慣れていないと分かりにくいかも知れませんのでアップにしてみました。

CSS3メニューサンプル

イメージできましたでしょうか?

3.テキストシャドウをつけてみる

CSS3メニューサンプル

微妙ですが、text-shadowで影を付けています。意識して見ないと分からないかもしれませんが、印象は違ってくると思います。

CSS
#menu {
  width:530px;
  padding:0;
  margin:0;
  list-style-type: none;
}
#menu li {
  width:20%;
  float:left;
  padding:0;
  margin:0;
  text-align:center;
}
#menu li a {
  width:auto;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 -1px 0px #333,0 1px 0px #555;
  padding:10px 0;
  text-decoration:none;
  display:block;
  background:#666;
  background-image: -moz-linear-gradient(top, #888 0%, #777 50%, #666 50%, #777 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.50, #777), color-stop(0.50, #666), color-stop(1, #777));
}
#menu li a:hover {
  background:#555;
  background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #333 50%, #444 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
}

今回は上下に影を付けています。1行だけですみますので簡単です。

4.両端の角を丸くしてみる

CSS3メニューサンプル

最初と最後の端を丸くしてみます。first-child で最初を、last-child で最後に指定します。

CSS
#menu {
  width:530px;
  padding:0;
  margin:0;
  list-style-type: none;
}
#menu li {
  width:20%;
  float:left;
  padding:0;
  margin:0;
  text-align:center;
}
#menu li a {
  width:auto;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 -1px 0px #333,0 1px 0px #555;
  padding:10px 0;
  text-decoration:none;
  display:block;
  background:#666;
  background-image: -moz-linear-gradient(top, #888 0%, #777 50%, #666 50%, #777 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.50, #777), color-stop(0.50, #666), color-stop(1, #777));
}
#menu li a:hover {
  background:#555;
  background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #333 50%, #444 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
}
#menu li:first-child a{
  border-radius:5px 0 0 5px;
}
#menu li:last-child a{
  border-radius:0 5px 5px 0;
}

5.手の込んだボーダーを入れてみる

CSS3メニューサンプル

box-shadowを使ってボタンの内側にラインを入れています。あるのとないのでは全然印象が違います。「リストに1pxのラインを追加するだけで、印象がぐっとよくなる」で紹介したのと一緒ですね。

CSS
#menu {
  width:530px;
  padding:0;
  margin:0;
  list-style-type: none;
}
#menu li {
  width:20%;
  float:left;
  padding:0;
  margin:0;
  text-align:center;
}
#menu li a {
  width:auto;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 -1px 0px #333,0 1px 0px #555;
  padding:10px 0;
  text-decoration:none;
  display:block;
  background:#666;
  background-image: -moz-linear-gradient(top, #888 0%, #777 50%, #666 50%, #777 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.50, #777), color-stop(0.50, #666), color-stop(1, #777));
  border-left:1px solid #444;
  box-shadow: 1px 0px 0px rgba(225,225,225,0.3) inset,
			 -1px 0px 0px rgba(225,225,225,0.3) inset,
			  0px 1px 1px rgba(0,0,0,0.1) inset,
			  0px -1px 1px rgba(0,0,0,0.3) inset,
			  0px 1px 3px #666;
}
#menu li:first-child a{
  border-left:0px;
  border-radius:5px 0 0 5px;
  border-left:0;
  box-shadow:-1px 0px 0px rgba(225,225,225,0.3) inset,
			  0px 1px 1px rgba(0,0,0,0.1) inset,
			  0px -1px 1px rgba(0,0,0,0.3) inset,
			  0px 1px 3px #666;
}
#menu li:last-child a{
  border-radius:0 5px 5px 0;
  box-shadow: 1px 0px 0px rgba(225,225,225,0.3) inset,
			  0px 1px 1px rgba(0,0,0,0.1) inset,
			  0px -1px 1px rgba(0,0,0,0.3) inset,
			  0px 1px 3px #666;
}
#menu li a:hover {
  background:#555;
  background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #333 50%, #444 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
  box-shadow: 1px 0px 0px rgba(225,225,225,0) inset,
			 -1px 0px 0px rgba(225,225,225,0) inset,
			  0px 1px 1px rgba(0,0,0,0.1) inset,
			  0px -1px 1px rgba(0,0,0,0.3) inset,
			  0px 1px 3px #666;
}

アップにするとこんな感じです。RGBaカラーで指定するといい感じでグラデーションに溶け込みます。

css3Menu6-2.png

ちなみにボーダー1本だけだとこんな感じです。

CSS3メニューサンプル

まったく印象が違いますね。

ということで、どこかで見たような横メニューをCSS3を使って再現してみました。無駄に長いコードになってしみましたが、1つ1つ順を追って考えていけば難しくはないと思います。

こういうの作っていると個人的にも勉強になります。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
このナビゲーションバーをそっくりそのまま採用させてもらいました。ありがとうございます。
【2012/05/08 22:45】 | あれはんどろ #bCpyViaU | [edit]
お役に立ててよかったです。
すごいいい感じになっていますね~

またお立ち寄りください!
【2012/05/09 07:40】 | 管理人 #E2ywrYdA | [edit]
最後だけどうして#menu6なのでしょう?

とりあえず6を削除してみましたが、IE9ではグラデや線が反映できませんでした。
choromeやffなら表示できました。
IEユーザーが大半なのですから、試作中のサイトでは無視できません。
とても美しいうえに、試作中のサイトと同系色なだけに残念ですが、あきらめます。


【2012/07/06 23:16】 | gonbee #vQU5PwVA | [edit]
コメントありがとうございます。

>最後だけどうして#menu6なのでしょう?

別サーバーのサンプルが、段階ごとで違うIDを
割り振っていたので、それをそのまま載せてしまっていました。
ご指摘ありがとうございます。


IEについてはIE9でもグラデーションに対応していません。
ほんと困ったもんです。
【2012/07/07 06:49】 | 管理人 #E2ywrYdA | [edit]
超初心者だから分からないのですが、1.5倍の高さに出来たら
いいんだけれど・・・
【2012/11/23 20:33】 | nakamura #- | [edit]
nakamura さん

20行目の padding:10px 0;
の部分の数字を大きくすると高くなるはずです。
【2012/11/26 00:03】 | 管理人 #E2ywrYdA | [edit]
先月からWebサイトの構築を始めたばかりで、いつも参考にさせて貰っております。
こちらのメニューを使ってみようととりあえずデフォルトのまま設定してみたのですが、なぜか一番右のメニューの高さが小さくなってしまいます。。
自分なりに原因を調べてみたところ、メニューの内容が以下のように一番右だけ英語にしていた事が原因でした。

ホーム | 使い方 | ダウンロード | ライセンス | 更新履歴 | お知らせ | About

上記のように英語と日本語のメニューを混在していても高さが同じになるようにする方法はないでしょうか?
ご教授いただけると幸いです。
【2014/02/24 22:43】 | kansuke #- | [edit]
会社サイトに使わせていただきました。シンプル且つ繊細で気に入ってます。ただなぜかIEでは再現されません。。chromeとfirefoxでは確認しました。なにか追加する必要があるのでしょうか。ご指導願います。
【2014/09/17 15:50】 | morio #- | [edit]
morio さん

コメントありがとうございます。
IEはバージョンによってはCSS3をサポートしていないからではないでしょうか?

角丸、グラデーション、ドロップシャドウはバージョンによっては効きません。

それでもメニューとしては使用できるようにしています。
【2014/09/18 06:19】 | 管理人 #E2ywrYdA | [edit]
ボランティアでサイトを作成し、私がサーバをレンタルし、サイトを公開している63歳になるものです。
今回、今のサイトを作り直しモバイルでも対応できるよう作り直しています。

貴サイトのCSS3で作るメニューに出会いたことに感謝しています。早速使わさせていただこうと思っています。
本当に感謝です。これからもよろしくお願いします。
【2015/06/02 10:42】 | kouya #SZv2Nm5w | [edit]
kouya さん

コメントありがとうございます。
この記事がお役に立ててうれしいです。

いつまでたっても新しいことに挑戦する姿勢はすばらしいと思います。
私もkouyaさんのような姿勢を忘れず挑戦し続けたいです。

これからもよろしくお願いします。
【2015/06/04 22:04】 | 管理人 #E2ywrYdA | [edit]
すごい!!
背景をここまで細かく指定するやり方は思いつきもしませんでした!
自分で色を変えて、使わせていただきます!

ありがとうございました^^
【2015/07/24 11:07】 | mao #- | [edit]
mao さん

コメントありがとうございます。
お役に立ててうれしいです。
またお立ち寄りください~
【2015/07/28 23:31】 | 管理人 #E2ywrYdA | [edit]
とても役立ちました。ありがとうございます。

今回、1番の方法を使わせていただきました。
項目を5つにしたのですが、chromeではなぜか、一番右端の項目が一段下がってしまいます。
回避する設定方法がなにかあるのでしょうか?

IEでは、問題なく表示されます。

これからもよろしくお願いします。
【2016/01/20 13:21】 | kae #- | [edit]
久しぶりに、再訪しました。
いつも感謝です。これからも役に立つ情報を提供をしてくれるようよろしくお願いします。
また、いつまでもこのサイトが継続されますよう心より願っています。

本日、いいねさせていただきました。

kouya
【2017/02/08 08:15】 | kouya #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加