CSS3 のエラスティックレイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用しており、「em」を使用することは一度もありませんでした。一番の理由は、私がそれについてあまり知らないからです。概念について少し知っているだけです。以前、プロジェクトで要素を設定する単位として「em」を使用する必要があったので、「em」について一から学びました。少し理解が深まったので、少年たちにとって少しでも役に立つことを願って、今日は特別にブログ記事をまとめて皆さんと共有したいと思います。

このチュートリアルでは、「em」を使用して基本的な柔軟なレイアウトを作成する方法を説明し、その計算方法を学習します。「em」を使用してレイヤーを弾力的に拡張するにはどうすればよいですか?テキストや画像などのコンテンツをどのように拡張しますか?今日の「em」の旅は、これらの質問から始めましょう。

エラスティックレイアウトとは何ですか?

ユーザーのテキストサイズと柔軟なレイアウト

ユーザーのブラウザによってレンダリングされるデフォルトのテキストサイズは「16 ピクセル」です。つまり、Web ページの「本文」のデフォルトのテキストサイズは、ユーザーのブラウザでは「16 ピクセル」です。もちろん、ユーザーが希望する場合は、フォントサイズの設定を変更できます。ユーザーは、UI コントロールを通じてブラウザーのデフォルトのフォントサイズを変更できます。

柔軟なデザインの重要な側面は、Web ページ上のすべての要素が「em」単位値を使用することです。「em」は相対的なサイズです。1em、0.5em、1.5em などに設定できます。また、「em」は「1.365em」のように小数点以下 3 桁まで指定することもできます。「相対的」という言葉は次のような意味を持ちます。

1. 相対計算には参照が必要なので、ここでの相対とは、要素の親要素に対するフォントサイズを指します。たとえば、<div> のフォントサイズを「16px」に設定した場合、この <div> の子孫要素は、子孫要素で明示的に再度設定しない限り、そのフォントサイズを継承します。この時点で、子要素のフォントサイズを「0.75em」に設定すると、そのフォントサイズは「0.75 X 16px = 12px」と計算されます。

2. ユーザーがブラウザの UI コントロールでテキストサイズを変更すると、ページ全体も拡大 (または縮小) されるため、ユーザーがブラウザのフォントを変更してもページ全体がクラッシュすることはありません (この現象は誰もが経験したことがあると思います。信じられない場合は、作成したプロジェクトで試してみてください。恐ろしいことがお分かりいただけると思います)。

柔軟なレイアウトの例を確認してください。このとき、ブラウザの UI コントロールを使用してテキストサイズを変更するか、直接「ctrl +」と「ctrl -」を使用すると、この弾性レイアウトの例では、ブラウザがフォントサイズを変更すると、ブラウザはそれに応じて拡大または縮小し、ページ全体のレイアウトには影響しないことがわかります。注: この例のすべての HTML と CSS は、このチュートリアル全体で使用されます。

柔軟なレイアウトの他の例については、Dan Cederholm の Simplebites を参照し、テキストサイズを変更して参照してください。

実際に体験してみると、エラスティックレイアウトページは「px」と同じくらい柔軟で正確だと感じますか？したがって、「font-size」、「px」、「em」の基本的な関係をマスターしていれば、CSS を使用して正確なレイアウトをすばやく作成できます。

CSSのElastigirlがEMを紹介

Elastigirl の「em」は非常に強力かつ柔軟で、フォントサイズが 12 ピクセルでも、16 ピクセルでも、60 ピクセルでも、その値を計算できます。

em は実際にはタイプセッティングのテストユニットであり、その起源については短い物語があります。皆さんは私の物語を聞きにここにいるわけではないので、この物語についてはお話ししません。ほとんどの人は CSS でそれについてもっと知りたいと思うと思います。

CSS では、「em」は実際には垂直方向の測定値です。 em は、任意のフォントの文字に必要な垂直方向のスペースに等しく、文字が占める水平方向のスペースとは関係ありません。つまり、

フォントサイズが 16 ピクセルの場合、1em = 16 ピクセルになります。

はじめる

CSS の「em」を理解する前に、ブラウザのデフォルトのフォントサイズを知る必要があります。先ほども述べたように、すべての最新ブラウザのデフォルトのフォントサイズは「16 ピクセル」です。したがって、ブラウザのデフォルト設定は次のようになります。

