HTMLレスポンシブテーブルという言葉をご存知でしょうか。テーブル(表組み)に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている的な印象があります。簡単にいえば実用に耐えないというか......。表組のデータ形式がごく限られてしまうという点も気になります。tables」(とその紹介記事)というものがあるようです。こちらはカラムにあらかじめ優先度をつけておくと、画面サイズに応じてカラムの表示・非表示を切り替えてくれます。非表示になっているカラムは、チェックボックスで再選択することでまた表示されるようになります。「すげえな、よくやるな」ってかんじです。汎用的に使えるライブラリというよりは、データ行列を閲覧するという目的にマッチするような気がします。このように既存の手法でも満足できるものはなかったのですが、とはいえ今回わたしが考案した仕組みもまったく大したものではありません。使えないケースも多々あると思います。思いついてので、とりあえず世に問うてみるかというノリで公開してみるものであります。成果物ブツはこちらです。概要ソースコードを見ていただければ、それが今回の成果物の全てです。やっていることは、画面幅に応じてテーブルをtransformプロパティで小さくしているだけです。スマホでは文字が読めないほど小さくなりますが、ピンチアウトして拡大すればいいじゃんという発想です。class=”responsive-table”>で囲うだけで適用もでき、楽ちんです。制約事項などピンチアウトの拡大を禁止しているサイトには向きません。ピンチアウトできたとしても、拡大率には限界があるため大きすぎる表組みには使えません。画面幅の狭い非タッチデバイス(ブラウザでウィンドウを縮めた時など)は考慮していないですが、なにかしら工夫はできると思います。このような単純なことなのに(わたしの観測範囲では)誰もやっていないというのはおかしいです。なにか私が致命的な視点を欠いているのかもしれません。確認しているブラウザもごく一部なので、全然動かないブラウザがあるのかもしれません。考える前にとりあえず公開してみた次第です。ツッコミをぜひ頂きたいです。どんなデータ形式の表組みにも使えるし、上で紹介したJSライブラリのように分厚い実装ではないので、「とりあえずこれで」的に採用できるものかなあと思いましたが、いかがでしょう。:デフォルト状態の文字サイズが小さいので、グーグルさんに「スマホ対応してねえのかよ」と思われないかビクビクして生きています。:これこれ!このやり方を知りたかったのです。”ソースコードを見ていただければ”とあるのですが、ソースコードはどこにあるのでしょうか?で囲うのは分かったのですが、良かったらそれに対するcssを教えて下さい。:nyanさんお返事が遅くなりました!!ソースコードはお手数ですが、https://necomesi.jp/staff/shimada/responsive-table/こちらのソースをご覧ください。下の方に正味のJSコードが書かれています。jQueryを使っていますが、やっていることは単純です。・テーブル要素の幅、高さを取得する・テーブルの幅から縮小率を取得する・テーブルと、親要素に必要なスタイルを適用するjQueryナシでも、わりと簡単に実装できると思います。:すばらしいです!こういうのを探していて、やっと辿り着けました。insightで100点取ってますね!https://developers.google.com/speed/pagespeed/insights/?hl=ja&url=http%3A%2F%2Fnecomesi.jp%2Fstaff%2Fshimada%2Fresponsive-table%2F(おそらく、jsファイルをフッターに持っていけば、スピードも100点になるはずです。)これまで、jqueryをつかって、テーブルの縦と横を逆にするとか、cssで、overflow:scroll;にして、よこにスライドしてもらうとか、なんか根本的な解決になってないよな!って思ってました。ユーザーに一手間かけさせることになってしまいますが、テーブルの全体像を把握して欲しいという目標が初めて、達成された感じです。少なくても私にとっては、すばらしいと思います。:ありがとうございます!完全に万能というわけではありませんが、なかなか汎用性の高い手法ではあると思います。ご参考になったようでなによりです~。Googleさんより、サイトに訪れたユーザの反応が分かれそうで、私は尻込みします。いつもスマホでは崩れてしまうのでどうしたらいいのか悩んでました。素人の質問ですみません。コメントをキャンセルメールアドレスが公開されることはありません。喬行2012年入社のフロントエンドエンジニアです。2017年7月にCTOになりました。「広め・深め」を目指し日々ぎょーむに励んでいます。投稿頻度は高くありませんが、鮮度が衰えにくく質の良い情報を提供できるようにがんばります。私たちについて株式会社ネコメシは、原宿にオフィスを構えるウェブ制作会社です。社名はゆるくても仕事はまじめです。サイトリニューアル、新規サービス立ち上げ、フロントエンドの各種実装など、ぜひお手伝いさせてください。ネコメシは、共に働く仲間を募集しています。勤務場所や時間などの規定はゆるく、自分にあった働き方ができる職場です。