見出し画像

CSSで指定できる単位について

マロリリコーダー部

CSSで指定できる単位について改めて洗い出してみます。

絶対単位と相対単位

絶対単位

  • px（ピクセル）

  • pt（ポイント）　1pt=0.035cm

  • cm（センチメートル）

  • mm（ミリメートル）

  • in（インチ）　1in=2.54cm

  • pc（パイカ）　1pc=12pt

  • Q（キュー）　1Q=1/4mm

  • xx-small

  • x-small

  • small

  • medium

  • large

  • x-large

  • xx-large

相対単位

  • em（エム）　その要素の文字の大きさ

  • rem（レム）　ルート要素の文字の大きさ

  • %

  • cap　英字の大文字の大きさ

  • ch　使用されるフォントの“0(ゼロ)”の文字幅

  • ic　使用されるフォントの“水(みず)”の文字幅

  • lh　その要素の行の高さ

  • rlh　ルート要素の行の高さ

  • vw　既定のビューポートの横幅の1%

  • vh　既定のビューポートの高さの1%

  • vi　ルート要素の※インライン軸方向の規定ビューポートの長さの1%

  • vb　ルート要素の※ブロック軸方向の規定ビューポートの長さの1%

  • vmin　ビューポートの小さい方の 1%

  • vmax　ビューポートの大きい側の 1%

  • svh / dvh / lvh　後述します

  • smaller

  • larger

※インライン軸：テキストが書かれる方向と並行方向の軸のこと（横描きは横軸、縦書きは縦軸）
※ブロック軸：テキストが書かれる方向と垂直方向の軸のこと（横書きは縦軸、縦書きは横軸）

紹介しきれない単位もあったので詳しくはこちらの記事をご参考ください。

最近便利だと思ったサイズ指定

min / max / clamp

最大幅を指定するmin

body{
    width: min(50%, 500px);
}

50%幅指定、最大幅は500px

つまり、ビューポートが1000px以上になったときも500pxを維持します。
1000px以下なら50%が優先されます。
minの登場により、よくあるコンテンツ幅の書き方が一行で収まるようになりました。

.container{
    width: 90%;
    max-width: 1000px;
}

二行で書いていたのが、


.container{
    width: min(90%, 1000px);
}

一行に収まります！

最小幅を指定するmax

さきほどのminの反対、最小幅を指定します。

body{
    width: max(50%, 500px);
}

50%幅指定、最小幅は500px

500px以下になると崩れるからそれ以下にはしたくない、、という場面で使えます。例えばサイドバーなど。
min同様、今まで二行書かなくてはいけなかったものが一行にまとめられます。

.sidebar{
    width: 30%;
    min-width: 200px;
}

二行で書いていたものが、

.sidebar{
    width: max(30%, 200px);
}

こちらも一行になります！

minとmaxを一緒に指定できるclamp

こちらも便利なclamp。
「固定する」という意味の通り、指定した範囲内に留めることができます。

body{
    width: clamp(200px, 50%, 1000px);
}

50%幅指定で、最小幅が200px、最大幅が1000px

width / max-width / min-width で指定していたものが一行にまとめられるので範囲を指定したいときにはとても便利です！

ちなみにmin,max,clampとも数値指定には計算式も使えるので、より細かな指定が可能です。

body {
    width: max(100vw - 50vw, 400px);
}


こちらのサイトにわかりやすいデモページが掲載されていたので、是非見てみてください。

svh / lvh / dvh

ツールバー・アドレスバーを考慮した設定ができる単位です。
ファーストビューの範囲をメニューバーで隠れないようにしたい時などに便利な単位です。

svh（small viewport heigh）

ツールバー・アドレスバーが表示されたときのviewportの高さを指定できます。

lvh（large viewport heigh）

ツールバー・アドレスバーが表示されていないときのviewportの高さを指定できます。

dvh（dynamic viewport heigh）

現在の表示に合わせたviewportの高さを指定できます。


詳細は参考サイトをチェックしてみてください。


フォールバック用のスタイルも追加しておく

主要ブラウザではサポートされていますが、万が一サポートされていないケースに備えて、フォールバック用のheight: 100vh;も併用しておくのがおすすめです。

.block {
    height: 100vh;
    height: 100dvh;
}

cssは下に書いたものが優先されるので、dvhに対応していれば100dvhが適用、対応していなければ100vhが適用されます。


まとめと感想

いつも使っている単位以外にもこんなに単位があるのだと、聞いたことのない単位も多く驚きました。
また、新しい単位もどんどん増えており、今までjavascriptで指定していたものが一行で指定できるようになったりと、改めてありがたみを実感しました。個人的には、次はスクロールバーを考慮した幅指定ができるようになれば嬉しいなぁなんて、、！
古いブラウザへの配慮もしつつ、新しいコンテンツも積極的に使っていきたいと思いました！

いいなと思ったら応援しよう！