位置調整についてレスポンシブでも対応させれるようにするには

Question

位置調整について

今まではマージンやポジションなどで位置調整をしているのですが、なるべく位置調整は％などで位置調整すればいいと考えています。％でもレスポンシブで限界はあると思うのですが、pxなどよりかはレスポンシブが楽になるのではと考えています。％などでの場所を調整するやり方がありましたら教えて欲しいです。

何かアドバイスや、サイトの紹介などお願いいたします。

ご回答のほどよろしくお願いいたします。

Comments

[miyabi_pudding]

想定している、レイアウト、
HTML、CSSのコードの一例でいいので記載をお願いします。
やりたいことによって、様々な方法がありますので、
やりたいことの一例くらいは出していただかないと、回答しようがありません。

Answer 1

コンテナの幅に合わせてサイズが伸縮するように設定したいものは
原則として全て%で指定するのがレスポンシブです。
（※相対的にサイズが変化する単位であれば良いので場合によってはem、rem、vw、vh等の単位を使うこともあります）

％などでの場所を調整するやり方

• width：親要素のcontent-boxの幅を基準に%サイズを計算
• height：親要素のcontent-boxの高さを基準に%サイズを計算
• marign/padding：親要素のcontent-boxの幅を基準に%サイズを計算（※上下左右全て親要素の幅が基準）
• left/right：親要素のpadding-boxの幅を基準に%で位置を計算
• top/bottom：親要素のpadding-boxの高さを基準に%で位置を計算

プロパティによって%サイズの基準となるものが上記のように異なるので、
その点に注意しながらpx→%の単位変換をした上でレイアウトすれば、
どんなレイアウトでも基本的にレスポンシブになります。

ただ、場合によっては「ボックス幅は可変だけど、paddingは固定px」であるとか、
「横方向のmarginは可変だけど、縦方向のmarginは固定px」といったような指定をすることもあるので
必ずしも全てのサイズ指定を%等の相対単位にしなければならないというわけでもありません。
その辺はデザインに合わせて適宜選択してください。

Answer 2

既に良い答えが出ているので参考程度ですが・・・

私は「px」と「em」で調整することが多いですが、
「<span style='float:left;'>xxx</span>」で左寄せ(右寄せ)で調整すると便利なこともあります。