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

2020年2月12日2021年11月27日

ウインドウ幅に連動して画像のように拡大・縮小するレスポンシブを実現させる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/cms/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;
}

インナー幅より小さくなったら`px`を`vw`に変換

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

インナー幅という言葉が分からない方は以下をご参考ください！
https://haniwaman.com/inner/

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

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

@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より小さくなった時に画像を拡大・縮小させているかのような動きをしてくれるようになります。