テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

2014.01.10

SquishyというjQueryプラグインを使えばテキストをコンテナに合わせて自動でサイズ変更させることができます。レスポンシブなデザインにしたい時にも活用できそうですね。手軽にフォントサイズをコンテナに合わせてくれるので便利です。

[ads_center]

Squishyの使い方

Squishy

HTMLで適用したい要素を記述します。

<p class="sample">sample</p>

head内にjQuery本体とダウンロードしたプラグインを読み込んだ状態で、以下のようにSquishyをセットすればOKです。

<script type="text/javascript">
$(function() {
    $(".sample").squishy();
});
</script>

オプションではmaxWidth、minWidth、maxSize、minSizeなんかを指定することができます。

$(".squishy").squishy({maxWidth: 200, minSize: 20});

コンテナいっぱいにテキストを配置したい時なんかに覚えておきたいですね。