スマホサイトのナビゲーションに横スクロールを採用しては？

2017.12.18ホームページ制作

スマホのナビ、気づかれない？

スマートフォンでアクセスした際、ナビゲーションを最初非表示にして、ハンバーガーメニュー（←こんなの）をタップするとナビゲーションが表示されるサイトはたくさんありますし、私も使います。

しかしユーザビリティというか、やっぱりこのボタンをボタンとして理解してくれず、下層ページに移動できないユーザーが一部いたりしている場合が稀にあります。特にご年配の方もスマートフォンを普通に持っている今、誰にでもわかりやすいUIを考えることは非常に重要ではないでしょうか。なんて思うわけです。

横スクロールに注目した

まずはこちらのサイトをスマホでご覧ください。

https://www.apple.com/jp/iphone/

iPhoneが並んでいるナビゲーション、横スクロールしませんか？これだとユーザーにもボタンの存在をわかりやすく伝えることができるのと同時にレイアウト的にもスッキリしていいですよね。しかも横にスワイプすると慣性スクロールするのも気持ちいい！

というわけで作ってみます。

制作のポイント

  • 1:画面外からスワイプして表示されること
  • 2:慣性スクロールでぬるっと動くこと
  • 3:スクロールバーを出さない

この辺りでしょうか

 

<nav>
<div> 

<ul>
	<li><a href="#">First</a></li>
	<li><a href="#">Second</a></li>
	<li><a href="#">Third</a></li>
	<li><a href="#">Fourth</a></li>
	<li><a href="#">Fifth</a></li>
	<li><a href="#">Sixth</a></li>
   
</ul>
</div>
</nav>

シンプルなhtmlです。これにCSSを加えます。

    nav{
	width:100%;
	overflow: hidden;
       }
   nav div{
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
}
   nav ul{
     display: inline-table;
     max-width: 100%;
}
    nav ul li{
    display: table-cell;
}
   ::-webkit-scrollbar{
    display: none;
  }

ざっくり書くとこんな感じです。CSSのポイントはulを包むdivを一個作って、そこに-webkit-overflow-scrolling: touch;を加えることで、慣性スクロールが実現されます。また、ulにinline-tableを設定し、liにはtable-cellで横並びにさせることがポイントです。inline-tableにしないと画面外からやってきてくれません。

また、スクロールバーの表示に関しては：：-webkit-scrollbarで表示を調整することができます。

簡単なデモページ

サンプルを作りました。スマホでどうぞ。

スマホサイトのナビゲーションに横スクロールを採用したデモページ

TOP

TOP