【CSS】スマホのみ横スクロールにする方法

Webサイトを制作する際は、基本的には横スクロールはしないような作りにするのが一般的ですが、スマホやタブレット等のモバイルデバイスで表示する際にどうしても横幅が足りない場合があります。特に表などは内容によってはスマホ用のレイアウトを作るのが難しい場合があり、苦肉の策としてスマホ表示時には横スクロールさせることもしばしばです。

スマホの画面で特定の要素に横スクロールを実装したい場合、CSSメディアクエリを活用することで簡単に実現できます。本記事では、特定の要素に対してのみスマホ向けの横スクロールを実装する方法を解説します。

特定の要素にスマホ向けの横スクロールを適用する方法

スマートフォンの画面幅に合わせて横スクロールを有効にするためには、@mediaルールを使用します。以下がその方法です。

@media only screen and (max-width: 768px) {
  .scrollable-element {
    overflow-x: scroll;
    white-space: nowrap;
  }
}

このCSSコードでは、.scrollable-elementというクラスが付与された特定の要素に対して、768px以下の画面幅（スマートフォン向け）でのみ横スクロールを有効にしています。overflow-x: scroll;は横スクロールを実現し、white-space: nowrap;はテキストの折り返しを防止します。

実装例

<div class="scrollable-element">
  <!-- この要素のコンテンツが横スクロール可能になります -->
</div>

特定の要素に対してスマートフォン向けの横スクロールを実装することで、ユーザーは狭い画面でもコンテンツをスムーズに操作できます。この方法を活用して、ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させましょう。