はじめに
どんな画面幅でも同じ比率で拡大・縮小するサイトをHTMLとSCSSを使って作ります
もちろん画像で作るパワープレイではないです
まずは完成品イメージ
作り方
上記のようなサイトを作るにはvwを単位として使うのですが
画面幅に対しての値なのでfont-size: 3.73333vw;というような指定が必要となり、可読性が悪く扱いにくいです。
scssの機能であるfunctionとmixinを使うことで
慣れ親しんだpxの値で書けるようにする関数を作り、可読性を良くして扱いやすくしましょう
functionとmixin
// 基準にする画面幅（デザインデータの幅）
$defaultWidth : 375;
// px → vw
@function vw($size, $width: $defaultWidth) {
@return (100 / $width) * $size * 1vw;
}
// fontsize px → vw
@mixin fontSize($size: 10, $width: $defaultWidth) {
font-size: $size * 1px; // vw非対応用
font-size: vw($size, $width);
}
「$defaultWidthをデザインデータの幅と合わせる」のがポイント
実際に使ってみる
.catch {
margin-bottom: vw(10); // margin-bottom: 10px
padding-bottom: vw(5); // padding-bottom: 5px
border-bottom: vw(2) dashed #ccc; // border-width: 2px
@include fontSize(18); // font-size: 18px
}
余白や線の太さはfunctionを呼び出し、文字サイズはmixinを呼び出して記述します。
カッコ内の値はデザインデータのpxの値を入れればOK。勝手にvwの値に計算して出力されます。
ちなみに%も画面幅に依存するのでwidth: 40%;といった指定も問題ありません！
どんなタイミングで使う？
主にSPサイトや、装飾の多いLPなどで使うのが良いかと思います
特に装飾の多いLPでは絶対配置を多用するので、画面幅による微妙なズレを調整する手間が省けて便利です
PCサイトは対応すべき画面幅が広いため、あまり向いてないと思っています。
同じ比率で拡大・縮小させてしまうと、あまりに表示コンテンツが小さい・大きいという現象が発生してしまい
メディアクエリで細かく値を調整する必要が出てきて冗長なコードになってしまう印象です。
おわりに
LPを作りまくっていた時代にお世話になったので記事にしたかった！！
線の太さをついついpxで書いてしまって修正したことが何度もあります。手癖かな
↧