1em = 16ピクセル

したがって、CSS セレクターが記述されると、ブラウザのデフォルトのフォントサイズは「16px」になります。この時点で、Web ページの <body> は、CSS スタイルで <body> の "font-size" 値を明示的に設定して継承された値を変更しない限り、この "font-size:16px;" を継承します。このように、「1em = 16px」、「0.5em = 8px」、「10em = 160px」などとなります。また、「em」を使用して任意の要素のサイズを指定することもできます。

本文のフォントサイズを設定する

多くの先人たちは、長年の経験から得た経験から、子要素の計算を容易にするために、<body> 内のメインテキストに必要なフォントサイズを設定するか、(「0.625em または 62.5%」) に相当する「10px」に設定することを提案しています。どちらも望ましいです。しかし、<body> のデフォルトのフォントは「16px」であることは誰もが知っています。また、デフォルト値を変更する場合は、柔軟なレイアウトが壊れないように再計算して再調整する必要があることも知っています。したがって、完璧なセットアップは次のようになります。

本文 {font-size:1em;}

しかし、愛されていない IE では、「em」は問題を抱えることになります。フォントサイズを調整すると、弾性レイアウトも壊れますが、幸いなことに、解決方法があります。

html {フォントサイズ: 100%;}

数式変換 - PXtoEM

柔軟なレイアウトを初めて作成する場合は、最初に多くの計算を行う必要があるため、近くで計算機を用意しておくと安心です。

ピクセルは私たちにとってあまりにも身近すぎるので、私たちもそこから始めます。まず、1px と em の比率を計算し、次に必要な px 値を知る必要があります。前回の紹介から、1em は常に親要素のフォントサイズに等しいことがわかっているので、次の式で計算できます。

1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em値

以下の変換表を参考にしてください（本文フォントが16pxの場合の値）

次に、「CSS EMを使用して960px幅のエラスティックレイアウトを作成する」という非常に簡単な例を見てみましょう。

<本文>
<div id="コンテナ"> …</div>
</本文>

960pxをemに変換する

1 ÷ 16ピクセル × 960ピクセル = 60em

この計算値の前提条件は、<body> の "font-size:16px" です。

html {フォントサイズ: 100%;}
体 {
フォントサイズ: 1em;
}
＃容器 {
幅: 60em;
}

上記の例を通して、参考になる例があるので、皆さんがより鮮明に理解できると思います。実際、上記の計算式を変換して、計算をより便利にすることができます。

変換するピクセル値 ÷ 親要素のフォントサイズ = em値

上記の例の「960px」は、次のように「em」値に変換できます。

960ピクセル÷16ピクセル=60em

上記では、「px」を「em」に変換する計算方法を見てきました。次に、上記のエラスティックレイアウトの例を見てみましょう。これから段階的に実装していきます。

回復力のあるコンテナの構築

エラスティックレイアウトの例のようなセンタリング効果を作成するには、まずHTML構造を作成する必要があります。<div>を作成し、「wrap」という名前を付けます。

<本文>
<div id="wrap"> ここにコンテンツ</div>
</本文>

このコンテナの幅を 740 ピクセルにして、800 ピクセル × 600 ピクセルのディスプレイのインスタンスに適したものにします。では、「740px」はいくつの「em」に相当するでしょうか?私たちが気にかけるべきことはこれです。一緒に見ていきましょう。

1. 「740px」を「em」に変換し、コンテナ「div#wrap」に設定します。「div#wrap」の親要素 <body> がフォントを「16px」に設定することは周知の事実です。この時点で、他の表示設定が行われていない場合、その子要素 <div id="wrap"> は「font-size」値を継承するため、「1px と 1em の関係」を簡単に得ることができます。

1em = 16px、つまり、1px = 1 ÷ 16 = 0.0625em

この方法では、「740px」は簡単に「em」に変換できます。

0.0625em × 740 = 46.25em

もちろん、上記の計算式に従って変換することもできます。そうすれば、より良い概念を念頭に置くことができ、間違いを起こしにくくなります。

1 ÷ 16 × 740 = 46.25em (1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em値)

