pxと%とemとremの違い – CSSの単位を把握しよう!

2015年 08月 28日

はてなブックマークはてブ
Google+1Google+
PocketPocket
pxと%とemとremの違い – CSSの単位を把握しよう!

    Bootstrap4もついに採用したem

    先日、Bootstrap4が発表され、各所で話題を呼んでいますね。

    中でも注目されていたのは、「emの採用」であったように思います。

    WILDWEST-SERVICEでは既にemを多用していますが、「今まではpxを中心に記述していたがemやremで記述してみようかな」という方も少なくないと思います。
    今回はpxや%以外にCSSで使える単位について見ていきましょう。

    百分率(%)

    百分率(%)で数値を指定することで、相対的な値を指定できます。

    状況に応じて相対基準となる値が変化しますが、大抵はセレクタで指定した要素の親となる要素が基準となります。

    たとえば、p要素のfont-sizeが20pxであった場合、p要素の子となるspan要素に「font-size: 50%」が指定されていれば、span要素の文字サイズは10pxで表示されます。

        <p>foo<span>bar</span>baz</p>
    
        p {
            font-size: 20px;
        }
    
        span {
            font-size: 50%;
        }
    

    フォントに相対的な長さ単位

    フォントに相対的な長さは、それぞれの単位に対応した要素のfont-sizeの値が相対基準となります。

    詳しくは各単位ごとに説明していきます。

    em

    emは、emが用いられた要素のfont-sizeの値が相対基準となります。

    たとえば、p要素のfont-sizeが20pxであった場合、同じp要素に「line-height: 2em」が指定されていれば、p要素の行の高さは40pxで表示されます。

        <p>hoge</p>
    
        p {
            font-size: 20px;
            line-height: 2em;
        }
    

    また、次のサンプルソースのspan要素のように、font-sizeに対してemを用いた場合は親要素から継承されたfont-sizeが相対基準となります。

    この例ではp要素の内側にあるspan要素のfont-sizeが40pxで表示されます。

        <p>foo<span>bar</span>baz</p>
    
        p {
            font-size: 20px;
        }
    
        span {
            font-size: 2em;
        }
    

    rem

    emの相対基準がそのセレクタ自身またはセレクタの親のfont-sizeであるのに対し、remはルート要素のfont-sizeを1remとして算出します。

    ルート要素は大抵の場合html要素です。

    たとえば、次のサンプルソースの場合、p要素の子となるspan要素のfont-sizeは14pxで表示されます。

        <p>foo<span>bar</span>baz</p>
    
        html {
            font-size: 14px;
        }
        p {
            font-size: 20px;
        }
    
        span {
            font-size: 1rem;
        }
    

    ex

    exは、表示されているフォント(font-family)のx-heightに相当します。

    x-heightは多くの場合で小文字のxの高さと等しくなることからそう呼ばれています。(小文字のxを含まないフォントでもexは使用可能です)

    x-heightの決定が不可能な場合などには1exが0.5emと見なされるため、多くのフォントで1exは0.5emで表示されますが、いくつかのフォント計量法に基づく場合もあります。

    ch

    先ほどのexと似ており、こちらは表示されているフォントにおける数字の0の送り幅に等しくなります。

    exと同様に、0の送り幅が計測不可能な場合などに0.5emと見なされます。

    カテゴリ:コーディング
    タグ:

    この記事をシェアする

    はてなブックマークはてブ
    Google+1Google+
    PocketPocket

    この記事へのコメント

    このサイトをシェア

    このサイトをシェアするボタンです。

    各記事ごとのシェアは各記事のタイトルの下のボタンから。

    SNSのアカウントのページへのリンクは画面最下部のフッター内にあります。