横スクロールナビゲーションを実装する3つの方法

実装方法3パターン

横スクロールを実装する方法は以下の3パターンが主流だと思う。
1, 親要素をdisplay: flexにする
2, 子要素をdisplay: table-cellにする
3, 子要素をdisplay: inline-blockにする

それぞれの実装方法と気をつけるところを書いていく。

HTMLはこういったものを想定

<ul class="gnav">
  <li class="item">gnav1</li>
  <li class="item">gnav2</li>
  <li class="item">gnav3</li>
  <li class="item">gnav4</li>
  <li class="item">gnav5</li>
</ul>

ちなみにどのパターンも親要素(ul)に overflow-x: auto; または overflow-x: scroll; をつける必要がある

demo

demoページ

1, 親要素をdisplay: flexにする

実装方法

CSS3で導入されたdisplay: flexを使用する方法。
親要素(ul)にdisplay: flexをつけると、子要素 (li) が折り返されずに横に続いていく。

ちなみにflex-wrapの初期値はno-wrapなので、display: flexのみ設定すれば良い。

注意点

ブラウザ対応が面倒くさそうな印象があったのですが、
ie以外では対応しているようで、ie10以降であればプレフィックスをつければ対応可能なよう。
cf: http://caniuse.com/#search=flex

スマホの案件とか、新しいプロパティ使いたい人はこのパターン。

コード

2, 子要素をdisplay: table-cellにする

実装方法

これが一番安定の使い方だと思う。
子要素(li)を display: table-cell にするだけで横スクロールを実装できる

レガシーブラウザに対応しないといけない場合か、
どれを使うか迷ったらこれ。

コード

3, 子要素をdisplay: inline-blockにする

実装方法

子要素を display: inline-block にすると横並びにはなる。

注意点

display: inline-blockにすると子要素と子要素の間にスペースができてしまう。
それを直すには、親要素を font-size:0 にして、子要素で表示したいfont-sizeを指定すると解消できる。

コード

スクロールバーを消したい

横スクロールの実装方法と直接は関係ありませんが、スクロールバーを消したいという要望が出てくるケースは多いと思うので念のため。

以下の記事がとても参考になります。
Appleに学ぶ、横スクロールナビを組む時のCSSメモ

まとめ

基本的には2番の方法を使うのがいいと思います。

demoページ
コード

もっと良い実装方法があるという方はご教授いただけると幸いです。