この方法では、上記の式を使用して、必要な幅または高さの「em」値を計算できます。必要なのは、「1px は em の数に等しい」ことと、変換する「px」値だけです。これらのパラメーターを使用して、必要な「em」値を取得できます。

2. CSS スタイルを作成する: これで、「div#wrap」のスタイルを記述できます。伸縮性のあるレイアウトサンプルでは、「div#wrap」の幅を「740px」に設定して中央に配置し、上下の「余白」を「24px」、境界線効果を「1px」に設定することが明確に示されています。したがって、まず上記の式に従って対応する「em 値」を計算し、それを CSS スタイルに記述します。

html {フォントサイズ: 100%;}
本文 {フォントサイズ: 1em;}
＃包む {
幅: 46.25em;/*740px ÷ 16 = 46.25em */
マージン: 1.5em auto;/*24px ÷ 16 = 1.5em*/
境界線: 0.0625em 実線 #ccc;/*1px ÷ 16 = 0.0625em*/
}

これで、コンテンツを含む柔軟なコンテナーを簡単に作成できます: 柔軟なレイアウトの例。

テキストスタイルとem

まず、先ほど作成した <div id="wrap"></div> に <h1> と <p> を挿入します。

<div id="wrap">
<h1>...</h1>
<p>...</p>
</div>

柔軟なレイアウトのサンプル例では、タイトルに「18px」を使用し、段落は「12px」フォントに設定され、行の高さは「18px」でした。 18px は柔軟なレイアウトを実現するために重要な値であり、これを使用して比例的に変更できます。 (タイトルと段落のタイポグラフィの紹介については、ご興味があれば、リチャード・ラターの基本的な行間と垂直リズム、および垂直方向の動きに関する章をクリックしてください)。

CSS 継承によれば、「div#wrap」のコンテンツコンテナーでフォントサイズを明示的に設定していないため、「div#wrap」全体が親要素「body」のフォントサイズ「16px」を継承します。

1. 段落スタイルを設定します: - 「12px」フォント、「18px」行の高さと余白の値

CSS 継承から、すべての段落が親要素「div#wrap」の「font-size:16px」を継承していることがわかります。同時に、前回の紹介から1px = 1 ÷ 16 = 0.0625emであることがわかっているので、「12px」が何emに相当するかは簡単にわかります。

0.0625em × 12 = 0.750em

したがって、段落 p のスタイルを設定できます。

