ECサイトのトップページファーストビューや、ブログ等で関連記事、ランキング等を一覧表示する際、横スクロールを利用することはよくありますよね。
そんなとき、Javascriptを利用せずにCSSだけでも横スクロールを実現することができるので、その方法を紹介します。
CSSだけで実装するメリットは、とにかく動作が軽いところ。
デメリットは、自動で動いたりしないところ。
良し悪しあるので、入れたいコンテンツの場所によって使い分けましょう。
それではさっそくコピペで実装できるCSSコードを紹介していきましょう。
もちろん、レスポンシブ対応済です。
CSSだけで横スクロールを実装する方法
今回はブログでおすすめ記事を紹介するとき等で利用できそうな形で紹介しようと思います。
PCではタイル状に見えて、スマホだと横スクロールで見えるという形です。
PC画面だとこんな感じ。
スマホ画面だとこんな感じ。
html のソースコードががこちら。※表示させるタイルが6個の場合を想定
<div class="slide-wrap"> <div class="slide-box"> <a href="URL"> <img src="サムネイル画像"> <p>記事タイトル1</p> </a> </div> <div class="slide-box"> <a href="URL"> <img src="サムネイル画像"> <p>記事タイトル2</p> </a> </div> <div class="slide-box"> <a href="URL"> <img src="サムネイル画像"> <p>記事タイトル3</p> </a> </div> <div class="slide-box"> <a href="URL"> <img src="サムネイル画像"> <p>記事タイトル4</p> </a> </div> <div class="slide-box"> <a href="URL"> <img src="サムネイル画像"> <p>記事タイトル5</p> </a> </div> <div class="slide-box"> <a href="URL"> <img src="サムネイル画像"> <p>記事タイトル6</p> </a> </div> </div>
「<div class=”slide-box”>」の枠を増減させる使い方です。
cssがこちら
/* 通常（PC）ではタイル表示 */
.slide-wrap {
background-color: #ccc;
display: flex;
margin: 0 auto;
max-width: 1024px;
width: 100%;
}
.slide-box {
height: auto;
margin: .5%;
width: 24%;
}
.slide-box a {
background-color: #fff;
color: #222;
display: block;
text-decoration: none;
}
.slide-box img {
display: block;
height: auto;
width: 100%;
}
.slide-box p {
font-weight: bold;
padding: 10px;
margin:.5rem auto;
}
@media screen and (max-width: 768px) {
/* スマホサイズでスライダー表示 */
.slide-wrap {
overflow-x: scroll;
}
.slide-box {
flex: 0 0 70%;
margin: auto 1% auto auto;
}
}
少し解説も入れてみました。
「display: flex;」でタイル状の横並びにして、
スマホサイズのときに「overflow-x: scroll;」で横スクロールを実現。
「flex: 0 0 70%;」でタイルの表示を少し小さくして、横にスクロールしたらコンテンツが並んでいるんだよと主張している形になります。
CSSだけで横スクロールを実装する方法についてまとめ
今回はCSSだけで横スクロールの実現をしてみました。
ただやはり冒頭に書いたようにCSSだけだと自動スクロール機能は難しい。
自動スクロールもしたい場合は、JavaScriptで実装しましょう。私はJSで横スクロールを実装するときはいつもslickを利用しています。
めちゃくちゃ軽い！とはいかないけれど、自動スクロールが欲しい場面も多いですもんね。
▷Javascriptを利用して簡単に自動横スクロールを実装「slick」
良きWEBデザインをっ！
