CSSの長さのユニットを見る

CSS長さユニットの詳細な説明：絶対から相対的なものから、[ポートに関連する]

正確な測定は、Webデザインの重要な部分です。 CSSに少なくとも10種類の長さのユニットが存在するだけで、これを説明するのに十分です。各ユニットには独自の特定の目的があり、Webページがさまざまなデバイスにより適応することができます。これらのユニットをマスターしたら、要素サイズをより正確に調整できます。このチュートリアルでは、CSSで利用可能なさまざまなユニットを検討し、どのユニットが使用されているか、およびそれらの使用方法について説明します。

キーポイント

• CSSには、各ユニットが特定の目的を持つさまざまな長さのユニットを提供し、Webページが異なるデバイスにより適応することができます。これらのユニットは、絶対長さユニット、相対長さユニット、およびビューポート相対長さユニットにほぼ分割できます。
• 絶対長さ単位（ピクセル、インチ、ミリメートル、センチメートルなど）は物理的測定を表し、画面のサイズや解像度の影響を受けません。ただし、デジタルデバイスや解像度が不明な状況には適していない場合があります。
• 相対長さユニット（EM、REM、およびViewPortユニットを含む）は、他の事前定義された値または特性に基づいて値を調整し、応答性のあるレイアウトを作成するのに理想的です。それらは、使用されるフォント、または画面のウィンドウの高さと幅に関連することができます。
• ビューポートの相対長さは、ビューポートの高さと幅に基づいています。これらのユニット（VH（ビューポートの高さ）、VW（ビューポート幅）、VMIN（ビューポート最小）、およびVMAX（ビューポート最大）を含む）を使用して、ブラウザウィンドウのサイズに基づいて要素をスケーリングできます。

絶対長さ

絶対単位は、実際の物理測定の数値表現です。これらのユニットは、画面サイズまたはその解像度とは何の関係もありません。したがって、絶対長さユニットは、デジタルデバイスでの使用や解像度が不明な場合には適していません。これらのユニットは、印刷などの物理的なメディアに設計する際に、より適しています。

絶対ユニットには以下が含まれます

cm（cm）
mm（mm）
• （インチ）
in
pc（カード予約）
pt（lb）
px（pixel）

仕様の編集ドラフトには、4分の1ミリメートル（Q）ユニットも含まれていますが、これはブラウザをサポートしていない新しいユニットです。

絶対長さを使用する場合、同じユニットの同じ値が異なる画面に異なるディスプレイ効果があることに気付くかもしれません。これは、画面のDPI（インチあたりのドット）が異なるためです。高解像度の画面は低解像度の画面よりもDPIが高いため、画像やテキストは小さく見えます。

すべての絶対ユニットの最も広く使用されているピクセルは、ピクセル（PX）です。ピクセルはしばしば画面上の単一ポイントとして理解されますが、技術的にはそれよりも複雑です。測定の最小単位であり、通常、他のユニットのベンチマークとして使用されます。

他のユニット（インチ、ミリメートル、センチメートルなど）は、これらのユニットの物理サイズを表しています。ポンド（PT）ユニットは1/72インチを表し、カード（PC）ユニットは1/6インチを表します。 6つの一般的な絶対ユニットを使用するいくつかのCSSコードは次のとおりです。

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

codepen demo

相対長ユニット

名前が示すように、相対ユニットに固定値はありません。それらの値は、他のいくつかの事前定義された値またはプロパティに関連しています。相対ユニットにより、幅、高さ、フォントサイズなどを他のベンチマークパラメーターに関連付けることができるため、要素サイズを簡単に簡単に調整できます。

レスポンシブレイアウトを作成する場合、これらのユニットは通常推奨され、デジタルメディアにより適しています。それらの値は、使用しているフォント、または画面のウィンドウの高さと幅に関連する場合があります。

相対単位には以下が含まれます

ex（x height）

• ch（文字）
• em（emを印刷したが、同じではない）
• rem（root em）
これらのユニットをもっと詳しく見てみましょう。

x高さ（ex）および文字（ch）ユニット

EXユニットが開発に使用されることはめったにありません。 1exは、使用されるフォントの小文字「x」のサイズに等しくなります。ほとんどの場合、1 exの値は0.5EMにほぼ等しくなります。ただし、これはフォントによって異なります。このユニットは、EMの垂直等価単位と見なすことができます。

文字（CH）ユニットは「0」文字に関連しています。 1CHは、フォント内の「0」文字の進歩尺度です。

p {
  font-size: 2ex;
}

em unit

p {
  margin: 2ch;
}

ユニットの値は、ベース要素または親要素のフォントサイズに等しくなります。たとえば、親要素のフォントサイズが20pxの場合、すべての直接の子供に対して1EMの値は20pxとして計算されます。子要素のフォントサイズは、ベースユニットに応じて簡単に増加または減少させることができます。数字は整数である必要はありません。

