こんにちは、Webデザイン(HTML/CSS)絶賛勉強中のボクです。
Webページデザインで少し前から変えたいと思っていたものの放置していたことに、
モバイル端末で表示したときにもグローバルナビゲーションメニューを常時表示しておきたい
ということがあります。
今回対応してみたのでその方法(CSS設定)をご紹介。
モバイルでもナビゲーションメニューを常時表示するCSS設定(WordPressでSimplicityテーマの場合)
このサイトはWordpressで構築されており、使っているテーマはSimplicityです。そのため設定内容は、具体的にはSimplicityに対してのものです。ただ、ナビゲーションメニューはリスト(<li>)で構成されているのが普通ですので、セレクタ指定さえ合わせられれば、ほぼ同様のことが他でもできると思います。
まず、対応前のモバイルの画面。右側がメニューボタンを押したときの表示（モーダル設定）。
普通にやると、こんな感じで右上のメニューマーク(左画像矢印)からしかナビゲーションメニューが見れないんですよね。
確かに、モバイルは画面が小さいですので、ナビゲーションメニューを開閉式にして画面領域を広げているは良いともいえますが、その良さ以上に気づきにくい＆わざわざ押さないんですよねぇ。
僕の個人的な感覚もありますが、これまでモバイル端末でブラウジングしているときに、メニューボタンの存在なんてほとんど意識したことがありません（認識できてない）し、認識した後もわざわざ押してまでどんなカテゴリがあるか見ることはほぼありません。つまり、僕からすると、この表示形式はナビゲーションメニューが死んでるも同然なんですね。
ということで、常時表示するように、かつできるだけ邪魔にならないように表示しましょう、というのが今回の対応。
実際にこのサイトに適用してる内容が以下。CSSを変更します。
@media (max-width: 1110px) {
>...#navi ul {
>...>...display: flex;
>...>...flex-wrap: wrap;
>...}
>...#navi ul li {
>...>...flex: 1 0 50%;
>...>...text-align: center;
>...}
>...#navi ul li:nth-child(-n+2){
>...>...border-bottom: double #bbbbbb;
>...}
>...#navi ul li a {
>...>...font-size: 14px;
>...>...padding: 3px;
>...>...border: 1px solid #dddddd;
>...}
}
結果がこんな感じ↓。
なんとメニューの表示/非表示化はCSSの設定のみで行われているんですねぇ。Simplicityの場合このCSSを追記するだけで、同様の結果となると思います。
画面は少し狭くはなりましたが、メニューが常時表示され、2列のレイアウトなので、そこまで縦長にはなってないですね。メニューボタン型よりも他のコンテンツが認識しやすい良い形になったと思っています。
やったこと
colorとかborderの設定は各人におまかせするとして、この対応の肝は
Flexbox(フレキシブルボックス)レイアウトを適用して、flex-wrap設定でナビゲーションメニューを多段ボックス配置したこと。
これだけです。
元々モバイルで非表示になっていたのは、メディアクエリ@media (max-width: 1110px)の場合(=スクリーン幅1110px以下の場合)に、#navi ulがdisplay: none;に設定されるためでした。ですので、そちらをFlexboxを適用して表示されるようにしています。
細かいこととしては、borderをリストのアイテム(<li>)ではなく、その中身(<a>)に適用して、リストアイテムの大きさをborderを含む大きさでとれるようにしています。これにより、Flexboxのアイテムのベースサイズを50%に指定するだけで、きれいに2列に並ぶようにしています。
また、リストの<a>タグ内のテキストが、メニューボタンがから表示した場合にあわせたものになっており、少し大きいため、小さめfont-sizeを指定しています。
上記コードをSimplicity子テーマのstyle.cssに貼り付ければ、同様になると思います。
Flexbox(フレキシブルボックス)レイアウトは、ナビゲーションメニューにかぎらず、画像をいい感じにならべたり、グリッドっぽい配置したり、といったことをレスポンシブデザインで簡単に実現できるとても便利なスタイルです。少し前まではfloat設定で行っていた設定ですが、最近ではこのFlexboxの方が便利なため、こちらが主流になるようです。
こういったモダンなHTML/CSSの適用方法は以下の本がめちゃめちゃ参考になりました。
レスポンシブWebデザインに必要な、メディアクエリやFlexboxレイアウト、Gridレイアウトなどがしっかり解説されていますし、CSSでのアニメーション効果や、上記で適用したborderやpaddingのボックス適用時の幅の考え方なども参考になります。自分のWeb入門レベルの知識を押し上げてくれる本となっています。
CSSを変更したら、こちら↓で紹介したようにクライアントのキャッシュで無視されないように設定するのを忘れずに。
以上ですっ。
コメント