overflow-x: scrollを使った横スライダーの作り方紹介

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

1行のCSSで作る横スライドの作り方

CSSで作る横スライド

1行のCSSで簡単に横スライドを実装する方法を紹介しています。Jquery不要です。限られた表示領域に多数の情報を詰め込むのに適した横スライド。スマホとの相性もばっちりで、導入した結果回遊率がUPしたという結果報告も合わせて紹介しています。

公開日:
最終更新日:

CSSで作る横スライド 関連ワード
css
作り方
スタイルシート
スライド
簡単
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る

横スライドをCSSだけで簡単に実装する方法

スマホではおなじみの横スライダー。
ひと昔前はJavascriptやJqueryを使って高機能なスライダーのライブラリが人気でしたが、今はCSSだけで簡単に使うことができます。

Jqueryをつかわずに、簡単に横スライドを導入する方法の紹介です。

.slide{overflow-x: scroll;}

この1行だけでスクロールが実装できると。

overflow したときの処理をどうするかというプロパティなんですけど、x で横軸があふれたらスクロールさせると。

これで終わりなんですが、もう少し実践的な使い方を紹介します。

あふれるコンテンツを調整してスライドできるように見せる

途中でわざと要素をちぎって暗喩でスライドできることを伝えます。

▼実例

HTMLの概要部分

<div class="sample">
<ul>
<li>スライドしたい要素1</li>
<li>スライドしたい要素2</li>
<li>スライドしたい要素3</li>
</ul>
</div>

なんでもいいので横並びにできるように作ります。

スライド用CSS 概要部分

.sample ul{
	display: flex;
	overflow-x: scroll;
	margin: 0;	
	padding: 0;
}
.sample li{
	min-width: 40%;
	margin: 10px;	
	padding: 0;
	list-style: none;
}

<ul> にdisplay:flex を指定して、横並びにします。
要素が溢れたらスクロールを表示させる overflow-x: scroll を追加。

<li> に、min-width: 40%; で最小の横幅を指定

40%指定なので3つ並ぶとスクロールが発生すると。
あふれないとスクロールにはなりません
40%なので3つ以上コンテンツが並ぶとスクロールが発生します。(もちろんここの数値を調整すれば、最低限の横幅が変わります。)

通常のwidth指定だと、flexの横幅に収める効力によって、大きさを縮小されてしまうので、要素があふれずにスライドが表示されません。
min-widthで最小値を縛るのがポイントです。

ループはしないけど簡単で便利

CSSでのスクロールなので、要素をが終わってもループしてスクロールしたりはできませんが、簡単に実装できるのがメリットです。

スマホのUIだとスクロールが一般的なので、相性がいいんじゃないかと思います。

スライドを導入したら回遊率があがった(と思う)

このサイトを2019年11月3日にリニューアルしたんですけど、そのタイミングでこのスライドを導入したんですね。
そしたら1人当たりのPV数が増えました。

リニューアルしたのはスライドを入れただけじゃないので、一概にこのおかげと断言できないんですが、多少は効果あったんじゃないかなと。

アナリティクス

導入前後の比較

上のグラフは私のアナリティクスの目標の1つが、3PV以上というのがありまして、その数値の変動結果です。

オレンジがリニューアル前で、青がリニューアル後。
3PV以上の人の割合がそこそこ増えております。

少ない領域で多くの情報を伝えるのに便利

横スライドのメリットは、少ない専有面積で多くの情報を伝えるのに適しています。
関連コンテンツとかグルーピングして、同じような情報を横並びで伝えるのが良いです。

なによりも簡単に導入できるのでぜひ、お試し下さい!

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

プロフィール詳細はこちら

html 関連記事はこちら すべての WEB制作 記事はこちら

ブログ人気の記事・レビュー

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

プロフィール詳細はこちら

CSSで作る横スライド関連・オススメ商品 amazon