• かちびと.net

    表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFLのご紹介。地味に便利かもと思って備忘録です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL

スポンサーリンク

ちょっと気になってたjQueryプラグイン
だったのでテストしてみました。表示
しているサイズに応じてレイアウトや
フォントサイズを最適なものにしてく
れる、というもの。Media Queryは使用
していないのでcssも綺麗に保てます。

場合によっては軽量化に繋がるかも、と思ったのでちょっとテストしてみたかったライブラリ。説明されてもあんまりピンとこないライブラリですけどwなんというか、かゆいところに手が届く的なやつです。

jFL


このようにサイズを表示変えるとフォントサイズやdivの幅も指示通り変わってくれます。Media Query択一だと、どうしても面倒になってくることもあるので、こういうスクリプトも覚えておくと保険になるかもですね。スクリプトはたったの6KBですので軽量化にも役に立つかもしれません。

尚、IE6と7には対応していません。

日本語でも問題ありませんでした。以下サンプルどうぞ。

Sample ※確認ツールはresponsivepxが便利です。

デモは少し大袈裟に設定しているので、あまり幅を小さくするとフォントが見えなくなってしまいますが、表示サイズに応じてサイズが変化しているのが確認出来るかと思います。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript" src="jFL.min.js"></script>

jQuery本体とプラグインを読み込む。

<script>
	$('p').layout('newresize',{"property":"font-size","min":0.65,"min_at":600,"max":1.25,"max_at":1600, "udm":"em"});
	$('#container').layout('width',{"percent":100,"min":500,"adjust":0});
	$('#left').layout('width',{"percent":20,"min":100});
	$('#center').layout('width',{"percent":60,"min":300});
	$('#right').layout('width',{"percent":20,"min":100});
	$('#the_img').layout('width',{"percent":40,"relativeTo":"#center","min":100});
</script>

こんな感じで個別に設定する。min-widthとかを使う時の感覚で書けば良さそうですね。ここは少し面倒くさいですけど、Media Queryよりはマシかな。まぁ、こういうものなので、複雑なレイアウトには向いて無いかもしれません。

雑感

うまく併用して軽量化できるといいんですけど・・使いどころは限られまね。

でも、Media Queryのようにブレイクポイントを設定する必要は無いので、そういう意味ではデバイスを選ばないと言えば選ばないのかな。サポートブラウザの問題もあるっちゃありますけどwこのライブラリはこちらでユーザーの表示サイズを指定する必要は無いですし。うまく利用したいところです。

ご利用は以下よりどうぞ。

jFL

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services