webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

よく使うCSS単位まとめ

CSS単位よく使うものまとめ
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

CSSでよく使う単位についてまとめます。

絶対的なサイズの単位

px

Pixels ピクセル

デザインツールでフォントサイズを確認し、16pxなら、font-size: 16px;と指定可能です。

相対的なサイズの単位

単位関連箇所
em親要素のフォントサイズ
remルートのフォントサイズ
%親要素のサイズ
vwビューポート幅の 1%
vhビューポート高さの 1%
相対的な単位

em

emは、親要素のフォントサイズが基準になります。

以下のように、A・Bのブロックがあったとします。

同じ16pxを指定する為に、emを使用した場合…

p {
  font-size: .5em;
 }
p {
  font-size: .666em;
 }

同じ16pxを指定するとしても、emだとこのように親によって値が異なります。

rem

remはルートのフォントサイズに基づきます。

ルート要素のフォントサイズを基準にします。

つまり、html {font-size: 16px;}の場合どの場所の要素であっても、1rem = 16pxとなります。

<html>の font-size を変更すると、remを使用している箇所が全て相対的に変更されます

remを使う場合

分かりやすくするために、html { font-size: 62.5%; }と指定することが多いです。

デフォルトのベースフォントサイズは16pxですが、htmlのフォントサイズを62.5%にすると実質10pxという計算です。

↓つまり

16pxであれば1.6rem・26pxであれば2.6remと指定することができます。

%は、em同様親要素を基準とします。

幅も、フォントサイズも、親を基準として計算されます。

親要素のフォントサイズが32pxだった場合

その子要素にfont-size: 50%;を適用すると、32の50%の16pxとなります。

初心者さんの場合

これからコーディングを勉強するという初心者さんの場合は、remやemを使う前に、まずは絶対的な単位pxを使ってコーディングに慣れると良いと思います。

最初から複雑なことを覚えようとすると大変なので、極力シンプルに、最低限のことからスタートして、少しずつ色々と試してみる方がオススメです!Webデザイナー

いいなと思ったら
TAPしてね♡↓

合わせて読んでほしい記事

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング よく使うCSS単位まとめ

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。