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

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  2. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  3. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  4. Choice.js
  5. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

コメント

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

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

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP