フォントサイズを画面幅にあわせて変えるJavaScript「FitText」
PC、スマートフォン、タブレットなど様々なウィンドウ幅に対応する必要が生じている昨今、対応負荷を軽減するためにFitText - A plugin for inflating web typeを使用してみるのはいかがでしょうか。
画面幅に応じてフォントサイズを変えてくれます。
これをサイトやページタイトルに適用しておくとある程度デザインイメージを統一させることができそうです。
sponsors
使用方法
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
記事作成:2011年5月11日 10:18
記事URL:http://www.skuare.net/2011/05/javascriptfittext.html
TOP > javascript > テキスト関連 > フォントサイズを画面幅にあわせて変えるJavaScript「FitText」
前の記事:フォームの入力エラーをわかりやすくする「Form validation using jQuery」
次の記事:iPadなどのタブレット端末に激しく使えそうなJavaScript「Kaiten browser」
あなたにはこちもお勧め!
jQuery プラグインまとめ!