どうも7noteです。CSSだけで作れるカルーセルの作り方

カルーセルといえば、東京にあるとしまえんが最近閉園になりました。
わたしはいったことがないのですがカルーセルエルドラドが有名らしいですね。

このカルーセルという言葉はフランス語で回転台とか、回転木馬を意味する言葉で、日本でいうところのメリーゴーランド（これは英語）ですね。
なのであまりカルーセルという言葉は聞き慣れないと思いますが、WEB業界では以下のようなデザインのことを、まるで回転しているかの様に見えることからカルーセルと呼びます。

スライドショーにしようと思うとjavascriptなども使わないといけなかったりしますが、今回のカルーセルはCSSだけでできるので簡単。さっそく作り方を解説。

作り方

index.html

<ul>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
</ul>

style.css

ul {
  overflow-x: auto;       /* 横幅が画面からはみ出たら横スクロールさせる */
  white-space: nowrap;
}
ul li {
  display: inline-block;  /* 要素を横並びにする */
  width: 130px;
}
ul li p {
  text-align: center;
}

基本的にはスマホ用になります。
PCの場合だと横スクロールバーが出てしまいますが、スマホなら指で横にスライドさせることができます。
このカルーセルなら、要素がはみ出ていても、スマホの画面全体がスクロールされるのではなく、カルーセルになっている個所のみが横スクロールされるのが特徴です。