Webサイトで上位BOXの幅に応じて大きさが変化する正方形を描きたい。

前提・実現したいこと

Webサイトで上位BOXの幅に応じて大きさが変化する"正方形"を描きたい。

divで作ったWrapper内にあるdivで作った正方形(50%ずつで左右に２つ並べる予定です)の大きさを画面幅に応じて変化させたい。

widthを50%にすると横幅は実現できますが、やはり縦幅が上手くいきません。

該当のソースコード

html
1<body>
2  <div id="wrapper">
3    <div id="waku_l">
4      <中略>
5    </div>
6    <div id="waku_r">
7      <中略>
8    </div>
9  </div>
10</body>

css
1#wrapper{
2	width: 90%;
3	margin: 0 auto;
4	background-color: black;
5}
6
7#waku_l{
8	position:relative;
9	float: left;
10	width: 50%;
11	background-color: red;
12}
13
14#waku_r{
15	position:relative;
16	float: right;
17	width: 50%;
18	background-color: blue;
19}
20

試したこと

before属性を使うなどググって出てきたものは一通り試してみました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答3件

paddingで親の幅に応じて高さを確保する「パディングハック」を使えば可能です。

CSS
1#waku_l::before,
2#waku_r::before {
3	content: "";
4	display: block;
5	padding-top: 100%;
6}

今のコードに上記を足せば、正方形を維持しながら拡大縮小させることができます。
margin/paddingに%値を設定すると、上下・左右共に「親要素の幅」を基準にサイズが決まる仕様になっています。なので#waku_lと#waku_rに直接padding-top:50%を設定しても同じことはできるのですが、それだと横に並べたい正方形の数が変わるたびにpaddingの数値を変更しなければならず、面倒です。::before疑似要素を使って高さを確保しているのはそのための対策です。

::before疑似要素にpaddingを設定する形にすれば、自分自身の幅を基準として「正方形」とか「1:2」とか「1:3」とかの縦横比を常に一定に保つことが出来ます。「親要素の幅」ではなく「自分自身の幅」を基準に高さを設定しているようにできるということですね。

なお、パディングハックは要素の中身がpaddingで満たされてしまいますので、
背景色や背景画像をつけたいだけなら良いですがその中にコンテンツを入れようとした場合には絶対配置を使って上から被せるしか方法がありません。そこだけが注意点です。

投稿2018/08/01 17:11

aKusano

総合スコア3763

#wrapper の width が絶対数値なら以下のcssでいけそうですね。

css
1#wrapper{
2    width: 300px; 
3    height: 300px; 
4
5    margin: 0 auto;
6    background-color: black;
7}
8
9#waku_l{
10    position:relative;
11    float: left;
12    width: 50%;
13    height: calc(50% - 0px);  //これがミソ
14    background-color: red;
15}
16
17#waku_r{
18    position:relative;
19    float: right;
20    width: 50%;
21    height: calc(50% - 0px);
22    background-color: blue;
23}

どーしてもwidthをパーセンテージで指定したいのであれば、javascriptも併用すれば・・・

css
1#wrapper{
2    width: 50%;
3    margin: 0 auto;
4    background-color: black;
5}
6
7#waku_l{
8    position:relative;
9    float: left;
10    width: 50%;
11    height: calc(50% - 0px);
12    background-color: red;
13}
14
15#waku_r{
16    position:relative;
17    float: right;
18    width: 50%;
19    height: calc(50% - 0px);
20    background-color: blue;
21}

jquery
1$('#wrapper').css('height',$('#wrapper').css('width'));

どちらのパターンも正方形のwrapperに半分の大きさの正方形 waku_l と waku_r が入るのを確認しました。

投稿2018/08/01 12:49

hope_mucci

総合スコア4447

ベストアンサー

#waku_l と #waku_r の内側に <div> 1個足さなければいけませんが、CSS だけで実装できます。

padding-top をパーセントで指定すると、要素の横幅をパーセント指定した大きさになるのを利用します。
今回の場合は float してる関係で #wrapper の横幅をパーセント指定した大きさになるので 50% とします。

html
1<div id="wrapper">
2  <div id="waku_l">
3    <div class="waku_inner">
4      <中略>
5    </div>
6  </div>
7  <div id="waku_r">
8    <div class="waku_inner">
9      <中略>
10    </div>
11  </div>
12</div>

css
1#wrapper{
2    width: 90%;
3    margin: 0 auto;
4    background-color: black;
5}
6
7#waku_l{
8    position:relative;
9    padding-top: 50%; // #wrapper の横幅の半分の大きさ
10    float: left;
11    width: 50%;
12    background-color: red;
13}
14
15#waku_r{
16    position:relative;
17    padding-top: 50%;
18    float: right;
19    width: 50%;
20    background-color: blue;
21}
22
23.waku_inner {
24    position: absolute;
25    top: 0;
26    left: 0;
27}