FitText

JavaScript

テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプラグイン「FitText」を使ってみました。とても有名なプラグインですね。ブラウザのサイズを大きくしたり小さくしたりしてもそれに応じてテキストが可変していきます。レスポンシブデザインにも使えそうですね。

[ads_center]

使い方

head内にjQueryとダウンロードしたプラグイン「jquery.fittext.js」を読み込みこんで、FitTextをセットします。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.fittext.js"></script>
<script>
$(function() {
    $("#sample").fitText();
});
</script>

あとは、FitTextを適用させる要素を記述していきます。

<!-- FitText -->
<h2 id="sample">sample text</h2>

これ以上ないくらい簡単でシンプルな使い方ですね。

オプション

オプションでは、テキストのリサイズを調整したり、最小フォントサイズ、最大フォントサイズを指定することもできます。実際に指定する場合には、以下のようにして記述します。

<script>
$(function() {
    $("#sample").fitText(
        1.2, // デフォルトは1
        {
            minFontSize: '20px', // 最小フォントサイズ
            maxFontSize: '40px' // 最大フォントサイズ
        }
    );
});
</script>

ということで、色んなブラウザ幅にも対応してくれる便利なjQueryプラグイン「FitText」の使い方でした。

以下からダウンロードできます。

PopClipMacのマウス操作でコピペがかなり捗るアプリ「PopClip」前のページ

【超便利】この曲なんだろうと思う曲を一発で教えてくれる便利なiPhoneアプリ「Shazam」次のページShazam

関連記事

  1. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  2. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  3. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  4. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  5. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

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