スマホではみ出さないテーブル・表を作成する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
<table class="aoaka-table">

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

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

CSS
/*** テーブルCSS ***/


/*** テーブルデザイン 青赤カラー ***/

/* ヘッダー */
.aoaka-table thead th {
	background:#fceded;
	font-weight: bold;
}


/* ボディ項目・フッター項目 */
.aoaka-table tbody th,
.aoaka-table tfoot th {
	background:#f2f5fc;
	font-weight: bold;
}

/* ボディデータ・フッターデータ */
.aoaka-table tbody td,
.aoaka-table tfoot td {
	text-align:center;
}

/* 偶数行 1行ごとの色変えが不要なら削除 */
.aoaka-table tr:nth-child(2n) td {
    background: #FBFBF6;
}

 

 

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

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

 

CSS適用前(iPhone6)

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

修正前レイアウト

 

CSS適用後(iPhone6)

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

CSS適用後レイアウト

 

レイアウト修正用CSS

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

HTML

<table class="aoaka-table col4t">

 

/*項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {
	.col6t th,
	.col6t td{
		font-size:0.4em;
		padding: 10px 0px;
	}
	.col5t th,
	.col5t td{
		font-size:0.5em;
		padding: 10px 0px;
	}
	.col4t th,
	.col4t td{
		font-size:0.7em;
		padding: 10px 5px;
	}
	.col3t th,
	.col3t td{
		font-size:0.8em;
		padding: 10px 10px;
	}
}

 

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

 

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

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

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

 

列数を極力少なくする

6列と3列の比較

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

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

 

 

文章を短くする

文章を短く

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

 

数値で表現する

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

 

文字を強調する

文字の強調

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

HTML

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

<tr>
<th>見た目</th>
<td>90点</td>
<td class="pcell">100点</td>
<td>50点</td>
<td>50点</td>
</tr>

 

CSS
.pcell {
	color: red;
	font-weight: 800;
}

 

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

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

 

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

 

この記事を書いた人
がんちゃん

Wordpress de アフィリエイト運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。

がんちゃんをフォローする
レイアウト(HTML/CSS)
初心者向けレンタルサーバー
wpX
wpX

・wordpress専用レンタルサーバー
・とにかく速い
・1サーバーあたりドメイン10個まで
・負荷に強く安定感抜群
・わかりやすい管理画面
・メインサイトにおすすめ

エックスサーバー
エックスサーバー

・使い勝手がいい
・ドメイン数無制限(実質上限50サイト)
・初心者に分かりやすいと好評の管理画面
・速度もそこそこ早く月額が安い
・メイン、サテライトともにおすすめ

mixhost
mixhost

・当サイトで使用中
・アダルトOKなサーバーでは最速
・プランがいつでも変更可能
・プレミアムプラン以上はwpX程度の速度
・管理画面が分かりづらい(cPanel)
・ドメイン数無制限(データベースも無制限でエックスサーバーより入る数は多い)
・メイン、サテライトともにおすすめ

がんちゃんをフォローする
がんちゃんブログ

コメント