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,300円(税込)

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デザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

2,454円(税込)

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

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

1,958円(税込)

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

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

1,848円(税込)

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

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

tableデザイン

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

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

ロリポッププラン比較

【2024年4月更新】ロリポップの最適プランの選び方

ロリポップのレンタルサーバーのプランからライトプラン、スタンダードプラン、ハイスピードプランの3つの違いをレビューしました

WEB表示速度高速化

WEBページ表示速度改善のためにやった7つ以上の施策

WEB表示速度は速いほうがページの離脱防止やユーザーの満足度向上につながるというわけで、大きいことから小さいことまでやりました

独学

独学で学ぶことのメリットとデメリット

独学に限界を感じたことはないです。 人に頼りたいと思ったことはあってもすがりたいと思ったことはありません。

WEBフォント設定

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

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

アイキャッチの作り方

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

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

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

CLS対策上級編

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

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

marginとpadding

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

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

CLS対策初級編

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

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

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

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

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

スクロール監視

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

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

jquery-match-height.js

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

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

indexOf

JavaScriptのIndexOfの使い方の復習

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

アンカーリンクナビ

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

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

bookblock

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

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

交差監視

Intersection Observer APIを図解で解説

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

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

URLの疑似静的化

URLの疑似静的化 動的URLを静的URLにする方法

htacessを使いhtmlファイルが存在しない静的URLを生成する方法と、仕事で使った疑似URLの活用方法の紹介です。

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

日付比較

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

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

PHPで作るカレンダーの作り方2

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

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

PHPの覚え方

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

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

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

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

洗顔せっけんどろあわわ
1位

洗顔せっけんどろあわわ

長らくずっと使い続けている洗顔せっけんどろあわわを紹介します。 クリームみたいな泡で洗える美容成分の詰まった洗顔せっけん

タフグミ
2位

タフグミ

仕事の合間によく食べるグミ。私は歯ごたえがあるグミが好きです。そんなハードグミ界にタフグミが登場。最近こればっかり食べています。

SPIBELT(スパイベルト)
3位

SPIBELT(スパイベルト)

無くしやすいカメラレンズのキャップの収納&持ち運びに便利なミニマルなウエストポーチ SPIBELT(スパイベルト)のレビューです。

ノートPCスタンド
4位

ノートPCスタンド

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

静岡県家族旅行三日目
5位

静岡県家族旅行三日目

静岡県家族旅行三日目はお城巡り。駿府城公園から、掛川城、可睡斎に立ち寄り、浜松城を巡り、浜名湖畔のホテルで宿泊。

車用スマホホルダー
6位

車用スマホホルダー

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

掛川花鳥園と寸又峡
7位

掛川花鳥園と寸又峡

掛川花鳥園の鳥が自由に飛び交って腕でも肩でも鳥をのせて楽しめるあの空間が大好きになりました。夢の吊り橋は遠い。

PHPを使って作るCMS
8位

PHPを使って作るCMS

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

スクロール監視
9位

スクロール監視

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

SEO titleとh
10位

SEO titleとh

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

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
(税込)