Material Design Responsive Table

JavaScript

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

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

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

Material Design Responsive Table

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

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

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

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

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

関連記事

  1. jquery.adaptive-backgrounds.js
  2. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  3. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  4. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  5. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP