ほんっとにはじめてのHTML5とCSS3：（ちょっとメモ）テーブルをレスポンシブ対応させるCSS

（ちょっとメモ）テーブルをレスポンシブ対応させるCSS

最終更新日：2017年10月31日　（初回投稿日：2011年07月06日）

テーブルをスマホなどの表示領域の狭いデバイスで見ると、とても見にくいですね。
幅が狭い中に何カラムも入って、1行の文字が1文字になったり...。

コレを解消するため、スマホでは 1カラムのテーブルに表示する方法をご紹介します。
CSS のメディアクエリ（Media Queries）という機能を使います。

使用する属性	`aria-label属性`

● この記事は、2017年10月4日に書いたものですが、テーブル関連の記事なので、時系列的に読みやすくするため、初回投稿日を 2011年7月6日に操作しています。ご了承ください。

サンプルファイルを用意しました

今回は、外部にサンプルファイルを用意しました。
PCのかたは、ウィンドウ幅を小さくして見てみてください。
（画像クリックで別ウィンドウで開きます）

テーブルをレスポンシブ対応させるポイント

HTML や CSS のソースは、サンプルファイルの方に全文載せています。
ここでは「ポイント」のみ説明します。

メディアクエリで CSSを切り替えます

CSS のメディアクエリ（Media Queries）とは、条件に応じてスタイルを切り替える機能です。
よく使われる条件は、表示領域のサイズ。ほかに、デバイスの縦持ち・横持ちなども条件にできます。

サンプルでは、

@media screen and (max-width: 600px) {

/*この部分に、CSSを書きます*/

}

と、「最大幅が600pxのとき（幅が600px以下なら）」という条件で切り替えています。
メディアクエリの { } 内に、その条件下で使いたい CSSを書けば、その前に書いていた CSS から切り替える事ができます。
変更したいスタイルのみ書きます。そのままでイイ指定は書かなくてOK。

メディアクエリについては、いずれ記事にしようと思っています。
以下に若干雑ですが解説していますので、ご興味ある方は見てみてください。
Media Queriesの条件分岐とブレイクポイントについて | ＊Web Design 覚え書き＊
MediaQueriesとviewportは一緒じゃないと無意味 | ＊Web Design 覚え書き＊

<thead> を非表示に

ココからは、メディアクエリ内での指定です。

HTMLで、テーブルの上側の見出し部分を <thead>要素で囲んでおきます。

<table class="sample1">
<thead>
  <tr>
    <th>エリア</th>
    <th>店舗名</th>
    <th>来店総数</th>
    <th>新規来店</th>
    <th>リピート</th>
  </tr>
</thead>

CSS のメディアクエリ内で、この <thead>要素を非表示にします。

table.sample1 thead {
	display: none;
	}

<thead>要素内のテキスト（エリア・店舗名...など）は、あとで各<td>要素で表示できるように仕込みます。

<td> や <th> に display: block を指定する

<td> や <th> は、デフォルトのスタイルでは display: table-cell です。
これは、<tr>要素で行を変えられない限り、互いに横に並ぶ性質があります。

これらのセルに、display: block と指定して、セルの性質を失くさせます。
これで、width はデフォルト値の「auto」になるので、1つ１つが親（ここでは <tr>要素）の幅いっぱいに広がります。

親の幅いっぱい（100％）に広げるために display: block と指定するわけです。

table.sample1 tr td {
	display:block;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom:none;
	}
table.sample1 tbody th {
	display:block;
	border:none;
	background:#666;
	color:white
	}

aria-label属性で見出しのテキストを仕込む

先ほど非表示にした <thead>要素内のテキスト（エリア・店舗名...など）を、<td>要素に仕込みます。

まずは HTMLで、<td>要素に「aria-label属性」を使って適合するテキストを入力しておきます（これがけっこう面倒い）

<tbody class="areaA">
  <tr>
    <th rowspan="3">A</th>
    <td aria-label="店舗名　">渋谷店</td>
    <td aria-label="来店総数">100</td>
    <td aria-label="新規来店">80</td>
    <td aria-label="リピート">20</td>
  </tr>
  <!--全部仕込みます↓　tbody内の td 全部-->

そしてCSSでは、疑似要素 ::before を使って、「aria-label属性」のコンテンツを <td>要素の前に表示させます。

table.sample1 tr td::before {
	content: attr(aria-label);
	float: left;
	font-weight:bold;
	padding-left:.7em
	}

