Webサイトに表示するテキストをレスポンシブに合わせて拡大・縮小する方法

こんにちは！ぐちです。

Webサイトに表示しているテキストを画面幅に合わせて拡大・縮小するライブラリのご紹介です。

こちらに公式ページがあります。

最近はWebサイトもPC用とかスマホ用とか分けずに1ソースで対応するような流れがありますよね？きっちりと設計しようと思うとPC用とスマホ用を分けたほうが設計工数としては少なかったりするんですよね。。。

ソースでマルチデバイスの表示に対応することをレスポンシブデザインなどと言ったりしますがその時に画面幅に合わせてテキストを拡大・縮小するのに FitTextは超便利です。

使い方は非常にシンプルです。

まずはjQueryを読み込みます。次にFitTextのスクリプトを読み込みましょう。準備はこれだけです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>

次に拡大・縮小したいテキストのクラスやIDを指定してFitTextの機能をコールします。

<script>
  $("#responsive_headline").fitText();
</script>

<div id=“responsive_headline”>ほげほげ</div>

上記の例でいくと「ほげほげ」というテキストが画面幅に合わせて調整されます。fitText()関数は小数値の引数を取りますのでテキストサイズの微調整にパラメータを渡すことも可能です。

<script>
  $("#responsive_headline").fitText(0.8);
</script>

引数を大きくすると画面内での文字が小さくなり引数を小さくすると画面の文字は大きく調整されます。

世の中には本当に色々な便利なものが公開されており非常に役に立っています。 Cordovaアプリ開発でもPHPでもオープンソースなコードは使わせて頂いております。

開発者の皆様ほんとうにありがとうございます！！

サイト内検索