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. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  2. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  3. no-image
  4. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  5. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  6. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

コメント

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

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

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景
  4. BELTZのバスクチーズケーキ

アーカイブ

PAGE TOP