[JS]レスポンシブ対応!テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty

テキストを親コンテナの幅に応じて、ぴったりに配置されるようにサイズ変更する超軽量スクリプトを紹介します。
レスポンシブ対応で、日本語にもWebフォントにも対応しています。

サイトのキャプチャ

Fitty
Fitty -GitHub

Fittyのデモ

Fittyの動作は、デモページで楽しめます。

サイトのキャプチャ

デモページ

デモではデバイスフォント、Webフォントが親コンテナの幅に応じて変化されます。

サイトのキャプチャ

デモページ

デモをダウンロードして、日本語で試してみました。
ぴったりに配置されますね。

サイトのキャプチャ

デモページを日本語化

Fittyの使い方

外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

親コンテナを用意し、その中にテキストを配置します。

Step 3: JavaScript

要素を指定し、スクリプトを実行します。

top of page

©2017 coliss