p {フォントサイズ: 0.75em;/*0.0625em × 12 = 0.750em */

Richard Rutter の基本的な行間を満たすために段落に必要な行の高さと「余白」である「18px」を計算するには、次の操作を行う必要があります。

18 ÷ 12 = 1.5em

希望する行の高さの値「18px」を「font-size 12px」で割るだけで、段落「p」の「行の高さ」の値が得られます。この例では、行の高さはフォントの「1.5」倍に等しくなります。次に、段落「p」に「line-height」と「margin」スタイルを追加します。

p{
フォントサイズ: 0.75em;/*0.625em × 12 = 0.750em */
行の高さ: 1.5em;/*18px(行の高さ) ÷ 12(フォントサイズ) = 1.5em */
マージン: 1.5em;/*18px(マージン) ÷ 12(フォントサイズ) = 1.5em */
}

2. タイトルのフォントサイズを18pxに設定する

タイトル「h1」は段落「p」と同じです。また、親要素「div#wrap」の「font-size」である「16px」を継承しているので、同じ方法で「em」を計算できます。

0.0625em × 18 = 1.125em

結果の値をCSSスタイルシートに書き込むことができます。

h1 {
フォントサイズ: 1.125em;/*0.625em × 18 = 1.125em*/
}

また、Richard Rutter 氏が述べた垂直のリズムを維持するために、前述の方法を使用して、タイトル「h1」の「line-height」と「margin」も「18px」に設定しました。「em」の値を「1em」にするのは簡単です。

h1 {
フォントサイズ: 1.125em; /*0.625em × 18 = 1.125em*/
行の高さ: 1em; /*18px(行の高さ) ÷ 18px(フォントサイズ) = 1em */
margin: 1em; /*18px(マージン) ÷ 18px(フォントサイズ) = 1em */
}

画像サイズの設定 — em の使用

エラスティックレイアウトの例と同じ結果を得るには、HTML に画像を挿入する必要もあります。

<本文>
<div id="wrap">
	<h1>....</h1>
	<p><img src="90.png" alt="" /> Lorem...</p>
</div>
</本文>

画像の幅と高さは「90px」、右余白と下余白は「18px」で、左にフロートされています。写真にこのようなスタイル効果を実現する方法を見てみましょう。

HTML 構造から、画像が段落「p」の子要素であることは明らかです。前回の導入から、この段落「p」の「font-size」値が「12px」と定義されていることがわかっています。したがって、画像の属性値を計算するときは、「1px = 0.0625em」または「1em=16px」に従って計算することはできません。最も古い式を使用する必要があります。

1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em値

このように、上記の式に従って、画像のサイズを計算できます。

1 ÷ 12 × 90 = 7.5em

これで、計算された値をスタイルシートに書き込むことができます。

画像 {
width: 7.5em; /*1 ÷ 12 (親要素のフォントサイズ) × 90px (画像の幅) = 7.5em */
height: 7.5em; /*1 ÷ 12 (親要素のフォントサイズ) × 90px (画像の高さ) = 7.5em */
}

段落内では「18px」がまさに「1.5em」であることがわかっているので、これを画像スタイルでも使用します。

画像 {
width: 7.5em; /*1 ÷ 12 (親要素のフォントサイズ) × 90px (画像の幅) = 7.5em */
height: 7.5em; /*1 ÷ 12 (親要素のフォントサイズ) × 90px (画像の高さ) = 7.5em */
マージン: 0 1.5em 1.5em 0;
フロート: 左;
}

このようにして、エラスティックレイアウトの例と同様の効果を作成できます。この例が、「em」を使用して柔軟なレイアウトを作成する方法を理解するのに役立つことを願っています。もちろん、「em」を使用して柔軟なレイアウトを作成すると、「px」ほど正確ではないのではないかと心配する人もいるかもしれません。このチュートリアルを本当に理解すれば、そのような考えはなくなると思います。

弾性レイアウトの式の要約

最後に、皆さんも私と同じ考えを持っていると思います。つまり、関連するパラメータの「px」値を「em」値に正常かつ正しく変換する方法です。上記の研究の後、私は最終的に式をまとめました。

要素自体がフォントサイズを設定していない場合、要素の幅、高さ、行の高さ、余白、パディング、境界線などの値は次の式に従って変換されます。

1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em値

例を見てみましょう:

<本文>
<div id="wrapper">テスト</div>
</本文>

本文のデフォルトのフォントサイズは「16px」なので、「div#wrapper」の関連パラメータ値は次のとおりです。

#ラッパー{
幅: 200ピクセル;
高さ: 100px;
境界線: 5px 実線の赤;
マージン: 15px;
パディング: 10px;
行の高さ: 18px;
}

次に、上記の式に従ってパラメータを変換します。

#ラッパー{
幅: 12.5em;/*1 ÷ 16 × 200 = 12.5em の値*/
高さ: 6.25em;/*1 ÷ 16 × 100 = 6.25em の値*/
境界線: 0.3125em 赤;/*1 ÷ 16 × 5 = 0.3125em の値*/
マージン: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em 値*/
パディング: 0.625em;/*1 ÷ 16 × 10 = 0.625em の値*/
行の高さ: 1.125em;/*1 ÷ 16 × 18 = 1.125em の値*/
}

計算された値を見てみましょう:

次に、効果を確認する必要があります。これは非常に重要です。よく見てください。同じパラメータに基づいて、フォントサイズを 14px に設定する小さな要素を追加します。非常に簡単だと思われるかもしれません。前の式に従って計算して追加するだけです。次に、あなたが言ったことに従って計算して追加します。

#ラッパー{
フォントサイズ: 0.875em;/*1 ÷ 16 × 14 = 0.875em 値*/
幅: 12.5em;/*1 ÷ 16 × 200 = 12.5em の値*/
高さ: 6.25em;/*1 ÷ 16 × 100 = 6.25em の値*/
境界線: 0.3125em 赤;/*1 ÷ 16 × 5 = 0.3125em の値*/
マージン: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em 値*/
パディング: 0.625em;/*1 ÷ 16 × 10 = 0.625em の値*/
行の高さ: 1.125em;/*1 ÷ 16 × 18 = 1.125em の値*/
}

