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. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  2. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  3. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  4. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

  5. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  6. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

コメント

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

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

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP