2018/05/25ツイートシェアはてブPocketLINE@kasumiiです。既存のPC用サイトをスマートフォンに最適化する場合、横長のテーブルなどが画面からはみ出してしまうので何らかの対応をする必要が出てきます。いうわけで、対策としてはJavaScriptを使う方法などもありますが、CSSだけでどうにかできないかなーとやってみた方法を以下にふたつメモ。慣性スクロール横に長いテーブルを以下のボックスで囲うと、画面からはみ出した部分は横スクロールで見られるようになります。指定しておくと、なめらかな慣性スクロールが実現できるのでとても便利。簡単に対応するならこれだけでもいいかも。スマホでも常にスクロールバーを表示しておきたい方法1のやり方で、横にはみだしていたテーブルもなめらかにスクロールして見られるようになりました。問題なのは、スクロールしているときしかスクロールバーが表示されないところ。これだと、スクロールできるかどうかがパッと見でわからないというデメリットがあります。スマホでも常にスクロールバーが見えている状態にするため、以下のCSSでスクロールバーの表示をカスタマイズしてみました。使ってスクロールバーの見た目を設定すると、スマホでも常にスクロールバーを表示しておくことができます。CSSPRO実際にグレーの濃淡でシンプルなデザインのスクロールバー用CSSを作ってみました。#666;}iPhoneで見ると、以下のように最初からスクロールバーが表示されているので、横にスクロールできるということが伝わりやすくなりました。(Android実機では未検証ですが、最近の機種であれば表示できるのではないかと思います。併用するとスクロールバーのカスタマイズが無効になるので、方法1と方法2は併用しないほうが良さそうです。インストールして使うまでの簡単な手順メモWeb制作などの記事一覧memobitsキニナルコトをメモメモ。