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

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

Justified GalleryjQueryプラグインで画像サイズを調整して綺麗に並べてくれるギャラリー「Justified Gallery」前のページ

スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」次のページTosrus

関連記事

  1. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  2. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  3. lightGallery
  4. JQuery Portfolio
  5. Yet Another Ripple Plugin
  6. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP