CSSのREM：REMユニットの理解と使用

CSSのREMユニットの詳細な理解：優れたブラウザの互換性を備えた比較的大きなユニットと、それらを効果的に使用する方法を学びます。

キーポイント

1. REMユニットを理解する：ルート要素のフォントサイズと比較してCSS REMユニットを学習し、UIのフォントサイズと間隔の一貫した方法を提供します。
2. REMユニットとEMユニットを比較してください： CSSのREMユニットとEMユニットの違いは、EMユニットネスティングセックスに関連する複雑さを回避します。
3. 実用的なアプリケーションとアクセシビリティ：レスポンシブデザイン、スケーリングドキュメント、ネットワークアクセシビリティを確保し、ユーザーが好みに応じてフォントサイズを調整できるようにするREMユニットの実際の使用を発見します。

REMユニットとは何ですか？ CSSでは、REMは「ルートEM」の略です。これは、ルート要素のフォントサイズを表す測定単位です。これは、1REMがHTML要素のフォントサイズに等しく、ほとんどのブラウザではデフォルトは16pxであることを意味します。 REMを使用すると、UI全体のフォントサイズと間隔の一貫性を確保できます。

W3C仕様によると、REMユニットの定義は次のとおりです。

は、ルート要素上のフォントサイズの計算値に等しくなります。ルート要素のフォントサイズのプロパティで指定された場合、REMユニットはプロパティの初期値を指します。

remユニットとemユニット

REMユニットとEMユニットの違いは、ルート要素ではなく、独自の要素に対するEMユニットのフォントサイズです。したがって、それらはカスケードしており、予期しない結果につながる可能性があります。次の例を考えてみましょう。ルートフォントサイズがデフォルトの16pxである場合に備えて、リストのフォントサイズは12pxのフォントサイズであることを望みます。

別のリストにネストされたリストがある場合、内部リストのフォントサイズは親サイズの75％になります（この場合は9px）。次のようなものを使用することで、この問題を克服できます。

これは機能しますが、より深い営巣状況に非常に注意を払わなければなりません。

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

remユニットを使用すると、物事ははるかに簡単です：

<code>ul ul {font-size: 1em;}</code>

すべてのサイズはルートフォントサイズを指しているため、個別の宣言でネストケースを処理する必要はなくなりました。

フォントサイズのサイズのサイズにremユニットを使用します

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

REMユニットを使用してサイズを変更するフォントサイズの先駆者の1人は、2011年5月にREMを使用してサイズを変更するフォントサイズに関する記事を公開したJonathan Snookでした。他の多くのCSS開発者と同様に、彼は複雑なレイアウトでEMユニットによってもたらされる問題に直面しなければなりません。

当時、IEの古いバージョンにはまだ大きな市場シェアがあり、ピクセルサイズを使用してテキストをスケーリングできませんでした。ただし、先ほど見たように、ネスティングを無視し、EMユニットを使用して予期しない結果を得るのは簡単です。

フォントサイズのサイズにREMを使用することの主な問題は、これらの値が使用するのにそれほど便利ではないことです。もちろん、REMユニットで表される一般的なフォントサイズの例を見てみましょう。もちろん、ベースサイズが16pxであると仮定します。

10px = 0.625Rem
12px = 0.75rem
14px = 0.875Rem
16px = 1Rem（ベンチマーク）
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875Rem
32px = 2Rem

ご覧のとおり、これらの値は計算を行うのに便利ではありません。したがって、Snookは「62.5％」と呼ばれる手法を使用しています。これは、EMユニットで使用されているため、決して新しい発見ではありません。

snookの解決策は次のようになります：

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

remユニットはルート要素に対して相対的であるため、snookのソリューションは次のとおりです。

また、remをサポートしていない他のブラウザも考慮する必要があります。したがって、上記のコードは実際には次のように書かれています：

<code>ul ul {font-size: 1em;}</code>

このソリューションは「ゴールデンルール」のステータスに近いように見えますが、盲目的に使用しないことをお勧めする人もいます。ハリー・ロバーツは、REMユニットの使用に関する彼自身の意見を書きました。彼の意見では、62.5％のソリューションにより計算が容易になりますが（PXのフォントサイズはREM値の10倍であるため）、最終的に開発者はウェブサイトのすべてのフォントサイズを明示的に書き換えます。

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

3番目のビューは、CSS-TricksのChris Coyierから来ています。彼のソリューションでは、現在遭遇している3つのユニットすべてを使用しています。彼は、PXで定義されたルートサイズ、REMユニットで定義されたモジュール、およびEMユニットのモジュール内の要素を保持しています。このアプローチにより、モジュール内のタイプをスケーリングするグローバルサイズを簡単に操作できますが、モジュール自体のフォントサイズに基づいてモジュールの内容が拡張されます。 Louis Lazarisは後にこの概念を「CSSのEMユニットの力」で議論しました。

