Travelogue

CSSで画面を縦に分割して全画面表示する

公開日：

ウィンドウサイズに追従してコンテンツや背景画像なども伸び縮みするようなデザインが主流になっている感のある昨今ですが、下記のようにウィンドウの左右を縦に分割し、それぞれの横幅はウィンドウ幅に対し50%：50%、縦はウィンドウに対し100%で全画面表示のようにするにはどんなCSSを書いたらいいのか考えてみました。

ウィンドウが横長になっても大丈夫。

ウィンドウが縦長になっても大丈夫。

今回のポイントは（横50%×縦100%）＋（横50%×縦100%）＝（横100%×縦100%）というところです。
HTMLはできるだけシンプルにしたいので、空のdivを置く方法は無しで下記のようにしました。

<div id="box1">
<h1><img src="images/logo.png" alt=""></h1>
</div>

CSSは以下の通り。他の方法もあるでしょうが、あくまでひとつの方法として。

html,body {
    height: 100%;
}
#box1 {
    width: 50%;
    height: 100%;
    margin: 0px 0px 0px 50%;
}
#box1::before {
    content: '';
    width: 50%;
    height: 100%;
    background: url(images/back1.jpg) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
}
#box1 h1 {
    position: relative;
    height: 100%;
}
#box1 h1 img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

box1のbeforeで幅50%×縦100%の箱を作ります。これをpositionで画面左側に配置し、ここに背景画像を指定。
背景画像はbackground-sizeのcoverという値がとても使い勝手が良くて便利です。これさえ使えれば難しいことを考えなくてもボックスの長辺が横でも縦でもうまく調整してボックス内を背景画像で埋めてくれます。

box1自体は横50%縦100%を指定し、beforeの部分に重ならないように左側50%のスペースはmarginで空けておきます。
ここで縦100%を指定しても、そのままだとウィンドウに対してちゃんと100%にはなってくれません。
これは、htmlとbodyというふたつのタグの縦がデフォルトではautoという値がセットされているためです。なのでhtmlとbodyのheightにも100%を指定しておきます。

box1の中でロゴの画像を上下左右中央に配置します。まずはh1の縦も100%とします。h1はブロック要素なのでもともと横は100%に伸びてますのでwidthは特に書かなくてもいいです。
imgをpositionで絶対配置する基準にするために、h1にpositionのrelativeを指定しておきます。
imgに指定してあるposition、top、left、right、bottom、marginは、ボックス内で上下左右中央配置するための簡単なテクニックです。

ところで今回はボックスのheightを100%としてパーセント指定していますが、vhという単位で指定しても同じような結果を得ることができます。ただしこの単位は対応ブラウザの面で配慮が必要で逆に面倒だったりするので今回は使いませんでした。

また、ロゴ画像を縦中央にするため今回はpositionを使っていますが、flexboxで中央にする方法でもいけます。
ただしこれを使う場合は今のところベンダープレフィックスも書いておいたほうが良さそうで、そうなると逆にコードが長くなったりするので、まだ無理して使わなくてもいいかなと個人的には思ってます。

Pagetop