次のような正方形を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>
<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%;
}
.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