次の例では、クリスの方法がどのように見えるかを見ることができます。

[Codepenサンプルリンク-Codepenの埋め込みコードもここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません。 ]

実際には、Bootstrap 4やMaterial Design Guideのような主要なフレームワークは、REMユニットを使用してテキストコンテンツのサイズを変更します。

特に言及する必要があるのは、Reactコンポーネントの非常に人気のあるコレクションであるMaterial-UIです。彼らは同じようにテキストを変更するだけでなく、前述の「10px簡略化」を達成するためのメカニズムも提供します。

別の最近のプロジェクトであるすべてのレイアウトは、EMとREMユニットを非常に創造的な方法で組み合わせています。 Chris Coyierの前述のモデルの概要に最も近く、EMユニットを使用して、SVGアイコン、スパン、その他の類似要素などのインライン要素を強調しています。

ご覧のとおり、「万能」ソリューションはありません。可能な組み合わせは、開発者の想像力によってのみ制限されます。

メディアクエリブレークポイントでrems

を使用します

メディアクエリでのEMまたはREMユニットの使用は、「ベスト大統領」の概念と読書体験への影響と密接に関連しています。 Smashing Magazineは、「サイズは重要です：レスポンシブWebデザインのバランスの取れたラインの長さとフォントサイズ」というタイトルのWeb Tappettingに関する包括的な研究記事を公開しました。他の多くの興味深いことの中で、この記事は、45〜75〜85文字（スペースと句読点を含む）の最高の行の長さの推定値を示しています。65は「理想的な」目標値です。

1REM = 1文字の大まかな推定を使用して、モバイルファーストアプローチを使用して、単一の列コンテンツのテキストフローを制御できます。

ただし、メディアクエリでユニットとして使用される場合、REMおよびEMユニットには興味深い詳細があります。それらは常に1REM = 1EMの同じ値を保持します=ブラウザによって設定されたフォントサイズを保持します。この動作の理由は、メディアクエリの仕様で説明されています（強調表示）：

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

メディアクエリの相対ユニットは初期値に基づいています。つまり、ユニットは宣言された結果に基づいていません。たとえば、HTMLでは、フォントサイズの初期値に対するEMユニットは、ページ上の任意のスタイルではなく、ユーザーエージェントまたはユーザーの設定によって定義されます。

この動作の例を簡単に見てみましょう：

[Codepenサンプルリンク-Codepenの埋め込みコードもここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません。 ]

最初に、HTMLには、ビューポートの幅を書き込む要素があります。

次に、2つのメディアクエリがあります。1つはREMユニットを使用し、もう1つはEMユニットを使用しています（これはSASSを使用して簡単に使用します）：

<code>ul ul {font-size: 1em;}</code>

最後に、jQueryを使用してページにビューポート幅を表示し、ウィンドウサイズが変更されたときに値を更新します。

62.5％のトリックから始めて、変更されたルートフォントサイズがメディアクエリで使用されている値に影響を与えないことを示します。ブラウザウィンドウの幅を変更すると、最初のメディアクエリが320px（20×16px）から始まり、2番目のメディアクエリが480px（30×16px）から始まることがわかります。宣言したフォントサイズの変更は、ブレークポイントに影響を与えません。メディアクエリブレークポイント値を変更する唯一の方法は、ブラウザ設定のデフォルトのフォントサイズを変更することです。

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

したがって、メディアクエリブレークポイントでEMまたはREMユニットを使用することに実際には違いはありません。 Zurb Foundation（現在、執筆時点でv6.5.3）は、メディアクエリでEMユニットを使用しています。

<code>body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */</code>

アクセシビリティ追跡

ルートフォントサイズに基づいてスケーリングする機能により、REMユニットがアクセシビリティに非常に役立つことがわかりました。 Google開発者は、テキストのサイズ変更に相対ユニットを使用することをお勧めします。

インターネットアーカイブの背後にあるスタッフが実証的な調査を実施し、結果は、多数のユーザーがブラウザ設定のデフォルトのフォントサイズを変更することを示しました。 REMおよびその他の相対ユニットを使用することにより、ユーザーがWebをどのように閲覧するかについてのユーザーの決定を尊重できます。

remユニットを使用したドキュメントのスケーリング

REMユニットで見つけることができる3番目の使用は、スケーラブルなコンポーネントを構築することです。 REMユニットの幅、マージン、およびパディングを表すことにより、ルートフォントサイズと同期して成長または縮小するインターフェイスを作成できます。いくつかの例を使用して、このことがどのように機能するか見てみましょう。

[Codepenの例リンク1- Codepenの埋め込みコードをここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません。 ]

[Codepenの例リンク2- Codepenの埋め込みコードをここに挿入する必要がありますが、外部Webサイトにアクセスできないため、提供できません。 ]

