色々とCSSで正方形を作る方法

CSSで正方形にし､文字を中央に置いてみます｡

完成

何てことはない､図形です｡水色系ですね｡

HTML

<div class="box">テキスト</div>

難しくない､HTMLですね｡クラス名はboxです｡分かりやすいものでいいです｡絶対ではありません｡

SCSS

.box{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
background: aqua;
&::before{
content: "";
padding-top: 100%;
}
}

以下のコードで図形の中央に文字を置くことができます｡

• display: flex;
• justify-content: center;
• align-items: center;

CSS

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  background: aqua;
}
.box::before {
  content: "";
  padding-top: 100%;
}

画像はどうなるか

画像も正方形にします｡

HTML

<figure class="s-box"><img src="images/cloud.JPG"></figure>

CSS

.s-box img{
width: 200px;
height: 200px;
object-fit: cover;
}

object-fit: coverで､画像のひずみがなくなります｡ポイントはimgに向けて書くこと｡s-boxに向かっては､上手くいきません｡

背景画像として

背景画像として､正方形にします｡

HTML

<div class="pic"></div>

空要素になります｡

CSS

.pic{
background: url(../images/sakura.JPG) no-repeat center center/cover;
width: 200px;
height: 200px;
}

backgroundはショートバンドです｡幅と高さを､widthとheightで決めます｡これで正方形になります｡これが1番､簡単かもしれないですね｡

さいごに

他にもありそうですが､僕が知っている限りのことをお伝えしました｡どれも簡単｡シーンに応じて使うといいですね｡