
CSS3で横並びのメニューを簡単に作る方法
Category HTML+CSS
Date 2011年11月08日

HTML5とCSS3って、IEを考えるとまだまだ先かな・・・と思っていたのですが、スマートフォンの登場で事情が変わってきました。
スマートフォンサイトだとIEを気にしなくていいので、HTML5とCSS3を使えるっ。
というわけで、CSS3で横並びのメニューをさくっと作ります。
画面いっぱいの横並びメニュー
今回作るのはこんなメニューです。
Firefox、GoogleChrome、Safari、iPhone、androidに対応していますが、
InternetExplorerには対応していません、見ると崩れます(IE9ではどうなのかな?)。
メニューのHTMLは従来どおり、liタグでこんな感じにしておきます。
<ul> <li><a href="#">Home</a></li> <li><a href="#">Information</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Contact</a></li> </ul>
従来なら「float:left」で回り込ませるのですが、今回はCSS3の「display:box」と「box-flex:1」を使います。
親要素であるulに「display:box」と「width:100%」を指定し、横並びにする子要素であるliに「box-flex:1」を指定します。
ul { display: -webkit-box; display: -moz-box; width: 100%; } li { -webkit-box-flex: 1; -moz-box-flex: 1; }
これだけで、画面いっぱいの横並びメニューが出来ます。
(※デザインする為のスタイルは省略しています)

ulに「width:100%」が指定されていないと、左に詰まってしまいますので注意。
floatした後にclearしたり、clearでうまく行かないときはclearfix使ったり、幅があわずにメニューが入りきらずに落ちたりしていた苦労は一体何だったのか・・・
サンプル1
これはこれでいいのですが、メニューの幅を均等にしたい場合は、li要素に対して適当にwidthを設定します。
li { -webkit-box-flex: 1; -moz-box-flex: 1; width: 1000px; }そうすると、各メニューの幅が均等になります。
簡単ですねーっ!

サンプル2
CSS3とは関係ないですが、パンくずやサブメニューは横いっぱいに配置したり、均等配置する必要もないので、「display:inline」を使ってするといいと思います。
li { display: inline; }
パンくずならliを使わずに普通にpで書いてしまってもいい気がするんですが、それはそれで。
サンプル3
※サンプルでは「>」を、CSSの:after疑似要素で記述しています。
挙動の確認に関してiPhone系はiPhone4、iPod touch第三世代で確認。
android系はau IS03、docomo GALAXY S、エミュレータではandroid1.6でも一応確認していますが、間違いなどあれば指摘していただけると嬉しいです。
[参考]
CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture
Tag CSS3
“CSS3で横並びのメニューを簡単に作る方法” への1件のコメント
コメントを残す

- 脱出ゲームを作成しました
- Studio Yuksのサイト制作のお手伝いをさせていただきました
- よみがな.netを公開しました
- Slug or PostIDプラグインがバージョン1.0になりました。
- お問い合わせフォームへの連投を防ぐ方法+α
- phpMyAdminのsetup.phpに脆弱性があるみたいです
- 1つのデータベースに複数のWordPressをインストールする方法
- 仕事とプライベートで使っているマウスをご紹介
- WordPressでiFrameが消えないようにする記述が必要なくなったようです
- CSS3で横並びのメニューを簡単に作る方法
- FFFTPでファイルをダウンロードしたのに、ファイルがその場所になかった時
- Windows7にIllustratorCS2入れたけど日本語入力ができなかった
- PHPでurlの日本語パラメータをGETで受け取ると文字化けする場合
- お問い合わせフォームへの連投を防ぐ方法+α
- JavaScriptでブラウザのテキスト選択を解除する
- PHPのSmartyでゼロパディングする
- 投稿記事のURLにスラッグかPostIDを使うプラグイン
- WordPressでiFrameが消える時の解決方法
- EC-CUBE2.11.0とMySQLの組み合わせで文字化けする時の解決方法
- Photoshopで網点?みたいな加工をする
- HTML+CSS (8)
- JavaScript (12)
- PHP (21)
- PostgreSQL (4)
- WordPress (8)
- WordPressプラグイン (1)
- Movable Type (13)
- Photoshop (2)
- Illustrator (2)
- Firefox (5)
- ツール (2)
- 雑記 (23)
- 未分類 (3)
- Android (1)
[…] うにまくら.jp […]