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


投稿日:2013年8月1日
  • 9
  • 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のデザインを更新

おすすめの記事

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

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

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

Windows 10でpsd形式のファイルをサムネイル表示する方法

Windows 10でpsd形式のファイルをサムネイル表示する方法

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

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

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

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

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

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


コメントを残す

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

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