スマホではみ出さないテーブル・表を作成するHTML/CSS

レイアウト(HTML/CSS)

今回は、TablePressプラグインを使わずに編集プラグイン TinyMCE Advanced だけでスマホでもキレイに見えるテーブル・表を作ります。

TinyMCE Advancedをインストールしていない方はテーブルのテンプレートを用意しているのでこちらをご利用ください。

ビフォーアフター

ビフォーアフターテーブル

 

テーブル・表を準備する

まず基本的なテーブルの挿入を覚えます。コツはテーブルヘッダーとヘッダーセルを作ることです。

テーブル挿入

ビジュアルモードでテーブルアイコンを選んでテーブルを挿入。

テーブル挿入

 

テーブルを挿入したところ

テーブル挿入完了

枠線をマウスでドラッグして調整しない

枠の幅が数値指定になってしまう

テーブルの幅をマウスで調整すると上画像のようにテーブル幅がpx指定になってしまいます。これだとレスポンシブではなくなりスマホで見ると表が画面からはみ出します。

マウスでの調整は、絶対しないように!

 

テーブルヘッダーを指定する

テーブルのヘッダー部分となる行を指定。CSSでヘッダー部分の指定をするのでこの作業をしないとキレイなテーブルが作れません。

 

1行目のセル(1行目ならどのセルでもOK)にカーソルを置いて行のプロパティを選択。

行のプロパティを選択

 

行の種類 をヘッダーに設定。この作業で1行目がヘッダー(thead)になります。

ヘッダー指定

 

見出しを指定する

テーブルの見出し(TH) になるセルを指定。

1行目のセルをすべて選択します。

1行目すべてを選択

 

1行目のセルを選択した状態で、セルのプロパティ を選択します。

セルのプロパティを選択する

 

セルの種類をヘッダーセルに設定。この作業で、1行目のセルが<td>から<th>に変わります。

ヘッダーセルに設定する

以上の作業が完了すると1行目が見出しとなります。

 

一番左の列も見出しにする場合は一番左の列を選択して同じようにセルの種類をヘッダーセルに指定します。

左のセルをヘッダーセルに指定する

見出しはCSSを使ったデザイン面でも使うし、Googleがテーブルの見出しを認識してくれるようになるのでSEO効果もあります。

 

フッターを指定する(必要なときだけ)

フッターを指定する場合は行の最下部のセル(どこでもOK)にカーソルを合わせます。そして行のプロパティ ー 行の種類をフッターに指定します。

フッターを指定する

 

キレイなテーブルを作成する

テーブルのデザインを整えるCSSを追加

テーブルの配置が完了して各セルにデータを入力したら最後にテーブルCSSを適用させます。

HTML

テーブルタグに テーブルデザインクラスを設定します。

aoaka-table:テーブルの色・文字太さを設定

CSS

 

 

スマホではみ出るテーブルを調整するCSSを追加

スマホでテーブルを見ると改行がおかしくなっていたりレイアウトが崩れていたりすることもあります。そんなときはこのCSSをテーブルに適用するだけでスマホテーブルをキレイに整えることが出来ます。

 

CSS適用前(iPhone6)

標準テーブルのままだとレスポンシブにはなっているものの中の文字が崩れてしまっています。

修正前レイアウト

 

CSS適用後(iPhone6)

そこで修正用のCSSを適用するとご覧のとおりキレイに表示されています。

CSS適用後レイアウト

 

レイアウト修正用CSS

使い方は簡単。以下のようにテーブルタグにクラス名を追加するだけ。col3t〜col6tまで作っています。テーブルの列数が多ければ数字の高いクラスを使ってください。おおよそ列数に合わせて数値を作っているつもりです。上記の例は4列なのでcol4tを適用させています。

HTML

 

 

以上でキレイなテーブルの作成方法を終わります。長文お疲れ様でした。

 

テーブルデザインを色々と作ってみたのでお好みのテーブルデザインを選んでCSSファイルに追加してください。一度CSSファイルにテーブルデザインを追加したらいつでもテーブルタグにクラス名を書くだけでキレイなテーブルが出来上がります。

キレイなテーブルを作るコツ

次はキレイなテーブルを作るときにちょっと工夫してさらにキレイに見せるコツをご紹介します。

 

列数を極力少なくする

6列と3列の比較

列を多くすると文字の改行によってセルが長細くなったりスマホでテーブルが小さく表示されるので出来るだけ横項目(列)を少なく設定します。

比較するときも比較する項目数が少なければ比較しやすくなります。

 

 

文章を短くする

文章を短く

文章が長いと文字が改行されて見づらくなり行の高さもバラバラになってしまいます。文章はなるべく短くしましょう。体言止めするなど工夫をしましょう。(例:選ぶならコレです。 → 選ぶならコレ)

 

数値で表現する

比較表の場合、出来るだけ数値で比較したほうがユーザーにとってどれがよいか一瞬で判断出来るはず。

 

文字を強調する

文字の強調

比較表で大切なのは、どの商品・サービスが優れているかを瞬時に判断することだと思いますので項目ごとに強調したいセルの文字を赤文字・ボールド・フォントサイズを大きくするなどするとより分かりやすいです。

HTML

強調したいセルにpcellクラスを追加します。

 

CSS

 

キレイな表を作るポイント まとめ

  • 列数を極力少なくする
  • 文章を短くする
  • 数値で表現する
  • 文字を強調する

 

最後にテーブルのテンプレートを準備していますので自分でテーブルを作るのが面倒な場合にご利用ください。

 

コメント