読み込み中...

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

HTMLで四角を作成する方法のイメージ図 HTML
2024.04.10
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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を使って、適切な余白を設定しましょう。

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

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

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

  1. ボタンのデザイン

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

サンプルコード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>
  1. 画像の枠線

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

サンプルコード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>

まとめ

この記事では、HTMLで四角を作成する方法やカスタマイズ方法を初心者目線で詳しく解説しました。

サンプルコードと実用例を参考にして、自分だけのオリジナルな四角を作成してみましょう。