no-image

JavaScript

コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせて動的に拡大・縮小させることができます。スマホやパソコンなど、さまざまな機器のブラウザで快適にコンテンツを閲覧できるWebサイトを作りたい場合に活用したくなりますね。

Scalable

デモ

デモではContainerと書かれたコンテナのサイズを変更することで、コンテナ領域内にある要素を拡大・縮小させることができます。コンテナの右下をドラッグすることで、コンテナサイズを調節することができます。

コンテナを大きくするとそれに合わせて要素も大きくなり、コンテナを小さくするとそれに合わせて要素も小さくなります。コンテナに合わせて動的に要素のサイズも変化するので、いろんなデバイスに対応させたいといったシーンなどで活躍してくれそうですね。

使い方自体もとてもシンプルなので、簡単に実装できます。また、オプションもいくつか用意されていることから、ちょっとしたカスタマイズも可能です。

主なオプションは、align、verticalAlign、containerHeight、minWidth、maxWidth、minScale、maxScaleです。alignの値には、left、center、rightがあり、デフォルト値はleftになっています。verticalAlignの値には、top、center、bottomがあり、デフォルト値はtopです。

また、containerHeightの値には、fixedとautoが用意されていて、デフォルト値はfixedに設定されています。

コンテナ領域内にある要素をコンテナサイズに合わせて拡大・縮小してくれる機能を実装したい人は、ぜひ「Scalable」を使われてみてはいかがでしょうか。

Scalable

関連記事

  1. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

  2. NO IMAGE
  3. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  4. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  5. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  6. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP