Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせて動的に拡大・縮小させることができます。スマホやパソコンなど、さまざまな機器のブラウザで快適にコンテンツを閲覧できるWebサイトを作りたい場合に活用したくなりますね。
Scalable
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の詳細やダウンロードは、下記のページからどうぞ。
