CSS3のcalc()でモーダルウィンドウを左右真ん中表示させる【CSS】

CSS Values and Units Module Level 3 で定義されているcalc()関数ですが、Sassとか使えば普通に演算できるし、calc()単体でイマイチ使い道が分からずにいたのですが、ふとモーダルウィンドウの実装の時に使えるかも、と思い試してみました。

calc()とは

そもそもcalc()ですが、サイズや形状の値を計算して、その計算結果を値として利用することができます。ブラウザのサポートもまあまあな感じですが、Androidでは未対応です。

例

selector {
	width: calc(300px - 20px);
}

上記のようにすると、結果として280pxが値として利用することができます。これだけだとSass等を使えばわざわざcalc()を使う必要もありませんが、calc()の凄いところは単位が異なる場合でも計算できる点です。

selector {
	width: calc(100% - 20px);
}

単位違いの計算は、さすがのSass先生でもコンパイルエラーが起こってしまいますので、calc()の便利なところです。

モーダルウィンドウの実装でcalc()を実装する

モーダルウィンドウの実装には、基本的には以下のようなことをJSで実装します。

クリック時にモーダルウィンドウとオーバレイの表示
モーダルウィンドウを左右真ん中表示させる

今回やるのは、calc()で算出した値をleftプロパティの値として、「2.モーダルウィンドウを真ん中表示させる」です。

下記図を例としますが、緑の枠の値が分かれば、フレーム部分（下記図だと「モーダルフレーム」と書かれた白の部分）を真ん中に表示させることができます。この算出方法は、ウィンドウの幅と要素の幅をそれぞれ半分にした値を差し引いた値をleftプロパティの値に指定します。赤の矢印と青の矢印を差し引いた値が緑の枠の値になります。

JS（というかjQuery）では次のようにすることが多いです。ちなみにHTMLは次のようにします。

<div id="overlay"></div>
<div id="modal">
<span>モーダルのフレーム</span>
</div>

var w = ($(window).width()/2) - ($('#modal').width()/2);
$('#modal').css({
	'left' : w + 'px'
});

calc()を使うと上記のJS実装がCSSだけでできるようになります。上記と同じようなことをcalc()を使ってやるには次のようにします。(#overlayの部分は関係ありませんので、#modalの部分だけです。)

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	display: none;
}

#modal {
	width: 80%;
	background-color: #fff;
	border-radius: 10px;
	position: absolute;
	top: 50px;
	left: -webkit-calc(50% - 40%);
	left: calc(50% - 40%);
	display: none;
}

デモページ※：IE9以上、Safari6以上、Opera15以上、Firefox20以上、Chrome26以上、iOS Safari6以上

calc()のとこの解説ですが、50%というのは、ウィンドウの幅が100%となりますので、その半分の値となります。40%は#modalの幅が80%なので、その半分の値となります。それらを引いた値がleftプロパティの値となりいい感じにまん中に表示されます。(%同士の計算なので最初から10%を指定しておけばいい話でもあるのですが・・・)

上記の例は、#modalの幅が%指定の場合になりますが、#modalの幅がpxの場合でも同じです。#modalの幅の半分の値を差し引くだけです。次の例は#modalの幅が280pxの場合です。

#modal {
	width: 280px;
	background-color: #fff;
	border-radius: 10px;
	position: absolute;
	top: 50px;
	left: -webkit-calc(50% - 140px);
	left: calc(50% - 140px);
	display: none;
}

デモページ※：IE9以上、Safari6以上、Opera15以上、Firefox20以上、Chrome26以上、iOS Safari6以上

以上が今回のネタでした。いい感じに真ん中表示させるやり方は、marginプロパティを使ったりしてもできるのですが、高さが決まっていなくて、幅だけが決まっている場合は、今回のようにcalc()を使ってCSSだけでもできるということでした。

E-riverstyle Vanguard