EMベースサイジングを用いた応答部位を設計する

Sep 12, 2025

操作方法

あなたはおそらくあなたがフォントサイズのために相対単位を使うべきであると聞いたことがあります。これはアクセス可能なWebデザインのための良いルールです。ユーザーがブラウザのデフォルトのフォントサイズを変更した場合、これにより、ページのテキストはそれに応じてサイズ変更できます。あなたはこのアドバイスをしてスイッチを作ったかもしれません。おそらくあなたはあなたの電卓を出て、あなたのサイトのフォントサイズを絶対から変換しました PX. EMSまたは可能性が高い、レムへの単位。

しかし、それがあなたが停止したところであれば、あなたはEMSがブラウザにもたらす柔軟性と力をたくさん欠けています。 EMユニットは単におなじみのための代替品ではありません PX. ;あなたは単なるより多くのプロパティのためにそれを使うことができます フォントサイズ 。あなたがするならば、他の利益のいくつかは出現し始めます。

EMSを一貫して使用することで、フォントサイズが変更された場合は自動的に応答するページ上のコンポーネントを設計できます。それから、応答的なフォントサイズのための巧妙なトリックで、ブラウザのビューポート幅に基づいて動的に調整するページ全体を作成できます。スケーラブルで応答性のデザインを作成するためのEMSの「相対的な」行動を活用する方法を説明しましょう。

フォントサイズ単位

フォントサイズのEMSを使用することは難しいことです。正確な値は、要素の継承されたフォントサイズ（すなわち、親要素のフォントサイズ）によって決まります。要素を深くネストし始めると、これは複雑になります。要素にEMSにフォントサイズがある場合、その親はEMSにフォントサイズがあり、その親はまだ別のものがあります。これらすべての値を掛けて、子要素の実際の計算値を決定する必要があります。

つまり、異なるコンテナに同じモジュールを配置すると、EMの意味が変わる可能性があります。モジュールは予測不可能です。

これを回避するために、通常、フォントサイズのための異なる相対単位を使用します。 rem（または 'root em'）は、継承されたフォントサイズにはありませんが、ページのルート要素のフォントサイズでは、 ＆lt; html＆gt; 。これは、その値がページ全体で同じであることを意味します。定期的なEMSよりも予測可能であることが多い。

EMSを使ってモジュールを構築する

相対単位を使用してモジュールを構築しましょう。しかし、私たちは共通のアプローチに従うつもりはありません。すべてのものに対してREMを使用する代わりに、それを一度だけ使用します。モジュールの最上位の要素について。これは、DOMの上にあるEM値の予測不可能なチェーンに基づいているのではなく、モジュールのフォントサイズを確立します。それは単一の値を上書きすることによってモジュールのサイズを簡単に拡張することができます。

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — 最も外側の要素でREMを使用して、既知のフォントサイズを確立し、その値に基づいて構築するためにEMSを使用してください。

この既知のフォントサイズを確立した後、モジュール全体に通常のEMSを使用するのは安全です。サブ要素のフォントサイズだけでなく、他のほとんどのプロパティにも使用してください。 パディング 、 マージン そして 境界半径 。

私たちは見出しと体を持つパネルを構築します。マークアップは次のようになります。

 divクラス= "パネル"＆gt。
  ＆lt; divクラス= "Panel-Heading"＆Gt。
    ＆lt; h3＆gt; EMS＆LT; H3＆GTの力を見なさい。
  ＆lt; / div＆gt;

