Squishy

JavaScript

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

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

[ads_center]

Squishyの使い方

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});

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

関連記事

  1. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  2. jQuery Inline Footnotes

    JavaScript

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

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

  3. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

  4. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  5. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景

アーカイブ

PAGE TOP