正方形のレスポンシブ枠を作成する - CSS

CSSで正方形のレスポンシブ枠を表現するコードを紹介します。

概要

ページ内に正方形のレスポンシブ枠を表示したい場合があります。
正方形の枠を表示する場合には、aspect-ratio プロパティを利用して縦横幅を固定して表示する方法が実現が容易です。

書式

aspect-ratio: 1/1;

正方形で縦横比を同じにするため、1/1 とします。aspect-ratioの動作の詳細はこちらの記事で紹介しています。

実装例

コード

以下のHTMLファイル、CSSファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ResponsiveSquareFrame.css" />
</head>
<body>
  <h2>正方形のレスポンシブ枠のデモ</h2>

  <div class="SquareFrame1"></div>

  <hr/>

  <div>
    <div class="Frame1">
      <div class="SquareFrame2">枠B-1です。</div>
      <div class="SquareFrame2">枠B-2です。</div>
      <div class="SquareFrame2">枠B-3です。</div>
      <div class="SquareFrame2">枠B-4です。</div>
      <div class="SquareFrame2">枠B-5です。</div>
      <div class="SquareFrame2">枠B-6です。</div>
    </div>
  </div>
</body>
</html>

.Frame1 {
  background-color:#b6d3db;
  padding:2rem 2rem 2rem 2rem;
  display:flex;
}

.SquareFrame1 {
  width: 240px;
  aspect-ratio: 1/1;
  border: 2px solid #ff6a00;
}

.SquareFrame2 {
  margin:0 1rem 0 0;
  flex:1;
  aspect-ratio: 1/1;
  border: 2px solid #0094ff;
  background-color:white;
}

解説

以下のCSSでは幅が25%の正方形の枠を表示します。

.SquareFrame1 {
  width: 25%;
  aspect-ratio: 1/1;
  border: 2px solid #ff6a00;
}

以下のCSSでは正方形の枠を表示します。fle:1を設定していますので、複数個を配置した場合は横に並びます。

.SquareFrame2 {
  margin:0 1rem 0 0;
  flex:1;
  aspect-ratio: 1/1;
  border: 2px solid #0094ff;
  background-color:white;
}

枠部分のHTMLは以下です。SquareFrame1は1つを配置します。SquareFrame2は6つ配置します。親要素のdivのクラスFrame1がdisplay:flexの設定にしていますので、SquareFrame2は横並びになります。

  <div class="SquareFrame1"></div>

  <hr/>

  <div class="Frame1">
    <div class="SquareFrame2">枠B-1です。</div>
    <div class="SquareFrame2">枠B-2です。</div>
    <div class="SquareFrame2">枠B-3です。</div>
    <div class="SquareFrame2">枠B-4です。</div>
    <div class="SquareFrame2">枠B-5です。</div>
    <div class="SquareFrame2">枠B-6です。</div>
  </div>