CSSで作る片側だけ可変する背景

こんにちは、中村です。
今回はCSSの話です。
フロントエンドの作業はデザインを下にマークアップとスタイルを作っていくところから始まります。
そこで、最近よく作るレイアウトの組み方をご紹介したいと思います。

片側だけ可変する背景

記事のタイトルにもありますが、片側だけ可変する背景を作ってみたいと思います。
単純にコンテンツ幅だけ、ウィンドウ幅いっぱいにするのであればwidth: 100%;にしたら良いですが、
コンテンツ幅＋片方だけウィンドウ幅に合わせて可変するにはどうしたら良いでしょうか。

width: 95%;といった、ウィンドウ幅に対しての割合を設定しただけでは左側の位置も変わってしまうのでダメですね。

95%

では、DEMOをみていきましょう。

コンテンツ幅は固定値なので単位はpxになります。
右側の部分は可変なので、単位は％（もしくはvw）になります。背景が単色なら別々の要素に分割しても良いですが、写真やテクスチャなどの画像を敷きたい場合は一つの要素で作りたいです。

コンテンツ幅（px）

可変（%）

ではどうするか。

calc関数を使えば簡単にできます。

width: calc(　可変する幅　＋　コンテンツ幅　);

可変する幅はウィンドウ幅からコンテンツ幅を引いた分＝左右の余白。片側だけなのでそれを半分にすれば良いですね。というわけでwidthはこうなります。（コンテンツ幅を1152pxとしています）

width: calc((100% - 1152px) / 2 + 1152px);

計算式がわかりやすいようにこう書いていますが、
(100% - 1152px) / 2 の部分は(50% - 576px)と書くと「 / 2 」の分を減らせます。

可変する幅は基本的に変動しないと思いますので、mixinなどにしておくと便利だと思います。