より良いサイトレイアウトを作成するために最適なCSSユニットを選択する方法

CSSユニットは、サイトレイアウトを作成する際に考慮すべき最も基本的な側面の1つです。 これらのユニットは、デザインがさまざまなデバイスでどのように相互作用するかを定義します。

しかし、CSSユニットに関しては、選択できるオプションが多数あり、すべてのオプションが同じではありません。 CSSユニットはフォントだけに限定されないため、フロントエンド開発者は、これらのユニットがレイアウトにどのように影響するかを理解する必要があります。

この記事では、さまざまなCSSユニットがどのように機能するかを示し、それらを使用してより良いレイアウトとサイトデザインを作成できるようにします。

CSSユニットの種類

CSSユニットは、次のカテゴリに分類できます。

• 絶対単位
• フォントの相対単位
• ビューポートの相対単位

絶対単位

一部のユニットは特定の絶対値に依存し、画面サイズやフォントの影響を受けません。 これらの単位の表示は、画面のDPI（dots per inch）に依存するため、画面の解像度によって異なる場合があります。

これらのユニットは次のとおりです。

• px（ピクセル）
• インチで）
• cm（センチメートル）
• mm（ミリメートル）
• pc（picas）
• pt（ポイント）

ピクセル

ピクセルは、最も一般的に使用され、受け入れられている単位です。 そして、それは他の多くのユニットの測定のベースと考えられています。 さまざまなデバイス間で最も一貫した結果を提供します。

次の例のbox要素の高さは150ピクセル、幅は150ピクセルで、すべての画面サイズで同じままです。

.box{
height:150px;
width:150px;
}

in（インチ）、cm（センチメートル）、mm（ミリメートル）などの他のすべての絶対単位は、実際のCSSのユースケースがほとんどない実際の測定単位です。

ただし、ピクセルとの関係を理解することは依然として良いので、次のように比較します。

• 1インチ=96px
• 1cm = 37.8px
• 1mm = 3.78px

pc（パイカ）とpt（ポイント）はインチに直接関係しています。

• 1インチ=72ポイント
• 1インチ=6個

すべての絶対単位間の関係は、次のように示すことができます。

レム

ピクセルを除いて、他のすべての絶対単位には画面CSSの使用例がほとんどないかまったくありませんが、実際の測定単位であるため、印刷CSSで効果的に使用できます。 （ピクセルについて疑問がある場合は、印刷CSSでも正常に機能します！）

フォントの相対単位

ドキュメントのフォントサイズやフォントファミリ、またはその親レベルの要素に依存する単位がいくつかあります。 これには、次のようなユニットが含まれます。

• em
• レム
• 元
• ch

エム

Emは相対的な長さの単位です。 親要素またはドキュメントのフォントサイズによって異なります。 デフォルトでは、 font-sizeが定義されていない場合、 16pxは1emに等しくなります。

Emは、直接の親のフォントサイズからサイズを継承します。 たとえば、親要素のfont-size:18pxの場合、 1emはそのすべての子の18pxとして測定されます。

ここに、3つの子を持つdiv .post 、 .post-item 、タイトルといくつかのテキストがあります。

<div class="post">
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
</div>

これで、親.postにはfont-size:20pxがあり、子要素.post divには独自のfont-size:1.2emがあり、 padding:0.75emとmargin:0.75emであるため、計算されたパディングとマージンは18px（20px）になります。 * 1.2em * 0.75em）。

html{
font-size:20px;
}

.post{
font-size:20px;
}

.post div{
font-size:1.2em;
}

.post-item{
background:pink;
padding:0.75em;
margin:0.75em;
}

.post-item h2{
font-size:1.5em;
margin:0.5em 0;
}

.post-item p{
margin:0;
font-size: 1em;
}

ご覧のとおり、子要素は親から値を継承しています。

emを使用する利点は、各要素のfont-size 、 padding 、およびmarginを比例して変更する場合、親要素のフォントサイズを変更するだけで、他のすべての要素がそれに応じて調整されることです。

これは、各要素を個別に調整する必要があるpxのような絶対単位には当てはまりません。

この継承の性質は、管理が少し難しい場合がありますが、ネストされた要素がemで独自のfont-sizeを持っている場合も同様です。

前のデモのように、子アイテムの1つでタイトルと段落を別のdiv内にラップすると、奇妙な結果が表示されます。

<div class="post-item">
<div>
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  	</div>
</div>