これで、「店舗名　渋谷店」などと、<td>に書いているテキストの前に見出しで使ってたテキストが表示されるわけです。
アナログ作業だけど、この「aria-label属性」は、もともとアクセシビリティのためのものなので、その目的も達成しているのでOK（笑）

「aria-label属性」については、記事の最後にざっとメモっておきます。

HTML側に viewport を指定

メディアクエリを使ったので、HTML の <head>内に以下の記述をしています。

<meta name="viewport" content="width=device-width, initial-scale=1">

これは、viewport（ビューポート）と言います。
viewportは、スマホなどのデバイスの表示領域や拡大率の指定です。
<meta>要素の name属性で「name="viewport"」と指定。content属性内で、内容を指定します。

上のソースでは、
・幅は「デバイスの表示領域の幅に合わせる（device-width）」
・initial-scale（初期スケール）は「1（原寸）」
と指定しています。

テーブルじゃなく<dl>リストにすべきもの

レスポンシブを考えると、テーブルは 縦列と横列が関連しあってるデータに使うべき。

単なるリストで良いものは、HTML上では <dl>などのリストにすべきです。
そのほうがレスポンシブ対応が簡単になるからです。

2カラムしか無いテーブルは <dl>で

2カラムしかないテーブルは、最初から <dl>のリストで 1カラムで表示すべき。
そうすれば、レスポンシブ対応のスタイルをわざわざ書かなくても済みます。

<dl>とリストアイテム <li> の組み合わせが適するもの

1方向しか関連のないデータのテーブルは、<dl>リストの中に <ul>（または<ol>）のリストを入れ子にしたものが最適です。これでスマホ表示でも世話いらず。

WAI-ARIA の aria-label属性

今回使用した「aria-label属性」は、WAI-ARIA属性と言われるものの１つです。

WAI-ARIAとは

WAI-ARIAは、Web Accessibility Initiative - Accessible Rich Internet Applicationsの略だそうです。
HTML や SVG で使える アクセシビリティのための仕様で、「role属性」「aria属性」が定義されています。

「role属性」は要素の役割を明示するためのもの。
role属性の値によって、音声読み上げソフト（スクリーンリーダー）などで、決められた音声を付けて読み上げられ、ランドマーク（読み飛ばす時のジャンプ先）の役割を担ったりできるそうです。

「aria属性」は、要素のより詳細な情報を明示できます。
「aria属性」には、要素の状態を明示する「aria-busy属性」や、要素の詳細な説明を追加する「aria-label属性」、要素をスクリーンリーダーに無視させる「aria-hidden属性」など、ほかにもたくさんの種類があります。

2016年10月勧告の WAI-ARIA 1.1 が最新バージョン（2017年10月記）
Accessible Rich Internet Applications (WAI-ARIA) 1.1
日本語訳もありました↓（個人のかたが訳してくださっているページです）
Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

aria-label属性とは

「aria-label属性」は、HTMLの「title属性」みたいなかんじで、その要素が何なのか説明するテキストを値にできます。
今回のサンプルでも、自由なテキストを値にできましたね。
「title属性」は、値のテキストがツールチップとして浮き出ますが、「aria-label属性」はそれはありません。
目的は、その要素が何のためのものか説明すること。
値のテキストはスクリーンリーダーで読み上げられます。

例えば、ビジュアルを CSSで整えた <button>要素の「☓」のテキストは、スクリーンリーダーでは何なのかわからない（バツって読みあげられるのかな？）。
これに下のように「aria-label属性」示せば「Close」のボタンだとわかります。

<button aria-label="Close" >☓</button>

他に、アイコンフォントを利用する時に、画像なら <img>要素の「alt属性」が使えますが、フォント指定なので「alt属性」も「title属性」も使えない時に、「aria-label属性」で何のアイコンなのか説明できます。

参考資料：
・aria-label | Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳
 ・アクセシブルな Web アプリケーションやウィジェットの概要 - Accessibility | MDN
・WAI-ARIAを活用したフロントエンド実装 - role属性, aria属性の基礎知識 |CodeGrid

次回予告

次回からは、セクショニング要素についてまとめていきます。

HTML5から、セクショニングのための新要素が登場。
以前チラッと登場した <nav>要素もこのセクショニング要素なんだって。
このほかに <section>要素、 <article>要素、 <aside>要素があります。

セクショニング要素は、見出し要素（ <h1> 〜 <h6> ）と一緒に使って、HTML文書内に「章・節・項」などの階層を作ってあげる役割です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-10-31（Tue）│
投稿日：2011-07-06（Wed）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