画像の下にCSSで正方形を置く

画像の下にCSSで正方形を置く方法です｡完成はこちら｡

画像の下に正方形が並んでいます｡ここに画像を置くと､印象的になります｡ここではなしにしていますが､デザインに合わせた画像を置くといいでしょう｡

HTML

<div class="mv">
<figure><img src="images/cloud.JPG" alt="画像"></figure>
</div>
<div class="box">
<div class="item">正方形</div>
<div class="item">正方形</div>
<div class="item">正方形</div>
<div class="item">正方形</div>
<div class="item">正方形</div>
</div>

画像と正方形をそれぞれ書いています｡簡単なHTMLです｡とくに迷うことはありません｡

CSS

.mv figure img {
  height: 400px;
}

.box {
  display: flex;
  gap: 1px;
}
.box .item {
  width: calc(20% - 1px);
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(161, 161, 161);
}
.box .item::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.boxのdisplay: flexで正方形を横並びにします｡gap:1pxで正方形の間隔を空けています｡

.itemにたいして､width: calc(20% - 1px)で正方形の大きさを指定｡display: flex､justify-content: center､align-items: centerで文字を中央に置きます｡

あとは疑似要素で::beforeを書きます｡

SCSS

.mv{
figure img{
height: 400px;
}
}

.box{
display: flex;
gap: 1px;
.item{
width: calc(100% / 5 - 1px);
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;;
background: rgb(161, 161, 161);
&::before{
content: "";
display: block;
padding-top: 100%;
}
}
}

書いていることは同じ｡形式が違います｡SCSSの方が､分かりやすいですね｡僕は基本的にSCSSを書いています｡CSSはSCSSをコンパイルしたものを書いています｡

さいごに

今回は画像の下にCSSで正方形を置く解説をしました｡ここでは正方形にしましたが､長方形でも問題ないと思います｡もちろん､CSSを書き直す必要がありますが｡メインビジュアルの周りで使えそうですね｡

興味のある方はお試しあれ｡バックアップを取ってから対応しましょう｡

おしまい！