スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

CSS3をいくつか使ったシンプル横メニューの作り方を順番に説明してみます。特に目新しいものではないですが、CSS3をこれから勉強する人や使い方が分からないという人のお役に立てばと思います。

css3menu-tittle2.png

以前に「細部にこだわってみた!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のみ変更して見た目を変えていきます。

最初

css3menu01_20120911023848.png

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

#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;
}

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

css3menu02.png

メニューの文字にテキストシャドウ、メニュー全体にボックスシャドウを使ってみます。テキストシャドウは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;
}

両端の角を丸くする

css3menu02.png

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

#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 ;
}

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

css3menu02.png

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

#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;
}

オンマウスでへこませる

css3menu02.png

マウスを乗せたときにへこむようにしています。背景色を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;
}

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

css3menu05-hover.png

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を使った簡単なメニューを作ってみました。

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
はじめて書き込みさせていただきます。

最初から不躾な質問で申し訳ありませんが、このブログで使われているデザインテンプレートは配布されていませんか?やっと思っていたようなシンプルなテンプレートがありましたので、失礼だとは思いましたが質問させていただきました。

よろしければ、回答いただければ幸いです。よろしくお願いします。
【2012/09/16 15:41】 | 山下 瑛太 #- | [edit]
山下瑛太 様

はじめまして!
このブログのデザインは個人的に作ったものであり
テンプレートとして配布はされていません。

また、上の固定メニューのように変数を使っていないところが多く
テンプレートとして配布するには適していません。

申し訳ございませんがご理解いただければと思います。
【2012/09/16 22:20】 | 管理人 #E2ywrYdA | [edit]
ご検討ありがとうございました。無理を言って申し訳ありませんでした。
【2012/09/17 10:25】 | 山下 瑛太 #- | [edit]
はじめまして。
初心者でも、とても参考になるサイトをありがとうございます。

IE8を使用しておりますが、表示されない物、表示がおかしい物があり、試行錯誤しております。
ブラウザによって表示が違ってしまうのは本当に大変ですね。。。

さらに勉強させて頂きます。
ありがとうございました。
【2014/02/27 20:39】 | taruto #- | [edit]
taruto さま

コメントありがとうございます。
私もいつもIEには困らされています。

IE8以下で表示が変わってしまうのは仕方ないですが、
ちゃんと見えるようにしておきたいですね。

今後もよろしくお願いします。
【2014/03/02 14:03】 | 管理人 #E2ywrYdA | [edit]









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

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。