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

fittextjs_com
このエントリーをはてなブックマークに追加
PR

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 を使います

 

 

HTMLでプラグインを読み込む

<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%;とする必要があります

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)