CSS

リキドデザインに欠かせないCSSで計算ができるcalc

2017.08.18

数字

画面の表示領域に合わせてレイアウトが変化するといえばレスポンシブデザインが思い浮かぶかもしれませんがリキッドデザインも画面の表示領域に合わせてレイアウトが変化します。リキッドデザインなどの可変レイアウトに重宝するのがCSSで計算ができるcalc()ファンクションです。

calcの使い所

calcは様々なプロパティの単位に使用します。

アイテムを3等分にしたい場合

calcは可変レイアウト内のアイテムを3等分にしたい場合などに便利です。

.item{
  width:calc(100% / 3);
}

3は割り切れませんので可変の場合ちょっとした工夫が必要になるのですがcalcを使えば、そんな煩わしいことも必要ありません。

固定サイズと可変サイズが混合している

calcは固定サイズと可変サイズが混在している場合にも便利です。例えばCMS化されたコンテンツのヘッダー等でしょうか。

ロゴは画像なので固定幅したい!しかしグローバルナビはカテゴリーを出力するので可変にしたい!そんな問題もcalcで解決です。

.gnav{
  width:calc(100% - 200px);
}

タブレット時のサイドバーとコンテンツに

レスポンシブのタブレットレイアウト時、サイドバーはPCと同じサイズで固定したいのだけれども、コンテンツエリアは可変にしたい!そんな場合にも便利ですよね。

対応ブラウザ

CSSだけで便利なことができるとき、ことごとくIEに足を引っ張られてきましたが、calcはその心配もありませんIEも9から対応しており現在の主力ブラウザは全て対応しています。

対応ブラウザのことを気にしなくて使えるのはいいですね!

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する