jQueryプラグインでレスポンシブなリキッドな画面サイズに合わせて文字のサイズを変えれるプラグイン『FitText』

HTMLの要素とか、画像のサイズとかリキッドに変化出来るのに
なんで文字サイズは変化できないんだろう？

なんていうのはWEB制作をしていると思うことですが
jQueryのプラグイン「FitText」を使うと、親要素の大きさに合わせて、自動的に文字が拡大縮小することが可能です

しかもレスポンシブでメディアクエリを使ったものとは違い
スムーズに大きさが変化します

FitText の使い方

http://fittextjs.com/ 【公式サイト】 Fit Text の動作を確認できます

まずはプラグインをダウンロードします、プラグインはGitHubからダウンロード出来ます
https://github.com/davatron5000/FitText.js

WS002472

GitHubの画面右側にある Download ZIP からダウンロードできます

ダウンロードしたZIPの中にある jquery.fittext.js を使います

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

jQuery と jquery.fittext.jsを読み込みます
それぞれのパスに合わせて読み込みます

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

対象をjQueryで指定します

セレクタで対象を決めて、後ろに fitText()とするだけ

親要素に対しての文字の大きさを指定することが可能です

数値が大きいホと小さく、数値が小さいほど大きくとう形になっています何も数字がないときの初期値は1です

<script>
  $("h1").fitText(1.5);
  $("h2").fitText(0.5);
</script>

親要素は基本横幅を width: 100％;とする必要があります

またインライン要素には使えません

短縮URL: