スマートフォンの普及でフリックを意識した、「画像ギャラリー」「パンくずリスト」「コンテンツスライダー」などが増えてきました。
検索してみると、jQueryの「iScroll」というプラグインを使った実装について書かれているページが多くありますが、記事の投稿日時は全体的に古め(2年～3年前が多い)となっていました。
このページではCSSだけで簡単に実装でがき、フリック操作可能な「パンくずリスト」「画像ギャラリー」「コンテンツスライダー」のコードを掲載したいと思います。
コピペで使えるので、宜しければお使いください。
このサイトはレスポンシブデザインに基いて設計しているので、ブラウザの幅を小さくしたり、Chromeの要素の検証などから、ユーザーエージェントを指定してご確認いただくと、よりスマートフォンやiPhoneの実機に近いかたちでご確認頂けます。
PR
横スクロール可能なパンくずリスト。
「schema.org」に基いて記載しているので、そのままお使いいただければ、Googleなどの検索結果にパンくずリストが表示されます。
スマホでご覧の場合は左右にフリック、PCからご覧の場合は左右にスクロールして下さい。
↑これだと、PCで表示した時にスクロールバーの存在感がありすぎるので、スクロールバーのデザインも少し控えめな感じに変更しみましょう。
うん、すっきりしていい感じになりました。
スクロールバーのデザインに関しては下記記事が詳しいです。
<!-- パンくず --> <!-- .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>
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を使ってシンプルに作ってみます。
画像でカレーの作り方を紹介した、フリック可能なコンテンツスライダー。
記述を最低限に抑えた、シンプルなソースです。ご自由にカスタマイズしてもらえればと思います:)
<section class="content-gallery scroll-bar">
<section class="content-gallery-card">
<img src="https://junk-blog.com/wp-content/uploads/2015/08/curry01.jpg" alt="curry01" />
鶏肉だよ
</section>
<section class="content-gallery-card">
<img src="https://junk-blog.com/wp-content/uploads/2015/08/curry04.jpg" alt="curry04" />
玉ねぎ切るよ
</section>
<section class="content-gallery-card">
<img src="https://junk-blog.com/wp-content/uploads/2015/08/curry11.jpg" alt="curry11" />
具材を炒めるよ
</section>
<section class="content-gallery-card">
<img src="https://junk-blog.com/wp-content/uploads/2015/08/curry38.jpg" alt="curry38" />
カレーだカレーだやっほー！
</section>
</section>
/* フリックできるコンテンツギャラリー */
.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だけで簡単に実装できる、横スクロール可能なパンくずリストと、コンテンツスライダーをご紹介しました。
非常に簡単かつシンプルに実装できるので、お試し下さい:)
![[PHP]どうしてfilter_input関数を使うのか](https://junk-blog.com/wp-content/uploads/2015/11/main_php.jpg)
コメント