ナビゲーションバー 常に表示

折原 慧ウェブデザインデイ 編集ライター

スマートフォンを操作していて、いつの間にか画面下の「戻る」「ホーム」ボタンが消えてしまい、戸惑った経験はないでしょうか。あるいはWebサイトを制作していて、スクロールしてもメニューを画面上部に固定表示したいと悩んでいる方もいるかもしれません。

実は「ナビゲーションバー 常に表示」という同じ言葉でも、スマホ側の設定を求める方と、Web制作でCSSによる固定表示を実装したい方の2種類のニーズが存在します。個人的にWeb制作の現場に携わってきた中で、この両方の相談を受ける機会が多くありました。この記事では、その両方をまとめて解決していきます。

Androidでナビゲーションバーを常に表示する基本の考え方

まず押さえておきたいのが、Androidスマホでナビゲーションバーが消える最大の原因です。

それはジェスチャーナビゲーションという操作方式が有効になっているためです。

近年のAndroidスマホでは、画面の端をスワイプして操作する「ジェスチャーナビゲーション」が初期設定になっていることが増えました。この方式では、戻るボタンやホームボタンが画面に常時表示されません。

そこで、確実にボタンを常に表示させる方法が「3ボタンナビゲーション」への切り替えです。この設定にすると、画面下部に「戻る」「ホーム」「タスク（最近のアプリ）」の3つのボタンが常に固定表示されるようになります。

この基本の流れを覚えておけば、多くのAndroid端末で対応できます。設定後は、勝手にバーが消えることなく安定して使えるようになります。

Androidのバージョンや機種ごとの設定手順

Androidはメーカーによって設定メニューの構成が異なります。ここでは代表的なパターンごとに、より具体的な手順を紹介します。

Android 9.0以降の標準的な手順

Android 9.0以降のスマホでは、システムナビゲーションの設定が一箇所にまとめられています。

具体的には、設定アプリから「システム」→「ジェスチャー」と進みます。次に「システムナビゲーション」をタップし、「3ボタンナビゲーション」または「3つのボタン」モードを選択するだけです。

この設定により、ジェスチャー操作から3ボタン操作に切り替わり、ナビゲーションバーが画面下部に常時固定されます。

Galaxy（One UI）での設定手順

Galaxy端末では、Samsung独自のOne UIというインターフェースが採用されているため、メニューの場所が少し異なります。

設定から「ディスプレイ」→「ナビゲーションバー」へと進みます。ナビゲーションバーのモードで「ボタン」（3ボタン）を選択すれば設定完了です。

必要に応じて、戻る・ホーム・タスクのボタン配列を自分の使いやすい順番に変更することもできます。普段から画面下にボタンを出しっぱなしにしたい方には、3ボタンに戻すのが最も手軽な方法です。

OPPO端末での設定手順

OPPO端末もメニュー構成が多少異なりますが、基本方針は同じです。

設定内で「ナビゲーション」に関する項目を探し、「ジェスチャー」から「ボタン（3ボタン）」へ切り替えます。設定項目が見つけにくい場合は、設定アプリ上部の検索窓で「ナビゲーション」と入力すると素早くたどり着けます。

Webページでナビゲーションバーを常に表示する方法

ここからはWeb制作者向けの内容です。スクロールしてもメニューを画面上部に固定表示させたい場合、CSSのpositionプロパティを使います。

方法は主に2つあります。「position: sticky」と「position: fixed」です。

最もシンプルなのはstickyを使う方法です。

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

たったこれだけのコードで、ナビゲーションバーが画面上部までスクロールすると、そこで貼り付いたように固定表示されます。z-indexは、他の要素より前面に表示させるための指定です。

stickyとfixedの違いと使い分け

この2つは似ていますが、動作に明確な違いがあります。

ページ最上部からずっと固定したいならfixed、少しスクロールしてから固定したいならsticky。これが基本的な使い分けの考え方です。

fixedを使う場合は、ナビバーの高さ分だけコンテンツが背後に隠れてしまうため、bodyやメイン要素に上部の余白（padding-top）を追加する必要があります。この点でstickyの方が扱いやすく、初心者にはおすすめです。

なお、stickyを設定したのに固定されないというトラブルもよく発生します。親要素にoverflowが設定されていたり、高さが不足していたりすると効かなくなるため、position stickyが効かない原因の対処法を確認しておくと安心です。ナビゲーションのデザイン全体を考える際は、ハンバーガーメニューの実装と組み合わせるとモバイル対応もスムーズになります。

よくある質問

ナビゲーションバーが勝手に消えてしまうのはなぜですか

最も多い原因はジェスチャーナビゲーションが有効になっていることです。3ボタンナビゲーションに切り替えると、バーが常時表示され消えなくなります。アプリを全画面表示している場合も一時的に隠れることがあります。

3ボタンに戻すとバッテリー消費は増えますか

基本的にナビゲーション方式による電力消費の差はほとんど気にする必要はありません。操作の好みで選んで問題ありません。ジェスチャーの方が画面を広く使えるという利点はあります。

Webのナビバー固定はスマホでも動作しますか

position: stickyもfixedも主要なスマホブラウザで動作します。ただし古い端末では挙動が異なる場合があるため、実機での確認をおすすめします。

stickyを設定したのに固定されません

親要素にoverflow: hiddenが指定されていたり、top値を指定し忘れていたりすると効きません。まずはtop: 0が設定されているか確認してみてください。

fixedとstickyはどちらを使うべきですか

コンテンツを背後に隠したくない場合や実装をシンプルにしたい場合はstickyが向いています。ページの最初から常に固定したい特別な要件があるときはfixedを選びます。

まとめ

「ナビゲーションバー 常に表示」には、Androidスマホの設定とWeb制作の実装という2つの解決策があります。

スマホの場合は、設定から3ボタンナビゲーションに切り替えるだけで、ボタンが常時表示されます。GalaxyやOPPOなど機種ごとにメニュー位置は違いますが、「ジェスチャーからボタンへ」という基本方針は共通です。

Web制作の場合は、CSSのposition: stickyを使えば、わずか数行でスクロール追従するナビバーが完成します。まずは扱いやすいstickyから試し、必要に応じてfixedを検討するとよいでしょう。

どちらのケースも、設定やコードの場所さえ分かれば数分で解決できます。ぜひご自身の環境で試してみてください。