今日の人気記事

  1. 国際電話の入力フォーム「International Telephone Input」

画面サイズによってフォントサイズを変更する「FitText」

当ページのリンクには広告が含まれています。

スポンサーリンク

画面サイズによってフォントサイズをフレキシブルに変更するjQueryプラグイン「FitText」を紹介します。

jQueryプラグイン「FitText」

このプラグインを使えば、ブラウザの横幅に応じてテキストのフォントサイズが自動的に変更されます。

レスポンシブデザインをつくるときに便利ですね。

スポンサーリンク

デモページのブラウザを縮めるとテキストのフォントサイズをぐいぃーと変更されます。フォントサイズの変化を堪能してください。

「FitText」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FitText - jQueryプラグインまとめのカルマ</title>
<style>
h1 {
	text-align: center;
	text-transform: uppercase;
	display: block;
}
</style>
</head>
<body>
<h1 id="fittext">jQueryプラグイン</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script type="text/javascript">
$("#fittext").fitText();
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)