【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サイト制作

藤枝市青葉町にあるドックトリミングサロン「ぴんきぃまこ」様のWEBサイトを制作いたしました。ロゴに合わせてピンク色のベースに、大人っぽい可愛らしさを演出できるようにデザインをしました。お店からの最新情報をお届けできるように、CMSで構築し、お知らせやおすすめ商品、スタッフ...続きを読む

2018.06.01WEBサイト制作

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

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

2015.02.10HTMLコーディング

HTML5 + CSS3 レスポンシブサイト テンプレート『Minimaxing』

スマートフォンが普及して、WEBサイトをスマートフォンで閲覧することも多くなっています。従来のWEBサイトをスマートフォンに対応したいと検討される方もいらっしゃると思います。 今回、ご紹介するのはパソコン、タブレット、スマートフォンに対応したレスポンシブ型のWEBサイト...続きを読む

2015.02.06HTMLコーディング

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法

前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換(コンパイル)してCSSとして書き出してWEBサイトに組み込むことを...続きを読む

2019.05.16HTMLコーディング