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. GoogleSheets-HTMLImporter
  2. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  3. no-image
  4. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

  5. jQuery Text Fade Delay
  6. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

コメント

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

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

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP