はじめに
レスポンシブ対応のウェブページを作っているときに、画面幅に合わせて可変する正方形が必要になったので、調べて実装しました。
今後、使い回しが効きそうだったので備忘録として残しておきます。
固定サイズの正方形を作る
<divclass="square"></div><style>.square{width:100px;height:100px;background-color:red;}</style>こうですね。
わかりやすく赤色の正方形です。
横方向を画面幅に合わせて可変させる
<divclass="square"></div><style>.square{width:50％; <=変更しましたheight:100px;background-color:red;}</style>この状態で、画面幅をいじると、四角形の横幅が変化します。
正方形にする
<divclass="square"><divclass="inner"></div></div><style>.square{width:50%;height:100px;background-color:red;}.inner{width:0px;height:0px;}四角形の中に、高さ・幅とも０のdivを入れました。
この中に入れたdivにpadding-bottomを設定します。
.inner{width:0px;height:0px;padding-bottom:100%;<=追加}marginやpaddingを%で指定する場合、親要素の幅から計算されます。
topやbottomでも親要素の幅が基準になります。
なので赤い四角形の幅が５００pxだった場合、padding-bottom １００％も５００pxになるわけです。
最後に赤い四角形の高さ指定を外してあげれば、完成です。
完成形
<divclass="square"><divclass="inner"></div></div><style>.square{width:50%;background-color:red;}.inner{width:0px;height:0px;padding-bottom:100%;}画面幅に合わせて可変する正方形の完成です。
