LINEで現役エンジニアに直接質問してみよう!登録無料

CSSだけで横スクロールを実装する方法と仕組みを解説

CSSだけで(JavaScriptなし)横スクロールを実装する方法とその実装の仕組みを解説します。

というのも、スマホでサイトを見ると、下記のように横スクロールのできるカードが並んでいるのが分かります。

airbnb

どうやって実装するのか?この実装はCSSでどのように実現されているのか?を順番に詳しく解説していきます!

サンプルと早速ソースコードを紹介

早速ですが、解説の前にサンプルとソースコードを紹介します。コードは必要最低限なものにしばりました。後はお好みでカスタマイズしてくださいね!

<div class="container">
  <ul>
    <li>
      <img src="https://hackable.jp/s3/2020/4/card1.jpg" alt="">
      <p>雪山は私達に自然のの偉大さを伝えてくれる</p>
    </li>
    <li>
      <img src="https://hackable.jp/s3/2020/4/card2.jpg" alt="">
      <p>かっこいいバイクの選び方</p>
    </li>
    <li>
       <img src="https://hackable.jp/s3/2020/4/card3.jpg" alt="">
       <p>最近のワタシのお気に入りのコスメ紹介します!</p>
    </li>
  </ul>
</div>
.container {
  width: 300px;
  overflow: auto;
  border: 5px solid #777;
}
ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
li {
  width: 200px;
  flex: 0 0 auto;
  margin:0 10px;
}
img {
  width: 100%;
}
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。