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で作る横スライドの関連ページ

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

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

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

カレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

カレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

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

POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

SNSでこの記事をシェアできます

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

ノートPCスタンド
1位

ノートPCスタンド

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

MusicBeeのレイアウト変更方法
2位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

ウルトラブースト
3位

ウルトラブースト

一度はいたら手放せない! アディダスの「ウルトラブースト」搭載のハイテクシューズのレビューとオトクに購入する方法です

コンプライ
4位

コンプライ

評判と値段の高いコンプライのイヤーピースの購入後1週間レビュー!柔らかいウレタン素材のイヤーピースは装着前に指でつぶして耳穴に装着します。

将棋を覚えなおす
5位

将棋を覚えなおす

将棋って面白いんですよ。弱ければいろいろと覚えることがあって、戦法を覚えることで強くなっていくことを実感できますし。

ATGOIN
6位

ATGOIN

基本性能はどの商品もさほど差がない3000円台のBluetoohは音の良しあしで選ぶのがオススメ。

アンズテック
7位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

ツタヤディスカス
8位

ツタヤディスカス

定額レンタル宅配CD・DVDサービスのツタヤディスカスを利用してみました。 1ヵ月で20枚レンタルしました!1枚93円!

つまづきやすい5つのポイント
9位

つまづきやすい5つのポイント

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

電子ノート
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
(税込)