WEB

超軽量!CSSだけで実装する横スクロールできるスライダーとパンくずリスト

HTML/CSS

スマートフォンの普及でフリックを意識した、「画像ギャラリー」「パンくずリスト」「コンテンツスライダー」などが増えてきました。

検索してみると、jQueryの「iScroll」というプラグインを使った実装について書かれているページが多くありますが、記事の投稿日時は全体的に古め(2年~3年前が多い)となっていました。

このページではCSSだけで簡単に実装でがき、フリック操作可能な「パンくずリスト」「画像ギャラリー」「コンテンツスライダー」のコードを掲載したいと思います。

コピペで使えるので、宜しければお使いください。

PCのから御覧頂いている場合

このサイトはレスポンシブデザインに基いて設計しているので、ブラウザの幅を小さくしたり、Chromeの要素の検証などから、ユーザーエージェントを指定してご確認いただくと、よりスマートフォンやiPhoneの実機に近いかたちでご確認頂けます。

PR

ページ内リンク

パンくずリスト

横スクロール可能なパンくずリスト。

schema.org」に基いて記載しているので、そのままお使いいただければ、Googleなどの検索結果にパンくずリストが表示されます。

デモ

スマホでご覧の場合は左右にフリック、PCからご覧の場合は左右にスクロールして下さい。

↑これだと、PCで表示した時にスクロールバーの存在感がありすぎるので、スクロールバーのデザインも少し控えめな感じに変更しみましょう。

スクロールバーを装飾(PCのみ)したデモ

うん、すっきりしていい感じになりました。

スクロールバーのデザインに関しては下記記事が詳しいです。

WebKitを使ってスクロールバーをカスタマイズ | CSSPRO
WebKitを使ってスクロールバーをカスタマイズ | CSSPRO

HTML

<!-- パンくず -->
<!--
  .scroll-barでスクロールバーの装飾を行っています。
  このクラスを外せば、デフォルトのデザインになります。
 -->
<section class="breadcrumb-list scroll-bar">
	<ol itemscope itemtype="http://schema.org/BreadcrumbList">
		<li itemprop="itemListElement" itemscope
				itemtype="http://schema.org/ListItem">
			<a itemprop="item" href="*">
					<span itemprop="name">TOPページ</span></a>
			<meta itemprop="position" content="1" />
		</li>
		›
		<li itemprop="itemListElement" itemscope
				itemtype="http://schema.org/ListItem">
			<a itemprop="item" href="*">
				<span itemprop="name">ブランド</span></a>
			<meta itemprop="position" content="2" />
		</li>
		›
		<li itemprop="itemListElement" itemscope
				itemtype="http://schema.org/ListItem">
			<a itemprop="item" href="*">
				<span itemprop="name">シリーズ</span></a>
			<meta itemprop="position" content="3" />
		</li>
		›
		<li itemprop="itemListElement" itemscope
				itemtype="http://schema.org/ListItem">
			<a itemprop="item" href="*">
				<span itemprop="name">アイテムページhogehogehogehoge</span></a>
			<meta itemprop="position" content="4" />
		</li>
	</ol>
</section>

CSS

PC(画面幅が992px以上)でスクロールバーが装飾するよう指定しています。

スマートフォン、タブレットでは、スタイルが反映されないので、デフォルトのスクロールバーが表示されます。

/* フリックできるパンくずリスト */
.breadcrumb-list {
  overflow-x: scroll;
  background-color: #FFF;
  border-bottom: solid 1px #CCC;
}
.breadcrumb-list ol {
  list-style: none;
  display: table;
}
.breadcrumb-list ol li {
  padding: 5px 1em;
  display: table-cell;
  white-space: nowrap;
}

/* 画面の横幅が992px以上 */
@media screen and (min-width: 992px) {
  /* スクロールバーの装飾 */
  .breadcrumb-list.scroll-bar::-webkit-scrollbar {
    height: 10px;
  }

  .breadcrumb-list.scroll-bar::-webkit-scrollbar-track {
    background-color: #FFF;
  }

  .breadcrumb-list.scroll-bar::-webkit-scrollbar-thumb {
    background-color: rgba( 238, 238, 238, 0.8);
  }
}

画像ギャラリー/コンテンツスライダー

次は画像やコンテンツをフリックやスクロールできる、スライダーをCSSを使ってシンプルに作ってみます。

デモ

画像でカレーの作り方を紹介した、フリック可能なコンテンツスライダー。

記述を最低限に抑えた、シンプルなソースです。ご自由にカスタマイズしてもらえればと思います:)

HTML

<section class="content-gallery scroll-bar">
    <section class="content-gallery-card">
      <img src="http://junk-blog.com/wp-content/uploads/2015/08/curry01.jpg" alt="curry01" />
      鶏肉だよ
    </section>
    <section class="content-gallery-card">
      <img src="http://junk-blog.com/wp-content/uploads/2015/08/curry04.jpg" alt="curry04" />
      玉ねぎ切るよ
    </section>
    <section class="content-gallery-card">
      <img src="http://junk-blog.com/wp-content/uploads/2015/08/curry11.jpg" alt="curry11" />
      具材を炒めるよ
    </section>
    <section class="content-gallery-card">
      <img src="http://junk-blog.com/wp-content/uploads/2015/08/curry38.jpg" alt="curry38" />
      カレーだカレーだやっほー!
    </section>
</section>

CSS

/* フリックできるコンテンツギャラリー */
.content-gallery {
  display: -ms-flexbox;
  /*--- IE10 ---*/
  display: -webkit-flex;
  /*--- safari(PC)用 ---*/
  display: flex;
  padding: 20px 0;
  overflow-x: scroll;
}

.content-gallery .content-gallery-card {
  max-width: 280px;
  min-width: 280px;
  margin: 0 10px;
  padding: 10px;
  background-color: #FFF;
  border: solid 1px #CCC;
}

まとめ

CSSだけで簡単に実装できる、横スクロール可能なパンくずリストと、コンテンツスライダーをご紹介しました。

非常に簡単かつシンプルに実装できるので、お試し下さい:)

この記事をシェアする

前の記事
次の記事

コメント

コメントを残す

* が付いている欄は必須項目となりますので、必ずご記入をお願いします。
メールアドレスは公開されませんのでご安心ください。

この記事と関連性の高い記事