【スマートフォン対応】アイテムを1行で横スクロールさせる方法

スマホ画面だとPCと比べて幅が狭いのでたくさんの要素を入れたい場合に悩むことがあると思います。

そのようなときに使うのが横スクロールさせる方法です。

横スクロールを対応することで要素の高さを無駄に出さずにコンパクトに収めることができます。

どんなに要素が多くなっても1行分の高さだけを確保すればよいのでスマホでよく使われる方法です。

対応も難しくなくcssだけで対応できるので簡単です。

スマホで横スクロール対応させる方法

html

まずは横スクロールさせて1行に収めるための要素をhtmlに記述します。

<ul>
        <li><a href="#"><img src="https://placehold.jp/300x300.png" alt="画像"></a></li>
        <li><a href="#"><img src="https://placehold.jp/300x300.png" alt="画像"></a></li>
        <li><a href="#"><img src="https://placehold.jp/300x300.png" alt="画像"></a></li>
        <li><a href="#"><img src="https://placehold.jp/300x300.png" alt="画像"></a></li>
        <li><a href="#"><img src="https://placehold.jp/300x300.png" alt="画像"></a></li>
        <li><a href="#"><img src="https://placehold.jp/300x300.png" alt="画像"></a></li>
</ul>  

css

ul{    
	overflow-x: scroll;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

ul li{
	width: 70%;
	padding: 5px 0;
	display: inline-block;
        margin-right: 8px;
}
       
ul li a{display: block;}
ul li a img{max-width: 100%;}

対応方法

対応方法としては要素を横並びにするために「display: inline-block;」を指定します。

次に親要素であるulに横スクロールさせるためのスタイルを記述します。

たったこれだけです。

簡単ですよね。

画面に要素を何個まで表示させるかはwidthの数値を変えてもらうことで2個だったり2.5個表示させることもできます。