プラグインを使わずに、レスポンシブな表を作る

表の作成は今でもおっくうです

WordPressで記事を書いている時に、これは表にしたほうがわかりやすいと思えば、表（テーブル）を作成することも良くありますが、私自身、何年経っても表作成は苦手というか、あまり好きになれません。

WordPressを始めた頃によくあった話だけど、表を作成する時に、セルに色を付けるとか、行や列を増やすとかという時に、どうしても表の上でマウスを右クリックしてしまうんです。

会社勤めが長かったので、Excelの操作が体に沁みついてて、どうしても抜けきらない。

きっと、Excelなどを頻繁に使っていた経験のある人は、一度や、二度は私と同じことを思ったのではないでしょうか？

私の経験ですが、WardPressを始めた初心者が、最初につまづくひとつとして、表（テーブル）作成があります。

頑張って表はできたけれど、罫線を消したいとか、セルに色を付けたいとか、セルを結合したいとかで、四苦八苦します。

そして、何時間か格闘した末に思い通りの表が仕上がり、いざ、スマホで確認してみると、表が大きすぎて画面からはみ出てしまってる、ってなこともしばしばです。

しかたがないから、表作成をあきらめて、Excelで作った表をハードコピーとかで画像にして、WordPressに画像として貼り付ける。

でも、その方法だと、スマホで見るには表が小さくなり過ぎて、全然読めないとか、読めても表の文字とかがジワーっと滲んだ感じにボケちゃって読みにくいとかで、満足のいく結果が得られない。

きっと、こんな経験は私だけじゃないと思うので、今日は、表作成の小技を二つほど、お伝えしたいと思います。

スマホで表示した時に、表が画面からはみ出さないようにする

まず、2列3行の表を作る場合を例にとって、ご説明します。

出来上がりはこんな感じです。

あえて言えば、PCの方が行間が広くなりますが、どちらも変わりませんね。

スマホの時も、はみ出さずにちゃんと全体を表示します。

ただ、この方法だと、表の列が多い場合などは、スマホに表示された表がとても小さくなってしまい、ユーザーが見辛くなってしまいますから、列数が２～3列の表くらいにしか使えないと思って下さい。

PCで表示した場合

スマホで表示した場合

スマホの小さな画面に対応したレスポンシブな表を作る

表の幅を100％表示にすることで、スマホでも画面から表がはみ出さずにちゃんと表示されることをお伝えしましたが、文字が長く、かつ列が多い表であったりすると、表自体がとても見にくくなります。

そこで、スマホの小さな画面で表示する場合は、その小さな画面に合わせた見やすいレイアウトで表示させたいものです。

そこで、PCで表示される場合と、スマホで表示される場合のレイアウトが自動で変わる方法をお伝えします。

表（テーブル）作成で一番使われてるといってもいいTablePressというプラグインをはじめ、プラグインは一切使いません。

動画でご説明したかったのですが、間に合わなかったので、後で動画に置き換えることにして、とりあえず文章と画像でご説明します。

意外と簡単なのです。

こちらも、2列3行の表を作る場合を例にとって、ご説明します。

こんな表をイメージして下さい。

PCで表示した場合

スマホで表示した場合

追加CSSへ表の切り替えをさせるCSSを追加

下記の囲み枠に記載されているCSSを、ダッシュ―ボードのメニューから、「外観」→「カスタマイズ」→「追加CSS」を選択して、追加CSSの欄に貼り付けし、公開ボタンをクリックします。

追加CSSへの貼り付けられたCSSは、WordPressのテーマに更新があっても書き換わるなどの影響を受けませんから、ここを利用します。

※「pc」と「iphone」は、自分が覚えやすい任意の文字に変えてOKです。pcとiphoneの前の「.」を誤って消さないように。

専門的なことはご説明はしませんが、わかりやすく言うと、要素（ここで言う要素とは「表」のことです。）の幅が、650pxより大きくならないならPC用の表は表示しない、要素の幅が、651pxより小さくならないならiphoneの表は表示しないと記述しているだけです。

このまま使えますので、テンプレートのつもりくらいで、コピペして使ってみて下さい。

ひとことで言えば、画面の横幅に応じて、表示する表を変えているということです。

PC用とスマホ用の表を作る

記事投稿画面のビジュアルモードで、PC用とスマホ用の二つの表を作ります。

このイメージでは、PC用が2列3行の表、スマホ用が、1列4行の表です。

テキストモードで、編集する

記事投稿画面をテキストモードの表示に切り替えて、PC用のテーブルと、iPhone用のテーブルの記述（<table>で始まり、＜/table＞で終わる記述の部分）の前後に、赤字の記述を追加する。

<!-- PC・タブレット用の表：この行はコメントになります -->
<div class="pc">
<table 　～    </table> ※PC用のテーブルの記述
</div>

<!-- スマホ用の表：この行はコメントになります -->
<div class="iphone">
<table 　～    </table> ※iphone用のテーブルの記述
</div>

まとめ

スマホなどの小さなデバイスは、本来、表を見ることには適していませんので、できるなら列数の多い表は避けたいものです。

他にも、プラグインを使う、あるいはタブ表示にするなどの、レスポンシブに対応させる方法はありますが、列数の少ない表であれば、このようにプラグインを使わなくても簡単にできます。

また、この方法は表だけではなく、スマホの時だけ表示させたいとか、PCの場合とスマホ場合に表示させるものを変えたいとかという時に役立ちます。

では、レスポンシブな表を作るためのおさらいです。