プログラミング

CSSで高さを指定せずに正方形を作る方法

次のような正方形をCSSで作る方法を紹介します。

See the Pen
RwbrgGQ
by KUBO (@KUBOGEN)
on CodePen.

HTML
<div class=”container”>
 <div class=”square”></div>
 <div class=”square”></div>
 <div class=”square”></div>
 <div class=”square”></div>
</div>
CSS
.container {
 width: 600px;
 display: flex;
 flex-direction: row;
}
.square {
 width: 100%;
 background: red;
 margin-right: 20px;
}
.square:before {
 content: “”;
 display: block;
 padding-top: 100%;
}

ポイントとなるのは、before属性に「padding-top: 100%;」を指定すること。

そうすることで、親要素の幅を取得するため、正方形になります。

今回の場合だと、squareクラスのdiv要素のbefore属性にpadding-topを指定しています。

幅が600pxのcontainerにsquare4つを横並びにしており、それぞれの正方形の右マージンを20pxずつ取っているので、squareの幅は130pxになります。(600px – (20px × 4) / 4)

before属性の「padding-top: 100%;」はsquareの幅を高さとして取得するので、高さも130pxとなります。

Leave a Comment