どうも7noteです。CSSだけで作れるカルーセルの作り方
カルーセルといえば、東京にあるとしまえんが最近閉園になりました。
わたしはいったことがないのですがカルーセルエルドラドが有名らしいですね。
このカルーセルという言葉はフランス語で回転台とか、回転木馬を意味する言葉で、日本でいうところのメリーゴーランド（これは英語）ですね。
なのであまりカルーセルという言葉は聞き慣れないと思いますが、WEB業界では以下のようなデザインのことを、まるで回転しているかの様に見えることからカルーセルと呼びます。
スライドショーにしようと思うとjavascriptなども使わないといけなかったりしますが、今回のカルーセルはCSSだけでできるので簡単。さっそく作り方を解説。
作り方
index.html
<ul><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li></ul>style.css
ul{overflow-x:auto;/* 横幅が画面からはみ出たら横スクロールさせる */white-space:nowrap;}ulli{display:inline-block;/* 要素を横並びにする */width:130px;}ullip{text-align:center;}基本的にはスマホ用になります。
PCの場合だと横スクロールバーが出てしまいますが、スマホなら指で横にスライドさせることができます。
このカルーセルなら、要素がはみ出ていても、スマホの画面全体がスクロールされるのではなく、カルーセルになっている個所のみが横スクロールされるのが特徴です。
まとめ
画像付きの情報を載せたり、テーブル（表など）をスクロールで見れるようにさせたりする時に使えます。
数行書くだけなので簡単に実装できるところがポイントですね。
もっとこだわった動きを入れたい場合はjavascriptを使ってスライドショーを導入するといい感じになるかも！
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