11/11ECサイトのトップページファーストビューや、ブログ等で関連記事、ランキング等を一覧表示する際、横スクロールを利用することはよくありますよね。そんなとき、Javascriptを利用せずにCSSだけでも横スクロールを実現することができるので、その方法を紹介します。CSSだけで実装するメリットは、とにかく動作が軽いところ。デメリットは、自動で動きはしないところ。良し悪しあるので、入れたいコンテンツの場所によって使い分けましょう。それではさっそくコピペで実装できるCSSコードを紹介していきましょう。レスポンシブ対応済です。今回はブログでおすすめ記事を紹介するとき等で利用できそうな形で紹介しようと思います。PCではタイル状に見えて、スマホだと横スクロールで見えるという形です。PC画面だとこんな感じ。スマホ画面だとこんな感じ。ソースコードががこちら。class=”slide-box”>」の枠を増減させる使い方です。}}少し解説も入れてみました。scroll;」で横スクロールを実現。70%;」でタイルの表示を少し小さくして、横にスクロールしたらコンテンツが並んでいるんだよと主張している形になります。CSSだけで横スクロールを実装する方法についてまとめ今回はCSSだけで横スクロールの実現をしてみました。冒頭に書いたようにCSSだけだと自動スクロール機能は難しい。自動スクロールもしたい場合は、JavaScriptで実装しましょう。私はJSで横スクロールを実装するときはいつもslickを利用しています。軽い!とはいかないけれど、自動スクロールが欲しい場面も多いですもんね。