2017-03-12

会社概要などでよく使う、テーブル/表組(レスポンシブデザイン対応)の作成方法

レスポンシブデザインで一番めんどくさいのはテーブル/表組の作成ですよね。
HTML/CSSだけでなんとかする方法から、jQueryを使う方法まで色々な作り方がありますが、
会社概要などでよく使う、もっともシンプルで単純なテーブルを
CSSだけでレスポンシブ対応で作成する例を解説します。

表示サンプル

以下のテーブルは
PCで見る時はよくある「左側:見出し」「右側:内容」っていうテーブルですが、
画面サイズ767pxまでのモバイルでは「上部:見出し」「下部:内容」って言う感じで、
縦並びに自動的にレイアウトが変更されます。
 

会社名 レスポンシブテーブル株式会社
所在地 愛知県名古屋市中区栄0-0-0
電話 052-0000-0000
内容 会社概要などでよく使う、レスポンシブデザインに対応したテーブルの作成

 

HTMLサンプル

投稿画面に入力するHTMLの書き方です。
ごくごく一般的なシンプルなテーブルです。
class=”kaisha”を付けて、次のCSSで調整します。

CSSサンプル

スタイルシート(ダッシュボード>外観>テーマ編集>style.css)に、
以下のCSSを追加します。

こんな感じで、レスポンシブ対応の簡単なテーブルが作成できました。

タブレットでも縦にしたい場合はmax-widht:を959pxとかにするといいかもですね。
色とかボーダーの有無とかのデザインはCSSでお好みに調整してください。
以上です。

*HTML/CSSカスタマイズは無料サポート対象外となりますので、
必ずバックアップを取った上で自己責任でお願いします!
CSSの記述方法は時代で変わるので、上手くいかない場合はGoogleで最新情報を確認で!

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
by
関連記事