jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回は【jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン】についてメモしておきます。数行追加するだけで簡単に実装できう上に、iphone等の様々なディバイスにも柔軟に対応してくれます。どこかで試してみても良いかもしれませんね。

SLABTEXT

挙動も安定していて使い勝手も良いです。カスタマイズ性も高そう。パディング等で全体幅からスペースを取ったサイズ調整もできます。span等にはCSSの追加が必要なようです。詳しくはSLABTEXT
 

HTML

<h1 class="slab">HEADLINES</h1>
jQuery

<script src="jquery-1.X.X.min.js"></script>
<script src="jquery.slabtext.min.js"></script>
<script type="text/javascript">
function slabTextHeadlines() {
$(".slab").slabText({"viewportBreakpoint":380});
};
$(function(){
setTimeout(slabTextHeadlines, 100);//1000で1秒後に反映します。
});
</script>
CSS

.slabtexted .slabtext{
display:-moz-inline-box;
display:inline-block
white-space:nowrap;
}
.slabtextinactive .slabtext{
display:inline;
white-space:normal;
font-size:1em !important;
letter-spacing:inherit !important;
word-spacing:inherit !important;
*letter-spacing:0 !important;
*word-spacing:0 !important;
}
.slabtextdone .slabtext{
display:block
}

FIT TEXT

シンプル且つ軽量なプラグインです。文字の最大値や最小値も指定できます。詳しくはFIT TEXT
 


<h1 class="fit">HEADLINES</h1>


<script src="jquery-1.X.X.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$(function(){
$(".fit").fitText(1.2);
});
</script>

 
以上になります。