NARUMASA CREATIVE DESIGN
Copyright © narumasa.com
All rights reserved.
13
2月
2022
CSS

レスポンシブでコーディングするときにdivタグを横3つ並べるのに簡単な方法とは

レスポンシブデザインでコーディングする時って、横3列とか4列とかでボックスを並べると思いますが、正直計算して並べるのって、面倒だと思いません?

最近のブラウザで使えるCSS3では何と計算ができます!

普通レスポンシブで横3列に並べる時って、

.col3{
width:33.3333%;
}

こんな感じですよね。
ここにさらにボックスの両端を10pxずつmarginをあけたい時ってどうしますか?
【width:33.3333%-20px】とかできたら最高ですよね!

そこで使えるのが、【calc】です。

.col3{
width:calc(100%/3-20px);
}

こんな便利な指定ができます!かなり便利です。

ただ、未だに使っている人が多いらしい【AndroidOS 4.2】などは対応していません。もちろんIE8も。まあいつものことですが。
Webkitの指定などもしておいた方がいいですね。
Webkitの指定を入れると、

.col3{
width:-webkit-calc(100%/3-20px);
width:calc(100%/3-20px);
}

こんな感じです。

SafariやGoogle Chromeででフォントをさらにきれいに表示する方法
【CSS】きれいにページごとにプリントする方法