スマホの場合は、画面下端の方が圧倒的にタップしやすく、スマホアプリは大体画面下部に重要なナビゲーションが並んでいる。
本サイトもそれに倣って改修する。
環境
- Django v2.1.4
- Bootstrap v4.2.1
スマホのみに表示する
Bootstrapの機能を使う。
以下のようにHTMLに記載すれば、スマホ(画面サイズ768px未満)の場合のみ表示される。
<div class="d-block d-sm-none">スマホのみ表示</div>
iPhone8の画面サイズで表示すると以下のように最下部に"スマホのみ表示"というテキストが表示されるが、
iPadの画面サイズで表示すると"スマホのみ表示"というテキストが表示されなくなる。
参考
下端に固定する
CSSで実装する
表示位置を絶対位置で指定する。
以下のようにCSSで指定することで画面下端に要素を固定できる。
/* スマホ用画面下端メニュー */
.footer-menu-bar
{
position: fixed; /* 要素の位置を固定する */
bottom: 0px; /* 絶対位置を指定する(下0px) */
}
ただ、この方法だと他コンテンツと重なって表示されてしまうので他の用途に使う場合は注意。(今回の用途としては重なっても問題なしとしている)
参考
横並びでリスト表示する
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>
表示は以下のようになる。
なお、ここでは説明を省略したが、CSSでtext-align: centerを適用し、テキストを中央揃えにしている。
使い勝手をよくする
アイコンを表示する
Font Awesomeのアイコンを使う。
以下のようにHTMLの<head>要素でFont Awesomeで読み込むことで(今回は自サーバ上にFont Awesomeをダウンロードしている)、
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
アイコンは以下のように使用、表示できる。
<body>
...
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
...
</body>
今回であればリスト表示部分の実装(HTML)を以下のように変更する。
<div class="d-sm-none d-block footer-menu-bar w-100 border-top">
<div class="row m-2">
<div class="col">
<i class="fas fa-home"></i> TOP <!-- アイコンを追加 -->
</div>
<div class="col">
<i class="fas fa-search"></i> 検索 <!-- アイコンを追加 -->
</div>
<div class="col">
<i class="fas fa-tag"></i> タグ <!-- アイコンを追加 -->
</div>
</div>
</div>
表示は以下のようになる。
参考
背景に透過色を設定する
CSSで背景色を指定してメニューバーとその他のコンテンツの区別がつきやすいようにする。
背景色は透過させて、下に隠れているコンテンツが見えるようにする。
CSSを以下のように変更し、実装する。
/* スマホ用画面下端メニュー */
.footer-menu-bar
{
text-align: center;
position: fixed; /* 要素の位置を固定する */
bottom: 0; /* 絶対位置を指定する(下0px) */
background-color: rgba(255, 255, 255, 0.85); /* 背景は透過させる */
}
表示は以下のようになる。
参考
最後にリンクをつけて完成
以下のようにHTMLにリンクの設定を追加して完成。(一部見た目修正のためstyle要素で強引に設定している。)
<div class="d-sm-none d-block footer-menu-bar w-100 border-top">
<div class="row m-2">
<div class="col">
<a href="{% url 'top' %}" style="color:#212529; text-decoration:none;"><i class="fas fa-home"></i> TOP</a> <!-- TOPへのリンク -->
</div>
<div class="col">
<a href="#search-within-site" style="color:#212529; text-decoration:none;"><i class="fas fa-search"></i> 検索</a> <!-- 検索へのページ内リンク -->
</div>
<div class="col">
<a href="#tag-list" style="color:#212529; text-decoration:none;"><i class="fas fa-tag"></i> タグ</a> <!-- タグへのページ内リンク -->
</div>
</div>
</div>
ここのリンク先は実装するサイトに合わせて設定する形になる。
ページ内リンクについてはスムーススクロールを実装したかったが、画像遅延ロードがある影響でスクロール先が正確に取得できないため、実装しなかった。
参考
