【魔法のvw】画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方

ウインドウ幅に連動して画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方の紹介です。

特にPCとスマホの間の「よしな」に表現するときの強い見方となるので、覚えておいて損はありません!

はにわまん
vwの書き方にハマるとあれもこれもと直したくなりますが、ほどほどに…

ウインドウ幅に応じて大きさが変わるようにする

vwという単位を使えば、ウインドウ幅を基準とした大きさとすることができます。基準として100vwがウインドウ幅と同じサイズを表します。

つまりは、vwの単位を使うことで、ウインドウ幅が小さくなれば同じように小さくなって、ウインドウ幅が大きくなれば同じように大きくなるという作り方ができるようになります。

固定値(px)をvwに変換する

コーディングを仕事とする場合は、デザインカンプの値を元にコーディングすると思いますが、ここに書かれている単位は基本的にはpxですよね。

ウインドウ幅に応じて大きさが変わるようにするには、このpxを値をvwに変換してあげる必要があります。その計算式が以下です。

固定値(px) / 基準幅(px) * 100vw

例えば、1,000pxの時に、24pxの値をvwに変換するには、24 / 1000 * 100 = 2.4vwということになります。

Sassの関数として定義しておくと使いまわせて便利なので、Sassを使っている方はぜひ登録しておきましょう!

コピー@function vw($width, $px) {

	@return $px / $width * 100vw;
}

画像のように拡大・縮小するコーディング実例

では、先ほど紹介したvwの考え方を使ってコーディングしてみます。自分の場合は基本的にPCからスマホに映るまでの幅で使う多いです。
(表示がぐちゃぐちゃになりがちなので…)

先に結果だけ見せると以下のような動きになります。文字や余白、横幅がウインドウ幅に応じて拡大したり縮小していることが分かるかと思います。

PCベースのHTMLとCSSを作る

ではどんな感じで作っているか具体的なコードを元に見ていきましょう!以下のようなHTML構造でシンプルな横並びレイアウトを作っています。

コピー<section class="content">
	<div class="inner">
		<h2 class="head">セクションの見出し</h2>
		<div class="body">
			<div class="body-img">
				<img src="https://haniwaman.com/wp-content/uploads/2018/02/cat.jpg" alt="">
			</div>
			<div class="body-content">
				<div class="body-content-head">コンテンツの見出し</div>
				<div class="body-content-body">
					<p>コンテンツのテキスト</p>
					<p>コンテンツのテキスト</p>
				</div>
			</div>
		</div>
	</div>
</section>

display: flex;で横並びにしていますが、中の要素は%ではなくガチガチにpxで固まっているのがポイントですね。

pxで指定できるので、PC時点ではデザインカンプのまま特に割合とか意識せずにコーディングできたりします。

コピーimg {
	width: auto;
	max-width: 100%;
	height: auto;
}

.inner {
	width: 620px;
	max-width: 100%;
	margin: 0 auto;
}

.head {
	font-size: 24px;
	font-weight: 700;
}

.body {
	display: flex;
	margin-top: 24px;
}

.body-img {
	width: 200px;
	margin-right: auto;
}

.body-content {
	width: 300px;
	padding: 12px;
	background: #fff;
}

.body-content-head {
	font-size: 20px;
	font-weight: 700;
}

.body-content-body {
	font-size: 16px;
	margin-top: 16px;
}

.body-content-body p {
	margin: 1em 0 0;
}

.body-content-body p:first-child {
	margin-top: 0;
}

インナー幅より小さくなったらpxvwに変換

PCベースのコーディングだと基本的にはインナー幅をベースとして中の要素の幅も決まっているかと思います。要するにインナー幅以下になると、中の要素が収まりきらずにはみ出すリスクが生まれてしまう訳です。

インナー幅という言葉が分からない方は以下をご参考ください!

レイアウトの基本である.innerの中央寄せを覚えよう!

今回の場合は具体的にどうしているかというと以下のとおりすね。.innerの幅620pxより小さくなったら、px値の部分をvwに変換しています。

変換の方法は、固定値(px) / 基準幅(px) * 100vwでしたね。今回だと、基準幅が.inner620pxということで計算していくこととなります。

コピー@media (max-width: 619px) {

	.head {
		font-size: 3.870967742vw; /* 24(px) / 620(px) * 100vw */
	}

	.body {
		margin-top: 3.870967742vw; /* 24(px) / 620(px) * 100vw */
	}

	.body-img {
		width: 32.2580645161vw; /* 200(px) / 620(px) * 100vw */
	}

	.body-content {
		width: 48.3870967742vw; /* 300(px) / 620(px) * 100vw */
		padding: 1.935483871vw; /* 12(px) / 620(px) * 100vw */
	}

	.body-content-head {
		font-size: 3.22580645161vw; /* 20(px) / 620(px) * 100vw */
	}

	.body-content-body {
		font-size: 2.5806451613vw; /* 16(px) / 620(px) * 100vw */
		margin-top: 2.5806451613vw; /* 16(px) / 620(px) * 100vw */
	}
}

こうしてあげることで、620pxより小さくなった時に画像を拡大・縮小させているかのような動きをしてくれるようになります。

スマホ時は固定値に戻す

PCベースの基準幅でスマホサイズも持っていくとめちゃくちゃ小さくなってしまいます。スマホでvwを使うには基準幅を変えてあげるか、固定値で表現するかの2つですが、基本的には固定値(px)での表現でいいのかなと思っています。

幅についてはデバイスサイズの100%を基準にするといった具合で。

(注意点)大きいモニターのことも考慮する

vw使うときの注意点としては、画面サイズに応じてどこまでも拡大してしまうという点ですね。画面の最小サイズはiPhone SE等の320pxで決まっているかと思いますが、最大は決まっていません。

なので、仮に2,000px以上とかになっても問題ないように実装する必要があります。

自分の基準としてあ、PCサイズ時はpx等の固定値。どれだけ大きくなってもインナー幅サイズでキープされるようなイメージです。vwを主に使うのは、デザインカンプがないような、スマホとPCの間のときですね。

といった感じで、便利だからってずっとvwを使ってしまうと、画面サイズを大きくした時にとんでもない大きさのフォントになったりするので注意してください。
(一回それで指摘うけました…)

おわり

画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方「vw」について紹介しました。

「これインナー幅以下になった時にどう表現すんねん!(なぜか関西弁)」の時に、効果を発揮するので、使えるようになっておくとめちゃくちゃ重宝しますよ!

関連の記事