読者です 読者をやめる 読者になる 読者になる

レスポンシブで縦方向の間隔をコントロールする

レスポンシブデザイン

padding-topでアスペクト比をコントロールする

img要素の場合はwidth:100%とすると、自動的にアスペクト比を維持してくれますが、他の要素の場合はheightの代りにpadding-topを使うことで、アスペクト比をコントロールすることができます。

 

アスペクト比を求める

padding-top = 高さ ÷ 幅 × 100%

 

幅400px、高さ300pxの場合

300px ÷ 400px × 100% = 75%

padding-topを75%とすると、高さは幅の75%でコントロールされます。

 

上下のmargin、paddingは親要素の横幅を基準にする

親要素の横幅を基準にすることで、ウィンドウの幅が広い時には広く、狭い時には狭くというように間隔を調整することができます。

 

上下のmargin(%)=margin ÷ 親要素のコンテンツ幅 × 100%

上下のpadding(%)= padding ÷ 親要素のコンテンツ幅 × 100%