CSSの単位まとめ 第1回

よちよち.rb Advent Calendar 2014 - Adventar 19日目の記事です。昨日は@highwideさんの「超絶楽しいカードゲームnimmtについて」でした。合宿の時に私もプレイさせて頂きましたが、スリルとサスペンス満載な雰囲気で変な汗をかきましたがとても楽しく、素敵な思い出です。

私はCSSで扱われる単位のまとめを数回にわけてしたいと思います。ではさっそく。

em

ざっくりいうと親要素の文字サイズが1em。とりあえず、使い方。

まずHTML

<div class="font16px">
    <p class="font1em">フォントサイズは16pxになる
        <span class="font2em">フォントサイズは32pxになる</span></p>
    <p class="font2em">フォントサイズは32pxになる</p>
</div>

そしてCSS

.font16px {
    font-size: 16px;
}

.font1em {
    font-size: 1em;
}

.font2em {
    font-size: 2em;
}

結果

フォントサイズは16pxになるフォントサイズは32pxになる

フォントサイズは32pxになる

marginで使ってみる

HTML

<div class="outbox">
    <div class="innerbox">
        <p class="element">margin64px</p>
    </div>
</div>

CSS

.outbox {
    border: 2px solid #afaaaa;
    font-size: 16px;
}

.innerbox {
    margin: 1em;
    border: 1px solid #aacfaa;
    font-size: 2em;
}

.element {
    margin: 2em;
    border: 1px solid #aaaacf;
}

結果

margin32px

margin64px

まとめ

例のように文字サイズを決める場合には結構使いやすいですし、便利だと思います。

私だけかもしれませんが、paddingやmerginなどに使うと、大いに戸惑います。フォントサイズを変えると子要素の、レイアウトに影響してしまうためです。また、相対関係がぱっと見でわかりずらいかな。と思います。さらに、使い慣れていないからか結果が何pxになるのかがいまいちわかっていない。フォントサイズのみにしておくのが無難かな。

最後に

今回、この記事がはてブ投稿の第1回目となります。素敵なきっかけを与えてくれたよちよち.rbに感謝です。このお題を決めた理由は第47回のミートアップで、CSSの単位が話題に上がっていて、そういえば私もちゃんと整理したことないな。と思ったからです。長くなりそうなので連載にしました。完遂目指すぞ！

明日は、よちよち.rbのLT大会まとめになるのかな。初めてのLTで軽くテンパってますがベストを尽くそうと思います！