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. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  2. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  3. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  4. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  5. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  6. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

最近の記事

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

アーカイブ

PAGE TOP