CSSで正方形の背景を作るサンプル

CSSで正方形の背景を作るサンプルを簡単に作るコードを公開したいと思います。
サンプル

課題

widthやheightで指定するのでなく、親要素に対し幅いっぱいつまり可変なwidthとheightにしたい。

コード

早速コードを書きます。

HTML

<div class="square">
</div>

CSS

.square{
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: #eee; /* 好きな色に */
}

これだけでOKです。ポイントとしてはwidthとpadding-topを同じ値にする事です。
なお、padding-topはpadding-bottomにしても良いです。

応用

この正方形の背景の中に文字を入れたい時は、position:absoluteを使っていきます。

HTML

<div class="square">
  <p class="p-center">SQUARE</p>
</div>

CSS

.square{
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: #eee; /* 好きな色に */
}
.p-center{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

こんな感じで、めちゃ楽勝です。