EMを使用すると、さまざまな要素のフォントサイズを固定スケールで簡単に保持できます。たとえば、親要素のフォントサイズの値が50pxの場合、子要素のフォントサイズを2EMに設定すると、100pxに設定するのと同じです。同様に、0.5EMに設定すると、子要素のフォントサイズが25pxになります。

次のデモンストレーションは、EMユニットの仕組みの簡単な例を示しています。

codepen demo

ただし、ネストされた要素の場合、EMユニットが望ましくない結果を生成する場合があります。これは、EM値が親によって直接マークされた値を取るため、ネストされた各子供要素は同じEM値を持つためですが、計算値は常にその直接の親に関連しているため、計算値は異なります。したがって、現在の要素の値を、非方向の親要素または非ルート親要素に対する親要素の割合に設定する必要がある場合、それは困難になります。

以下は、EMユニットの例外のネスティング効果を示すデモンストレーションです。この例では、ドキュメントのベンチマークフォントサイズは16pxであると想定しています（これは通常デフォルトです）

codepen demo

HTMLのネストされた要素に注意してください。各要素のコンテンツは、計算されたフォントサイズを宣言します。

次の例は、この例のCSSです

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

すべてのdiv要素は1.15emとして定義されているにもかかわらず、実際のフォントサイズがネストされているため異なることがわかります。

rem unit

これは、REMユニットが役立つ場所です。 REMの値は、常にルート要素のフォントサイズ（HTMLドキュメントのHTML要素）に等しくなります。 REMデモは、EMユニットのデモと似ています。これがCSSです：

p {
  font-size: 2ex;
}

これは、以前のデモと同じネストを持つシンプルなデモですが、今回はREMを使用しています。

codepen demo

ネストは今でも存在しているが、ネストされた要素の計算されたフォントサイズに影響しないことに注意してください。

ViewPort相対長さユニット

ビューポートの相対長さは、ビューポートの高さと幅に基づいています。ウィンドウまたはビューポートは、画面に表示される領域またはフレームスペースです。

ビューポート相対ユニットには以下が含まれます

vh（viewport height）

• vw（viewport width）
• vmin（表示最小値を表示）
• vmax（表示最大値を表示）
ビューポートの高さ（VH）とビューポート幅（VW）

VHユニットは、ビューポートと非常に相関しています。 VHの値は、ビューポートの高さの1/100に等しくなります。このユニットは、ブラウザウィンドウの高さに基づいて要素をスケーリングする場合に役立ちます。たとえば、ビューポートの高さが400pxの場合、1VHは4pxに等しくなります。ビューポートの高さが800pxの場合、1VHは8pxに等しくなります。

VHがウィンドウの高さに関連しているように、VWユニットはビューポートと非常に相関しています。したがって、1VWの値も同様に導出できます。これは、1VWがビューポート幅の1/100に等しいことを意味します。たとえば、ウィンドウの幅が1200pxの場合、1VWは12pxです。 ViewPortユニットを使用して、要素の幅、高さ、cssを次のように設定します。

codepen demo

p {
  margin: 2ch;
}

ビューポート最小（VMIN）およびビューポートの最大（VMAX）ユニット

VMINユニットは、値が低いビューポートエッジに関連付けられているため、高さまたは幅になる可能性があります。 1Vminの値は、長さの最短エッジの1/100に等しくなります。たとえば、ビューポートサイズが500 x 700の場合、1Vminの値は5pxに等しくなります。サイズが1000 x 700の場合、値は7pxです。

対照的に、VMAXはビューポートの最大値を考慮しています。スケール係数はまだ1/100であるため、1VMAXは1/100のエッジの1/100に相当します。上記と同じ例を使用して、ビューポートサイズが500 x 700の場合、1VMAXの値は7pxに等しくなります。サイズが1000 x 700の場合、値は10pxです。 VMINとVMAXを使用して幅と高さを設定するCSSは次のとおりです。

codepen demo

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

ブラウザサポート

em、ex、px、cm、mm、in、ptおよびpc すべてのブラウザは、古いIEを含むそれをサポートしています。

ch Firefox、Chrome 27、IE 9、Safari 7、およびOpera 20。

rem IE9を含む使用中のすべてのブラウザ。さらにサポートが必要な場合は、ポリフィルがあります。

vw、vh、vmin Chrome 20、IE 9、Firefox 19、Safari 6、およびOpera 20。覚えておく価値のあることの1つは、Internet Explorerでは、VMINが非標準VM構文を通じてサポートされていることです。 PolyFillの場合、vMinPolyを試すか、-Prefix -Freeとプラグインを使用できます。

vmax Chrome 20、Firefox 19、およびOpera 20、およびSafari 6.1。 IEはそれをサポートしていません。このポリフィルを試して、ハッキーなサポートを取得し、さまざまなモバイルブラウザーのバグを支援できます。

結論

