スマートファーストなんて言葉もあるように、webもPCメインからスマートフォンなどのデバイスにあわせたデザインやタグの書き方をしないといけない時代になってきました。それでもPCもスマホも両方綺麗に表示させたいという要望は、当然発生するわけで「あれでしょ、レスポンシブルってのがあるんでしょ」と、ブルなんて言ってしまうぐらい分かったような感覚で気軽に対応を迫られたりするわけです。まあ、愚痴なんですけどね(笑)。
さて、いろんな画面サイズに合わせて設定を細かく作っていく方法ももちろんありですが、cssコードが冗長化、可視性の悪さを引き起こしますし、メンテナンスが大変になってしまいます。できれば、スパッと簡単な記述で決めてしまいたいものですよね。
今回は縦横比の固定について考えてみたいと思います。使用するのはbackgroundのイメージでサイズは600*400（3：2）となります。
PCでの場合
横幅一杯に広げるとして、もともとの全体幅が固定な場合は、計算してあげればぴったりのサイズで表示されるはずですよね。たとえば1200px幅だったら、縦は800pxとなるので、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>box</title>
<link rel="stylesheet" href="">
<style>
body {
width: 1200px;
margin: 0 auto;
}
.box1 {
height: 800px;
background: url(https://dummyimage.com/600x400/000/fff&text=width+3+：+height+2) no-repeat;
background-size: cover;
}
p {color: black;}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
こんな感じでいいかと思います。
で、ここからが本番。これを基本として、改造してレスポンシブに対応させたいと思います。
横幅一杯にしたい場合の対応
PCでもスマートフォンでも横幅一杯に画像を表示させることがあるかと思います。その際に使用するのは
width: 100%;
なんて指定を思いつくかもしれません。ただ、これだと親要素の影響も受けてしまうので
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>box</title>
<link rel="stylesheet" href="">
<style>
body {
width: 1200px;
margin: 0 auto;
}
.box1 {
width: 100%;
height: 800px;
background: url(https://dummyimage.com/600x400/000/fff&text=width+3+：+height+2) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
うまく全体表示になりませんでした。この場合は、100vw(ブラウザ幅全体)を使いましょう。また、表示位置がbodyのスタイルに影響されているので、その分の修正が必要になります。ここではcalcをつかって、bodyの1200px幅からブラウザ幅を引いて2で割る計算をしています。
.box1 {
width: 100vw;
height: 800px;
position: relative;
left: calc((1200px - 100vw) / 2);
background: url(https://dummyimage.com/600x400/000/fff&text=width+3+：+height+2) no-repeat;
background-size: cover;
}
こでで横は全体幅になりました…が、縦の比率があっていない状態ですね。このバックグラウンドの画像が3:2の比率なので、それをうまく利用したいと思います。次は比率の計算です。懐かしいですね。
100：ｘ ＝ 3：2 3ｘ ＝ 100＊2 x ＝ 100＊2／3
ということで、これを高さに適用します。calcを使って
.box1 {
width: 100vw;
height: calc(100vw * 2 / 3);
position: relative;
left: calc((1200px - 100vw) / 2);
background: url(https://dummyimage.com/600x400/000/fff&text=width+3+：+height+2) no-repeat;
background-size: cover;
}
これで比率固定できました！ あとはbodyの幅が1200px以下になったときの設定を残すのみ。
幅1200px以下～スマートフォン対応まで
レスポンシブで使われるもののひとつにメディアクエリというものがあります。画面幅や高さが一定以下（もしくは以上）の場合に適用させるスタイルを書いていきます。今回では1200px以下になったときにbodyの設定を変更するように記述します。
@media screen and (max-width:1200px) {
/* 画面サイズが1200px以下 */
body {
width: 90vw;
}
}
1200px以下になったら、bodyサイズは90vw（ブラウザ全体幅の90％）に設定しました。さらに、box1のleft部分も変更が必要です。1200pxだったbodyが90vwになったので、
@media screen and (max-width:1200px) {
/* 画面サイズが1200px以下 */
body {
width: 90vw;
}
.box1 {
left: calc((90vw - 100vw) / 2);
}
}
としました。もちろん、中身を計算してしまって
left: -5vw;
としても問題はありません。さて、これを組み込むと
うまく表示されました！
次にスマートフォン対応…というところなのですが、実はこの状態で対応完了になっています。というのもレスポンシブを意識してスタイルを書いていったので、スマートフォンのサイズになってもちゃんと比率固定で表示されるようになってます。ブラウザ幅いっぱいに表示される＝スマホのそれぞれの画面サイズでの一杯に表示される、ということです。
まとめ
css3になって、calcを使っての計算やvh、vwといった単位のおかげでだいぶんスマートなコーディングができるようになったと思います。縦横比の固定は動画や画像など幅広いところでつかうことになると思うのでうまく活用してみてください。最後に今回のコードを載せておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>box</title>
<link rel="stylesheet" href="">
<style>
body {
width: 1200px;
margin: 0 auto;
}
.box1 {
width: 100vw;
height: calc(100vw * 2 / 3);
position: relative;
left: calc((1200px - 100vw) / 2);
background: url(https://dummyimage.com/600x400/000/fff&text=width+3+：+height+2) no-repeat;
background-size: cover;
}
p {color: black;}
@media screen and (max-width:1200px) {
/* 画面サイズが1200px以下 */
body {
width: 90vw;
}
.box1 {
left: -5vw;
}
}
</style>
</head>
<body>
<div class="box1"></div>
<p>縦横比固定！</p>
</body>
</html>