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のデザインを更新

おすすめの記事

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法

PukiWikiで5段階評価を付けるプラグインを作成しました

PukiWikiで5段階評価を付けるプラグインを作成しました

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する…

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単…


コメントを残す

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

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