Zenn
⛸️

CSSのみで横スクロールを実装する

2021/06/10に公開
CSS
HTML
Scss
tech

CSSのみで横スクロールを実装する

画面に動きをつけたい時にはJavaScriptを使用するのが一般的かと思います。
アイテムを横スクロールしたいときはCSSのみでも実装することができます。
今回はCSSのみでの、横スクロールの実装方法をスニペットとしてを紹介します。

※HTMLはbody部のみ、CSSと言いつつSassを使用していますので悪しからず。(CSSとほぼ一緒です)
画像は自分で用意してください。

index.html
<body>
    <main class="container">
        <h1>横スクロールのサンプル</h1>

        <ul class="horizontal-items">
            <li class="item">
                <div>
                    <h2>アイテム1</h2>
                    <img src="images/pic1.jpg" alt="動物">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </li>
            <li class="item">
                <div>
                    <h2>アイテム2</h2>
                    <img src="images/pic2.jpg" alt="動物2">
                    <p>テキストテキストテキスト</p>
                </div>
            </li>
            <li class="item">
                <div>
                    <h2>アイテム3</h2>
                    <img src="images/pic3.jpg" alt="動物3">
                    <p>テキストテキストテキスト</p>
                </div>
            </li>
            <li class="item">
                <div>
                    <h2>アイテム4</h2>
                    <img src="images/pic4.jpg" alt="動物4">
                    <p>テキストテキストテキスト</p>
                </div>
            </li>
            <li class="item">
                <div>
                    <h2>アイテム5</h2>
                    <img src="images/pic5.jpg" alt="動物5">
                    <p>テキストテキストテキスト</p>
                </div>
            </li>
          </ul>
    </main>
</body>
  • ポイント
    • 横スクロールしたいコンテンツをulで囲み、その1つ1つのアイテムをliでリスト化します。
    • h2とpはおまけです。
style.scss
@charset "utf-8";

// common.
html {
    font-size: 100%;
}

img {
    width: 600px;
    height: 400px;
    margin: 20px 0;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

h1 {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px 0;
}

h2 {
    font-size: 1.3rem;
    font-weight: bold;
}

p {
    padding-bottom: 20px;
}

// main.
.horizontal-items {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    .item {
	padding: 0 10px;
    }
}
  • ポイント
    • .horizontal-itemsに以下を指定する。
      • display: flex;でliのアイテムを横並びにします。
      • overflow-x: scroll;でアイテムが表示領域に収まらない場合、収まらない部分は表示領域からはみ出さず、スクロールバーを表示し、スクロール可能とする。
      • white-space: nowrap;でアイテムの自動改行を防ぐ(特に必要ではない)
    • margin, paddingなどは見た目の調整なので、横スクロールとは直接関係ないです。

画面イメージ

途中で右下に出てくるものは無視してください。

Discussion