【JavaScript】文字設定をレスポンシブ対応してくれるライブラリ『FlowType』

responsive-web-typography-with-flowtype

『FlowType』はレスポンシブデザインのサイトにおいて、横幅の変化に応じて設定されている文字の大きさや行の高さを自動的に調整をしているJavaScriptライブラリです。

イメージ

responsive-web-typography-with-flowtype-index

ダウンロード

ライブラリのダウンロードはこちらから行うことが出来ます。

Step 1: ライブラリの読込み

『FlowType』は「jQuery」対応のライブラリなので最初に「jQuery」が読込まれていることが必要条件になります。「jQuery」に続けて「flowtype.js」を読み込みます。

  <script type="text/javascript" src="flowtype.js"></script>  

Step 2: CSSの初期設定

文字サイズの初期値を設定しておきます。この値を基準に、文字サイズが変化します。

body {
 font-size: 18px;
}
h1,h2,h3,h4,h5,h6,p {
 line-height: 1.45;
}
h1 { font-size: 4em; }
h2 { font-size: 3em; }
h3 { etc... 

Step 3: FlowType の実行

『FlowType』を反映する要素タグの前で、JavaScriptのスクリプトを実行します。

例では、本文すべてに対応させるので[body]となっています。

<script>
$('body').flowtype({
 minimum   : 500,
 maximum   : 1200,
 minFont   : 12,
 maxFont   : 40
}); 
</script>
オプション名 説明
minimum 要素幅の最小値。
maximum 要素幅の最大値。
要素幅の最大値から最小値の間で、変化するようになります。
minFont 文字サイズの最小値。
maxFont 文字サイズの最大値。

関連記事

【デザイン】無料でダウンロードができるベクター素材サイトまとめ

WEBサイトやデザイン制作において、ベクター素材は加工もし易くロゴやアイコンいろんな場面で活躍します。そんなベクター素材が無料でダウンロードできるサイトをまとめてみました。 Vector Stock ユーザー登録が必要ですが、有料から無料のロイヤリティーフリーの素材が...続きを読む

2015.02.14インスピレーション

【JavaScript】jQuery画像スライダーのライブラリまとめ

WEBサイトのトップページなどでよく見る画像がスライダーする仕組み。jQueryライブラリと組み合わせで機能するスライダー用のライブラリをまとめてみました。 Easy Slider 左右の矢印、数字ボタンによるナビゲーションがあるシンプルな画像スライダーです。 ...続きを読む

2015.02.10HTMLコーディング

はぴねす歯科様WEBサイトのデザイン提案

大阪にある歯科クリニックのはぴねす歯科様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。かわいらしいキャラクターのロゴにデザインを合わせて、親しみやすいかわいらしいデザインになるように心がけました。虫歯治療をはじめ、歯周病、予防歯科、矯正などイラストやイメージ...続きを読む

2019.04.17WEBデザイン歯科医院

魚時会館おさかな亭様WEBサイトの制作

藤枝市にある『魚時会館おさかな亭へ』様のWEBサイトの制作いたしました。魚時会館おさかな亭様は、藤枝駅より徒歩3分。昭和8年創業の老舗魚屋の目利きによる上質な海鮮料理、和食など静岡名物や料理を提供しおります。静岡県藤枝市で宴会・出前・法事・仕出し弁当のことなら魚時会館おさかな...続きを読む

2018.09.04WEBサイト制作

【フォト】吉田町川尻海岸『幸福呼ぶ鳥居~初日の出~』

静岡県吉田町にある川尻海岸では年始の期間限定で『幸福呼ぶ鳥居』がお目見えします。鳥居に朝日が昇る様子は幻想的です。初日の出の日は、多くの方々でにぎわっていました。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" col...続きを読む

2017.01.01フォトギャラリー