Help us understand the problem. What is going on with this article?

CSSで要素の幅や高さを指定する際の単位についてメモ

More than 3 years have passed since last update.

使われる単位の種別

絶対単位

単位 意味 詳細
cm センチメートル 1cm == 10mm
mm ミリメートル 10mm == 1cm
in インチ 1in == 2.54cm
pt ポイント 1pt == 1/72in == 0.3528mm
pc パイカ 1pc == 12pt

説明:

絶対単位に分類されるものは実寸値に基づいているため、表示する要素が同じサイズでも環境によって
「大きくて見づらい」「小さくて見えない」などの事象が発生しやすいため、可変的なレイアウト実現の観点からもあまり使われない。

相対単位

単位 意味 詳細
em ems 親要素の文字のサイズに対して相対
ex x-height デフォルトサイズの文字"x"の高さに対して相対
px ピクセル 画面解像度に対して相対
rem 「room」+「ems」 ルート要素 (html) の文字のサイズに対して相対
vw viewport width ビューポート(ブラウザの表示領域)の幅に対して相対
vh viewport height ビューポート(ブラウザの表示領域)の高さに対して相対
vmin viewport min ビューポート(ブラウザの表示領域)の最小値の1/100
vmax viewport max ビューポート(ブラウザの表示領域)の最大値の1/100

説明:

相対単位は絶対単位と異なり、ディスプレイの解像度、表示域のサイズに依存することのない可変的なレイアウトを実現することができる。
よってユーザ視点では相対単位を使った実装の方が良い。

パーセンテージ

単位 読み方 詳細
% パーセンテージ パーセンテージによる割合(基準になる値は各プロパティによって異なる)

最後に

相対単位の「rem」「vw」「vh」などのワードをよく耳にしたが、
「何を基準にして相対なのか?」など理解していなかった部分が多かったので今回記事を書くにあたって理解できてよかった。

厳密に言うと単位ではないが、要素に対して指定できるkeywordやその詳細なども今後記事としてまとめていこうと思う。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした