JavaScript

レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

Responsive TextというjQueryプラグインを使えば、とても簡単に指定したテキストをレスポンシブにすることができます。試しに使ってみたところ各テキストごとにフォントサイズの最大値や最小値などを指定することができるので便利でした。以下は使い方です。

[ads_center]

Responsive Textの使い方

Responsive Text

Responsive Text

jQueryとプラグインファイルを読み込んだら以下のようにResponsive Textをセットします。

<script type="text/javascript">
$(document).ready(function() {
    $('.responsive').responsiveText();
});
</script>

適用したいテキストはこんな感じで記述。フォントのサイズはdata-minに最小値、data-maxに最大値を設定することができます。

<h1 class="responsive" data-compression="8" data-min="20" data-max="60">Responsive Text</h1>

これで、ブラウザ幅を縮小していけば設定された値でテキストが調整されていきます。とても便利ですね。

関連記事

  1. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

  2. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  4. Square Menu
  5. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  6. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP