2020年2月14日ツイートシェアB!はてブポケットウインドウ幅に連動して画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方の紹介です。おわりウインドウ幅に応じて大きさが変わるようにするvwという単位を使えば、ウインドウ幅を基準とした大きさとすることができます。基準として100vwがウインドウ幅と同じサイズを表します。vwの単位を使うことで、ウインドウ幅が小さくなれば同じように小さくなって、ウインドウ幅が大きくなれば同じように大きくなるという作り方ができるようになります。固定値(px)をvwに変換するコーディングを仕事とする場合は、デザインカンプの値を元にコーディングすると思いますが、ここに書かれている単位は基本的にはpxですよね。ウインドウ幅に応じて大きさが変わるようにするには、このpxを値をvwに変換してあげる必要があります。その計算式が以下です。2.4vwということになります。100vw;}画像のように拡大・縮小するコーディング実例では、先ほど紹介したvwの考え方を使ってコーディングしてみます。自分の場合は基本的にPCからスマホに映るまでの幅で使う多いです。(表示がぐちゃぐちゃになりがちなので...)先に結果だけ見せると以下のような動きになります。文字や余白、横幅がウインドウ幅に応じて拡大したり縮小していることが分かるかと思います。PCベースのHTMLとCSSを作るではどんな感じで作っているか具体的なコードを元に見ていきましょう!以下のようなHTML構造でシンプルな横並びレイアウトを作っています。flex;で横並びにしていますが、中の要素は%ではなくガチガチにpxで固まっているのがポイントですね。pxで指定できるので、PC時点ではデザインカンプのまま特に割合とか意識せずにコーディングできたりします。0;}インナー幅より小さくなったらpxをvwに変換PCベースのコーディングだと基本的にはインナー幅をベースとして中の要素の幅も決まっているかと思います。要するにインナー幅以下になると、中の要素が収まりきらずにはみ出すリスクが生まれてしまう訳です。インナー幅という言葉が分からない方は以下をご参考ください!レイアウトの基本である.innerの中央寄せを覚えよう!今回の場合は具体的にどうしているかというと以下のとおりすね。.innerの幅620pxより小さくなったら、px値の部分をvwに変換しています。今回だと、基準幅が.innerの620pxということで計算していくこととなります。*/}}こうしてあげることで、620pxより小さくなった時に画像を拡大・縮小させているかのような動きをしてくれるようになります。リンクスマホ時は固定値に戻すPCベースの基準幅でスマホサイズも持っていくとめちゃくちゃ小さくなってしまいます。スマホでvwを使うには基準幅を変えてあげるか、固定値で表現するかの2つですが、基本的には固定値(px)での表現でいいのかなと思っています。幅についてはデバイスサイズの100%を基準にするといった具合で。(注意点)大きいモニターのことも考慮するvw使うときの注意点としては、画面サイズに応じてどこまでも拡大してしまうという点ですね。SE等の320pxで決まっているかと思いますが、最大は決まっていません。仮に2,000px以上とかになっても問題ないように実装する必要があります。自分の基準としてあ、PCサイズ時はpx等の固定値。どれだけ大きくなってもインナー幅サイズでキープされるようなイメージです。vwを主に使うのは、デザインカンプがないような、スマホとPCの間のときですね。いった感じで、便利だからってずっとvwを使ってしまうと、画面サイズを大きくした時にとんでもない大きさのフォントになったりするので注意してください。@haniwa008画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方「vw」について紹介しました。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。子要素を親要素(インナー幅)からはみ出して画面いっぱいにするCSSはにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。