• 作成日:

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

フォントや画像を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: 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;
}

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

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

  • ブラウザのサイズが1360px以上はpxでサイズを指定
  • 769px〜1359pxの間でvwの設定をする(1回目の指定)
  • 768px以下でvwの設定をする(2回目の指定)

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

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

以下は実際にフォントを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で指定するmixinについて紹介しました。レスポンシブさせる方法として選択肢にあると便利です。

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

//pxをvwに変換するfunction
@function _get_vw($size, $viewport: 375) {
  $rate: 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);
}