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. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  2. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  3. Parallax Slider with jQuery
  4. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  5. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  6. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP