スマホサイトのナビゲーションに横スクロールを採用しては?
スマホのナビ、気づかれない?
スマートフォンでアクセスした際、ナビゲーションを最初非表示にして、ハンバーガーメニュー(←こんなの)をタップするとナビゲーションが表示されるサイトはたくさんありますし、私も使います。
しかしユーザビリティというか、やっぱりこのボタンをボタンとして理解してくれず、下層ページに移動できないユーザーが一部いたりしている場合が稀にあります。特にご年配の方もスマートフォンを普通に持っている今、誰にでもわかりやすい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で表示を調整することができます。
簡単なデモページ
サンプルを作りました。スマホでどうぞ。
同じカテゴリーの別の記事
CONTACT
ホームページでの集客やWeb全般・スマートフォンアプリ制作などに関するご相談はお問い合わせフォームをご利用ください。
なお、ご相談いただいた後でも、弊社から営業などの売り込みを行うことは一切ありませんのでご安心ください。
お電話でのお問い合わせは、
0952-20-1501
平日10:00~18:00まで。セールス目的のお電話はご遠慮ください。