パソコンやスマートフォンなど、どんな画面サイズでも見やすい横スクロールできる表をWordPressで作成する方法をご紹介します。
目次
横スクロールできる表のサンプルイメージ
まずは、今回作成する表のサンプルをご覧ください。
表の横幅が画面内に収まる場合は通常通り全体が表示されます。
しかし、スマートフォンなど横幅が狭い端末では、表が自動的に横スクーロルするようになります。
横スクロールできる表の作り方
テーブルブロックで表を作成する
WordPressの固定ページもしくは投稿ページにテーブルブロックで表を作成します。
このとき2つポイントがあります。
- ヘッダー・フッターセクションは無効化する
- 追加CSSクラスを設定する
編集画面の右側にあるサイドバーで、ヘッダーセクションとフッターセクションは無効化しておきます。
ヘッダー・フッターセクションを有効にすると、WordPressのテーマによっては後で設定するCSSがうまく機能せず、レイアウトが崩れてしまうことがあります。
代わりに、CSSでヘッダー・フッターのデザインを設定するため、その内容を入力しておきます。
サンプルでは先頭行と先頭列の内容がヘッダーとなります。
同じく右側のサイドバーにある「追加CSSクラス」に、任意のクラス名（例：custom-table）を入力します。
このクラス名を使って、後ほど横スクロールするためのCSSを適用します。
表に横スクロールのCSSを設定する
次に、作成した表に横スクロールのCSSを設定します。
必要なCSS（全体）
まずは、すべてのCSSをまとめてご紹介します。
.custom-table table tbody tr:first-of-type td,
.custom-table table tbody tr td:first-of-type {
background: #f7f7f7 !important;
text-align: center !important;
}
.custom-table table tbody {
display: table !important;
width: 100% !important;
}
.custom-table table {
overflow-x: auto !important;
white-space: nowrap !important;
}
@media (max-width: 480px) {
.custom-table table::before {
content: "表は横スクロールできます。";
font-size: 10px;
}
}各CSSの解説
- ヘッダー部分の装飾
.custom-table table tbody tr:first-of-type td,
.custom-table table tbody tr td:first-of-type {
background: #f7f7f7 !important;
text-align: center !important;
}.custom-tableクラスを持つテーブルの最初の行と最初の列のセルにスタイルを適用しています。
具体的には、セルの背景を薄いグレー（#f7f7f7）にして、中央揃えにしています。
これにより、表のヘッダー部分が視覚的に分かりやすくなります。
- スクロール機能の設定
.custom-table table tbody {
display: table !important;
width: 100% !important;
}
.custom-table table {
overflow-x: auto !important;
white-space: nowrap !important;
}overflow-x: auto;で表の幅が親要素（画面）からはみ出たときに、横スクロールバーを自動で表示します。
white-space: nowrap;は表内のテキストが自動的に改行されるのを防ぎます。
常に1行で表示されるようになるので、表のセルが縦に伸びるのを防ぎ、横スクロールが機能します。
- スマートフォン向けスクロールヒント
@media (max-width: 480px) {
.custom-table table::before {
content: "表は横スクロールできます。";
font-size: 10px;
}
}これは、画面幅が480px以下（主にスマートフォン）の場合にのみ適用されるスタイルです。
::before疑似要素を使って、表の直前に「表は横スクロールできます。」というテキストを表示します。
これにより、ユーザーは表が隠れていても、横にスクロールできることに気づくことができます。
まとめ
横スクロールできる表をWordPressサイトに表示する方法をご紹介しました。
レスポンシブ対応になるので、パソコンやスマートフォンなどどのような端末でもストレスなくウェブページを見ることができるようになるかと思います。
弊社ではウェブサイトの制作や保守を行っています。お気軽にご相談ください。
