JavaScript

超軽量&シンプル!ブラウザサイズに合わせてテキストを可変するjQueryプラグイン「WideText」

とても軽量でシンプルなjQueryプラグイン「WideText」をご紹介します。ブラウザサイズに合わせてテキストをレスポンシブに表示させることができます。jQueryでタイポグラフィを扱う際に覚えておきたいプラグインですね。以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jQuery.wideText.js"></script>

ブラウザサイズに合わせて可変させたいテキストをセットしていきます。

<script>
$(window).load( function() {
    $('.responsive').wideText();
} );
</script>

以下のCSSを追加しておきます。

.wtext {
    white-space: nowrap;
    display: inline-block;
}

あとは適用したいテキストの要素にクラス名「responsive」を追加するだけでOKです。

<h1>
    <span class="responsive">これはサンプルテキストですこれは</span>
    <span class="responsive">サンプルテキストですこれはサンプル</span>
    <span class="responsive">テキストですこれはサンプルテキストです</span>
    <span class="responsive">これはサンプルテキストです</span>
</h1>

このように、ブラウザサイズを変化させていくと。

WideText

行数や行内の文字数は変わることなく、それに合わせてテキストサイズが可変していくので、デザインもそれなりに統一できそうですね。

WideText

ということで、シンプルな機能なのでとても使いやすいプラグインでした。以下からダウンロードできます。

関連記事

  1. Before and After image script
  2. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  3. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  4. no-image

    JavaScript

    要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」

    snapScroll.jsは要素ごとにきりのいいところでスクロールされ…

  5. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  6. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP