ホーム プログラミング言語 Web関連 css3 CSS の長さの単位のまとめ

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> 

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

図 1: 相対長さ単位の適用
図 1: 相対長さ単位の適用
 

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> 

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

 
図 2: 絶対長さ単位の適用
図 2: 絶対長さ単位の適用
 

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

理屈っぽいCSS入門 #06:#f00はなぜ赤? カラーコードとサイズの単位
CSSの便利な単位 vw, vh, vmin, vmax 解説!