【CSS】レスポンシブサイトでDIVボックスの高さを自動調整するには？
2016/4/13
Webデザイン
レスポンシブサイトをじっくり作っていこうと思った際に、前々から気になってた部分をきちんと調べてみました。
レスポンシブサイトでは、画面のサイズに応じてページのサイズが変化するわけですが、たとえば、横幅600pxの画像があったとして、こいつを横幅600px未満の画面で表示すると、画像がはみ出してしまい、横スクロールが発生してしまうわけです。
これを解決する際には
img {
max-width:100%;
height:auto;
}
max-width:100%は、「画像の横幅を（画面の横幅に対して）100%より大きくするな」という命令です。
こうしておくことで、画面の幅が画像よりも小さくなったときに画像が画面からはみ出さない（100%より大きくならないように）自動的に縮んでいきます。
ただ、幅だけが縮んでしまうと縦細の画像になってしまいますから、height:autoとしておくことで、高さが画像の幅に合わせた比率で自動的に調節されてくれます。
これで画像はOKなんですよ、画像はね...
これをたとえば、DIVボックスに対して行いたい。
<div id="header">
<h1>My Homepage</h1>
</div>
こんなソースがあったとして、このヘッダーに
#header {
width:800px;
height:300px;
background-image:url(images/bg.png);
}
なんて設定をしたとしましょう。
ヘッダー部分に背景画像付のボックスが出来上がりました。
でも、この方法だと、横幅を800pxで固定しちゃってますから、ウインドウ幅に合わせて伸縮しません。
そこで、横幅を100%に変えてあげると...
#header {
width:100%;
height:300px;
background-image:url(images/bg.png);
}
ヘッダーの横幅がページ幅に合わせて伸縮するようになります。
でもでも、これだと背景画像がずれちゃったりするので...
#header {
width:100%;
height:300px;
background-image:url(images/bg.png);
background-size: cover;
}
background-size: cover;
を追加します。これを追加すると、背景画像が表示領域を埋め尽くすように拡大縮小をしてくれるので、画面の幅に合わせて背景画像も自動調整されます。
さて、ここで出てくる問題が「高さ」
この高さは画像の時のように「height:auto」が使えません。
画像の場合は、画像そのものに「幅」と「高さ」が存在していますから、その時点で「縦横比」が存在するわけですね。
ですが、<div>タグで作られるボックスの幅はもともと「100％」高さは「0」です。
高さは内容の量によって自動的に可変します。
ですので、ここに縦横比は存在しないわけですよね。なのでheight:autoは使えない。
それじゃ、どうするか、ってのが今回の話題なわけですが、この時点でえらい長くなってしまったので、続きは明日のエントリーにて（苦笑