KD Design Cafe

まずはいつも通り(?)数値をpx等で指定しながら制作していきます。
その後、完成したら数値をパーセント等の割合で指定していき変化できるようにしていきます。
(基本的にはデザイン制作の段階でPC用、スマホ用etcのレイアウトは決めておきます。)

まずはデザインの切り替えポイントを決める!!
PC、タブレット、スマートフォンなどで表示する際に画面幅でCSSを切り替えていくので、その切り替えるポイントを決めておきます。

メディアクエリを使う!!
メディアクエリを使うことで画面幅でCSSを切り替えることが可能に!!
※古いブラウザでは対応していないものもあるので注意

切り替えポイントを決めたら実際にCSS,HTMLをいじっていきます。
前述したように％を使ったりimgタグのwidth,hight属性を抜いてCSSで設定したり、max-width,min-widthを使ったり･･･
必要な部分を修正･書き足し、不要な部分は削除したり非表示にしたり･･･

％でBOXの大きさを指定する場合に基準となるのは親BOXの大きさになるので注意!!

例えば親BOXの幅が1000pxで、その中に200pxの子BOXが5つ横並びになっている場合。子BOXの％を出すには･･･
親BOX＝1000px
子BOX＝200px
200÷1000=0.2×100=20％となります。

割り切れない例
親BOXの幅が900pxで、その中に300pxの子BOXが3つ横並びになっている場合。子BOXの％を出すには･･･
親BOX＝900px
子BOX＝300px
300÷900=0.333333･･･×100=33.333333･･･％となります。

ブラウザによって小数点以下第2位から第15位まで読むそうです。
※％やpxの数値の丸め方は各ブラウザによって変わるので注意!!

CSSをHTMLで切り替えるorCSS内で切り替えるのです がどちらも表示は変わりません。
ただ、HTMLで切り替えるとHPを表示させたときに毎回、複数のCSSファイルを読み込むことになります。
CSS内で切り替えると読み込むファイルが一つになります。
@importにも同じことが言えます。