スマホでの観覧を考えると、多くの情報を表示したくてもユーザビリティへの悪影響を考えて情報を減らすこともありますよね。
そんなときに便利なのがスクロール機能で、表示領域を制限させたうえで必要な情報をスクロールで表示されることができます。
縦スクロールは簡単ですし、スマホの場合は誤操作を招く場合があるので、今回は横スクロールを実装する方法をご紹介します。
キーコードはFlexbox
FlexboxはCSS3から使用できるようになったコードで、簡単に言うとdisplay: flex; と記述するだけで要素が横並びになります。HTML
<div class="flex_1"> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> </div>CSS
<style>
.flex_1 {display:flex;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>
サンプル
テスト1
テスト1
テスト1
テスト1
HTMLの方を変更して子要素をもう少し増やしてみましょう。
<div class="flex_1"> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> <div class="f_1">テスト1</div> </div>サンプル
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
デザインが汚くなってしまいましたが、折り返さないで横並びが永遠と続いていますよね。
Flexboxは折り返さないことが初期値となっていて、これが同じ横並びの作用を持つfloatやdisplay: inline-block;と違う所。
flex-wrap:を記述すれば、折り返すこともできますが、横スクロールは折り返さないことで実現するため、簡単な紹介だけしておきます。
flex-wrap:
- nowrap = 折り返さない（何も記述しなければnowrapが初期値）
- wrap = 折り返す
- wrap-reverse = 逆方向へ折り返す
Overflow-xで横スクロールを実装してみよう
Flexboxで中身は完成しました。では、表示領域を制限して横スクロールを実装してみましょう。
これも簡単です。
表示領域からはみ出した場合の処理を指定するoverflowを記述するだけです。
- visible = ボックスからはみ出て表示（初期値）
- hidden = はみ出た部分は隠す
- scroll = スクロールで表示
- auto = 一般的にはスクロールが適用
もうわかりましたね。
overflow:scroll;で横スクロールの実装は完成です。
overflowには水平方向の表示方法を指定するoverflow-xと、垂直方向のoverflow-yがありますが、横スクロールなのでoverflow-xを使用しましょう。
CSS
<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>
サンプル（HTMLは上記と同様）
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
今度は子要素の方法をアレンジしてみましょう。
コンテンツ内に表示する一つの子要素のサイズをflexで指定してみましょう。
CSS
<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;flex:0 0 30%;-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;}
</style>
・flex:0 0 30%;は左から順番にflex-grow、flex-shrink、flex-basisの3つの値を指定していることになります。今回はwithのように横幅を指定するflex-basisの値を指定しています。
サンプル（HTMLは上記と同様）
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
テスト1
-webkit-overflow-scrolling: touch;とoverflow-scrolling: touch;はスマホでのスクロールを滑らかにするプロパティですので、合わせて記述しておきましょう。
以上です。
横スクロールはFlexboxの登場によって簡単に実装できるようになりました。
Flexboxには他にも様々なプロパティがあるので、機会があったら、またご紹介したいと思います。
では、長文にお付き合い下さって、ありがとうございました。