制作実績お問い合わせプライバシースポンサーリンクボックス要素の縦横比を固定して可変幅にする(divを二重にしない)2018年6月11日Check表題の件でちょっと悩みました。いわゆるリキッドレイアウトやレスポンシブデザインなんかでは割と出てくる機会が多いです。ボックス要素の縦横比固定は前にちょっとやったときは、大体下記のような感じでした。0;}これだと、ボックス要素を二重にしなくてはならなかったのですが、css3を使ってもっと単純に指定する方法がありました。css3のvwを使用するvwはブラウザ幅を100%にしたときの~%、という指定が出来ます。50vwであれば50%、css2でいうwidth:50%;のような指定と同様になります。このvwという単位は高さにも指定できます。上記のようなレイアウトの場合、下記のようにも指定できます。こちらの方がHTMLがすっきりします。android4未満のブラウザだと正常に表示されないようですが、そのような機種のシェアは現時点で0.1%ほどのようですので、vwという指定方法はとりあえず有効だと思います。100vwの場合、厳密には横のスクロールバーの幅まで算出してしまうようなので、そこは多少工夫が必要かもしれませんが、width:100%;と併用しながら有効活用していきたいです。{width:100vw;height:75vw;}vwはフォントサイズやline-heightにも指定できる。vwはfont-size:5vw;のような指定もできます。line-heightにも使用できます。webフォントを使用した可変幅デザインなどでは、結構使えると思います。ググっても上記のようなvwを使った縦横比固定ボックス要素の実現方法がなかったので、とりあえず記事に書いておきました。