tableをレスポンシブサイトに対応するCSSの作成方法

WEBサイトを制作しているとデータなどを表示するのにtableを利用することがあると思います。

WEBサイトをPCで観覧するにはデザイン崩れの心配はありません。しかし、スマホやタブレットではtableがはみ出したり崩れたりと大変です。

そこでtableをレスポンシブ化して、どのデバイスであっても完全に乱れることなく表示させるCSSをご紹介します。

デザイン概要

ブラウザの画面サイズが768ピクセル以上ではtableは通常のデザインで表示されます。これは、iPad(768×1024)やPC環境に対応するためです。

逆にブラウザの画面サイズが767ピクセル以下ではtableはレスポンシブ化されます。

以下のtableはサンプルです。ブラウザの画面サイズに応じて伸縮やスライドします。実際に確かめて見てください。

レスポンシブ化により、tableが崩れることなくコンパクトにまとまりました。

作成方法

tableのレスポンシブ化はCSSのみを使用して実装しています。僅かな１pxのズレも無く完璧に仕上げましたので、コピーペーストでお使いください。

以下のCSSをスタイルシートに記述します。WordPressの場合は、style.cssに記述します。

まとめ

レスポンシブサイトのデザイン崩れの原因にtableが良く関わっています。
上手く制御すると、コンパクトに表示されて見やすいです。

2000年代は、WEBサイトのデザインにtableを多用することが多かったですが、現在は殆ど見掛けることが無くなりました。
tableサイトでは検索上位に表示されることは不可能になったためです。

しかし、記事にセルデータを記載するときはtableは必須ですので上手く利用したいものです。

tableに書かれた内容を検索エンジンは重要視しない傾向があります。そのため、tableに文書を詰め込んでもSEO効果は薄いです。

逆に要らない内容を詰めて置くといった使い方ができると思います。
例えば複数ページで内容を使いまわすようなときです。以下はtableのサンプルです。

上記はネットショップのデータです。同じような単語や文書を複数のページに記載するときは、tableを使うと良いです。

もし、これを<p>タグで使用して、複数ページで表示していると、重複コンテンツまではいかなくても記事内容が薄いと検索エンジンに判断されてしまいます。

逆に重要性が低い内容はtableで使いまわせば、記事の評価が下がることは無いです。

もしも、データ内容を検索エンジンに重要視して欲しいなら、tableではなく<dl>タグを使用します。
<dl>は文書同様に価値のある内容と判断されます。

ここまで話すとSEOにtableは不要と思う方もいるかもしれません。但し、tableに記載されいる内容は重要視されませんが、記事全体でみるとtableを使用していることが検索エンジンにとって評価が上がります。

記事に文書だけではなく、画像を記載していると評価が上がるとの同じことです。

私がtableを使用するときに良く使う方法を紹介します。記事内には文書を書きますが、多数のページで毎回使っているような内容は、tableに入れています。

例えば、複数のお店を紹介するサイトであれば、「住所」「電話番号」「営業時間」「定休日」などはtableにしています。文書内の重要度も低いですし、何よりも似た内容を多数のページで使いまわすためです。

これを<ul>タグで表示しない方が賢明です。
<ul>タグで内容の薄い情報を記載すると記事の評価は落ちます。
tableタグを使用すれば記事の評価は落ちません。

tableをレスポンシブ化させて、SEO効果も使用して良いサイトを作ってください。