Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
21
Help us understand the problem. What is going on with this article?
@Rock22

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やその詳細なども今後記事としてまとめていこうと思う。

21
Help us understand the problem. What is going on with this article?
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
Rock22

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
21
Help us understand the problem. What is going on with this article?