和田憲幸のブログ

大きな表などの要素はスマートフォンではスゴく見づらい。しかもuser-scalableをnoにしている場合はさらに見づらくなる。これはデバイスが小さいから仕方の無いことなのかもしれないが、それにしても見づらいのだ。モバイル用の枠内に表示させているため見づらいのだよね。

と、いうことでWebページ内の特定の要素、つまりスマートフォンで見た場合に明らかに見づらい要素を別タブで開くための簡単なメソッドを用意してみた。

その名もtabclip

tabclipとclassを指定した要素はクリッカブルになり、タップすると別ウィンドウでその要素だけ抜き出して表示するという単純な仕掛けだ。詳細は以下のデモページを見ていただきたい。
WebsiteToolKit.jsのデモページ

まだCSSやfaviconの呼び出しをどうするか考えていないのだが、なんとなくやりたいことは伝わるのではないかなと。tabclip専用のCSSを用意すべきか、独自属性を作ってそこでCSSを指定させるか、悩みどころだ。ちなみにタブのdocument.titleはtabclipを指定したタグのグローバル属性であるtitleを引っ張ってくるようになっている。無駄がなく美しいのう（※このサンプルの表はダークソウルの小ロンド遺跡で塊マラソンをした時のものだ）。

レスポンシブWebの鬼門とも言えるTableタグ対策に光明を見出した！年始から幸先がいいな！こうやってなんでもかんでもJavascriptでできちゃうってスゴい便利でいいですよね！