riyokotterのブックマーク - はてなブックマーク

riyokotter id:riyokotter

ブックマーク / black-flag.net (2)

テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりとレイアウトに苦労することがよくあります。そんなテーブルをレスポンシブ対応させる際にいろいろと便利に使えそうなjQueryプラグインをまとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちらまず最初は「Basic Table」。画面幅に応じて見出し要素を複製するかたちでテーブルを項目の並びを整えて収めてくれます。様々なレイアウトパターンが用意されていてテーブルが長くなる場合にはスクロール制御する機能もあり、いろい
riyokotter 2015/07/21
responsive

jQuery Plugin

table
リンク
jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法｜BLACKFLAG
Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形でのスクリプトサンプルを試しに作ってみたので紹介してみます。まずは動作サンプルから。サンプル画面でウィンドウサイズを伸縮させてみてください。「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますがそれぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ
riyokotter 2014/06/10
レスポンシブ

jQuery

行揃え
リンク
1