CSS レスポンシブな正方形を作る方法

画面の縮小に合わせてレスポンシブな正方形を作る方法を説明した記事になります。

説明の基本となるHTMLソース

この記事でご紹介している全ての図形の HTML ソースはこちらです。こちらに CSS を当てて図形を変形させていきます。

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

width と padding でレスポンシブな正方形

width と padding-bottom を同じ比率にすると正方形ができます。

.square {
  background: lightskyblue;
  width: 50%;
  height: 0;
  padding-bottom: 50%;
}

長方形(横長)の場合

padding-bottom を少なくすると横長の長方形ができます。

.square {
  background: lightskyblue;
  width: 60%;
  height: 0;
  padding-bottom: 30%;
}

長方形(縦長)の場合

padding-bottom を多めにすると縦長の長方形ができます。

.square {
  background: lightskyblue;
  width: 30%;
  height: 0;
  padding-bottom: 60%;
}

vw (viewport width )でレスポンシブな正方形

vw は viewport width の略です。ビューポート(画面)の幅に対する割合で計算されます。ビューポート幅が 1000px の時に要素を 100px で表示させたい場合は 10vw となります。こちらの数値を width と height の両方に指定します。また、vw はビューポートの縮小拡大でどこまでも小さく、大きくなるので以下のプロパティを追加し大きさを制御します。

.square {
  background: limegreen;
  width: 10vw;
  height: 10vw;
  min-width: 100px;
  min-height: 100px;
  max-width: 200px;
  max-height: 200px;
}

まとめ

まだ他にも方法があるので、随時追加していきます。