アウターコンテナをスタイルしましょう。フォントサイズを設定します 1レム 地元のEM値を確立する。その後、定義します 境界半径 EMSを使用する。私は通常、境界線のためにPXを使うのが好きです。

 .panel {
  フォントサイズ：1REM;
  境界：1ピクセルのソリッド＃678;
  境界線：0.3em;
  オーバーフロー：非表示;

次に、内部の要素をスタイルします。私たちは埋め立てにEMSを使います。次に、見出しのフォントサイズを最長1.25倍のLOCAL EM値に増やし、20px計算サイズを生成します。

 .PANEL-HEADING {
  パディング：0.6em 1.2em;
  背景色：#cde;
  ボーダーボトム：1ピキスのソリッド＃678;
}
······························ H3 {
  フォントサイズ：1.25em;
  マージン：0;
  レター間隔：0.03em;
}
。パネルボディ{
  パディング：0.6em 1.2em;

パディング値にフォントサイズを掛けて、計算値（9.6px垂直、19.2px水平）を決定できます。しかし、それは関係ありません。ピクセルパーフェクト測定で締めさないようにしてください。これは厄介な気分になるかもしれませんが、を押します。あなたがEMSを使うほど、あなたは彼ら自身の尊敬のユニットとして彼らに精通するようになるでしょう。

デザインを動的にスケーリングします

このような再利用可能なモジュールを作成するとき、私たちはしばしばいくつかのバリエーションが必要です。より大きなバージョンを作成したいと言ってください。すべてのものにPXを使用していた場合、これはフォントサイズ、パディング、境界線などを増やすことを意味します。ただし、1つのREMベースのフォントサイズに関連してすべてを定義しているため、その値を変更するだけでなく、モジュール全体が応答します。

 .panel  -  Large {フォントサイズ：1.2rem;

このクラスをパネルに追加して大きくするためのパネルに追加します。 ＆lt; divクラス= "パネルパネル - 大"＆gt; 。これにより、その子要素のフォントサイズとともに、emのローカル定義、したがって境界半径とパディングが変化します。単一の宣言で、モジュールのあらゆる部分をサイズ変更しました。

A panel module, with paddings and border radius defined using ems — EMSを使用して定義されたパディングと境界半径を持つパネルモジュール

同様に、私達は小さなバージョンを作成することができました：

 .panel  - 小さい{フォントサイズ：0.8rem;

モジュールをアースすることによって、最上位のフォントサイズをREMSで使用して、安定して予測可能にしました。 EMSを使用して他のすべてを定義することで、そのすべてのコンポーネントパーツをスケーラブルにしました。

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — モジュール内のすべてのサイズを1つの値に基づいて、その値をすべて縮小するように変更することが可能です。

これは強力なパターンです。このアプローチは、ドロップダウンメニューからソーシャルメディアボタンまで、ページ上のものについてこの方法を使用できます。 REM値でモジュールを接地してから、パディングからアイコンサイズへの位置決めに他のすべてのものにEMを使用します。

それを反応させる

原則を1レベルにさらに押しましょう。 REMとEMSを使用してモジュール（およびそのページ上の他のすべてのモジュール）をサイズしました。これは最終的にそれらのサイズはルート要素のフォントサイズに基づいていることを意味します。次に、ページ全体が回答するようにこの単一の値を調整できます。

他の相対的な単位を持ってきましょう： v 。このユニットの計算値は、ユーザーの画面サイズから派生しています。ビューポートの幅の1％に等しいです。 VHユニットを使用してルートフォントサイズを定義すると、それは応答的に拡大縮小され、メディアクエリを照会します。ルートからフォントサイズを設定します 2VW ：

 HTML {
  フォントサイズ：2VW;

残念ながら、効果は少し強くなりすぎます。たとえば、iPhone 6では、これは5.5pxに計算されます。これは小さすぎます。同様に、それはより大きなスクリーンでは不当なことです。効果を和らげるために、私たちはCSSの利用をすることができます calc（） 関数：

 HTML {
  フォントサイズ：CALC（0.6EM + 1VW）;
}

これで、フォントサイズは部分的に安定した値から、そして部分的には応答的なものから導出されます。これははるかに良い効果をもたらします。 the 0.6EM 一種の最小フォントサイズとして振る舞います。これで、ルートEMは、スマートフォンで約13pxから平均デスクトップ画面で21pxに流動的にスケーリングされます。

あなたのページをスケーラブルなモジュールで構成されているので、それぞれREM値に接地されており、それらもビューポートで拡張されます。ページは3層階層で構造化されています。フォントサイズに簡単な編集を行うことで、ページ全体のサイズ、個々のモジュール、または単一の要素を変更できます。 EMSとREMを信頼し、ブラウザはあなたのための仕事の世話をします。

それでも、折り返しの包装やその他の応答的な懸念を制御するために時折メディアクエリを追加する必要があります。しかし、EMSとREMを使用する習慣と組み合わされたこの小さなコードはあなたにそこに多くの道を得るでしょう。

この記事はもともと紹介されました ネットマガジン 問題288; ここで購入してください

関連記事：

10のデザイナーを知っておくべき10のタイポグラフィのトリック
タイポグラフィとフォントへのデザイナーのガイド
マスターアクセス可能なWebタイポグラフィ

EMベースサイジングを用いた応答部位を設計する

フォントサイズ単位

EMSを使ってモジュールを構築する

デザインを動的にスケーリングします

それを反応させる

操作方法 - 最も人気のある記事

デザインの絞り込みのポートフォリオ

アクセス可能なWebフォームを作成する方法

ZbrushとMayaで3D人をモデル化することを学ぶ

ナイフツールをマスター

あなたのデジタルアートに絵画のような感触を作成する

あなたのスケッチスキルを磨く

figmaを持つ応答ダッシュボードを作成する

あなたの手描きイラスト技術を洗練するための上のヒント

カテゴリ