CSS は複数の長さ単位をサポートします。これらは 2 つの主なカテゴリに分類できます: 絶対長単位 (表示デバイスとは独立した絶対寸法で長さを定義); 相対長単位 (ブラウザに認識されている他の単位に対する相対長を定義)。
絶対的な長さの測定は、インチ (in)、センチメートル (cm)、ミリメートル (mm)、ポイント (point、pt と表記)、文字高さ (pica、pc と表記) の 5 つの単位で測定できます。ポイントと文字の高さは活版印刷の単位として一般的に使用され、1pica=12pt となります。 CSS では、1pica を 1/72in、つまり 72pica=1in として定義します。これは、高品質プリンタで一般的に使用される Adobe の Postscript 言語で使用される定義でもあります。
CSS は、ピクセル単位の「絶対」長さもサポートしています。ピクセルは、コンピューターのディスプレイ上の点です。ただし、ピクセル密度とユーザーが選択したディスプレイ解像度の違いにより (同じディスプレイ画面で 640*480 の解像度または 1024*768 の解像度をサポートできます)、ピクセルの絶対サイズはディスプレイによって大きく異なります。 。したがって、ピクセル単位の長さは実際にはディスプレイに依存します。コンピューターの表示単位としてピクセルを使用する利点は、ピクセルが厳密に定義された単位であることです。ただし、ピクセル単位では、Web ドキュメントを印刷するときに問題が発生する可能性があります。
インチやセンチメートルなどの絶対的な長さの単位は、固定サイズの用紙上にドキュメントをレイアウトするために必要な絶対的な位置を提供するため、印刷レイアウトに非常に役立ちます。このため、電子表示ドキュメントでは絶対的な長さを使用すべきではありません。6 インチ x 4 インチの対角ディスプレイと 21 インチのディスプレイでは表示が異なり、ブラウザーが特定の長さで同じ長さを表示するという保証がないからです。固定ウィンドウ領域を使用してドキュメントを表示できます (ウィンドウのサイズはユーザーが選択できます)。このような違いを考慮すると、表示領域のサイズや文字のフォントサイズに合わせて自動的に調整される単位を使用することが適切です。幸いなことに、この動作を可能にする CSS の長さ単位が 3 つあります。
相対的な長さの測定には、em 単位、ex 単位、パーセントの 3 つの形式があります。 em 単位と ex 単位は、フォントのサイズに対する相対的な長さを定義します。 em 単位は、フォントの実際のポイント サイズに対する相対的な長さを定義します。つまり、現在のフォント サイズが 12pt の場合、1.5em = 18pt となります。対照的に、ex 単位は、フォントの x 高さを基準とした相対的な長さを定義します。つまり、現在のフォントの文字「x」の高さを基準とした長さを定義します。このように、特定のポイント サイズでの実際の x 高さはフォント ファミリごとに異なるため、ユニットの ex サイズはフォントのサイズとフォント ファミリ タイプの両方に依存します。
現在、em 単位は ex 単位よりも信頼性が高く、異なるブラウザ間での互換性を最大限に高めるには、em 単位を使用するのが最善です。ただし、em 単位と ex 単位の両方が印刷上の問題を引き起こす可能性があることに注意してください。
パーセント単位は 3 番目の相対単位です。この単位は、長さを相対的な長さのパーセンテージとして定義します。 CSS 仕様によれば、関連する長さは親ユニットのフォント サイズまたは親フォーマット ユニットの幅のいずれかであり、それぞれのケースは質問の特性によって異なります。非常に重要な注意点があります。既存のブラウザはセルの幅に対するパーセンテージ値を計算しないため、長さのパーセンテージが正しく実装されません。代わりに、すべてのブラウザはフォントに依存しない長さの割合をブラウザ ウィンドウ全体の幅の割合として計算します。
長さの値の形式は、符号 (「+」または「-」、デフォルトは「+」)、その後に数値、その後に単位識別子 (2 文字の省略形) で構成されます。長さの単位には、相対単位と絶対単位の 2 つの形式があります。スタイル シートは相対単位を使用して、ある媒体から別の媒体へ (コンピューターからレーザー プリンターへなど) スケールを制御しやすくします。パーセント単位とキー値 (「x-large」など) にも同じ利点があります。次のように：
H1 { margin: 0.5em } 要素のフォントの高さ
画面のグラフィック解像度に対するピクセル単位の
文字「x」の高さ
。出力デバイスのピクセル密度が標準のコンピューター画面と大幅に異なる場合、ユーザーはピクセル値を再スケールします。推奨ピクセル値は、リーダーから腕を伸ばした距離で 90dpi です。
子要素は、次
のように、相対値ではなく計算結果の値を継承します
。
フォントサイズ: 12pt;
テキストインデント: 3em;
}
H1 { font-size: 15pt }
上記の例では、「H1」の「text-indent」値は 45pt ではなく 36pt です。
==================================
em タグ -- 強調タグ
* em タグは、<em を使用してペアで表示されます。 > から始めます</em>
* プロパティ:
* Common -- 一般的なプロパティ
※emはエンファシスの略です