【授業メモ】レスポンシブデザイン基礎2

％指定でのレイアウト　フルードグリッド

■フルードグリッド

フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン（Fluid Design）」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します。

■％指定の注意点　

割り切れない数字の場合、

％は第二位まで記入し、必ず切り捨てる。9であろうが切り捨てる。

切り上げると、合計が100%超えてしまう恐れがあるため。

例）width: 33.33%;

％指定の場合は、親要素の何％かで考えればよい。基準となる親要素は、pxで考える必要がある。カンプを作る際などにどうしてもpxは必要。基準の大きささえわかれば、割合で指定するのは簡単。

■CSSで計算式を可能にするcalc()ファンクション

https://w3g.jp/blog/css3_calc_function

http://qiita.com/mrd-takahashi/items/85764ae20340adb96ee9

四則演算できるcalc！　＋－＊/の記号の両隣は絶対に半角スペースが必要