HTMLで四角形を作成する方法｜基本的なテクニックと応用例

例えば、以下のコードを使えば、シンプルな四角形を描くことができます。

<div class='square'></div>

そして、CSSで以下のようにスタイルを設定します。

.square {
  width: 100px;
  height: 100px;
  background-color: blue;
}

このコードを使用することで、幅100px、高さ100pxの青い四角形が表示されます。

CSSで四角形のサイズや色を調整する方法

四角形のサイズを変更したり、色をカスタマイズしたりするのは、非常に簡単です。`width`や`height`プロパティでサイズを指定し、`background-color`で色を変更します。

例えば、赤い長方形を作成したい場合、以下のように設定します。

.rectangle {
  width: 200px;
  height: 100px;
  background-color: red;
}

このように、四角形のサイズや色を自由に調整できるので、デザインに合わせて変更することができます。

ボーダーや影を使って四角形を装飾する方法

さらに、`border`や`box-shadow`プロパティを使って、四角形をより魅力的に見せることができます。例えば、ボーダーを追加して、影をつけることで立体感を出すことができます。

以下は、ボーダーと影を追加した例です。

.decorated-square {
  width: 150px;
  height: 150px;
  background-color: green;
  border: 5px solid black;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

このコードを使用すると、黒いボーダーと影のついた緑色の四角形が表示されます。

レスポンシブデザインで四角形を使う方法

四角形をレスポンシブにするためには、`width`や`height`を固定値ではなく、パーセンテージや`vw`（ビューポート幅）などの相対単位を使用することが重要です。これにより、画面サイズに応じて四角形が自動的にサイズを調整するようになります。

以下のコードでは、画面幅の50%のサイズを持つ四角形を作成します。

.responsive-square {
  width: 50%;
  height: 100px;
  background-color: purple;
}

このように、四角形をレスポンシブにすることで、モバイルやタブレットなどのデバイスにも適応できます。

まとめ：HTMLとCSSで四角形を自由にデザインしよう

HTMLで四角形を描くための基本的な方法から、サイズや色、装飾を追加する方法まで紹介しました。`