画面サイズを変えてごらん

<span class=”slabtext”>で囲めば、改行をコントロールできるよ

文字サイズの最大値と最小値も設定できるよ

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/slabtext.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.slabtext.min.js"></script>
<script>
	$(window).load(function(){
		$('#slabTextBtn01').on('click', function(){
			$('#slabTextDemo').fadeIn(function(){
				$('#slabTextDemo p').slabText({
					'viewportBreakpoint':380
				});
			});
		});
		$('#slabTextBtn02').on('click', function(){
			$('#slabTextDemo').fadeOut();
		});
	});
</script>
<button class="blue" id="slabTextBtn01">slabTextしてみる</button>
<div id="slabTextDemo">
	<p><span class="slabtext">画面サイズを</span><span class="slabtext">変えてごらん</span></p>
	<p><span class="slabtext">で囲めば、改行をコントロールできるよ</p>
	<p>文字サイズの最大値と最小値も設定できるよ</p>
	<button class="yellow" id="slabTextBtn02">slabTextやめてみる</button>
</div>

slabTextについて

slabTextは、ウィンドウサイズに合わせて文字サイズを変更してくれるプラグインです。
文字サイズって結構レイアウト調整の上で結構悩まされることもありますからね。便利だと思います。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL v2
対応ブラウザ

関連するjQueryプラグイン

  • TextAnimation

    TextAnimation

    テキストを色々とアニメーションさせることができる

  • fontSizer

    fontSizer

    ページ内の文字サイズを変更する事ができる

  • LetterFx

    LetterFx

    複数パターンでテキストアニメーションをセットできる

  • FitText

    FitText

    画面サイズに合わせて文字サイズを変更してくれる

  • Airport

    Airport

    空港の発着情報ボードチックなテキスト表現ができる