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