[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size
Post on:2017年1月31日
sponsorsr
フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。
CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるテクニックを紹介します。
フォント: たづがね角ゴシック（さっそく使ってみた）
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
Responsive Fonts -auto scaling the root font-size
最小値と最大値を定めたフォントサイズが増加するテクニック
この例では、フォントサイズはビューポート幅1rem（16px）〜48rem（768px）に設定されており、幅120rem（1920px）で上限値の2em（32px）になるよう増加します。これらは一つのCSSステートメントによって、すべてコントロールが可能です。
フォントサイズはすべて、em、remまたは%で定義します。
CSS
1 2 3 4 5 6 7 8 | /* 1em@48em(768px) から 2em@120em(1920px) に増加*/ @media(min-width:48rem){ :root{ font-size:calc(100%+((1vw-.48rem)*1.389)); /* .48rem = viewportWidthMinimum /100 */ /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } } |
これらの値を数式で見てみましょう。
- viewportWidthMinimum
- ビューポートの幅の最小値
- fontSizeDifference
- フォントサイズの差
- viewportWidthDifference
- ビューポートの幅の差
数式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | fontSizeCalc=100%+(1vw-48rem/100) fontSizeCalc=fontSizeCalc *100*fontSizeDifference/viewportWidthDifference fontSizeDifference=maxFontSize-minFontSize =2em-1em (or32px-16px) =1em (or16px) viewportWidthDifference=viewportMax-viewportMin =120em-48em (or1920px-768px) =72em (or1152px) Usingpixels: fontSizeCalc=100%+(1vw-768px/100)*100*16px/1152px =100%+(1vw-7.68px)*1.389 Usingemorrem: fontSizeCalc=100%+(1vw-48rem/100)*100*1em/72em =100%+(1vw-.48rem)*1.389 |
上記の設定ではフォントサイズは同じ割合で増加し続けます。そのため、下記のMedia Queriesを加えて上限値を指定します。
CSS
1 2 3 4 5 6 | /* 120rem(1920px)を超えたらフォントサイズの増加は停止 */ @media(min-width:120em){ :root{ font-size:2rem; } } |
この指定でうまくいくことをFirefox, Safari, Chrome for WinとOS Xで確認しました。IEでは少し調整が必要です。
emまたはremでサイズ指定したオブジェクトにも適用
このテクニックは、emまたはremでサイズ指定したオブジェクトにも適用できます。Flexboxでレイアウトされたデモページでご確認ください。
sponsors
Related Posts
Sponsors
Recnet Entry
- デザイナー目線で、デザインにおける写真の扱い方に着目したこれまでになかった新機軸のデザイン書 -デザインは写真が9割
- CSSでついにif elseの条件文が使える！ if()関数の便利な使い方を解説
- デザイナーはダウンロードしておこう！ TikTokからオフィシャルフォント「TikTok Sans」がオープンソースでリリース
- ユーザーのマウスやキーボードの動き（運動量や方向）から次にどの要素を操作するか予測するスクリプト -ForesightJS
- 2025年のプライムデーもいよいよセール最終日！ 見逃しがちな超目玉お買い得品を紹介します
- これは絶対見逃すな！ 値上げ前最後のアドビセールが開催、AmazonでCreative Cloud コンプリートプランが驚きの46％オフ
- Amazonで、2025年プライムデーのセールが開催！ 私が購入して本当によかったものを紹介します
- ビー・エヌ・エヌ社のKindleセールはかなり貴重！ 1年ぶりとなる夏のセールが開催、Web制作・デザイン・イラスト関連のKindle本がお買い得です
Pickup Entry
- 2025年用、日本語のフリーフォント767種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- 手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
- ピクセルフォント・ビットマップ・電卓数字の日本語フリーフォント 総まとめ
- おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
- 商用利用無料、国内のフリーイラスト素材の総まとめ
- 商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
- フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
- いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
- 背景素材に困った時に！ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
- 2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」
- 色々な色の名前、伝統色の名前が分かるサイトのまとめ
- VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
- 最近の実装に合わせたHTMLテンプレート
- 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
- 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
- CSS Flexbox の各プロパティの使い方を詳しく解説
- CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
- CSSの中央揃えで、最も万能で信頼できる実装テクニック
- 2025年、現在の環境に適したリセットCSSのまとめ
- 2024年版、CSSフレームワークのまとめ
- Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
- Font Awesome アイコンの使い方と便利な機能のまとめ
- Photoshopの新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
- Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
- 2025年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
- ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
- フォントやタイポグラフィの知識・テクニックを学ぶまとめ
- レスポンシブ対応のWordPressのテーマファイルのまとめ
- プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
- 写真がもっと楽しくなる！写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
- 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
- 黄金比をサイトのデザインに取り入れる簡単な３つの方法
- フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
- 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
- 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
Recommend
Category
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。