table

この投稿は4年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2012 年 9 月 18 日 1,650日前)
2,049文字 (読了時間5分)

SPONSORED LINK

最近レスポンシブデザインという言葉が流行っています。あまり深く考えたことはありませんが、個人的にはこんなところがいいなーと思ってます。

  • ワンソースで済む
  • Googleが推奨してる

駄目だなーと思うところはこんなです。

  • PHPのように動的なサイトの場合、非表示の要素でも演算対象になる
  • 古いAndroidブラウザが怖い

まあ、Webプログラミングの場合は携帯サイトを作っていたわけで、スマートフォンだからどうこうということでもないかなと思います。

ちなみにこのサイトは一応スマートフォンとPCで表示が変わりますが、CSSのメディアクエリはほとんど使ってなくて、bodyタグにデバイス種別のクラスをつけることで対処してます。Nginxのプロキシキャッシュはデバイスで分けてます。

さて、レスポンシブデザインでも疑似レスポンシブデザインでもいいのですが、どうしても解決できない問題が一つあります。それは、tableタグ。動的なサイトの場合、大抵テーブルのようなものがあります。このサイトでいえば、購入履歴ですね。

テーブルの項目が多い場合あるよね
テーブルの項目が多い場合あるよね

項目が少なければいいのですが、項目が多いと変な折り返しが発生してしまいます。このサイトではPCもそうなってますが……

横幅が狭過ぎてテーブルが変
横幅が狭過ぎてテーブルが変

では、どうするのが正解なのか。というわけで、jQuery Mobileを見てみます。すると、テーブルというか、リストというか、iOSのようなテーブルビューっぽいものしか見つかりません。

テーブルというか、リストだね
テーブルというか、リストだね

Appleの出してるiOS ヒューマンインターフェースガイドラインなんかにも、「複雑な構造を持つデータはテーブルビューで見せろや」と書いてあるのですが、そんな感じのドリルダウン式の見せ方になっています。iOSのメールとかと同じですね。

こういうのをCSSだけで出来たらいいんじゃないかと思ったのですが、どうも無理そうです。

暫定:ダイアログボックスを出す

暫定的な結論としては「主要ではない要素(th以外)を非表示にし、trタップでダイアログボックスを出す」です。

/*scss利用*/
#book-shelf .lwp-table{
	tbody tr td:nth-child(2),
	tbody tr td:nth-child(3),
	tbody tr td:nth-child(4){
		display: none;
	}
}
var bookShelf = $('#book-shelf .lwp-table');
if($('body').hasClass('smartphone') && bookShelf.length > 0){
	var modalBox = $('<div class="entry"></div>');
	modalBox.dialog({
		autoOpen: false,
		title: '決済情報詳細',
		modal: true,
		position: ['center', 'center'],
		width: 300,
		maxHeight: window.innerHeight - 56,
		resizable: false
	});
	bookShelf.find('tbody tr').click(function(e){
		var html = '<table><tbody>';
		for(i = 0, l =$(this).find('td').length; i < l; i++){
			html += '<tr><th>' + $(this).parents('table').find('thead th:eq(' + i + ')').text() + '</th><td>'+
				$(this).find('td:eq(' + i + ')').html() + '</td></tr>';
		}
		html += '</tbody></table>';
		modalBox.html(html);
		modalBox.dialog('open');
	});
}

iOSのスライドするビューをパクればいいのですが、探すのがめんどくさかったのでjQuery UIのダイアログボックスをそのまま使いました。管理バーが崩れてるのはご愛嬌。

ダイアログボックスを表示する
ダイアログボックスを表示する

というわけで、CSSのみの調整で挫折したらJSで補うといいよというお話です。もっといい解決方法をご存知の方はコメントなど下さい。

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2012 年 9 月 18 日にデザインの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

文学と同じく、音楽も、感情を揺さぶり引っくり返し、そして、まったき悲しみや陶酔を生み出すものと定義することができる。文学と同じく、絵画も、感嘆の思いや世界に向けられた新たな視線を生み出す。しかし、ただ文学だけが、他の人間の霊と触れ合えたという感覚を与えてくれるのだ。その魂のすべて、その弱さと栄光、その限界、矮小さ、固定観念や信念。魂が感動し、関心を抱き、興奮しまたは嫌悪をもよおしたすべてのものと共に。

— ミシェル・ウエルベック

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。