Webページ作成に役立つjQuery②-親要素のサイズに応じて文字の大きさを変える-

今回は、親要素の大きさに合わせてフォントサイズを変えてくれるjQuery、「jquery.fittext.js」について書いていきます。

FitText - A plugin for inflating web type

 

使い方:

例のごとく、上記リンクからjquery.fittext.jsをダウンロードします。

次に、jQueryはhead内、jquery.fittext.jsはbodyの一番最後で読み込ませます。

要素に対して.fittextを付けることでフォントサイズが可変になります。

文字サイズのデフォルトは要素幅の10分の1になっており、()内の数字に応じて縮み幅を変えることが出来ます。1を基準として、大きくすることでより変化し、小さくするとあまり変化しません。

また、minFontSize,maxFontSizeを用いることでフォントサイズの上限下限を設定することが出来ます。