CSS3をいくつか使ったシンプル横メニューの作り方を順番に説明してみます。特に目新しいものではないですが、CSS3をこれから勉強する人や使い方が分からないという人のお役に立てばと思います。 以前に「細部にこだわってみた!CSS3を使った美しい横メニューの作り方」というのを書きましたが、こちらの方が難しいと思います。 例によってCSS3はブラウザによって対応状況が違い、IE8以下だと今回紹介するCSS3プロパティに対応していません。他の主要ブラウザはよほど古いバージョンでない限り問題ないと思います。 ここら辺のCSS3の基礎について勉強したい方は「CSS3について知っておきたいことのまとめ」をご覧ください。 HTMLはこんな感じです。Internet Explorerだけ文字数の関係でIEと略させていただきました。 <ul id="menu"> <li><a href="#">IE</a><
![意外に簡単!CSS3を使ったシンプルな横メニューの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/41f84ceeb087cc9a9ecf1d64257891f092764c30/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-73.fc2.com%2Fw%2Fe%2Fb%2Fweboook%2Fwebpark-ogp.png)