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>

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

コピースタンプツールPhotoshopでコピースタンプツールを使ってみる前のページ

Lightroomのスポット修正ツールはぼかしを使うといい感じ次のページスポット修正ツールのぼかし設定

関連記事

  1. jQuery liMarquee
  2. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  3. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  4. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  5. 2013年下半期jQueryプラグインまとめ

    JavaScript

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

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  6. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP