要素を横並びにして横スクロールさせる方法はいくつかありますが、みなさんはどの方法を使っていますか？
- フロート？
- テーブルセル？
- インライン？
よく使う横並び&横スクロールさせる方法
要素を横並びさせて横スクロールさせる方法と言えば、よく使うのはやはり「float」ですよね。
- 横並びさせる複数の要素（A）をフロートさせる
- フロートさせる要素を包む要素B（要素Aの親要素）に幅を指定する
- 要素Bの親要素Cに「overflow-x: scroll（auto）」を指定する
これで、要素が横並びになり、かつ、横スクロールさせることができます。
▼サンプル
See the Pen horizontal-scroll-demo1 by Chef (@chef-aomori) on CodePen.
子要素が動的に変化する時には使えない
しかし、さきほどの方法には弱点があります。それは「子要素が動的に変化する時には使えない」ことです。
- 横並びしてる要素Aの幅が動的に変化する
- 要素Aが増えたり減ったりする
など。
▼サンプル（要素が増えて、2段になってしまう）
See the Pen horizontal-scroll-demo2 by Chef (@chef-aomori) on CodePen.
もちろん、幅を指定している親要素Bの幅を適宜変えれば問題ありませんが、動的に変化するサイトでは「使えない」方法になります。
親要素の幅を指定せずに要素を横並び&横スクロールさせる方法
しかし、これからご紹介する方法を使えば、親要素に幅を指定せずに、子要素を横並び&横スクロールさせることができます。
つまり、横並びさせる要素の幅が変わっても、要素自体が増えても、問題ないということです。div要素でも、li要素でも使えます。
HTMLは先述と同じです。この方法のポイントは3つ。順番に解説してみます。
横並びさせる要素A
まず、横並びさせる要素AのCSSに下記のコードを追加します。
display:inline-block;要素はいくら増えても問題ありません。逆に、一つしかなくても大丈夫です。
横並びしてる要素Aを包む要素B（要素Aの親要素）
次に、横並びさせた要素Aを包む要素B（要素Aの親要素）のCSSに下記のコードを追加します。
display: inline-block;
white-space: nowrap;ポイントは、「white-space: nowrap」です。通常は、文字の回り込みを改行を禁止する時に使うコードですが、こういった使い方もできます。
要素Bを包む要素C
最後は、要素Bを包む要素C（全体を包んでいる要素）のCSSに下記のコードを追加します。
overflow-x: scroll;横スクロールさせるコードです。
横並び&横スクロールサンプル
では、さきほどの方法を使って横並び&横スクロールさせたサンプルを見てみましょう。
（わかりやすいように、要素Cに幅を指定していますが、指定しなくても大丈夫です。その外側の要素（wrapperやbody）に幅を指定しているはずなので）
▼サンプル
See the Pen horizontal-scroll by Chef (@chef-aomori) on CodePen.
いかがでしょうか？非常に簡単な方法だと思いませんか？要素の幅を計算する必要もなければ、フロートを解除する必要もありません。
また、javaScriptやjqueryで動的にCSSプロパティを追加する必要がないのもポイントです。
まとめ
親要素に幅を指定せずに横並び&横スクロールさせる方法をずっと探してたんですが見つからず、結局自分でこの方法にたどり着きました。。
参考サイトは「Amazon」です。Amazonの商品がフロートされていなかったので、気になって調べたところ、こんな感じの方法を使っていました。
あ、そうそう。この方法は、自作したWordPressオリジナルテーマ「4536」でも使っているので、挙動を確かめたい方はそちらもチェックしてみてはいかがでしょうか？
ステマじゃないよ(*´∀｀)
