Blog気になるコト

2016年10月31日 月曜日 投稿者:丹羽 岳人

スマホサイトで便利!片方可変のボックスレイアウトの作りかた

片方可変レイアウト

こんにちは。丹羽です。
スマホサイトでは画面の幅がデバイスによってバラバラです。
より少ないCSSコーディングで、片方のボックスが固定サイズ、もう片方は可変(リキッド)にしたいときが多々あります。
今までの作りではネガティブマージンを指定してなど、いろいろ方法がありましたが、
CSS3にあるcalc()ファンクションを使うと超便利!

CSSとHTMLのサンプルコードはこんな感じです。
コード