【heightもfont-sizeも！】どのデバイスでも困らない！Sassでvwを最大限活かしたコーディング方法

世の中、デバイス幅色々すぎ問題。

世の中が進化するにつれ、デバイスも多種多様な世の中になってきている。
デスクトップPC・ノートPC・タブレット・スマホ　といった大別は数年前から変わっていないが、問題なのは、その一つ一つにおいて、いろんな種類の画面幅のものが存在することだ。

PCでも27インチだったり24インチだったり、スマホもiPhone●●はwidth375px、iPhone■■は410px、androidはXXXpx・・・と、無限種類あるんじゃないかと思うくらい色んなサイズのデバイスが存在する。この多様な画面幅に悩まされるのがマークアップエンジニア・コーダーといった職種の人々だ。

デザインカンプとして提供されるのは大体の場合「PC版」「スマホ版」の2種類のみで、それらのカンプの横幅もデザイナーによってまちまち。
例えばPC版として横幅1440pxのデザインが提供された時でも、そのサイトが「デスクトップPCで見られたとき」や「タブレットで見られたとき」のことを考慮しなければならない。

1440px幅デバイスで見た時に洗練されたデザインだったとしても、幅が変わることで
・左右の余白が余分に出たり無くなってしまったり
・文字が改行されてしまい見た目に影響が出てしまったり
ということが発生してしまう恐れがある。

ファーストビューのレスポンシブ対応に苦心している人、コンテンツ配置が厳格なサイトのコーディングをしている人必見！

「vw」を活用することで、もうデバイス幅に惑わされない。

上記の問題をどうにか解消できないか色々模索した結果、「vw」をフル活用する手法に辿り着いた。

vwは、ブラウザ幅（ビューポート）を基準にした単位で、画面横幅を表す。100vwで横幅いっぱいを表す。
このvwは画面幅によって可変となる単位なので、これを利用すれば画面幅に応じて「padding」「margin」「font-size」「width」「height」 などの指定を可変に出来るため、画面幅が1440pxだろうと2000pxだろうと1000pxだろうと、同じレイアウトを維持し続けることができる。

下記は僕が即席で作ったvwを用いたLPのサンプルだ。
最初は24インチiMacの最大画面で閲覧している状態だが、ブラウザの幅を縮小すると、文字の大きさや配置もすべて同じレイアウトを維持したまま変わっていることがわかると思う。

このvwでの記述を採用すれば、世の中の画面幅の種類に惑わされることなく、どんなデバイスでも、デザイン通りの表示を実現できる。

が、ここで、「vwって計算しないと何pxになるかわからないから、使いづらいんだよね。。」という声が聞こえてきそう。
だが、そんな不満も解消できる方法がある。下記参照。

「●●vw」という書き方はめんどくさいでしょ。だから、Sassに計算してもらいましょ。

ただ、いちいち「1440px画面の16pxは、、、、12.5vwか！」なんて計算やってられないので、ここでSassの自作関数機能を利用している。

See the Pen
Untitled by TAKAHITO KATAYAMA (@katayama-katzha)
on CodePen.

自作関数に関する部分はここ↓だ。これを書くことで、vwを使う準備完了。

$baseWidth : 1440;
@function vw($pixelsVw) {
   @return $pixelsVw / $baseWidth * 100vw;
}

$baseWidth2 : 375;
@function vw2($pixelsVw) {
   @return $pixelsVw / $baseWidth2 * 100vw;
}

.fv{
  height: vw(740);
  padding-left: vw(72);
  padding-top: vw(307);.section-inner{.left{h1{font-size: vw(66);.span-p{
          padding-left: vw(10);
          padding-right: vw(15);
        }
      }
      h2{font-size: vw(32);
      }
      p{font-size: vw(18);
      }
    }
    .right{
      width: vw(1000);
      position: absolute;
      right: vw(0);
      bottom: vw(-160);
      svg{
        width: 100%;
        height: auto;
      }
    }
  }
}