横(水平)スクロールをCSSで簡単に実装する方法

ブログの記事下に設置する関連記事やランキングなどで一覧表示させるときに、カード型のデザイン横スクロールしているケースがありますが、その実装方法を解説していきます。

横スクロールとは

横スクロールとは、アプリやモバイルで最近よく採用されているUIです。
一般的なグリッドのスタイルと違って、コンテンツが横に展開されています。

横スクロールの実装方法

<ul class="horizontal-list">
	<li class="item">アイテム</li>
	<li class="item">アイテム</li>
	<li class="item">アイテム</li>
	<li class="item">アイテム</li>
	<li class="item">アイテム</li>
	<li class="item">アイテム</li>
</ul>
ul.horizontal-list {
	overflow-x: auto;
	white-space: nowrap;
}
li.item {
	display: inline-block;
	width: 60%;
	height: 400px;
	margin: 16px;
	font-size: 48px;
	color: #fff;
	background-color: #ff5a5f;
}	

横スクロール実装時に気をつけたいポイント

コンテンツをはみ出させる

横スクロールできるコンテンツについては、端に位置するコンテンツが画面からはみ出して途切れているようにデザインします。
良い例のようにコンテンツがはみ出していることでユーザーに「横スクロールできる」と認識してもらえるようになりますが、悪い例のようにコンテンツがはみ出していないとユーザーは隠れているコンテンツに気づくことなく下にスクロールしていってしまいます。

カードタイプのデザインのほうがユーザーに優しい

記事一覧で横スクロールを実装する際には、シンプルな画像と文字だけのデザインよりもカードタイプのデザインのほうがユーザーにストレスなく使っていただけます。

適切なアイテム数にする

横スクロールで表示させるアイテム数は5〜10個程度がおすすめです。
4個以下であれば、横スクロールではなくグリッドスタイルで表示させればいいですし、11個以上になるとユーザビリティ低下の原因にもなりますので別ページに誘導するなどをしたほうがよいでしょう。

コメントをする

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はお断りしております。