イイダリョウのブログ。してだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも)2018-09-06もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも)CSSタイトルのようなことをふと思ったのでCSSのvw、vhをいろいろ試してみました。PCは横長、スマホは縦長とまったく異なる縦横比率なために生じるレスポンシブ対応。それを実現するメディアクエリはとても便利ですが、何種類もCSSスタイルを書き分けるのは少々複雑ではあります。ここを突破する一番シンプルな方法を追求したい。クモのようにコツコツとレスポンシブ対応とはレスポンシブ対応とは、ワンソース(1つのHTMLソース)でありながら複数のデバイス(主にPCとスマホですね)に最適化した画面表示をすることです。それが必要かというと、冒頭にも書きましたがPCは横長、スマホは縦長と根本的に異なる縦横比率で使用するためです。どちらかに合わせた画面ではどちらかが使いにくくなるわけです。これを実現する技術がCSSの「メディアクエリ」です。メディアクエリとはメディアクエリを実現するにはまずHTMLのhead要素内にmeta要素を加えます。content="width=device-width,initial-scale=1.0,minimum-scale=1.0"></head>name属性でviewport設定が有効になります。ビューポートは画面サイズのことで、content属性に画面サイズにたいする表示設定が書かれています。次にCSSにメディアクエリを書きます。スマホのスタイルを書く*/}@mediaは以前「CSSの基本」で触れた@ルールです。画面の幅が最大600pxまではこのスタイルを優先する、という意味です。PCのスタイルをメインにして、スマホにだけ特定のスタイルを適用したい場合にこういう書き方をします。600pxはスタイルの切り替えの境界で「ブレイクポイント」といいます。こちらはスマホのスタイルをメインにして、PCだけに特定のスタイルを適用したい場合の書き方。画面の幅が最小600pxまではこのスタイルを優先する、という意味です。メディアクエリの書き分けは、少々手間なんですよね。同じ場所に対するスタイルが二箇所に分散するので、後から探しにくくもあります。タブレット用とか大画面モニター用とかブレイクポイントが増えるごとにさらに分散します。vh、vwとはさて、CSSには様々な単位がありますが、CSS3で新しく加わった単位に「vw」「vh」というものあります。height」の略です。viewportとは先ほどのレスポンシブ設定で出ましたね。画面サイズという意味です。100vh;}おなじみの%と同じで100が基準値となります。vwは画面幅に対する相対値、vhは画面高さに対する相対値です。これに対して%は親要素に対する相対値です。一つおなじみのpxなどはピクセルの絶対値です。乗ろう」を作りました。こちらの例は%で作っています。100%;}メイン画像の幅を100%にしています。高さはデフォルト設定のautoで縦横比率は保たれます。この画像の元はインスタのため縦横比は正方形です。このままだとスマホでは適度なサイズですがPCでは下が見切れてしまいます。ちなみに元のインスタはこちらです。打ち替えてみるとどうなるか。100vh;}こうなった。CodePen.※フル画面は「こちら」おっとっと。画面サイズに対して画像が幅いっぱい、高さいっぱいになってるけど、縦横比率もびよ〜んと伸びてしまった。PCでは横長、スマホでは縦長になってしまっていると思います。obcect-fitでトリミングこういうときは、私の愛してやまない「object-fit」で外接リサイズしようではあ〜りませんか。画面をスクロールしていただくと、画像の幅、高さがちょうど画面いっぱいのサイズでありながら、縦横比率を保ってトリミングされているのがわかります。object-fitは残念ながらデフォルトではIEが対応してくれないので、IEに対応する方法はこちらをご覧ください。クモのようにコツコツと100vw、80vhが最高にレスポンシブ!?さて、高さが100vhだと、一見するとメイン画像の下にコンテンツが続いているがわかりにくいですね。cover;}こうなった。この3行でメディアクエリやらブレイクポイントやらの設定なしに、PCにもスマホにも最適な画面が実現できちゃいましたよ。やったね!!100vhで揃えてみるさて、せっかくなのでもう少し試してみませう。幅、高さとも100vhで揃えてみるとどうなるでしょうか。cover;}こうなった。CodePen.※フル画面は「こちら」PCでは「内接リサイズ」的な、画面高さに合わせて幅が縮小していますね。スマホで見ると、画面高さいっぱいで幅が画面幅よりも広がって横スクロールが発生してしまいます。100vwで揃えてみる今度は幅、高さとも100vwで揃えてみるとどうなるか。cover;}こうなった。CodePen.※フル画面は「こちら」お、これは、最初の100%と同じになりましたね。画面幅いっぱいのまま、PCは高さが画面をすぎてしまい大きすぎます。スマホは正方形で適度なサイズ。100vimで揃えてみるさて、ここで新しい単位をご紹介。画面の幅、高さの中で「小さい方」に合わせてリサイズされます。両方100vminにしてみるとどうなるか。cover;}こうなった。CodePen.※フル画面は「こちら」お、これは「内接リサイズ」ですね!PCでは画面高さに合わせて左右に余白ができる。スマホでは画面幅に合わせて下にコンテンツが続く。これはこれで使い道がありそうです。100vmaxで揃えてみる最後にvmaxという単位をご紹介。こちらは画面の幅、高さの中で「大きい方」に合わせてリサイズされます。両方100vmaxにしてみるとどうなるか。cover;}こうなった。CodePen.※フル画面は「こちら」うーむ...。PCは100%と同じく幅いっぱいで高さが見切れている。スマホでは100vhと同じく左右が画面幅より伸びて横スクロールになってしまっている。これは一番イマイチだなぁ。vmaxの有効活用方法はまだよくわからない。まあvmin、vmaxはよく使われる最小min、最大maxの単語なので名前は覚えやすいですね!最後にvw、vh、vmin、vmaxの挙動をいろいろ試し、%との違いも比較してみました。これがあればメディアクエリの設定なしにCSSもワンソースでレスポンシブ対応ができそうな気がしました!vw、vh、これからも積極的に使っていきたいと思います。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。