CSS - 測定単位：初めての人向けのガイド
こんにちは、未来のCSS魔法使いさんたち！? 当신の魔法の旅にようこそ。近所の親切なコンピュータの先生として、このWebデザインの基本的部分を案内するのを楽しみにしています。コードを一行も書いたことがない人も心配しないでください。から始めて、一緒に知識を築いていきましょう！
長さ単位：CSS測定の基本
それでは基本から始めましょう。CSSでは、要素のサイズ、余白、パディングなどを指定するためにさまざまな単位を使用します。これらの単位はデジタル世界のルーラーやメジャータペットと考えてください。これらを使うことで、Tinyなスマートフォンから巨大なデスクトップモニターまで、すべてのデバイスで素晴らしく見えるウェブサイトを作成できます。
以下は最も一般的なCSSの長さ単位の表です：
| 単位 | 説明 | 例 |
|---|---|---|
| px | ピクセル | 16px |
| em | 要素のフォントサイズに相対 | 1.5em |
| rem | ルート要素のフォントサイズに相対 | 2rem |
| % | 百分比 | 50% |
| vw | ビューポートの幅 | 100vw |
| vh | ビューポートの高さ | 50vh |
これらの単位のそれぞれに詳しく入りましょう！
CSS測定単位 - em単位
' em '単位は変わり者です。1 emは現在の要素のフォントサイズに等しいです。これはスケーラブルなデザインを作成するのに非常に便利です。
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* これは24pxになります */
margin-bottom: 1em; /* これは24pxも同じです */
}この例では、.child要素のフォントサイズは24px（1.5 * 16px）になり、ボトム余白も24pxになります。まるで.childが「私は親の1.5倍に大きくしたい」と言っているかのようです！
CSS測定単位 - ch単位
' ch '単位は少し typographyの Nerdyです。これは現在のフォントの' 0 '（ゼロ）文字の幅に基づいています。これは特にモノスペースフォントで一貫したレイアウトを作成するのに非常に便利です。
.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* 40の' 0 '文字の幅 */
}これで、正好40文字幅のボックスを作成できます。コードスニペットを表示するのに完璧です！
CSS測定単位 - rem単位
' rem '単位はCSSの家族の賢者です。これは常にルート要素のフォントサイズ（通常は<html>タグ）を参照し、親要素のフォントサイズを無視します。
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* これはルートのフォントサイズに基づいて24pxになります */
}この場合、.containerが異なるフォントサイズを持っている場合でも、要素内のパラグラフは24px（ルートの1.5 * 16px）になります。
CSS測定単位 - lhとrlh単位
' lh '単位は要素の行高に基づいており、' rlh '単位はルート要素の行高に基づいています。これらは新しい単位で、デザインの垂直リズムを作成するのに非常に便利です。
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* これは行高と同じになります */
}これはパラグラフ間に均一なスペースを作成します。
CSS測定単位 - vh単位とvw単位
さあ、ビューポート単位に進みましょう。これは私の個人的なお気に入りです！' vh 'はビューポートの高さを意味し、' vw 'はビューポートの幅を意味します。これらはビューポートサイズの百分率です。
.hero-section {
height: 100vh; /* ビューポートの全高 */
width: 100vw; /* ビューポートの全幅 */
}
.half-width {
width: 50vw; /* ビューポートの半分の幅 */
}これらの単位は、どんなスクリーンサイズにも対応するレスポンシブデザインを作成するのに非常に便利です。私は一度、スマートフォンから巨大なテレビスクリーンまで全てに見える素晴らしいフルスクリーンランディングページを作成するためにこれらを使用しました！
CSS測定単位 - vminとvmax単位
' vmin 'と' vmax 'はビューポート単位のダイナミックデュオです。' vmin 'はビューポートの小さい方の寸法を使用し、' vmax 'は大きい方の寸法を使用します。
.square {
width: 50vmin;
height: 50vmin;
}これは常にビューポートの小さい方の寸法の50%の完璧な四角形を作成します。アスペクト比を維持するのに非常に便利です！
CSS測定単位 - vb単位
' vb '単位はブロック方向（通常は水平書きの高さ）のビューポートサイズに基づいています。これは' vh 'に似ていますが、異なる書き方に適応します。
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* 垂直書きモードの全高 */
}これは特に水平方向と垂直方向の書き方の両方に対応するレイアウトを作成するのに非常に便利です。
CSS測定単位 - vi単位
' vi '単位は' vb 'のインライン版です。これはインライン方向（通常は水平書きの幅）のビューポートサイズに基づいています。
.horizontal-scroll {
width: 200vi; /* ビューポートの2倍の幅 */
overflow-x: scroll;
}これは常にビューポートの2倍の幅の水平スクロール要素を作成します。
例 - 百分率
CSSの百分率は常に何かしらに相対しています。幅では通常、親要素の幅に相対します。
.parent {
width: 300px;
}
.child {
width: 50%; /* これは150pxになります */
}ここで、.child要素は常に親要素の半分の幅になります。親要素の「あなたは親の半分を持っていい」と言っているかのようです！
例 - 数値
時々、CSSプロパティに単位が一切ないことがあります。これらは通常、line-heightやopacityなどの単位のないプロパティに使用されます。
p {
line-height: 1.5; /* フォントサイズの1.5倍 */
opacity: 0.8; /* 80%透明 */
}この場合、行高はフォントサイズの1.5倍になり、テキストは少し透明になります。
そして、ここまでがCSS測定単位の旅です。これらをマスターする鍵は練習です。プロジェクトでこれらの単位を混ぜ合わせて試してみてください。そうすることで、それぞれの単位を使うべき时机を直感的に理解できるようになります。
ハッピーコーディング、そしてあなたのレイアウトが常にピクセルパーフェクトでありますように！?✨
Credits: Image by storyset