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

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

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

#98 CSSで作る横スライド

WEB制作

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

公開日:
最終更新日:

サイトマップサイトマップ

横スライドを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つ並ぶとスクロールが発生すると。要素の合計が100%を超えないとだめ。
あふれないとスクロールにはなりません
40%なので3つ以上コンテンツが並ぶとスクロールが発生します。(もちろんここの数値を調整すれば、最低限の横幅が変わります。)

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

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

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

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

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

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

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

アナリティクス
導入前後の比較

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

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

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

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

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

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728円(税込)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円(税込)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,508円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

2,486円(税込)

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

3,800円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

CSSで作る横スライドの関連ページ

ブログ デイリーアクセスランキング

カー用品
1位

カー用品

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

AM-AX1800HP
3位

AM-AX1800HP

Wifi6は今後スタンダードになるので先行投資で導入しましたが、速度改善の効果が皆無でちょっとしょんぼりです。

CLS対策初級編
4位

CLS対策初級編

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CSSで作る横スライド
5位

CSSで作る横スライド

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

NORDACE
6位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

ロリポップサーバーの安定感
7位

ロリポップサーバーの安定感

ロリポップハイスピードプランは価格も安く、表示速度も速い。 しかもアクセス耐性も高いとなるとほんと選んでよかったと思います

MX MASTER3
8位

MX MASTER3

ロジクールのマウスは文句なしの出来栄えなんですよ。 だから高くても私は買いますよ。これ以外使う気ないですからね。

カレンダー
9位

カレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

魔法少女まどか☆マギカ
10位

魔法少女まどか☆マギカ

魔法少女まどか☆マギカという名前が誤解を生みそうな素晴らしい作品があります。魔法少女という強烈なメタファーのせいで誤解をしていました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなどを書いていきます。

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728
(税込)