結論

ここでCSS REMユニットとの出会いを終了します。応答性、スケーラビリティ、読書体験の改善、コンポーネント定義の柔軟性の向上など、これらのユニットをコードで使用することには多くの利点があることは明らかです。 REMユニットは普遍的な普遍的なソリューションではありませんが、慎重な展開により、開発者を何年も悩ませてきた多くの問題を解決できます。 REMの可能性を最大限に引き出すことは、私たち一人一人に依存します。編集者を立ち上げ、実験を実施し、結果を他の人と共有してください。

CSSサイズユニットの詳細については、

を参照してください

• CSSの長さの単位を理解
• 新しいCSS3相対フォントサイズユニット
• CSS
のEMユニットの電力

もちろん、REMだけが利用可能なCSSユニットだけではありません。 CSSサイズユニットの概要をご覧ください。

cssのremに関するfaq

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

CSSのREMユニットとEMユニットの主な違いは、サイズの基準点を計算することです。その最も近い親要素に対するEMユニットのフォントサイズ。要素をネストする場合、各レベルは親のサイズに応じて異なるフォントサイズを持つ可能性があり、その結果、複合サイズが生まれます。一方、REMは「ルートEM」を表しています。それはルート要素（HTML）にのみ相対的であり、ドキュメントのどこでも使用するのが一貫しています。これにより、REMユニットは大規模なCSSファイルでの予測と管理を容易にします。

CSSのピクセルをREMユニットに変換する方法は？

ピクセルをREMユニットに変換するには、ドキュメントのベースフォントサイズ（通常16px）（ほとんどのブラウザーのデフォルトサイズ）を知る必要があります。変換式は次のとおりです。ターゲットピクセル値/参照フォントサイズ= REM値。たとえば、24pxのフォントサイズが必要な場合、REMの同等の値は24px/16px = 1.5remです。

フォントサイズ以外のプロパティにREMユニットを使用できますか？

はい、REMユニットは、フォントサイズだけでなく、長さの値を必要とするCSS属性に使用できます。これには、幅、高さ、パディング、マージン、ライン高さなどのプロパティが含まれます。これらのプロパティにREMユニットを使用すると、異なる画面サイズにわたって比例間隔とレイアウトを維持できます。

すべてのブラウザはREMユニットをサポートしていますか？

はい、すべての最新のブラウザは、Chrome、Firefox、Safari、Edge、Internet Explorer 9以降など、REMユニットを広くサポートしています。ただし、REMユニットをサポートしていない古いブラウザの場合、ピクセルフォールバックを提供できます。

REMユニットを使用することは、どのようにしてレスポンシブデザインに有益ですか？

REMユニットは、レスポンシブデザインに非常に有益です。 REMはルート要素に関連するため、ルートフォントサイズを変更すると、REMで定義されたすべての要素をサイズ変更できます。これはメディアクエリで実行でき、さまざまな画面サイズに異なるフォントサイズを提供できるようになり、デザインが応答します。

REMユニットをアクセシビリティに使用することの影響は何ですか？

REMユニットを使用すると、Webサイトのアクセシビリティが大幅に向上する可能性があります。一部のユーザーは、読みやすくするためにブラウザのデフォルトのフォントサイズを調整する場合があります。 REMユニットはこのベンチマークフォントサイズに関連しているため、ウェブサイトのレイアウトと間隔がユーザーの好みに応じて調整し、ユーザーエクスペリエンス全体を改善できます。

REMユニットで定義されているスタイルをオーバーライドする方法は？

CSS特異性または重要なルールを使用して、REMユニットで定義されたスタイルをオーバーライドできます。ただし、これらの方法を慎重に使用し、代わりにカバレッジの必要性を最小限に抑える方法でCSSを構築することをお勧めします。

ピクセルやパーセンテージなどの他のユニットと組み合わせてREMユニットを使用できますか？

はい、REMユニットは、ピクセルやパーセンテージなどの他のユニットと組み合わせて使用​​できます。これにより、デザインの柔軟性が向上します。たとえば、境界幅にピクセルを使用し（テキストサイズでスケーリングする必要はありません）、fill（必要）にREMユニットを使用できます。

REMユニットのベースフォントサイズを設定する方法は？

REMユニットのベースフォントサイズは、ルート要素（HTML）のフォントサイズプロパティを使用して設定されています。たとえば、ベンチマークフォントサイズを10pxにする場合は、html {font-size：10px}を使用できます。すべてのREMユニットは、このサイズに関連します。

CSSでREMユニットを使用するためのベストプラクティスは何ですか？

CSSでREMユニットを使用するためのいくつかのベストプラクティスは、ルート要素に合理的なベースラインフォントサイズを設定しますさまざまなフォントサイズがアクセスしやすく、視覚的にバランスが取れていることを確認します。

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