はじめに
Bootstrap 3では、レスポンシブ対応のページを簡単に作成できますが、テキストのリサイズに関してはBootstrapまかせになるかと思います。今回は、テキストのリサイズを制御できるFixTextを試してみます。
2014年03月15日 09時28分
Bootstrap 3では、レスポンシブ対応のページを簡単に作成できますが、テキストのリサイズに関してはBootstrapまかせになるかと思います。今回は、テキストのリサイズを制御できるFixTextを試してみます。
作業の前提条件は、下記のとおりです。
| ソフトウエア | バージョン |
|---|---|
| OS | Windows 7 Ultimate 32bit |
| Cygwin | Setup Version 2.831 |
設置に必要なアーカイブをダウンロードし、解凍します。
$ cd /tmp/demo $ wget -q https://github.com/davatron5000/FitText.js/archive/master.zip $ unzip -q master.zip $ rm -f master.zip $ mv FitText.js-master fittext
jquery.fittext.jsを、HTMLファイル中に指定し、FitTextのロードを行うJavaScriptを 追加します。
なお、ZIPファイルに含まれるexample.htmlではid指定ですが、ここでは、classを指定しています。
<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="fittext/jquery.fittext.js"></script>
<script>
$(".ft1").fitText();
$(".ft2").fitText(1.5);
$(".ft3").fitText(0.5);
</script>
FitTextでは、オプションで文字の縮尺率を、数値で指定できます。
| 指定値 | 概要 |
|---|---|
| 無指定 | 縮尺しないで等倍で表示します。 |
| １以上 | 1/指定値の縮尺率で縮小表示します。 |
| １未満 | 1/指定値の縮尺率で拡大表示します。 |
１以上の値を指定すると縮小され、１未満の値を指定すると拡大されます。
縮尺を掛けたいコンテンツを作成します。
<p class="ft1">FitTextを無圧縮で使用しています。</p> <p class="ft2">FitTextを圧縮率を1.5で使用しています。</p> <p class="ft3">FitTextを圧縮率を0.5で使用しています。</p> <p>FitTextを使用しないで表示しています。</p>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>049</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<p class="ft1">FitTextを無圧縮で使用しています。</p>
<p class="ft2">FitTextを圧縮率を1.5で使用しています。</p>
<p class="ft3">FitTextを圧縮率を0.5で使用しています。</p>
<p>FitTextを使用しないで表示しています。</p>
</div>
</div>
<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="fittext/jquery.fittext.js"></script>
<script>
$(".ft1").fitText();
$(".ft2").fitText(1.5);
$(".ft3").fitText(0.5);
</script>
</body>
</html>
 |  |