最終更新日：2023.02.20

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

今回はフォントや画像をvwで指定するmixinについて紹介します。ブラウザサイズに応じてサイズが可変できるので柔軟なレスポンシブが可能です。

説明環境は以下

macOS Catalina v10.15.5
Visual Studio Code v1.52.1

この記事の目次

フォントや画像をvwで指定するmixin

vwで指定するためには、px数値をvwに変換する必要があります。そのためにSassのfuctionとmixinを使います。

mixinに書くこと

vwの指定をするために、以下のmixinを書きます。

//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);
}

//画像用のmixin
@mixin img-vw($img_size, $viewsize: 375) {
  width: $img_size * 1px;
  width: _get_vw($img_size, $viewsize);
}

フォントをvwで指定する

フォントについては、初期値を10px、ブラウザサイズは375pxに指定しています。つまり数値を設定せずにmixinを呼び出すと、375pxのときに10px相当のvwの指定ができます。

//ブラウザサイズが375pxのときに10px相当のvwの指定
p{
  @include font-vw(); 
}

cssでは以下のように出力されます。

p {
  font-size: 10px;
  font-size: 2.66667vw;
}

ブラウザサイズが768pxときに、フォントサイズが18pxになるようにvwで指定する場合は以下。

//ブラウザサイズが768pxのときに、フォントサイズが18pxになるようにvwで指定する場合
p{
  @include font-vw(18,768);
}

cssで出力されると以下。

p {
  font-size: 18px;
  font-size: 2.34375vw;
}

画像をvwで指定する

画像についてはブラウザサイズの初期値は375pxに指定していますが、画像サイズに初期値を持たせていないので指定する必要があります。

例えばブラウザサイズが375pxのときに、画像サイズが70pxになるようにvwで指定する場合は以下のように書きます。

//ブラウザサイズが375pxのときに、画像サイズが70pxになるようにvwで指定する場合
img{
  @include img-vw(70);
}

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

img {
  width: 70px;
  width: 18.66667vw;
}

ブラウザサイズが768pxのときに、画像サイズが200pxになるようにvwで指定する場合は以下です。

//ブラウザサイズが768pxのときに、画像サイズが200pxになるようにvwで指定する場合
img{
  @include img-vw(200,768);
}

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

img {
  width: 200px;
  width: 26.04167vw;
}

paddingやmarginでもvwを使いたい場合は？

フォントや画像だけではなく、paddingやmarginでもvwを使いたい場合、mixinは以下のようになります。（widthやheightでも使えます）

//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);
}

//画像用のmixin
@mixin img-vw($img_size, $viewsize: 375) {
  width: $img_size * 1px;
  width: _get_vw($img_size, $viewsize);
}

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

例えばブラウザサイズが375pxのときに、paddingが20px、marginが10pxになるようにvwで指定する場合は以下のように書きます。

フォントや画像と違うところは、プラパティを指定している点です。

//ブラウザサイズが375pxのときに、paddingが20px、marginが10pxになるようにvwで指定する場合
div{
  @include p-vw(padding, 20);
  @include p-vw(margin, 10);
}

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

div {
  padding: 20px;
  padding: 5.33333vw;
  margin: 10px;
  margin: 2.66667vw;
}

ブラウザサイズが768pxのときに、paddingが50px、marginが30pxになるようにvwで指定する場合は以下です。

//ブラウザサイズが768pxのときに、paddingが50px、marginが30pxになるようにvwで指定する場合
div{
  @include p-vw(padding, 50, 768);
  @include p-vw(margin, 30, 768);
}

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

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

PC、タブレット、スマホ表示でvwを使う設計とは？

実際にサイト制作で使う場合は以下のように設計します。

ブラウザのサイズが1360px以上はpxでサイズを指定
769px〜1359pxの間でvwの設定をする（１回目の指定）
768px以下でvwの設定をする（２回目の指定）

1360px以上のブラウザでもvwの指定をするとフォントも画像も大きくなりすぎてしまうのでpxで指定します。

あとは769px〜1359pxの間で１回目のvwの指定を行い、さらに768px以下で２回目のvwの設定を行います。vwの指定を２回指定する理由は、常に安定したサイズで表示させるためです。

以下は実際にフォントをvwで指定するイメージです。

//ブラウザサイズ1360px以上はフォントサイズを20px
p{
   font-size: 20px;
}

//ブラウザサイズ769px〜1359pxの間であれば、1360pxのときにフォントサイズが20pxになるようにvwに変換
@media (min-width: 769px) and (max-width: 1359px){
  p{
    @include font-vw(20,1360);
  }
}

//ブラウザサイズ768px以下であれば、375pxのときにフォントサイズが15pxになるようにvwに変換
@media (max-width: 768px){
  p{
    @include font-vw(15,375); // @include font-vw(15);でもOK
  }
}

画像であれば以下のようにvwで指定するイメージです。

//ブラウザサイズ1360px以上は画像サイズ500px
img{
   width: 500px;
}

//ブラウザサイズ769px〜1359pxの間であれば、1360pxのときに画像サイズが500pxになるようにvwに変換
@media (min-width: 769px) and (max-width: 1359px){
  img{
    @include img-vw(500,1360);
  } 
}

//ブラウザサイズ768px以下であれば、375pxのときに画像サイズが200pxになるようにvwに変換
@media (max-width: 768px){
  img{
    @include img-vw(200,375); // // @include img-vw(200);でもOK
  }
}

vwとremをかけ合わせた設計もある

１つ１つの要素にvwの指定はせず、html要素のみにvwの指定をして、他の要素にはremで指定する方法もあります。こちらのほうがvwを指定する要素がhtmlのみになるので手軽です。

参考

vwとremを組み合わせて、アスペクト比を維持したサイズ可変レイアウトを実装する

Qiita

さいごに

今回はフォントや画像をvwで指定するmixinについて紹介しました。レスポンシブさせる方法として選択肢にあると便利です。

mixinでは一緒にpx分も出力させていますが、ほぼすべてのブラウザでvwは実装されているのでpx分は無くても問題ありません。px分が必要ない方は以下のコードを使ってください。

//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: _get_vw($font_size, $viewsize);
}

//画像用のmixin
@mixin img-vw($img_size, $viewsize: 375) {
  width: _get_vw($img_size, $viewsize);
}

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

htmlにvwを指定して、あとはすべて要素にremを使ってレスポンシブさせる方法もあります。記事に書いたので以下を参考にしてみてください。