[B! xDevice][RWD] tomk79のブックマーク

FooTable: A WordPress Table Plugin - FooPlugins

Great News! We’re reinventing FooTable to bring you a responsive table that’s better than ever! FooTable will be a WordPress Table Plugin, which will allow you to add responsive tables to your pages and posts. We want to create the tables that you need, like pricing and comparison table, or data tables. We want to include features that will make your life simpler. This might be versatile styling o

tomk79 2014/05/13

リンク

レスポンシブWebデザインで使えそうな2つのテーブル実装例

以前の投稿で書きましたが、レスポンシブWebデザインでサイトを制作する際の課題の一つは、データの多いテーブルの見せ方です。その課題をクリアする「この方法なら行けるかも！」と思えるものが2つほどあったのでご紹介します。どちらも甲乙つけがたい良い実装例で、技術的な問題がなければレスポンシブなテーブルの代表的な実装手法になっていくのでは？と思っています。ドロップダウンでカラムの表示・非表示を選択まずは、レスポンシブWebデザインの情報を探していると良く出てくるボストンの制作会社、Filament GroupのMaggie Costello Wachsさんが考案したものをご紹介します。オープンソース（GPL License）で、コードは自由に使って良いようです。以下の画像のように、ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています

tomk79 2014/05/13

リンク

レスポンシブWebデザインでテーブルを使う時の小技

tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-it emなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-it em; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

tomk79 2014/05/13

リンク

スマホサイトのデザイン・作り方の現状についてまとめてみました。

今年の8月ごろに、「8割以上の人、スマートフォン専用サイトの必要性を感じていない」というアンケート結果が話題になっていました。実は、このアンケートは記事本文よりもはてなブックマークのコメント欄のほうが参考になります。そこで、本日時点のブコメの内容をまとめてみました。一人しか言及されていない内容は除外一人の人が複数の視点について言及している場合は別々にカウントという方法で集計・分類した結果、201人分のコメントになりましたので、スマホサイトに関心のあるはてブユーザー（の一部）は、スマホサイトの現状をどう感じているのか。現状や不満の声をランキング形式でまとめてみました。集計人数に多少の誤差があるかもしれませんが、私の基準で分類していますのでご了承ください。人数の関係で中途半端ですが、12位から発表していきます。人数が同じ場合は同じ順位としてカウントしています。第12位：PCサイトは重