メニューを閉じる

テクノデジタルグループ

メニューを開く

2015.02.03

プログラミング

CSS初心者ながらテーブルのレスポンシブデザインを対応してみた

こんにちは、KTです。

CSSは今までほとんど使ったことがなかったのですが、今回レスポンシブデザインの対応をすることになったので、備忘録がてら、勉強した内容をまとめてみます。

CSS詳しい方、加筆修正してくれたらウレシイナー

 

今回やったこと

PCで表示した時は

項目1 項目2 項目3 項目4 項目5
AAA BBB CCC DDD EEE
aaa bbb ccc ddd eee

 

スマホで表示した時は

項目1 AAA aaa
項目2 BBB bbb
項目3 CCC ccc
項目4 DDD ddd
項目5 EEE eee

 

のように表示幅に応じて、テーブルの表示をCSSのみで変更しちゃいます。

 

・表示幅に応じて表示内容を切り替える方法

CSSでは、以下のようにすることで、表示幅に応じて適用するデザインを切り替えることが出来ます。

@media only screen and (mim-width: 800px) {
  // ここは表示幅が800px以上の時のみに適用されるデザイン
}
@media only screen and (max-width: 799px) {
  // ここは表示幅が800px未満の時のみに適用されるデザイン
}

 

・テーブルヘッダの設定

テーブルのヘッダ部は、PC表示では上付きですが、スマホ表示では縦並びにして左付きに変更する必要があります。800px未満のデザイン部分に下記の内容を設定しましょう。

 

table thead {
  display: block; // ブロック要素化
  float: left;    // 左付き
}
table thead th {
  display: block; // ブロック要素化して縦並びに
}

 

 

・テーブルボディの設定

テーブルのボディ部も、ヘッダ部と同様に縦並びにする必要があります。こちらも、800px未満の部分に埋め込みましょう。

table tbody {
  display: block; // ブロック要素化
  overflow-x: auto; // 横スクロールするように
  white-space: nowrap; // 勝手に改行されないように(これをしないと表示内に収まらない列が次の行に表示される)
}
table tbody tr {
  display: inline-block; // インラインブロック要素化してtrが横に並ぶように
}
table tbody td {
  display: block; // ブロック要素化して縦並びに
}

 

あとは各セルのwidth/heightなりを調整すれば完成です。

 

 

2015.2.3 追記

 

HTMLヘッダにviewport指定のmetaが必要になる

との情報をいただきました。

HTMLヘッダに下記のように追加しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0">

 

 


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事