こんにちは、KTです。

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

CSS詳しい方、加筆修正してくれたらｳﾚｼｲﾅｰ

今回やったこと

PCで表示した時は

スマホで表示した時は

のように表示幅に応じて、テーブルの表示を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">