CSSで幅と高さを同じにする方法

1. 固定の正方形の要素:

   .square {
   width: 200px;
   height: 200px;
   }

   上記のコードでは、要素の幅と高さを両方とも200ピクセルに設定しています。この方法では、要素が正方形になります。

2. 動的な正方形の要素:

   .rectangle {
   width: 50%;
   padding-top: 50%;
   }

   上記のコードでは、要素の幅を親要素の50%に設定し、padding-topプロパティを使用して高さを親要素の50%に設定しています。この方法では、要素が親要素の幅と同じ高さの正方形になります。

3. ビューポートの正方形の要素:

   .viewport-square {
   width: 100vw;
   height: 100vw;
   }

   上記のコードでは、要素の幅と高さをビューポートの幅と同じに設定しています。この方法では、要素が画面の幅と同じ高さの正方形になります。

これらは幅と高さを同じにするための一部の基本的な方法です。要素のコンテンツやレイアウトに応じて、他の方法もありますが、ここで示した方法は一般的でよく使用されます。適切な方法を選択して、デザインに合わせて幅と高さを調整してください。

以上が、CSSで幅と高さを同じにする方法についての解説です。