CSS の長さの単位のまとめ

これまでの研究で、CSS スタイルはセレクター、属性、値の 3 つの部分 (たとえばp{width: 100px;} ) で構成され、値を設定する際に値に対応する単位が関与する可能性があることがわかっています。属性。 CSS はさまざまな長さの単位をサポートしています。これらの長さの単位は、絶対的な長さの単位 (インチ、センチメートル、ポイントなど) と相対的な長さの単位 (パーセンテージなど) の 2 つの種類に分類できます。このセクションでは、CSS のいくつかの測定単位を簡単に見てみましょう。

コンテンツ 表示

1. 相対長さの単位

相対的な長さの単位は、この単位が固定値を持たず、その値が他の要素のプロパティ (ブラウザーウィンドウのサイズ、親要素のサイズなど) の影響を受け、相対的な長さの単位が非常に適していることを意味します。レスポンシブレイアウト用。次の表に、CSS でサポートされている相対的な長さの単位を示します。

ユニット	説明	例
em	自身の font-size (フォントサイズ) 属性の値に対して、設定されていない場合は、親要素の font-size 属性の値を継承します. 1em は font-size 属性の値に相当します. . たとえば、font-size の値が 16px の場合、1em は 16px に等しく、2em は 32px に等しくなります	p{line-height:2em;}
rem	ルート要素`<html>`の font-size 属性のサイズを基準にします。たとえば、ルート要素の font-size が 100px の場合、1.2rem は 120px に相当します。	p{font-size: 1.2rem;}
ex	使用フォントの英小文字xの高さに対して、xの高さが分からない場合は0.5emで計算	p{font-size: 1ex;}
ch	使用フォントの数字の0の高さに対して、0の高さが分からない場合は0.5emで計算	p{line-height: 3ch}
vw	ブラウザウィンドウの幅に対して、1vw = ウィンドウ幅の 1%	p{font-size: 5vw;}
vh	ブラウザウィンドウの高さに対して、1vh = ウィンドウの高さの 1%	p{font-size: 5vh;}
vmin	vw と vh の小さい方	p{font-size: 5vmin;}
vmax	vw と vh の大きい方	p{font-size: 5vmax;}
%	親要素の幅またはフォントサイズに対する割合	div{width: 55%}

[例] 以下は、包括的な例を使用して、相対的な長さの単位の使用を示しています。

 <!DOCTYPE html>
<html>
    <head>
        <title>CSSの単位</title>
        <style>
            .box{
                width: 60vw;
                height: 88vh;
                border: 1ex solid black;
                font-size: 16px;
            }
            .info{
                font-size: 2em;
            }
            .ex > span{
                font-size: 3ex;
            }
            .ch > span{
                font-size: 4ch;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            これは16pxのフォントです
            <p class="info">これは2emのフォントです</p>
            <p class="ex">
                x：<span>これは3exのフォントです</span>
            </p>
            <p class="ch">
                0：<span>これは4chのフォントです</span>
            </p>
        </div>  
    </body>
</html>

実行結果は次の図のとおりです。

2. 絶対長さの単位

絶対的な長さの単位は、実際の物理的なサイズを表し、そのサイズは固定されており、他の要素のサイズの変更によって変更されることはありません。次の表に、CSS でサポートされている絶対的な長さの単位を示します。

ユニット	説明	例
cm	センチメートル	p{font-size: 0.5cm;}
mm	んん	p{font-size: 5mm;}
in	インチ (1in = 96px = 2.54cm)	p{font-size: 1in;}
px	ピクセル (1 ピクセル = 1/96 インチ)	p{font-size: 16px;}
pt	ポイントは、「ポイント」とも呼ばれる特別な印刷単位「ポンド」です (1pt = 1/72in)	p{font-size: 16pt;}
pc	パイカ、日本語は「パイカ」と呼ぶことができます。これは、印刷業界でフォントサイズを表すために使用される単位であり、私の国の新しい No. 4 リードタイプ (1pc = 12pt) のサイズに相当します。	p{font-size: 5pc;}

[例] 以下は、包括的な例を通して絶対長単位の使用を示しています。

 <!DOCTYPE html>
<html>
    <head>
        <title>CSSの単位</title>
        <style>
            .box{
                width: 4in;
                height: 4.5cm;
                border: 2mm solid black;
                font-size: 16px;
            }
            .pt{
                font-size: 2pt;
            }
            .pc{
                font-size: 3pc;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            これは16pxのフォントです
            <p class="pt">これは2ptのフォントです</p>
            <p class="pc">これは3pcのフォントです</p>
        </div>  
    </body>
</html>

実行結果は次の図のとおりです。

「CSS の長さの単位のまとめ」についてわかりやすく解説！絶対に観るべきベスト2動画

理屈っぽいCSS入門 #06：#f00はなぜ赤？カラーコードとサイズの単位

https://www.youtube.com/watch?v=qkEGObVSNxk&pp=ygUoQ1NTIOOBrumVt-OBleOBruWNmOS9jeOBruOBvuOBqOOCgSZobD1KQQ%3D%3D

理屈っぽいCSS入門 #06：#f00はなぜ赤？カラーコードとサイズの単位 (https://www.youtube.com/watch?v=qkEGObVSNxk&pp=ygUoQ1NTIOOBrumVt-OBleOBruWNmOS9jeOBruOBvuOBqOOCgSZobD1KQQ%3D%3D)

CSSの便利な単位 vw, vh, vmin, vmax 解説！

https://www.youtube.com/watch?v=ojhObFZr0yc&pp=ygUoQ1NTIOOBrumVt-OBleOBruWNmOS9jeOBruOBvuOBqOOCgSZobD1KQQ%3D%3D

CSSの便利な単位 vw, vh, vmin, vmax 解説！ (https://www.youtube.com/watch?v=ojhObFZr0yc&pp=ygUoQ1NTIOOBrumVt-OBleOBruWNmOS9jeOBruOBvuOBqOOCgSZobD1KQQ%3D%3D)