cssでfont-sizeを指定する際のpx、em、%の変換表


投稿日:2013年8月1日
  • 8
  • 0


変換表で記述方法をサクッと統一

font_size

複数の人間でcssファイルを編集すると「フォントサイズの記述方法がバラバラに…」なんてことはよくあります。中には小数点第3位まで指定する猛者まで…。

気がついた時に統一しますが「統一の仕方も統一してない」となるとトンチみたいな話になります。


フォントサイズの変換表

そこで自分用メモとして「Pixels」「EM」「Percent」の変換表を作りました。

Pixels EM Percent
8px 0.47em 47%
9px 0.59em 59%
10px 0.63em 63%
11px 0.68em 68%
12px 0.73em 73%
13px 0.81em 81%
14px 0.87em 87%
15px 0.93em 93%
16px 1.00em 100%
17px 1.06em 106%
18px 1.12em 112%
19px 1.18em 118%
20px 1.22em 122%
21px 1.31em 131%
22px 1.37em 137%
23px 1.43em 143%
24px 1.47em 147%
25px 1.56em 156%
26px 1.62em 162%
27px 1.68em 168%
28px 1.75em 175%
29px 1.81em 181%
30px 1.87em 187%
31px 1.93em 193%
32px 2.00em 200%

現在のページを共有する



現在のページに関連する記事

cssでfont-sizeを指定する際のpx、em、%の変換表 SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法
WordPressにSyntaxHighlighterを導入しよう WordPressにSyntaxHighlighterを導入しよう
cssでfont-sizeを指定する際のpx、em、%の変換表 これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方
size.inc.phpのバージョンアップ size.inc.phpのバージョンアップ
PukiWikiで表組みデザイン PukiWikiで表組みデザイン
WordPressの整形済みテキストがはみ出す WordPressの整形済みテキストがはみ出す
WordPressのデザインを更新 WordPressのデザインを更新

おすすめの記事

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wix 

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wi…

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

FuckAdBlockを利用して自由自在にAdblock対策をする方法

FuckAdBlockを利用して自由自在にAdblock対策をする方法

Windows 10を32bit版から64bit版に変更する方法

Windows 10を32bit版から64bit版に変更する方法

Question2AnswerへreCAPTCHAを導入する方法

Question2AnswerへreCAPTCHAを導入する方法

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮影する方法

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮…

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

初めてでも理解できるようになる「Google Chrome機能拡張の開発」


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。