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. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  2. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  3. Material ScrollTop Button
  4. Warp drive jQuery plugin
  5. Responsive jQuery Pop Up Gallery
  6. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP