Material Design Responsive Table

JavaScript

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

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

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

Material Design Responsive Table

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

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

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

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

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

Granim.js流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」前のページ

シンプルで実用的なアコーディオン実装「jQuery Accordion」次のページjQuery Accordion

関連記事

  1. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  2. simplePagination.js
  3. jqueryIntroLoader
  4. ClassyCountdown

    JavaScript

    スタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」

    ClassyCountdownはシンプルでスタイリッシュな円形カウント…

  5. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  6. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP