HTMLで四角を簡単に作成！5つの具体例と使い方

はじめに
●HTMLで四角を作成する基本的な方法
- ○サンプルコード1：四角を作成する基本的な例
●四角のカスタマイズ方法
●注意点と対処法
●応用例とサンプルコード
まとめ

はじめに

この記事を読めば、HTMLで四角を簡単に作成することができるようになります。

HTML初心者の方でも分かりやすい説明で、四角の作り方、使い方、対処法、注意点、カスタマイズ方法を詳しく解説しています。

さらに、実用例とサンプルコードもご紹介しますので、実践的な知識を身につけられます。

●HTMLで四角を作成する基本的な方法

HTMLで四角を作成するには、divタグとCSSを組み合わせることで実現できます。

divタグは、HTML文書内でコンテンツを区切るために使用されるタグです。

CSSは、HTML文書のデザインやレイアウトを指定するための言語です。この2つを使って、四角を作成していきましょう。

○サンプルコード1：四角を作成する基本的な例

<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
</style>
</head>
<body>

<div class="rectangle"></div>

</body>
</html>

このサンプルコードでは、CSSで.rectangleクラスを定義して、幅100px、高さ100px、黒いボーダーの四角を作成しています。

HTML文書内で、divタグに.rectangleクラスを適用することで、四角が表示されます。

●四角のカスタマイズ方法

四角を作成する際に、色や大きさなどをカスタマイズすることができます。

色の変更、大きさの変更、角の丸みの追加、ボーダーの変更について説明します。

○色の変更

四角の色を変更するには、CSSのbackground-colorプロパティを使用します。

サンプルコード2: 色を変更した四角

<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background-color: red;
}
</style>
</head>
<body>

<div class="rectangle"></div>

</body>
</html>

このサンプルコードでは、四角の背景色を赤に設定しています。

○大きさの変更

四角の大きさを変更するには、CSSのwidthプロパティとheightプロパティを変更します。

サンプルコード3: 大きさを変更した四角

<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 200px;
  height: 150px;
  border: 2px solid black;
  background-color: red;
}
</style>
</head>
<body>

<div class="rectangle"></div>

</body>
</html>

このサンプルコードでは、四角の幅を200px、高さを150pxに変更しています。

○角の丸みを追加

四角の角に丸みを追加するには、CSSのborder-radiusプロパティを使用します。

サンプルコード4: 角に丸みを追加した四角

<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background-color: red;
  border-radius: 10px;
}
</style>
</head>
<body>

<div class="rectangle"></div>

</body>
</html>

このサンプルコードでは、四角の角に10pxの丸みを追加しています。

○ボーダーの変更

四角のボーダーを変更するには、CSSのborderプロパティを変更します。

サンプルコード5: ボーダーを変更した四角

<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 100px;
  height: 100px;
  border: 4px dashed blue;
  background-color: red;
  border-radius: 10px;
}
</style>
</head>
<body>

<div class="rectangle"></div>

</body>
</html>

このサンプルコードでは、四角のボーダーを4px幅の青い点線に変更しています。

●注意点と対処法

四角を作成する際には、以下の注意点と対処法を押さえておきましょう。

ブラウザの互換性

一部の古いブラウザでは、CSSのborder-radiusプロパティが正しく表示されないことがあります。

対処法として、対象ブラウザ向けのCSSプレフィックスを使用するか、代替手段を検討しましょう。

インラインスタイルの利用

HTML内に直接CSSを書くこともできますが、保守性が低くなるため、外部CSSファイルにスタイルをまとめることをおすすめします。

divタグの使用に注意

divタグは非常に便利ですが、使いすぎるとHTML構造が複雑になり、保守性やアクセシビリティが低下することがあります。

余白の調整

四角を配置する際、周囲の余白が気になることがあります。

marginやpaddingを使って、適切な余白を設定しましょう。

●応用例とサンプルコード

四角を活用することで、さまざまなデザインやレイアウトが可能です。

応用例とサンプルコードをご紹介します。

ボタンのデザイン

四角を使って、オリジナルのボタンデザインを作成できます。

サンプルコード6: 四角を使ったボタンデザイン

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 2px solid black;
  background-color: red;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  color: white;
  text-decoration: none;
}
.button:hover {
  background-color: blue;
}
</style>
</head>
<body>

<a href="#" class="button">Click me</a>

</body>
</html>

画像の枠線

四角を使って、画像に枠線を付けることができます。

サンプルコード7: 四角で囲った画像

<!DOCTYPE html>
<html>
<head>
<style>
.image-frame {
  display: inline-block;
  border: 5px solid black;
  padding: 10px;
}
</style>
</head>
<body>

<div class="image-frame">
  <img src="example.jpg" alt="Example image">
</div>

</body>
</html>