【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 文字サイズの最大値。

関連記事

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング

【無料】商用利用OKシームレステクスチャ「岩石(花崗岩風)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。花崗岩のような灰色の岩の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.07シームレステクスチャ

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

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

2015.03.16SEO

【WP】シンプルなショッピングカートを導入できるプラグイン「WP−OliveCart」

今回紹介するプラグイン「WP-OliveCart」は、WordPressでショッピングカートを追加することができるプラグインです。無料版と有料版の2つがあり、国産プラグインで、日本語に対応したプラグインになっております。無料版では「ショッピングカート機能」「商品管理機能」、有料版...続きを読む

2018.11.19WordPress

【WP】WordPressの本文抜粋・本文の一部を取得する

WordPressで投稿された記事の本文の一部「抜粋」を取得するために、テンプレートタグthe_excerpt()とget_the_excerpt()があります。the_excerpt()とget_the_excerpt()は、投稿時に抜粋欄へ入力があればその内容が表示され、抜粋...続きを読む

2018.12.04HTMLコーディングWordPress