【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サイトの集客・収益効果を高めるために、トラフィック(アクセス)を増やすことは重要な課題といえます。 一般的にトラフィック(アクセス)を増やすためには有料広告が確実に効果がある方法ですが、立ち上げたばかりのサイトや予算をかけることが出来ない場合は、お金をかけ...続きを読む

2015.02.14SEO

MakeShop(メイクショップ)の販売代理店となりました

デザインスタジオ・エフではこのたび、GMOグループのMakeShop(メイクショップ)の販売代理店となりました。 月額無料から利用できるショッピングカート。MakeShopは、ネットショップの開店から運用までの一連の作業を効率化し、ネットショップオーナーをサポートします。 ...続きを読む

2015.03.24

モバイル時代のモバイルフレンドリーによるSEO対策

日本国内のスマートフォン保有率は50%にのぼり、20代になると80%にもなります。消費者のパソコンからスマートフォンへのインターネット活用が大きく変わり、ウェブサイトへのアクセス方法もパソコンからスマートフォンへ移りつつあります。 まだ業種によって差はありますが飲食店、美容...続きを読む

2015.03.16SEO

【WP】ユーザーの一覧、ユーザー別に最新記事を表示する方法

キュレーションサイトなど最近では複数のライターによって運営される情報サイトをよく見ることができます。そのようなサイトにおいて、ユーザーの一覧を表示する、さらには1ページ内にユーザー事に最新記事を表示するといったページがほしいときがあります。 今回は、WordPressでユー...続きを読む

2016.07.14WordPress

【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することが...続きを読む

2019.05.13HTMLコーディング