指定した要素を簡単にレスポンシブに「Scalable Text」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素を簡単にレスポンシブにしてくれるプラグイン「Scalable Text」を紹介します。
jQueryプラグイン「Scalable Text」
このプラグインを使えば、要素を指定するだけでブラウザーの幅に応じてサイズを変えるレスポンシブ要素を作成することができます。指定していない要素のサイズはそのままです。
ユーザーの環境に依らず、同じビジュアルを実現することができる！かもしれませんね。
スポンサーリンク
以下のデモにアクセスし、ブラウザーの幅を縮めてみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Scalable Textのデモでーす。">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalable Text - jQueryプラグイン</title>
</head>
<body>
<h1 style="font-size: 120px;">Scalable Text のデモでーす。</h1>
<p>ブラウザーの幅を縮めてください。</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.scalabletext.js"></script>
<script>
$(document).ready(function() {
$('h1').scaleText().show();
});
</script>
</body>
</html>
スポンサーリンク