CSSでシンプルに水平スクロール（横スクロール）のリストを作る - Qiita横スクロールのUI 個々最近、カード型のコンテンツが横に並んでいてスクロールできるUIをよく見かけるようになりました。 例えばAirbnbのWebサイトではこんな感じ。 CSSで水平スクロールを実装する ポイントは次のとおり。 ulおよびliを使ってリスト構造を表現する ulに対してoverflow-x: auto;、white-space: nowrap;を指定 liに対して、display: inline-block;を指定 liに対してwidth: 90%;のような横幅を指定すると、コンテンツが見切れて見えるhorizontalので、横スクロールできることがわかりやすい ソースコードはこんな感じ。 <!DOCTYPE html> <html> <head> <title>Horizontal Scroll</title> <style> .horizontal-list { over
