[JS]レスポンシブ対応！テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty
Post on:2017年8月1日
sponsors
テキストを親コンテナの幅に応じて、ぴったりに配置されるようにサイズ変更する超軽量スクリプトを紹介します。
レスポンシブ対応で、日本語にもWebフォントにも対応しています。
Fittyのデモ
Fittyの動作は、デモページで楽しめます。
デモではデバイスフォント、Webフォントが親コンテナの幅に応じて変化されます。
デモをダウンロードして、日本語で試してみました。
ぴったりに配置されますね。
デモページを日本語化
Fittyの使い方
外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="fitty.min.js"></script> </body> |
Step 2: HTML
親コンテナを用意し、その中にテキストを配置します。
|
1 |
<div id="my-element">日本語のテスト</div> |
Step 3: JavaScript
要素を指定し、スクリプトを実行します。
|
1 2 3 |
<script> fitty('#my-element'); </script> |
sponsors
