レスポンシブ対応のメニューを作ろう

Good morning! Benです。一昨日、全社のWEBサイト更新を何とか無事終えました。事前準備は切羽詰まってましたが、切り替えは意外とスムーズ。細かいことはこれからも出てくると思いますが、重大欠陥発覚で以前のに戻すという最悪な事態は避けられました。

その更新ではスマホやタブレットなどでも閲覧できるようにレスポンシブWEBデザインにしました。その中で悩むのがメニューです。の会社のホームページは、支社を選ぶグローバルメニューと、各支社内メニューの2つのメニューがあります。支社内のは項目数が多いので以前紹介したjQueryのSmartMenusを用いました。一方、支社数は少ないので、グローバルメニューは普通に横並びのリストにしました。

20160226c.PNG
その横並びリストと同じのがこのブログのメインメニューです。PC環境でこのブログを閲覧している方は、上にあるこのEXCELVBAHTML&CSSなどのメニューのことです。メインメニューの各リストは通常、最低幅を120pxに設定したうえで%で6分割して一行で表示させるようにしています。

PCは一般に高解像度なので、コンテンツ幅が960pxのこのブログも余裕で表示できます。でも、タブレットは768pxも考慮が必要だし、スマホの320px、360pxなどへの対応も必要です。そこで、このデバイスの幅(実際のドット数でなく、デバイスが定義する視覚的な画面幅)によって表示を切り替えるようにします。事前にhead部にviewportの指定するのをお忘れなく。

@media screen and (max-width: 735px) {
#mainmenu li{
width:33.33%;
}
}
@media screen and (max-width: 375px) {
#mainmenu li{
width:50%;
}
}
これは、画面幅に応じてメインメニューのリストの幅を変えるものです。@mediaと記載するメディアクエリというものを使います。これにscreenを加えて スクリーン表示を対象に。そのうえでandで条件につなげ、(max-width: 735px)という最大画面幅が735px以下だったら、を加えます。これをCSSに付け加えてブラウザの幅を狭めると…

20160226a.PNG
こちらは画面幅735px以下の表示です。先ほどのメディアクエリの上のほうが実行され、リスト幅は33.33%。つまり、1行の幅(100%)に3つのリストが入り、あふれたら次の行になる設定です。結果として3列×2行になります。

20160226b.PNG
こちらはスマホ等向けの375px以下の表示です。メディアクエリの下の方が適用された状態です。リスト幅が50%なので結果として2列×3行になります。ただ、上記の記述だと、スマホでは上のクエリも無駄に実行されます。min-widthも指定すれがいいのですが、面倒なのでやめます(^^;

固定幅にして下に回り込む方法もありますが、%のほうが隙間ができないので目見栄えがいいと思います。話は変わりますが今日もりそな銀行スマムメールが来ました。しつこいなあ。


この記事へのコメント


この記事へのトラックバック