メニューを閉じる

テクノモバイルグループ

メニューを開く

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では、以下のようにすることで、表示幅に応じて適用するデザインを切り替えることが出来ます。

 

・テーブルヘッダの設定

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

 

 

 

・テーブルボディの設定

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

 

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

 

 

2015.2.3 追記

 

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

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

 

 


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

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

採用情報の詳細はこちら


Qangaroo(カンガルー)

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

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE