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

公開: 2023-02-12

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

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

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

CSS ユニットの種類

CSS ユニットは、次のカテゴリに分けることができます。

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

絶対単位

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

これらの単位は次のとおりです。

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

ピクセル

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

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

[CSS]
。箱{
高さ:150px;
幅:150px;
}
[/css]

in (インチ)、cm (センチメートル)、mm (ミリメートル) などの他のすべての絶対単位は、現実世界の測定単位であり、実際の CSS のユースケースはほとんどありません。

ただし、ピクセルとの関係を理解することはまだ良いので、比較する方法は次のとおりです。

1 インチ = 96 ピクセル
1cm = 37.8px
1mm = 3.78px

pc (パイカ) と pt (ポイント) はインチに直接関連しています。

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

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

レム

ピクセルを除けば、他のすべての絶対単位は画面 CSS のユースケースがほとんどまたはまったくありませんが、実際の測定単位であるため、印刷 CSS で効果的に使用できます。 (ピクセルについて疑問がある場合は、印刷 CSS でも問題なく動作します!)

フォント相対単位

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

エム
レム
元
チャンネル

エム

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

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

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

[html]
<divクラス=”投稿”>
<divクラス=”ポストアイテム”>
<h2>タイトル</h2>
Lorem Ipsum は、印刷および植字業界の単なるダミーテキストです。 Lorem Ipsum は、1500 年代以来、業界標準のダミーテキストでした。
</div>
<divクラス=”ポストアイテム”>
<h2>タイトル</h2>
Lorem Ipsum は、印刷および植字業界の単なるダミーテキストです。 Lorem Ipsum は、1500 年代以来、業界標準のダミーテキストでした。
</div>
<divクラス=”ポストアイテム”>
<h2>タイトル</h2>
Lorem Ipsum は、印刷および植字業界の単なるダミーテキストです。 Lorem Ipsum は、1500 年代以来、業界標準のダミーテキストでした。
</div>
</div>
[/html]

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

[CSS]
html{
フォントサイズ:20px;
}

。役職{
フォントサイズ:20px;
}

.post div{
フォントサイズ:1.2em;
}

.post-item{
背景:ピンク;
パディング:0.75em;
マージン:0.75em;
}

.post-item h2{
フォントサイズ:1.5em;
マージン:0.5em 0;
}

.post-item p{
マージン:0;
フォントサイズ: 1em;
}
[/css]

大きなタイトルと小さな Lorem Ipsum フィラーテキストを含む 3 つの同一の CSS ユニット

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

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

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

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

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

[html]
<divクラス=”ポストアイテム”>
<div>
<h2>タイトル</h2>
Lorem Ipsum は、印刷および植字業界の単なるダミーテキストです。 Lorem Ipsum は、1500 年代以来、業界標準のダミーテキストでした。
</div>
</div>
[/html]

大きなタイトルと小さな Lorem Ipsum フィラーテキストを含む 3 つの CSS ユニット。中央のユニットの Lorem Ipsum は、上部と下部のユニットよりもわずかに大きくなっています。

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 に変更すると、すべての子要素が自動的に修正されることがわかります。

[CSS]
.post div{
font-size:1.2rem;
}
[/css]

単位が em から rem に変更されると、そのベースは親 div からルート要素に変更され、これはfront-size:20pxを持ちます。

したがって、計算は 20px*1.2rem*value となり、親に関係なく、 h2とpの両方でfont-sizeとmarginが一貫します。

元

Ex は現在のフォントの x-height に相対的であり、めったに使用されません。 X 高さの測定値は一貫していません。フォント自体に由来する場合もあれば、ブラウザが独自に計算する場合もあります。

em と rem のように、フォントに依存しますが、大きな違いは、他の 2 つの場合とは異なり、 font-familyを変更すると ex も変更されることです。

[CSS]
。箱{
幅:150ex;
高さ:150ex;
}
[/css]

チャンネル

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

[CSS]
。箱{
幅:150ch;
高さ:150ch;
}
[/css]

ビューポート相対単位

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

vh (ビューポートの高さ)
vw (ビューポート幅)
vmin (ビューポートの最小値)
vmax (ビューポートの最大値)

Vh

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

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

[CSS]
.フルハイト{
高さ:100vh;
背景:青;
}
[/css]

Vw

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

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

[CSS]
h1{
フォントサイズ:6vw;
}
[/css]

Vmin

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

Vmax

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

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

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

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

[CSS]
.post-item{
背景ピンク;
パディング:3vmax;
マージン:1.5vmin;
}
[/css]

6 CSS ユニット、左側の 3 つは長さが長く、高さが短い、右側の 3 つは高さが高く、長さが短い

ビューポートのサイズに応じて、パディングとマージンが変更されます。

パーセンテージ(%)単位

パーセンテージ (%) 単位は、上記の特定のカテゴリには属しませんが、相対的な単位として分類できます。親要素に相対的です。

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

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

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

[CSS]
.全角{
幅: 100%;
}
[/css]

結論

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

では、目的の結果を得るために最も頻繁に使用する単位はどれですか? 以下のコメントセクションでお知らせください！

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