このチュートリアルでは、レスポンシブレイアウトとクロスデバイス測定を促進する多くのユニットを含む、CSSで利用可能なさまざまな長さユニットを簡単に紹介します。どのプロジェクトでREMまたはViewPortユニットを使用しましたか？あなたの経験はどうですか？コメントセクションでこれらのユニットを使用する際に遭遇するヒントや遭遇する問題を共有してください。

CSS長さユニットFAQ

CSS長さの異なるタイプは何ですか？

CSS長さユニットは、Webページ上のさまざまな要素のサイズを指定するために使用されます。 CSSには、絶対ユニットと相対ユニットの2種類の長さユニットがあります。絶対ユニットは固定されており、ページの他のプロパティに基づいてサイズは変更されません。ピクセル（PX）、ポンド（PT）、PICAS（PC）、インチ（インチ）、センチメートル（CM）、およびミリメートル（mm）が含まれます。一方、相対単位は別の長さの値に関連しています。それらには、em、ex、ch、rem、vw、vh、vmin、vmax、およびパーセンテージ（％）が含まれます。

私のプロジェクトに適切なCSS長ユニットを選択する方法は？

CSS長ユニットの選択は、プロジェクトの特定の要件に依存します。画面サイズやフォントサイズに関係なく変更されない固定サイズが必要な場合は、絶対ユニットを使用する必要があります。ただし、デザインを応答し、さまざまな画面サイズまたはフォントサイズに適応させる場合は、相対ユニットを使用する必要があります。

CSSの「EM」ユニットと「REM」ユニットの違いは何ですか？

"em"と "rem"は、CSSの相対単位です。最も近い親要素に対する「EM」ユニットのフォントサイズ。一方、「REM」は、親要素ではなく、ルート要素（HTML）に対して「ルートEM」を表します。これは、「REM」がネスティングレベルに関係なく常に一貫していることを意味し、CSSの全体的なサイズを簡単に制御できます。

CSSの「VW」と「VH」ユニットはどのように機能しますか？

CSSの「VW」（ViewPort幅）と「VH」（ビューポートの高さ）の単位は、相対単位であり、それぞれビューポートの幅と高さの割合を表します。 「VW」の1つの単位は、ビューポート幅の1％に等しく、「VH」の1単位はビューポートの高さの1％に等しくなります。これらのユニットは、ビューポートのサイズに合ったレスポンシブなデザインを作成するのに特に役立ちます。

単一のプロジェクトでさまざまなCSS長ユニットを混ぜることはできますか？

はい、単一のプロジェクトで異なるCSS長ユニットを組み合わせることができます。ただし、これらのユニットがどのように機能し、どのように相互作用して、設計の一貫性と応答性を確保することが重要です。たとえば、境界線幅には「PX」、フォントサイズには「EM」、レイアウト幅に「VW」を使用して、異なる画面サイズにわたって適切にスケーリングするデザインを作成できます。

CSS相対ユニットを使用することの利点は何ですか？

CSSの相対ユニットは、特にレスポンシブデザインでいくつかの利点を提供します。これらにより、要素のサイズが互いに比較的スケーリング、ビューポートサイズ、またはユーザーのデフォルトのフォントサイズが可能になります。これにより、デザインにより柔軟性が高まり、さまざまな画面サイズとユーザーの好みに適応できます。

異なるCSS長ユニット間で変換する方法は？

異なるCSS長さユニット間の変換は、現在のフォントサイズ、ビューポートサイズ、画面のピクセル密度などのさまざまな要因に依存するため、複雑になる可能性があります。ただし、これらの変換に役立つオンラインツールと計算機がいくつかあります。

CSSのデフォルトのフォントサイズは何ですか？

ほとんどのブラウザのデフォルトのフォントサイズは16pxです。これは、1EMまたは1REMがデフォルトで16pxに等しいことを意味します。ただし、ユーザーはブラウザ設定でこのデフォルトのフォントサイズを変更できます。そのため、相対ユニットは一般にフォントサイズとして推奨されます。

ピクセル密度はCSS長ユニットにどのように影響しますか？

ピクセル密度とは、特定の画面の物理領域のピクセル数を指します。通常、1インチあたりのピクセル（PPI）で測定されます。ピクセル密度が高い画面では、同じ物理空間で詳細が表示されます。 CSSでは、ピクセル（PX）は画面上の物理的なピクセルではなく、画面のピクセル密度を考慮した物理的な測定単位である参照ピクセルです。これは、CSSの1pxの長さが、高密度画面上の複数の物理ピクセルに対応できることを意味します。

CSSの「CH」ユニットは何ですか？

CSSの「CH」ユニットは、現在のフォントの「0」（ゼロ）文字の幅を表す相対ユニットです。実際のフォントサイズに関係なく、特定の数の文字と整列する必要がある幅またはマージンを設定するのに役立ちます。

以上がCSSの長さのユニットを見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。