サイトをスマホで表示したとき下端にメニューバーが表示されるようにする

スマホの場合は、画面下端の方が圧倒的にタップしやすく、スマホアプリは大体画面下部に重要なナビゲーションが並んでいる。 本サイトもそれに倣って改修する。 環境 Django v2.1.4 Bootstrap v4.2.1 スマホのみに表示する Bootstrapの機能を使う。 以下のようにHTMLに記載すれば、スマホ(画面サイズ768px未満)の場合のみ表示される。 <div class="d-block d-sm-none">スマホのみ表示</div> iPhone8の画面サイズで表示すると以下のように最下部に"スマホのみ表示"というテキストが表示されるが、 iPadの画面サイズで表示すると"スマホのみ表示"というテキストが表示されなくなる。 参考 表示ユーティリティ~Bootstrap4移行ガイド 下端に固定する CSSで実装する 表示位置を絶対位置で指定する。 以下のようにCSSで指定することで画面下端に要素を固定できる。 /* スマホ用画面下端メニュー */ .footer-menu-bar { position: fixed; /* 要素の位置を固定する */ bottom: 0px; /* 絶対位置を指定する(下0px) */ } ただ、この方法だと他コンテンツと重なって表示されてしまうので他の用途に使う場合は注意。(今回の用途としては重なっても問題なしとしている) 参考 【css】フッターをページ下部に固定する方法【お手軽コピペ】 | Pで作業軽減しましょ 横並びでリスト表示する Bootstrapの機能を使ってリスト表示を実装する。 HTMLを以下のように変更する。 <div class="d-block d-sm-none">スマホのみ表示</div> ↓ <div class="d-sm-none d-block footer-menu-bar w-100 border-top"> <div class="row m-2"> <div class="col"> TOP </div> <div class="col"> 検索 </div> <div class="col"> タグ </div> </div> </div> 表示は以下のようになる。...

May 31, 2020 · 2 min