CSS - 測定単位
こんにちは、未来のウェブデザイナーさんたち！今日は、CSSの測定単位の世界に興味深く飛び込みましょう。近所の親切なコンピュータ教師として、ウェブデザインのこの重要な側面を案内します。では、仮想の定規を手に取り、CSSを測ってみましょう！
長さ単位
CSSでは、サイズを測定して定義する様々な方法があります。まるで異なる目的に合わせた定規が詰まった工具箱を持っているようなものです。まずは基本から始めましょう。
絶對長さ単位
これらは簡単なもので、あなたの定規のインチのようなものです。
| 単位 | 説明 |
|---|---|
| px | ピクセル |
| in | インチ |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント |
| pc | ピカ |
以下は簡単な例です：
.box {
width: 100px;
height: 2in;
margin: 10mm;
}このコードでは、幅が100ピクセル、高さが2インチ、マージンが全て10ミリメートルのボックスを作成しています。まるで小さな正確な箱を建てているようなものです！
CSS測定単位 - em単位
では、'em'単位について話しましょう。これは相対的な単位で、要素のフォントサイズに基づいています。周囲の環境に応じてサイズを変えるカメレオンのようなものです。
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* これは24pxになります */
padding: 2em; /* これは48pxになります */
}この例では、子要素のフォントサイズは親要素の1.5倍になり、パディングは自分自身のフォントサイズの2倍になります。ロシアのメロディアンのようなサイズのドールのようです！
CSS測定単位 - ch単位
'ch'単位は、'0'（ゼロ）文字の幅に基づいています。モノスペースフォントでのカラムレイアウトを作成するのに特に便利です。
.code-block {
width: 80ch;
font-family: monospace;
}これは80文字幅のコードブロックを作成します。80コラム端末時代を懐かしむ人に最適です！
CSS測定単位 - rem単位
'rem'は「ルートem」の略で、'em'に似ていますが、親要素ではなくルート要素（通常は
）に相対的な単位です。html {
font-size: 16px;
}
.box {
font-size: 1.5rem; /* 常に24px、親に関係なく */
padding: 2rem; /* 常に32px */
}これは、ドキュメント全体で一貫したサイズを保つのに非常に便利で、まるでウェブサイト全体のマスター設計図を持っているようなものです。
CSS測定単位 - lhおよびrlh単位
'lh'は要素の「行高」を意味し、'rlh'は「ルート行高」です。これらは新しい単位で、タイポグラフィの垂直リズムに最適です。
.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}これはパラグラフの下のマージンを正確に1行の高さに設定し、調和の取れた垂直リズムを作ります。まるでテキストのオーケストラを指揮しているようなものです！
CSS測定単位 - vh単位およびvw単位
'vh'と'vw'は respectively 「ビューポートの高さ」と「ビューポートの幅」を意味します。これらはビューポートのサイズに基づくパーセンテージ単位です。
.hero {
height: 100vh;
width: 100vw;
}これは常にデバイスの画面いっぱいに広がるヘッダーセクションを作成します。まるで常に完璧にフィットする応答型の看板のようです！
CSS測定単位 - vmin（ビューポートの最小値）およびvmax（ビューポートの最大値）単位
これらの単位は、ビューポートの小さいまたは大きな寸法のどちらか適切な方に基づいています。
.square {
width: 50vmin;
height: 50vmin;
}これは常にビューポートの小さい寸法の半分のサイズの完璧な四角形を作成します。まるで常に比例よく見える形状変化する四角形のようです！
CSS測定単位 - vb単位
'vb'は「ビューポートブロックサイズ」を意味します。'vh'に似ていますが、ドキュメントの書き込みモードを尊重します。
.sidebar {
width: 20vb;
}これは常にビューポートのブロック寸法の20%のサイドバーを作成します。異なる書き込み方向を持つ多言語サイトに非常に便利です。
CSS測定単位 - vi単位
'vi'は「ビューポートインラインサイズ」を意味します。'vw'に似ていますが、書き込みモードを尊重します。
.header {
height: 10vi;
}これは常にビューポートのインライン寸法の10%のヘッダーを作成します。異なる書き込み方向にスムーズに対応します。
例 - パーセンテージ
CSSでのパーセンテージは常に何かに対して相対的です。実際の例を見てみましょう：
.container {
width: 80%;
margin: 0 auto;
}
.child {
width: 50%;
padding: 5%;
}ここで、コンテナは親の幅の80%で、オートマージンで中央に配置されます。子要素はコンテナの幅の半分で、パディングはコンテナの幅の5%です。まるで見えない箱のロシアのメロディアンのようなものです！
例 - 数値
時々、CSSのプロパティには単位が不要です。いくつかの例を見てみましょう：
.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}ここで、opacityは0から1の値、line-heightはフォントサイズの倍数、z-indexはスタック順序のための単純な数値です。まるでボリュームノブ、テキストのスパーサー、レイヤーソーターが一つになったようなものです！
そして、それで、皆さん！私たちはCSS測定単位の世界を旅しました。熟悉的なピクセルから珍しいビューポート単位まで。適切な単位を選ぶことは、適切な道具を選ぶようなもので、あなたの生活を楽にし、デザインを強固にします。それでは、責任を持って測定しましょう！
Credits: Image by storyset