それではFirebugで計算されたレイアウト値を見てみましょう

問題をわかりやすく説明するために、Firebug でフォントサイズが設定されている要素と設定されていない要素の値を計算しました。

このスクリーンショットの主な目的は、問題を説明することです。要素自体のフォントサイズが設定されている場合、その計算式は上記と同じではなくなります。いくつかの変更を加える必要があります。

1. フォント計算式は同じまま
1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em値
2. 他の属性の計算式を変更する必要があります
1 ÷ 要素のフォントサイズ × 変換するピクセル値 = em 値では、計算してみましょう。

#ラッパー{
フォントサイズ: 0.875em;/*1 ÷ 16 × 14 = 0.875em 値*/
幅: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em の値*/
高さ: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em の値*/
境界線: 0.357em 赤;/*1 ÷ 14 × 5 = 0.357em の値*/
余白: 1.071em;/*1 ÷ 14 × 15 = 1.071em の値*/
パディング: 0.714em;/*1 ÷ 14 × 10 = 0.714em の値*/
行の高さ: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em の値*/
}

計算された値を見てみましょう:

要約する

長い前置きが終わりましたが、私が皆さんに伝えたいのは次の点だけです。

1. ブラウザのデフォルトのフォントサイズは16ピクセルです
2. 要素自体がフォントサイズを設定していない場合、「border、width、height、padding、margin、line-height」など、要素自体のすべての属性値は、次の式に従って計算できます。
1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em値
3. これをゆっくり理解する必要があります。そうでないと、2 番目のポイントと簡単に混同されてしまいます。要素にフォントサイズが設定されている場合、フォントサイズの変換は次の 2 番目の式に従って計算されます。
1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em 値。要素にフォントサイズがある場合は、要素のその他の属性 (「境界線、幅、高さ、パディング、余白、行の高さ」など) を次の式に従って計算する必要があります。
1 ÷ 要素自体のフォントサイズ × 変換するピクセル値 = em 値。このように理解できるかどうかわかりません。理解できない場合は、上記の例をもう一度確認してください。

CSSにおけるemとpxの紹介と変換方法

それは何ですか？

em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ピクセルです。したがって、調整されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625em になります。フォントサイズの変換を簡素化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値が 16px*62.5%=10px に変更され、12px=1.2em、10px=1em になります。つまり、元の px 値を 10 で割って、em を単位として使用するだけです。
em には次の特性があります。
1. em の値は固定されていません。
2. em は親要素のフォントサイズを継承します。

書き換え手順:

1. body セレクターで Font-size=62.5% を宣言します。
2. 元の px 値を 10 で割り、単位として em を使用します。
簡単ですよね？上記の2つの手順だけで問題が解決できるのであれば、誰もpxを使用しません。上記の 2 つの手順を実行すると、Web サイトのフォントが想像よりも大きくなることがわかります。 em の値は固定されておらず、親要素のサイズを継承するため、コンテンツ div のフォントサイズを 1.2em (12 px) に設定できます。次に、セレクター p のフォントサイズを 1.2em に設定しますが、p がコンテンツの子である場合、p のフォントサイズは 12px ではなく、1.2em = 1.2 * 12px = 14.4px になります。これは、コンテンツのフォントサイズが 1.2em に設定されているためです。この em 値は、親要素本体のサイズ (16px * 62.5% * 1.2 = 12px) を継承します。p は子であるため、em はコンテンツのフォントの高さ (12px) を継承します。したがって、1.2em の p は 12px ではなく 14.4px になります。
3. 拡大したフォントのem値を再計算します。フォントサイズの繰り返し宣言を避けてください。つまり、前述の 1.2 * 1.2 = 1.44 という現象を避けてください。たとえば、#content でフォントサイズを 1.2em と宣言した場合、p のフォントサイズを宣言するときには、この em はその em ではないため、1.2em ではなく 1em しか指定できません。#content のフォントの高さを継承し、1em=12px になります。

<<: CSS の高度な使い方（実戦で活用）

>>: HTML の基本概要推奨事項 (段落)