Responsive Elements

JavaScript

指定した要素をレスポンシブにしてくれるjQueryプラグイン「Responsive Elements」

Responsive ElementsというjQueryプラグインを使えば、指定した要素をあっという間にレスポンシブに対応させることができます。レスポンシブに対応させた要素には特定のクラスが付与されるので、目的に応じたクラスにCSSを定義することが可能です。以下、使い方です。

[ads_center]

Responsive Elementsの使い方

Responsive Elements

Responsive Elements

実際のデモでは、スライダーを動かして幅を変更することで要素内のレイアウトが調整されていきます。

使い方は、まずjQueryとプラグインをhead内に読み込みます。

<script src="jquery.min.js"></script>
<script src="responsive-elements.js"></script>

レスポンシブにしたい要素にdata-respondを追加します。

<div class="quote" data-respond>

あとはCSSで以下のように記述していきます。ltは「未満」、gtは「以上」という意味です。

.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red}

他にも以下のように様々なクラスが付与されるので、好きなクラスにCSSを設定することができます。

gt100 gt150 gt200 gt250 gt300 gt350 gt400 lt450 lt500 lt550 lt600 lt650 lt700 lt750 lt800 lt850 lt900

というわけで、レスポンシブに対応させたい要素がある時には役立つこと間違いなしですね。

関連記事

  1. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  2. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  3. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  4. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  5. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  6. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP