レスポンシブなサイト作成のためには避けて通れないCSSの「単位」 ｜ SiTest (サイテスト) ブログ

こんにちは、プロダクト開発チーム エンジニアの森永です。

Webサイト作成やWebサービス設計、Webアプリ開発で、最近「レスポンシブデザイン」を考慮に入れる必要性は高まってきております。

レスポンシブデザインを意識した設計、開発を行う際にはCSSの適切な設計が必須となってきますが、重要となってくるのが長さ、大きさの「単位」です。普段使う「px」「%」といったもの以外に、CSS3では新たな単位も使えるようになってきました。

今回のブログでは、CSSで使う単位について考察していきます。

まず、基本的な単位を3つ紹介します。

px

ピクセル単位。基本中の基本です。いろいろな単位が増えてきてはいるものの、この単位を一切使わずにCSSのコーディングを行うということは不可能と言ってもいいくらい基本的な単位です。

%

この単位もよく使われると思います。親要素に対する長さの割合をパーセンテージで示します。

em

これも定番です。親要素のフォントサイズを1とした単位なのでフォントサイズ次第で長さは変化しますが、「1行空ける」「1文字分開ける」といった用途で使う方も多いかと思います。

ここからはCSS3で追加された単位です。その中でまずは使用機会が増えてきている2つを紹介します。

vw

ビューポート(表示領域)の幅の1/100を1とした単位です。
従いまして、画面の大きさが変化しても幅の1/100が基準となるので、レスポンシブデザインに適した単位と言えます。

vh

vwと同様に、ビューポート(表示領域)の高さの1/100を1とした単位です。
よく使うケースとしては、画面の高さいっぱいの領域を指定する際に「height: 100vh」と指定することなどが挙げられます。

※注意事項

この場合の「表示領域」には、スクロールバーも含みます。
その点を考慮せずにコーディングを行うと画面が崩れる場合がありますのでご注意下さい。

続いて、最近注目度が上がっている単位を3つ紹介します。

rem

ルート要素(通常のhtmlファイルであればタグ)で指定したフォントサイズを1とした単位です。
この単位を使うことにより、他の要素でpxやemなどを使っていても影響されない設定が可能となります。

vmin

ビューポート(表示領域)の幅か高さのうち小さい方の1/100を1とした単位です。

vmax

ビューポート(表示領域)の幅か高さのうち大きい方の1/100を1とした単位です。

vmin/vmaxを使うことにより、モバイル端末など画面の縦横を切り替える場合がある場合には便利になるケースが考えられます。

※注意事項

便利そうに見えますが、一部ブラウザでは使用不可なので注意が必要です。特にIE/Edgeはvmax非対応です。

ここまで紹介した単位を実際にCSSで使用したサンプルをCodePenに掲載いたしました。
特にvw,vh,vmin,vmaxについては画面サイズに応じて変化することが確認できるかと思います。

単位を適切に使うことにより、レスポンシブデザインに適したコーディングを行うことができます。
テクニックの解説記事がcollissなどの情報サイトに多数掲載されておりますのでそちらも参照すると良いでしょう。

うまく単位を操り、レスポンシブデザインに役立てていきましょう！