スマホでもキレイに見えるテーブル・表を作ります。Advancedをインストールしていない方はテーブルのテンプレートを用意しているのでこちらをご利用ください。テンプレートHTML/CSSビフォーアフターテーブル・表を準備するまず基本的なテーブルの挿入を覚えます。コツはテーブルヘッダーとヘッダーセルを作ることです。テーブル挿入ビジュアルモードでテーブルアイコンを選んでテーブルを挿入。テーブルを挿入したところ枠線をマウスでドラッグして調整しないテーブルの幅をマウスで調整すると上画像のようにテーブル幅がpx指定になってしまいます。これだとレスポンシブではなくなりスマホで見ると表が画面からはみ出します。マウスでの調整は、絶対しないように!テーブルヘッダーを指定するテーブルのヘッダー部分となる行を指定。CSSでヘッダー部分の指定をするのでこの作業をしないとキレイなテーブルが作れません。1行目のセル(1行目ならどのセルでもOK)にカーソルを置いて行のプロパティを選択。この作業で1行目がヘッダー(thead)になります。1行目のセルをすべて選択します。セルの種類をヘッダーセルに設定。この作業で、1行目のセルが<td>から<th>に変わります。以上の作業が完了すると1行目が見出しとなります。左の列も見出しにする場合は一番左の列を選択して同じようにセルの種類をヘッダーセルに指定します。見出しはCSSを使ったデザイン面でも使うし、Googleがテーブルの見出しを認識してくれるようになるのでSEO効果もあります。フッターを指定する(必要なときだけ)フッターを指定する場合は行の最下部のセル(どこでもOK)にカーソルを合わせます。行の種類をフッターに指定します。キレイなテーブルを作成するテーブルのデザインを整えるCSSを追加テーブルの配置が完了して各セルにデータを入力したら最後にテーブルCSSを適用させます。テーブルデザインクラスを設定します。#FBFBF6;}スマホではみ出るテーブルを調整するCSSを追加スマホでテーブルを見ると改行がおかしくなっていたりレイアウトが崩れていたりすることもあります。そんなときはこのCSSをテーブルに適用するだけでスマホテーブルをキレイに整えることが出来ます。CSS適用前(iPhone6)標準テーブルのままだとレスポンシブにはなっているものの中の文字が崩れてしまっています。CSS適用後(iPhone6)そこで修正用のCSSを適用するとご覧のとおりキレイに表示されています。レイアウト修正用CSS使い方は簡単。以下のようにテーブルタグにクラス名を追加するだけ。col3t〜col6tまで作っています。テーブルの列数が多ければ数字の高いクラスを使ってください。列数に合わせて数値を作っているつもりです。上記の例は4列なのでcol4tを適用させています。10px;}}以上でキレイなテーブルの作成方法を終わります。テーブルデザインを色々と作ってみたのでお好みのテーブルデザインを選んでCSSファイルに追加してください。一度CSSファイルにテーブルデザインを追加したらいつでもテーブルタグにクラス名を書くだけでキレイなテーブルが出来上がります。Designキレイなテーブルを作るコツ次はキレイなテーブルを作るときにちょっと工夫してさらにキレイに見せるコツをご紹介します。列数を極力少なくする列を多くすると文字の改行によってセルが長細くなったりスマホでテーブルが小さく表示されるので出来るだけ横項目(列)を少なく設定します。比較するときも比較する項目数が少なければ比較しやすくなります。文章を短くする文章が長いと文字が改行されて見づらくなり行の高さもバラバラになってしまいます。文章はなるべく短くしましょう。体言止めするなど工夫をしましょう。(例:選ぶならコレです。選ぶならコレ)数値で表現する比較表の場合、出来るだけ数値で比較したほうがユーザーにとってどれがよいか一瞬で判断出来るはず。文字を強調する比較表で大切なのは、どの商品・サービスが優れているかを瞬時に判断することだと思いますので項目ごとに強調したいセルの文字を赤文字・ボールド・フォントサイズを大きくするなどするとより分かりやすいです。HTML強調したいセルにpcellクラスを追加します。まとめ列数を極力少なくする文章を短くする数値で表現する文字を強調する最後にテーブルのテンプレートを準備していますので自分でテーブルを作るのが面倒な場合にご利用ください。テンプレートHTML/CSSこの記事を書いた人がんちゃんがんちゃんブログ運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。アフィリエイトにランチェスター戦略を取り入れた経営を目指しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。レンタルサーバー速度比較レンタルサーバー速度計測を本格的に行いました。必須!2018.05.042018.05.26canvaが便利だけど画像重いから使い方に注意だ。fReadomドメイン一括精査MTファイル変換わたしのマスト自作CocoonスキンCocoonスキンいつものCocoonスキンおでかけCocoonスキン旅カメラブログの住人がんちゃんがんちゃんブログ運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。アフィリエイトにランチェスター戦略を取り入れた経営を目指しています。fReadomドメイン一括精査MTファイル変換わたしのマストブログの住人がんちゃんがんちゃんブログ運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。アフィリエイトにランチェスター戦略を取り入れた経営を目指しています。口コミサイトホーム検索トップサイドバーレンタルサーバー速度比較レンタルサーバー速度計測を本格的に行いました。必須!2018.05.042018.05.26canvaが便利だけど画像重いから使い方に注意だ。・管理画面が分かりづらい(cPanel)・ドメイン数無制限(データベースも無制限でエックスサーバーより入る数は多い)・メイン、サテライトともにおすすめ詳細ページ公式サイト。