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

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

iPhoneの「選択項目の読み上げ」機能を使ってテキストやメモを音声で聞くやり方前のページ

検索結果を見やすくしてくれるChrome拡張機能「Google検索でキーワードをハイライト表示」次のページ

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP