読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

(੭•̀ᴗ•̀)੭ ZURB Foundation 5でレスポンシブテーブル実装

HTML&CSS WebDev RWD

 ZURB Foundation 5(以下、ZF5)でレスポンシブテーブルを実装しようとしたら、標準で備えられていなかったので、やり方のメモ。Foundationのレスポンシブテーブルは、行の見出し(カラム左端)を標準で固定してくれるところがBootstrapに優るところかもしれない。
 余談ですが、ZF5はBootstrapと違って、グラデーションが効いていないから、割と「フレームワーク臭」が出にくいです。グラデーションは値に幅があるので、そのまま使うと「あ、あれだな」と認識されやすいのだと思う。「Bootstrap臭」に関する考察と回避策についてはまたの機会に。
 本題。参考リンク(と言っても、「foundation responsive table」でググった結果ですが)は以下になります。

Crafty Responsive Tables | Playground from ZURB
上は本家によるもの。以下も参考にした。
Responsive Tables — Responsive Web Design

 新しくファイルをDLして読み込め、とあるのですがリクエストを増やすことは避けたいので、一番手っ取り早くやる方法として、必要最低限の部分だけをコピペする方法をとります。

zurb/responsive-tables · GitHub
 このページのresponsive-tables.cssとresponsive-tables.jsの中の記述を、ダウンロードしたZF5ファイルの末尾か、WordPressのstyle.cssにあたる自分で記述するファイルにコピペすればいいでしょう。
 他人が作ったもの(Foundation)に他人が作ったもの(コピペ部分)を足しただけなので、以上で完了です。上のGitHubプロジェクトが作られたのは2年前以上なのですが、どうして標準搭載されていないのかはよくわかりません。ZURBに何かポリシーのようなものがあるのかも。
 追伸
アクセス数は今も毎日一桁台です。