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

    JavaScript

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster…

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

  2. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  3. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  4. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  5. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  6. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP