---
title: "レスポンシブなテーブルのレイアウトを考察してみた"
canonical_url: "https://olein-design.com/blog/think-about-responsive-table-layout"
language: "ja"
date_published: "2016-10-04T11:27:55+09:00"
date_modified: "2016-10-04T11:27:55+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "ホームページ運営"
---

# レスポンシブなテーブルのレイアウトを考察してみた

SNSで流れてきたとある記事と出会いまして、ちょっとレスポンシブなテーブルのレイアウトについて調べてみました。 参照した記事：[Responsive table layout](http://allthingssmitty.com/2016/10/03/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/](http://codepen.io/OleinDesign/pen/kkxBzr/) by OleinDesign ([@OleinDesign](http://codepen.io/OleinDesign)) on [CodePen](http://codepen.io).[/codepen_embed] ### scope属性について

 正直申し上げてあまち見慣れない属性でもある**scope**ですが、今回ちゃんと調べてみてどんな機能があるのか理解することができました。 参照：[https://developer.mozilla.org/ja/docs/Web/HTML/Element/th](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/](http://codepen.io/OleinDesign/pen/BLmWZr/) by OleinDesign ([@OleinDesign](http://codepen.io/OleinDesign)) on [CodePen](http://codepen.io).[/codepen_embed] すると、また個人的に見慣れない属性を発見しました。 ### arial-label属性について

 aria-label属性は要素に対してラベル付けを行うためにWAI-ARIA属性です。メニューと閉じる際のペケマークなどのビジュアル目的で表現する要素に対して指定をすることによって、スクリーンリーダーに対応することができます。 参照：[http://www.webcreativepark.net/html/wai-aria/aria-label/](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](https://developer.mozilla.org/ja/docs/Web/CSS/attr) > CSS の `attr()`式は選択要素の属性値を取得し、スタイルシートでそれを使うためのものです。擬似要素で使うこともでき、この場合、擬似要素を作る元になった要素の属性値が返されます。 `attr()`式はすべての CSS プロパティで使うことができます。

 とても新しい発見でした。調べてみると、色々と取りあえげられている記事も多くありました。 - [CSSの content プロパティーを使いこなそう！](http://www.webcreatorbox.com/tech/content-property/)
- [CSSの content プロパティの便利な使い方いろいろ](http://memocarilog.info/webdesign/4382)
- [css擬似要素のcontentをhtmlからattr()で取得する](http://qiita.com/MAL09/items/a28d94044fe4b5b0340d)

 ## まとめ

 久しぶりに英語記事を読み漁りましたが、自身の英語力の落ちっぷりを痛感しました。 WordPressテーマの記事部分などにはちょっと使い難いかもしれませんが、アクセシビリティを重視したテーブルのコーディング内容でしたので、静的HTMLサイトにはどんどん利用していってもいいのかなと感じました。 元記事はこちらになります。ご参照ください。[Responsive table layout](http://allthingssmitty.com/2016/10/03/responsive-table-layout/)