remとvwを使ってウィンドウ幅に対して可変なレイアウトを作るcssの書き方

公開日：2025.01.16

レスポンシブデザインで制作されたサイトは、cssによって色々な画面の幅に対してずれが無いように調整されたサイトです。
幅によってレイアウトが変わり、テキストの折り返し位置が幅によって変わったり、画像の横並び枚数が変化したりという調整が一般的です。

今回はそういう調整ではなく、どの幅で見ても同じように見えるサイトの作り方を紹介します。

テキストや画像はウィンドウ幅に合わせてサイズが変化し、どの画面で見てもレイアウトのバランスを保ったままになるという調整ですが、さすがにPCとスマホでレイアウトが同じでは見づらいことこの上ないので、ブレイクポイントを定めてそれ以上は一般的なレイアウトに、それ以下はスマホビューとしてデザインを保持して可変するレイアウトにします。

答えから言ってしまうと、ウィンドウ幅に合わせてオブジェクトサイズが変化するレイアウトは「vw」という単位を使えば実現できるのですが、今回は「rem」と「vw」を組み合わせた作り方を紹介します。
remと組み合わせる利点は読んでいくうちにわかっていただけるかと思います。

前提1.サイズ設計

まずはどんなサイズで作るか決めます。
今回は下記のように定めて組んでいきます。

ブレイクポイントは768px以上がPC、それ未満がスマホビュー
PCの基本フォントサイズは16px
スマホでは375pxビューの場合にフォントサイズを16pxとし、幅に合わせて可変

前提2.remとvwを理解する

rem

remというのは「root em」の略で、ルート（最上位階層）つまりhtmlタグで定めたサイズに対する相対的なサイズ指定です。
px等の単位は絶対指定として親要素の影響は受けません。
emや%は相対指定ですが常に親要素の影響を受けるので、同じ数値（例えば「20em」と書いた場合）でも親要素の影響により常に同じサイズになるとは限りません。

それに対してremというのはhtmlタグで指定したサイズに対してどれだけ大きいか（小さいか）という単位で100%表示（ルートと同じ大きさ）は1です。
相対指定であるにも関わらず親要素の影響を受けず同じ数値は同じサイズで表示され、これが結構便利なんです。

ちなみに一般的なブラウザではデフォルトの文字サイズは16pxですので、htmlタグに何も指定していない場合には、16px表示は1remです、
その他、14pxは0.875rem、18pxは1.125rem、20pxは1.25rem…となります。

これではちょっとわかりにくいですね。
表示させたいピクセル数にするには16で割らないといけないですし、後で「1.75rem」とかいう指定を見ても、これが実際何ピクセルで表示されているのかぱっとわからないです。
その為にひと工夫しているサイトが結構あります。

この記述ではブラウザデフォルトの16pxを62.5%にする事で基準サイズを10pxにしています。
これをする事により、16pxは1.6rem、50pxは5rem等とわざわざ計算することなく書いていくことが出来る便利な書き方です。
これの応用を後で使うので覚えておいてください。

vw

vwはremよりは理解しやすいかと思います。
ウィンドウの横幅を100vwとしたウィンドウ幅に対する相対表示で、例えばウィンドウ幅が1000pxなら1vwは10px、ウィンドウ幅が375pxなら1vwは3.75pxです。

vwを使って、前提1で挙げた「375pxビューの場合にフォントサイズを16pxとし、幅に合わせて可変」という指定をする場合は下記のような書き方になります。

または計算結果の小数点を端折って4.26vwのようにしてもいいとは思います。
基本的にはこのvwを使えば幅に対してレイアウトを保持した作り方が出来ます。

作り方

実際にコードを書いてみましょう。

まぁ簡単に言うとこれだけなんですが、おや、と気づいた方もいるかもしれません。
事前の設計とルート（htmlタグ）のフォントサイズ指定を適切に行っていれば、フォントサイズ指定はブレイクポイントごとに変えなくてもいいんです。

前提1で提示した設計では、PCビューの場合はウィンドウサイズに関係なく基本のフォントサイズは16px、スマホサイズの場合は375px幅の場合に16pxで幅に合わせて可変です。
絶対サイズと相対サイズで概念自体が異なるにも関わらず、それがbodyに対するfont-size: 1.6rem;という指定ひとつで済みます。
これがremをvwを組み合わせる事による利点のひとつです。

文字サイズの指定はbodyだけではありません。
p、h1、h2、h3、li、dt、dd…と言ったタグだけでなく、それらにclassを付けて際限なくフォントサイズ指定をしていきます。
レスポンシブサイトを作るにあたって、ブレイクポイントごとにいちいち文字サイズを変えて書いていかなくてはならないのは結構な手間です。
PCとスマホの基本サイズが同じで問題無い場合は、ひとつ書けばPCの絶対サイズとスマホの相対サイズ両方に対応できるというのはかなり手間が省けます。

勿論PCとスマホでサイズを分けたい時にはそれぞれの幅の箇所に記述する必要があります。
しかしそれでも書き方をremに統一する事により、デザインデータにあるpxの数値をvwでいちいち計算する必要が無いのでこれも利点と言えます。

他にも大きな利点があります。
webサイト制作者なら誰しも経験があると思いますが、サイトが全部完成してから「ちょっと全体的に文字サイズ上げて（下げて）くれない？」ととんでもない事を簡単に仰るクライアントが居ます。
完全にデザイン1ページ目の段階で言えよ案件なんですが、対応しないわけにはいきません。
そういった場合には、ルート（htmlタグ）のフォントサイズ指定を少し微調整するだけで、全体的なサイズ調整が簡単に出来ます。
もしこれを全部vw指定で作ってたと思うとぞっとしますね。

画像やスペースについて

webサイトは文字だけではなく画像や隙間のサイズも決めなくてはなりません。
フォントサイズ指定はremを使いましたが、画像や隙間をウィンドウ幅に合わせて可変で指定していくにはやはりvwが一般的だと思いますよね。
しかし、画像や隙間に関しても実はremは使えるんです。

先ほどと同じコードをもう一度掲載しましたが、これを書いていれば文字サイズだけでなく画像サイズやmargin、paddingにも1remが10px（375px幅の場合）として使えます。
これは例えばデザインデータが375pxで作られてる、というような場合に非常に便利です。
デザイン上で画像の横幅が100pxならwidth: 10rem;と書けば良いだけ。
上の隙間が30pxならmargin-top: 3rem;と書けばよいだけ。
幅からvwに換算して計算したり、計算式を記述したりする必要が無いので無茶苦茶楽です。

しかしこの作り方にはひとつ落とし穴があり、先ほどの「ちょっと全体的に文字サイズ上げて（下げて）くれない？」が大いなる敵です。
ルート（htmlタグ）で決めたサイズを変更すると、remのサイズも変わります。
文字なら少し大きくなっても折り返し位置が変わるだけで済みますが、例えば画像を幅いっぱいにしようと思って37.5remを指定していた場合には、大きくすると見事にはみ出してしまいます。

そういうちゃぶ台返しがあった場合には、泣きながらvwに書き換えましょう。