post-itemにはネストされたdivがあるため、ベースサイズは24pxから28.8px（20px * 1.2em * 1.2em）に変更され、 h2 font-sizeとmarginは43.2px（20px * 1.2em * 1.2em）に変更されます。 * 1.5em）と14.4px（20px * 1.2em * 1.2em * 0.5em）、それぞれ。

レム

Remは、親要素ではなくルート要素のフォントサイズを常に参照するため、このような状況で非常に役立ちます。

前の例を使用して、 .post divの単位をemからremに変更すると、すべての子要素が自動的に修正されることがわかります。

.post div{
  font-size:1.2rem;
}

単位がemからremに変更されると、そのベースは親divからroot要素（ front-size:20px ）に変更されます。

したがって、計算は20px * 1.2rem * valueになり、 h2とpはどちらも、親に関係なく、一貫したfont-sizeとmarginを持ちます。

元

Exは、現在のフォントのx-heightを基準にしており、ほとんど使用されません。 エックスハイトの測定値は一貫していません。 フォント自体に由来する場合もあれば、ブラウザがそれ自体を計算する場合もあります。

emやremと同様に、フォントによって異なりますが、主な違いは、 font-familyを変更するとexも変更されることです。これは、他の2つには当てはまりません。

.box{
width:150ex;
height:150ex;
}

Ch

Chはexに似ていますが、x-heightに依存しません。 むしろゼロ（0）文字の幅に。 また、 font-familyによっても変わります。

.box{
width:150ch;
height:150ch;
}

ビューポートの相対単位

次のように、ビューポートの高さと幅のサイズに依存するユニットがいくつかあります。

• vh（ビューポートの高さ）
• vw（ビューポート幅）
• vmin（ビューポートの最小値）
• vmax（ビューポートの最大値）

Vh

Vh（ビューポートの高さ）は、ビューポートの高さの1％に等しい1vhとして測定されます。 このユニットは、フルハイト要素を作成するのに非常に便利です。 Vhはパーセンテージと同様に反応しますが、親要素の高さに依存しません。

vhはどこでも使用できますが、vhの最も一般的な使用例は、フルハイト要素を作成することです。 この例では、 full-heightクラスはビューポートの100％の高さになる青いコンテナを作成します。

.full-height{
height:100vh;
background:blue;
}

Vw

Vw（ビューポートの幅）はvhに似ていますが、ビューポートの高さではなく幅を考慮します。 1vwは、ビューポート幅の1％に相当します。 これらのユニットは、タイポグラフィに基づいて応答性の高いビューポートを作成する場合に非常に役立ちます。

この例では、 h1のfont-sizはビューポート幅の6％であるため、ビューポート幅が1000pxの場合、フォントサイズは60pxになり、ビューポートが500pxの場合、フォントサイズは30pxになります。

h1{
font-size:6vw;
}

Vmin

Vminは、ビューポートの幅または高さのいずれか小さい方の最小値に基づいて計算されます。 ビューポートのサイズが高さ1000ピクセル、幅800ピクセルだとします。 1vminは8pxに等しくなります。

Vmax

Vmaxは、ビューポートの最大値が考慮されるvminとは正反対に計算されます。

高さ1000px、幅800pxの前のビューポートの例のように、 1vmaxは10pxに等しくなります。

それでは、 vminとvmaxを効果的に使用する方法を見ていきましょう。 前の例を使用して、固定値ではなく、ビューポートサイズに基づいて流動的なパディングとマージンを設定するとします。

このコードスニペットでは、パディングを3vmaxに、マージンを1.5vminに設定しました。

.post-item{
background pink;
padding:3vmax;
margin:1.5vmin;
}

パディングとマージンは、ビューポートのサイズに応じて変化します。

パーセンテージ（％）単位

Percentage（％）単位は、上記の特定のカテゴリに属していませんが、相対単位として分類できます。 親要素を基準にしています。

パーセンテージは主に要素の高さと幅に関連付けられていますが、CSSの長さの単位が許可されている場所であればどこでも使用できます。

パーセンテージは、応答性の高い、または流動的なレイアウトを作成するための最も有用な単位の1つです。 Bootstrap、foundation、Bulmaなどの一般的なフレームワークは、基本レイアウトにパーセンテージを使用します。

ここで、 full-widthクラスはその親要素の100％幅になります。

.full-width{
width: 100%;
}

結論

使用可能なほぼすべてのCSSユニットについて説明しました。 目標によっては、他の目標よりも適しているものもあります。 「フロントエンド開発者として、次のプロジェクトでどのオプションが必要になるかわからないため、オプションを知っておくのは常に良いことです。 」

では、目的の結果を得るために最も頻繁に使用するユニットはどれですか？ 下のコメント欄で教えてください！