(ちょっとメモ)テーブルをレスポンシブ対応させる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つ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属性 と言われるものの1つです。

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文書内に「章・節・項」などの階層を作ってあげる役割です。

関連記事
この記事をはてなブックマークに追加

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

テーマ : webサイト作成
ジャンル : コンピュータ

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2019/09 | 10
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.