自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

レスポンシブデザインの表

表、つまり<table>タグ。もちろんここで言うのはテーブルレイアウトではなく、表としてのtable使用のことです。


レスポンシブデザインはPCが横長のデザインに対して、スマホサイズでは縦長のデザインとなります。よって横長の表はスマホに収まりにくく、逆に縦長の表はPCでは無駄なスペースが多く出来てしまうというなんとも困ったコンテンツなのですが、どうしても表でなければ効果的に伝えられない情報も実際にありますよね。


今回のエントリーは、表のレスポンシブについてです。

[広告]


先日こんなことがありました。

助手席に母を乗せて長距離ドライブしていた時のこと。わたしはNHKAMラジオが好きでよく聞いていますが、県を越えて基地局が変わり周波数が変わったので聞こえなくなったため、スマホをもったばかりの母にその場所の周波数を調べてもらいました。


NHKの全国の周波数は、NHKのホームページで一覧になっているので、分かりやすいのですが…


このページはレスポンシブではないんです!!老眼の母が慣れないスマホを一所懸命スワイプしたりフリックしたりして、5分くらいかけて最寄りの基地局の周波数を教えてくれましたが、合わせても無音ですヨ???

何のことはない、1行上の周波数を母は誤って見ていました。動く車の中で、操作の慣れない小さいスマホ画面で横長の表を見たから、見間違ってしまったようです。レスポンシブだったらこんなことはないのになぁと思いました。最近のわたしは、ざっと調べ物をしているときにたどり着いたサイトがスワイプするページなら、他に調べに行きます。


とはいえ、上のように横4列もある横長の表をスマホサイズにぎゅっと収めてみても、見にくいのは明らかです。そういえば横長の表は、レスポンシブではどう扱えばいいんでしょうか。


わたしは上記のようなレスポンシブデザインと表の相性の悪さから、例えば箇条書きなどでその表の内容を伝えるのに不自由や不都合がない場合は、そのようにしてしまうことが多いです。


しかし、業種にもよると思いますが、どうしても表でなければ効果的に伝えられないようなデータがあることも事実ですね!例えば上記のような全国データとか、今までわたしが制作したサイトでは、セミナー開催日時とその内容の年間スケジュールなどがありました。


そういうケースでは、cssのメディアクエリを使って、PC用の表とスマホ用の表のブレイクポイントを設定し表を組みなおすようにします!

予め表の項目を整理しておく必要があります。例えば、NHK周波数の表の例でいえば、都道府県名で1列を使用しているのですが、結論から言うとこれは表の外に出すほかない…ということになります。<h5>あたりで書いてもまったく不自然じゃないですよね!


PC閲覧時の表の構造は次の通りです。<table>を<thead>と<tbody>を使って作ります。

<tbody>の<td>項目は、スマホサイズでは縦1列に並びなおします。つまりこの例では横3列の表ですが、これが5列でも7列でも関係なく1列に並びなおすので、スマホの狭い幅に余裕で入ってしまうということです。

こういうHTMLになります。

<table>
<thead> 
<tr><th>放送局名</th> <th>ラジオ第一</th> <th>ラジオ第二</th></tr>
</thead> 
<tbody><tr><th>仙台</th><td>891</td><td>1,089</td></tr>
<tr><th>鳴子</th><td>1,161</td><td>-</td></tr>
<tr><th>気仙沼</th><td>1,161</td><td>1,539</td></tr>
<tr><th>志津川</th><td>981</td><td>-</td></tr>
</tbody>
</table>

そしてこれがレスポンシブで並べ替えたスマホ用の表です。

・<thead>の横軸の見出し部分は、スマホサイズではposition:-9999pxで吹っ飛ばしてしまい、td:beforeの疑似要素に見出しをつけます。

・放送局名はスマホサイズでは横1行まるまる使います。これはメリハリを生み、小さい画面での表を見やすくする間仕切りの役割も果たします。

cssはこんな感じ。

table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 16px; }
th { background: #4AB453; color: white; font-weight: bold;}
td, th { padding: 6px; border: 1px solid #ccc; text-align: left; }
tr:nth-of-type(odd) { background: #eee; }
@media(max-width:479px){
table, thead, tbody, th, td, tr {display: block;} 
thead tr { position: absolute;top: -9999px;left: -9999px;} 
td, th { padding: 2px; } 
tr { border: 1px solid #ccc; } 
td { border: none;border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } 
td:before { position: absolute; top: 6px;left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
tbody th:before { content: "放送局名";padding-right:30px; font-weight:normal;}
td:nth-of-type(1):before { content: "ラジオ第一";} 
td:nth-of-type(2):before { content: "ラジオ第二"; } 
}


今回の内容は「SoyInquiryのレスポンシブ案」で参考にしたハックを使っています。一緒にお読みいただけると嬉しいです!

[広告]

2015年「上に戻る」ボタン4パターン ブログTOP Wordでダサくない写真年賀状を作る
Hotentry
Blog Post
クリックして上に戻る