CSS「calc()関数」でフルスクリーン（縦横全画面）の上下に絶対値のスペースを空ける。レスポンシブ対応

2020年1月8日

上下に絶対値のスペースが空いたフルスクリーン（全体画面）のサイトを実装するためのCSSを試してみました♪

デモページ

今回使ったのは「calc()関数」というやつです。
CSSで加算、減算、乗算、除算ができるみたいで、今回のようにスペースを確保する場合は、100%から減算する感じになります。

width: calc(100% - 60px);
height: calc(100vh - 200px);

今回は上下に100pxずつ（計200px）と右側に60pxの絶対値のスペースを確保するため、100%からwidthは60px、heightは合計200pxを引いています。

工夫次第でいろいろ使えそうなので、是非使いこなしたいですね♪