夢みるゴリラ
夢みるゴリラ
  • 作成日：

vwとrem、カスタムCSSを使ってレスポンシブなサイトを作成する手順

vwとrem、カスタムCSSを使ってレスポンシブなサイトを作成する手順

今回はvwとrem、カスタムCSSを使ってレスポンシブなサイトを作成する手順について説明します。

デモサイト

前提条件は以下

  • rootでフォントサイズにvwを指定
  • 大きくなりすぎないように一定のサイズで固定
  • 375pxの画面サイズからPC画面へ作成していく

説明環境は以下

  • macOS Monterey 12.5.1
  • Visual Studio Code v1.73.1
この記事の目次

vwとrem、カスタムCSSを使ったレスポンシブ方法

root（HTML要素）に対して、デフォルトのfont-sizeを変更することは良しとされていません。（例：font-size:62.5%;など）理由はJavaScriptのライブラリやWordPressのようなCMSが、rootの単位を基準にしている場合、勝手にデフォルトの単位を変更してしまうと表示が崩れてしまう可能性があるからです。

その問題はさておき、今回は実験的にremとvwでレスポンシブする方法について考えてみました。デモサイトを作成したので確認してみてください。

デモサイト

rootにvwを指定する

rootにカスタムCSSでブレイクポイントと、font-sizeを設定します。計算方法については後ほど説明します。

:root {
  --breakPoint-xs: 375;
  --breakPoint-s: 560;
  --breakPoint-m: 960;
  --breakPoint-l: 1200;

  --font-size: min(calc(100vw * 1 / var(--breakPoint-xs)), 8.125%);
  @media (min-width: 560px) {
    --font-size: min(calc(100vw * 1.05 / var(--breakPoint-s)), 8.125%);
  }
  @media (min-width: 960px) {
    --font-size: min(calc(100vw * 1.1 / var(--breakPoint-m)), 8.125%);
  }
  @media (min-width: 1200px) {
       --font-size: min(calc(100vw * 1.15 / var(--breakPoint-l)), 8.125%);
  }
}

単位はremで指定する

そしてhtml要素にfont-sizeを指定します。これで準備完了です。

html {
  font-size: var(--font-size);
}

実際に以下のようにremを使ってサイズを指定します。
画面サイズが375pxのときにh1要素は25pxで表示されます。

h1{
  font-size: 25rem; /* 画面サイズ375pxで25px */
}
.content{
  padding: 12rem; /* 画面サイズ375pxで12px */
  margin: 20rem;  /* 画面サイズ375pxで20px */
}

画面サイズが大きくなれば、rootで指定したvwも大きくなるため、remで指定したサイズも相対的に大きくなります。

計算方法について説明する

font-sizeは画面サイズが375pxの場合は以下のように設定しています。

:root {
  --breakPoint-xs: 375;
 
  --font-size: min(calc(100vw * 1 / var(--breakPoint-xs)), 8.125%); 
}

mini()関数を使って、左側の値は画面サイズが375pxのときの1pxあたりのvwです。右の値は1.3px相当を%で表示しています。（ 1.3px / 16px × 100% = 8.125%）

mini()関数は左側のvwの値と、右側の%の値を比較してどちらか小さい方を表示させます。つまりvwの単位が大きくなりすぎることはなく、最終的に8.125%の値で固定されます。

vwも％も1px単位で計算している理由は、以下の例のようにpxと同じような見え方で指定したかったからです。

.content{
  font-size: 15rem; /* 画面サイズ375pxで15px */
  padding-top: 20rem; /* 画面サイズ375pxで20px */
  margin-inline: 10rem; /* 画面サイズ375pxで10px */
}

mediaクエリでブレイクポイントごとに、1pxあたりのvwを1.05px、1.1px、1.15pxと数値を上げています。これによって画面サイズが大きくなるごとに、基準となるフォントも大きくなります。

--font-size: min(calc(100vw * 1 / var(--breakPoint-xs)), 8.125%);
@media (min-width: 560px) {
    --font-size: min(calc(100vw * 1.05 / var(--breakPoint-s)), 8.125%);
}
@media (min-width: 960px) {
    --font-size: min(calc(100vw * 1.1 / var(--breakPoint-m)), 8.125%);
}
@media (min-width: 1200px) {
    --font-size: min(calc(100vw * 1.15 / var(--breakPoint-l)), 8.125%);
}

注意点

使っているJavaScriptのライブラリ、それからWordPressなどのCMSがrootの単位を参照している場合、表示が崩れる可能性があります。

あとはデザインカンプの数値と、実際のサイトの数値をどのように合わせるか調整が必要です。ブレイクポイントをroot以外にも設定してremの数値を変更するのであれば、以下のようにすべて1pxあたりのvwで計算したほうが良いかもしれません。

:root {
  --breakPoint-xs: 375;
  --breakPoint-s: 560;
  --breakPoint-m: 960;
  --breakPoint-l: 1200;

  --font-size: min(calc(100vw * 1 / var(--breakPoint-xs)), 8.125%);
  @media (min-width: 560px) {
    --font-size: min(calc(100vw * 1 / var(--breakPoint-s)), 8.125%);
  }
  @media (min-width: 960px) {
    --font-size: min(calc(100vw * 1 / var(--breakPoint-m)), 8.125%);
  }
  @media (min-width: 1200px) {
       --font-size: min(calc(100vw * 1 / var(--breakPoint-l)), 8.125%);
  }
}

rootにサイズを指定せず、vwでレスポンシブさせる方法は？

rootの単位を変更させたくない場合は、１つ１つの単位に直接vwを指定していきます。Sassを使えばpxからvwへの計算ができます。以下は例です。

//pxをvwに変換するfunction
@function _get_vw($size, $viewport: 375) {
  $rate: calc(100 / $viewport);
  @return $rate * $size * 1vw;
}

//フォント用のmixin
@mixin font-vw($font_size: 10, $viewsize: 375) {
  font-size: $font_size * 1px;
  font-size: _get_vw($font_size, $viewsize);
}

//paddingやmargin用のmixin（widhtやheightでも使える）
@mixin p-vw($property, $size, $viewsize: 375) {
  #{$property}: $size * 1px;
  #{$property}: _get_vw($size, $viewsize);
}

画面サイズが768pxのときに、何pxで表示させたいか指定します。

.content{
  @include font-vw(18,768); //画面サイズ768pxのとき18px相当のvw
}

CSSで出力されると以下のようにvwに変換されます。

.content{
  font-size: 18px;
  font-size: 2.34375vw;
}

marginやpadding、widthなども指定できます。

.foge{
  @include p-vw(padding, 50, 768); //画面サイズ768pxのとき50px相当のvw
  @include p-vw(margin, 30, 768); //画面サイズ768pxのとき30px相当のvw
}

CSSで出力されると以下です。

.foge{
  padding: 50px;
  padding: 6.51042vw;
  margin: 30px;
  margin: 3.90625vw;
}

詳しくは以下の記事でも書いたので参考にしてみてください。

フォントや画像をvwで指定するmixin - レスポンシブしやすい設計方法

まとめ

今回はvwとrem、カスタムCSSを使ってレスポンシブなサイトを作成する手順について説明しました。root自体の単位を変更しても良いなら、vwとremでmediaクエリの少ないレスポンシブサイトを作成できる印象です。

ただ作成した当初は問題なかったとしても、今後サイト自体にCMSを導入したり、JavaScriptのライブラリを追加していく作業が出てくると、表示に不具合が出てくる可能性があるのでしっかり検証した上で採用しましょう。

こちらの記事も読まれています