SNSで流れてきたとある記事と出会いまして、ちょっとレスポンシブなテーブルのレイアウトについて調べてみました。
参照した記事：Responsive table layout
まずは基本的なテーブル組み
まず、ざっとHTMLコードを見てみるとこんな感じのサンプルが示されていました。
[codepen_embed height=”265″ theme_id=”light” slug_hash=”kkxBzr” default_tab=”html,result” user=”OleinDesign”]See the Pen Responsive Table Layout – Sample by http://allthingssmitty.com/2016/10/03/responsive-table-layout/ by OleinDesign (@OleinDesign) on CodePen.[/codepen_embed]
scope属性について
正直申し上げてあまち見慣れない属性でもあるscopeですが、今回ちゃんと調べてみてどんな機能があるのか理解することができました。
参照：https://developer.mozilla.org/ja/docs/Web/HTML/Element/th
この列挙属性は、
th要素で定義したヘッダが関与するセルを定義します。以下の値を指定できます:
- row : ヘッダは、この要素が属する行の全セルに関与することを示します。
- col : ヘッダは、この要素が属する列の全セルに関与することを示します。
- rowgroup : ヘッダは、この要素が属する行グループの残りのセルすべてに関与することを示します。残りのセルは
table要素で定義したdir属性の値に応じて、このセルの右側または左側になります。- colgroup : ヘッダは、この要素が属する列グループの残りのセルすべてに関与することを示します。
- auto
今回のサンプルで言うと、thead内の見出しは全て、それよりも下の項目に対する見出しになります。（縦関係）ですので、この場合にはscope属性はcolになっているということです。
そして、tbody内の最初に項目にだけscope属性がrowと設定してありますが、こちらの項目が右側の項目から見て見出しとなり得る関係であるためにこのように記述しているということになります。
レスポンシブに対応する
では、参照記事を見ながらレスポンシブに対応するためにコードを追記していきます。すると、このようなコードになります。
[codepen_embed height=”265″ theme_id=”light” slug_hash=”BLmWZr” default_tab=”css,result” user=”OleinDesign”]See the Pen Responsive Table Layout – Sample 2 by http://allthingssmitty.com/2016/10/03/responsive-table-layout/ by OleinDesign (@OleinDesign) on CodePen.[/codepen_embed]
すると、また個人的に見慣れない属性を発見しました。
arial-label属性について
aria-label属性は要素に対してラベル付けを行うためにWAI-ARIA属性です。メニューと閉じる際のペケマークなどのビジュアル目的で表現する要素に対して指定をすることによって、スクリーンリーダーに対応することができます。
参照：http://www.webcreativepark.net/html/wai-aria/aria-label/
今回の記述では、各項目がどの見出しに対応している項目なのかをわかりやすくするために用いているのではないかと思います。
CSSでのレスポンシブ化
目立った処理というのは、table td:beforeに指定してあるcontent: attr(aria-label);という部分ではないでしょうか。他の部分は、それほど珍しくない記述かと思います。
attr()について
詳しくはMDNを参照するとして、ここではそちらを参照しながら簡単にまとめてみます。
参照：https://developer.mozilla.org/ja/docs/Web/CSS/attr
CSS の
attr()式は選択要素の属性値を取得し、スタイルシートでそれを使うためのものです。擬似要素で使うこともでき、この場合、擬似要素を作る元になった要素の属性値が返されます。
attr()式はすべての CSS プロパティで使うことができます。
とても新しい発見でした。調べてみると、色々と取りあえげられている記事も多くありました。
まとめ
久しぶりに英語記事を読み漁りましたが、自身の英語力の落ちっぷりを痛感しました。
WordPressテーマの記事部分などにはちょっと使い難いかもしれませんが、アクセシビリティを重視したテーブルのコーディング内容でしたので、静的HTMLサイトにはどんどん利用していってもいいのかなと感じました。
元記事はこちらになります。ご参照ください。Responsive table layout
