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

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

  2. Parallax Slider with jQuery
  3. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  4. Responsive Multi Menu
  5. Bootstrap Show Password
  6. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

コメント

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

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

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP