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

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

  2. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

  3. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  4. jQuery Gridly

    JavaScript

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

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

  5. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  6. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP