【工数節約!】レスポンシブサイトにおける一番楽なフォントサイズ指定

  • このエントリーをはてなブックマークに追加

年々増えていく、フォントサイズを指定する単位。
「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。

今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。

決め手は「rem」と「vw」

CSSでまずは基準となるフォントサイズを決めます。下記のように設定します。


そして、個々のCSSを記述していく際、すべてのfont-sizeで「rem」単位を使用します。
PC版のみではなく、すべての端末に適用されるようにメディアクエリは外してください。

上記の見本だと、PC版では16pxが規準なので、h2は20px、pタグは16pxになります。

解説

remは、常にhtmlタグに設定されているfont-size基準として算出される性質があります。
その性質を利用して、Tab幅で、規準となるhtmlのfont-sizeを「vw」にしてしまえば、各タグのフォントサイズ比率を保ったまま、勝手にイイ感じのサイズになるCSSになります。
いろんな端末で確認しながらfont-sizeを定義し直す必要もなくなります。

この手法を使用すると、ウェブアクセシビリティ対応必須な場合でも、エラーが出ません。
文字サイズ変更機能があっても、htmlを分岐させるだけなので簡単!

あとは実際にTab幅とSP幅で見て、微調整を行うだけで、font-sizeの設定は完了すると思います。
意外と工数が多く発生しがちなfont-size調整がなくなり、レイアウト調整だけで済むとなると、コーディングの工数がぐっと抑えられると思います。

PC版htmlタグの基準は16pxの固定にするのがオススメですが、それ以外はご自身のサイトのデザインに合わせて数値を変更してください。
フォントサイズは小数点pxになってしまうと、ぼやける場合があるので、端数が出ないよう「rem」を記述してあげてください。(14.3pxなどはNG)

rem フォントサイズ早見表

px rem(htmlが16px) rem(htmlが14px)
10px 0.625rem 0.71428571428571rem
11px 0.6875rem 0.78571428571429rem
12px 0.75rem 0.85714285714286rem
13px 0.8125rem 0.92857142857143rem
14px 0.875rem 1rem
15px 0.9375rem 1.0714285714286rem
16px 1rem 1.1428571428571rem
17px 1.0625rem 1.2142857142857rem
18px 1.125rem 1.2857142857143rem
19px 1.1875rem 1.3571428571429rem
20px 1.25rem 1.4285714285714rem
21px 1.3125rem 1.5rem
22px 1.375rem 1.5714285714286rem
23px 1.4375rem 1.6428571428571rem
24px 1.5rem 1.7142857142857rem
25px 1.5625rem 1.7857142857143rem
26px 1.625rem 1.8571428571429rem
27px 1.6875rem 1.9285714285714rem
28px 1.75rem 2rem
29px 1.8125rem 2.0714285714286rem
30px 1.875rem 2.1428571428571rem

これ以外にも、「px」⇔「rem」の変換ツールが存在します。
px rem変換: https://hp-html.jp/px/

色々活用して、少ない工数でどんどんコーディング高速化を叶えましょう。


YoutubeChannelのご紹介

同様の内容を、動画でご覧になれます。

https://youtu.be/jgIkzEE6cis





執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。