フォントサイズを画面幅にあわせて変えるJavaScript「FitText」

PC、スマートフォン、タブレットなど様々なウィンドウ幅に対応する必要が生じている昨今、対応負荷を軽減するためにFitText - A plugin for inflating web typeを使用してみるのはいかがでしょうか。
画面幅に応じてフォントサイズを変えてくれます。
これをサイトやページタイトルに適用しておくとある程度デザインイメージを統一させることができそうです。
フォントサイズを画面幅にあわせて変えるJavaScript「FitText」サンプル

使用方法
FitText - A plugin for inflating web typeからファイル一式をダウンロード。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.fittext.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".class名").fitText(1.2);
//数字はどの程度縮小していくかです。大きいほど縮小幅が大きい
});
</script>

あとは上記で指定したclassを記述すれば完成です。
<h1 class="class名">text</h1>
※class名で指定したフォントサイズは大きくないとあまり意味がありません。(最低でも100px程度)
※親要素の幅に左右されますので、親要素の幅は100%~85%程度にしてください。

フォントサイズを画面幅にあわせて変えるJavaScript「FitText」サンプル>

sponsors

「フォントサイズを画面幅にあわせて変えるJavaScript「FitText」」をシェアする

記事作成:
記事URL:

TOP > > > フォントサイズを画面幅にあわせて変えるJavaScript「FitText」