デザインについての学習メモブログ

CSSでレスポンシブテーブル:スマホで横スクロール、PCで画面フィット!WordPressにも対応

記事内に広告が含まれています。

CSSでレスポンシブテーブル:スマホで横スクロール、PCで画面フィット!WordPressにも対応

Webサイトでテーブルを使う時、スマホとPCで最適な表示方法が異なることってありますよね。

今回は、スマホでは横スクロール可能、PCでは画面幅にフィットするレスポンシブなテーブルの実装方法をご紹介します。

なぜレスポンシブテーブルの実装が必要なのか?

スマホの狭い画面でテーブルを表示すると、列が多い場合に以下の問題が発生します。

  • 文字が小さくなりすぎて読めない
  • セルの内容が改行されて縦に長くなる
  • テーブル全体が見づらくなる

一方、PCでは画面が広いので、テーブルを画面幅いっぱいに表示した方が見やすくなります。

CSSでtable要素をスマホの時だけスクロール

HTML構造

まず、テーブルをコンテナで囲みます。このコンテナがスクロールを制御する役割を担います。

HTML
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫</th>
        <th>カテゴリ</th>
        <th>評価</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>商品A</td>
        <td>¥1,980</td>
        <td>在庫あり</td>
        <td>電化製品</td>
        <td>★★★★☆</td>
      </tr>
      <tr>
        <td>商品B</td>
        <td>¥3,500</td>
        <td>残りわずか</td>
        <td>家具</td>
        <td>★★★★★</td>
      </tr>
    </tbody>
  </table>
</div>

CSS実装

CSS
/* テーブルコンテナ:スマホでスクロール可能に */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;/* iOSでスムーズスクロール */
  margin-bottom: 1.5rem;
}

/* テーブル本体:スマホでは最小幅を確保 */
table {
  min-width: 600px;/* 列が潰れないよう最小幅を設定 */
  width: 100%;
  border-collapse: collapse;
}

/* テーブルのスタイリング */
th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f8f9fa;
  font-weight: bold;
}

/* PC・タブレット:768px以上 */
@media screen and (min-width: 768px) {
  table {
    min-width: auto;/* 最小幅の制限を解除 */
    width: 100%;/* 画面幅にフィット */
  }
}

コードの解説

1. overflow-x: auto

コンテナに横スクロールを追加します。

コンテンツが幅を超える場合のみスクロールバーが表示されます。

2. min-width: 600px

テーブルの最小幅を設定することで、スマホでも列が潰れずに見やすさを保ちます。

この値はテーブルの列数に応じて調整してください。

3. -webkit-overflow-scrolling: touch

iPhoneやiPadでのスクロールを滑らかにします。

これを指定しないとカクカクした動きになることがあります。

4. メディアクエリ

768px(一般的なタブレットサイズ)以上の画面では、min-width: autoにして最小幅の制限を解除します。

これによりテーブルが画面幅にフィットします。

実際に触ってCSSに変更を加えてみよう

実際にコードに変更を加えて挙動の違いを試してください。

See the Pen responsive-table by naoq (@naoq) on CodePen.

応用テクニック

スクロール可能であることを示すヒント

スマホユーザーにテーブルがスクロール可能であることを伝えるため、影や装飾を追加できます。

CSS
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 /* 右端に影を追加してスクロール可能を示唆 */
  background: 
    linear-gradient(90deg, white 30%, transparent),
    linear-gradient(90deg, transparent, white 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

ブレイクポイントのカスタマイズ

プロジェクトに応じてブレイクポイントを調整できます。

CSS
/* スマホ専用 */
@media screen and (max-width: 767px) {
  table {
    min-width: 600px;
    font-size: 14px;/* 文字サイズを少し小さく */
  }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  table {
    min-width: auto;
    font-size: 15px;
  }
}

/* PC */
@media screen and (min-width: 1024px) {
  table {
    min-width: auto;
    font-size: 16px;
  }
}

WordPressに実装方法

方法は2つあります。

方法1)テーマのCSSファイルに追加(推奨)

  1. WordPress管理画面から「外観」→「テーマファイルエディター」を開く
  2. 右側のファイル一覧から「style.css」を選択
  3. ファイルの最後に以下のCSSを追加

方法2)カスタムCSSを使用

  1. WordPress管理画面から「外観」→「カスタマイズ」を開く
  2. 「追加CSS」をクリック
  3. 上記と同じCSSコードを貼り付け
  4. 「公開」ボタンをクリック

方法3)プラグインを使用

CSSを管理しやすくしたい場合は、プラグインを使用します。

おすすめプラグイン:

  • Simple Custom CSS and JS – CSSとJSを簡単に追加
  • WP Add Custom CSS – シンプルなCSS追加プラグイン

方法4)独自のcssファイルを読むこむ

まとめ:CSSでテーブルをスマホなら横スクロール、PCで画面フィット!

レスポンシブテーブルの実装ポイント

  • テーブルをdivで囲み、overflow-x: autoを指定
  • スマホではmin-widthで最小幅を確保
  • PCではメディアクエリでmin-width: autoに切り替え
  • iOSのスクロールを滑らかにする-webkit-overflow-scrolling: touchを忘れずに

この方法を使えば、どんなデバイスでも快適にテーブルを閲覧できるようになります。

ぜひ試してみてください!