Material Design Responsive Table

JavaScript

マテリアルデザインによるレスポンシブなテーブル実装「Material Design Responsive Table」

Material Design Responsive Tableは、マテリアルデザインを取り入れたレスポンシブ対応のテーブルを実装することができます。うっすらと表示されたシャドーにより、さりげない立体感を演出できます。シンプルなマテリアルデザインによるテーブルをサイト内で使いたい人にはピッタリですね。

マウスを乗せると行のカラーが変化して見やすい

Material Design Responsive Table

テーブル内にマウスを乗せると、その項目の行のカラーがブルーに変化します。これにより、どの項目を見ていても迷うことなくほかの列の項目も確認できますね。テーブルを使ううえでとても便利なポイントになるのではないでしょうか?

とくに、列がたくさん並んでいると、「いまどの行を見てるんだっけ?」とわからなくなってしまいがちなので、この機能はうれしいところです。

また、レスポンシブデザインに対応しているのも見逃せません。ブラウザのウィンドウサイズを縮小してみるとわかりますが、横に並んでいる列の項目が縦に切り替わります。1つの行が1枚のカードっぽいデザインになるので、スマホなどでは断然こっちの方が見やすくなりますね。

さまざまなデバイスに最適なレイアウトで表示され、デザインもシンプルなのでいろんなサイトに活用できるのではないでしょうか?

というわけで、レスポンシブに対応したマテリアルデザインのおしゃれなテーブルを実装したい人は、ぜひチェックしてみてください。

関連記事

  1. no-image
  2. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  3. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  4. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

  5. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  6. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP