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」の使い方でした。

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

関連記事

  1. Create a month picker jQuery plugin
  2. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

  3. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  4. Filterable Product Grid
  5. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  6. Maximum Characters limit exceeded warning

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP