▶【注目記事】Windows 11 を導入したら最初にやっておくべき初期設定

table レイアウトを PC とモバイルで見え方を変更する CSS(table レスポンシブ)

Cascading Style Sheets

※ 本記事にはプロモーションが含まれます

ウェブページやブログ記事で、なんだかんだ使用頻度の高い「table」を使った表レイアウトですが、PC とモバイルで見た目を変えた方が親切かもしれません。

例えば、セルが2つ並びの table レイアウトは、PC で見た時には横並びのほうが見やすいですが、モバイル表示をした場合、横並びにすると、ひとつひとつのセルが詰まってしまって、大変見づらくなってしまいます。

▼▼ 横並びだと、この様にセルが詰まって読みづらくなってしまいます。

PC 版テーブルレイアウトをモバイルで見るとセルが詰まる

▼▼ しかし、セルが縦並びになればどうでしょう?

テーブルレイアウトレスポンシブデザイン

このようにひとつひとつのセルが大変見やすくなります。

今回は「table セルのレイアウトを PC では横並び、モバイルでは縦並びになるように見た目を自動的に変更する方法」を紹介します。

これは CSS だけで簡単に設定できます。

table セルのレイアウトを PC とモバイルで変更する手順

メディアクエリを付加して簡単な CSS を施すだけ

table セルのレイアウトを PC とモバイルで変更する方法はとても簡単です。

もともとのテーブルレイアウト CSS があって、それにモバイルレイアウト用の CSS をメディアクエリを追加してあげるだけです。

このメディアクエリは「640px まではこの CSS レイアウトを優先的に使用してね~」という記述をしいます。

このメディアクエリの間に、

を入れるだけで table セルのレイアウトが PC とモバイルで違ったものになります。

以下、ちゃんと記述した CSS を掲載します。

こんな感じで、th と td のスタイルに「display: block;」を追加するだけで、モバイルで見た時には縦並びになるように設定できます。

デモページを用意しました

table レイアウト(レスポンシブ)のデモ

table セルのレイアウトを PC とモバイルで変更しているデモを用意しました。

▼▼ table セルのレイアウト PC 版だと以下のように横並びになり、

table セルのレイアウト PC 版だとセルは横並び

PC 版だとセルは横並び

▼▼ モバイル版だと、以下のように縦並びに切り替わります。

モバイル版だと、セルは縦並びに切り替わります

モバイル版のセルは縦並び

デモページは以下のリンクボタンから閲覧できます。

デモページの HTML と CSS コード

HTML コード

 

CSS コード

あとがき

table セルのレイアウトは、メディアクエリに display: block; を追加するだけで、簡単に PC とモバイルの表示を切り替えることができます。

この手順は、セルの並びが多くなっても全然問題ないので重宝すると思います。