HTMLで長方形を描く4つの簡単な方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

HTMLで長方形を描く4つの簡単な方法

尊渡假赌尊渡假赌尊渡假赌

Feb 09, 2025 am 10:46 AM

Four Simple Ways to Draw a Rectangle in HTML

この記事では、Webページで形状を描画するための4つの基本的な方法を紹介します。HTMLとCSSの使用、CSSのみを使用し、SVGを使用し、HTMLキャンバス要素を使用します。

キーポイント

や::beforeなどの擬似要素を介して形状を作成できます。 SVGを使用すると、より複雑な形状を作成できますが、HTML Canvas Elementsを使用してグラフィックおよびインタラクティブな機能を作成できます。 ::after

HTMLとCSS を使用して長方形を描画します

HTMLとCSSを使用した形状の作成は非常に簡単です。

要素を使用して、幅と高さ、および境界や背景の色を設定できます。 div

次のCodepenの例は、結果を示しています。

div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}

ログイン後にコピー

[Codepenサンプルリンク - 実際のCodepenリンクに置き換えてください]

注：上記の例では、

要素はCSSグリッドを使用して中央に配置されています。 div もちろん、コンテンツを長方形に配置することもできます。上記のCodepenの例で試してみてください。

サークルなどの

属性の助けを借りて他の形を描画することもできます。

[Codepenサンプルリンク - 実際のCodepenリンクに置き換えてください]border-radius

楕円を描くこともできます：

div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}

ログイン後にコピー

[Codepenサンプルリンク - 実際のCodepenリンクに置き換えてください]

以下など、より独特な形状を試すことさえできます。

div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}

ログイン後にコピー

[Codepenサンプルリンク - 実際のCodepenリンクに置き換えてください]

さらなる読み取り：

div {
  width: 200px;
  height: 200px;
  border: 10px solid #ed21f3;
  background-color: #f7f7f7;
  border-radius: 50% 25%;
}

ログイン後にコピー

属性の使用について詳しく知ります。

cssのみを使用して長方形を描画しますborder-radius

上記の例では、HTML要素を使用して形状を作成しました。次に、CSSを使用してみましょう。

これを行うには、csspseudo-elementを使用します。（を使用することもできます）。

以下は私たちにできることです：

::before[Codepenサンプルリンク - 実際のCodepenリンクに置き換えてください]::after

要素に添付された擬似要素を作成し、上記の

要素に直面しているもののようにスタイリングします。また、テキスト、画像などを配置することにより、

body::before {
  content: '';
  width: 500px;
  height: 200px;
  border: 10px solid #21f348;
  background-color: #f7f7f7;
}

ログイン後にコピー

などの

属性の引用間にコンテンツを追加することもできます。

<body>さらなる読み取り：divcontent

CSS Pseudo-Elements Guideで::beforeおよび::afterの詳細については、詳細をご覧ください。

svg < SVGを使用すると、HTMLで非常に複雑な形状を作成できます。長方形を作成する方法の簡単な例を次に示します。

[Codepenサンプルリンク - 実際のCodepenリンクに置き換えてください]

div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}

ログイン後にコピー

さらなる読み取り：

SVGの詳細をご覧ください。

HTMLキャンバス要素を使用して形状を作成することもできます。最初にHTMLでキャンバス要素を作成し、幅と高さを設定します：

次のJavaScriptを追加します：

div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}

ログイン後にコピー

次のCodepenの例は、結果を示しています。

div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}

ログイン後にコピー

[Codepenサンプルリンク - 実際のCodepenリンクに置き換えてください]

さらなる読み取り：

mdnのキャンバス要素について読んでください。

概要

この記事では、HTMLで形状を描く4つの簡単な方法を紹介します。使用する必要がある方法は、達成したいことによって異なります。 HTMLの形状を描画し、CSSを使用してスタイルを描くことは、HTMLページのコンテンツコンテナを作成するときに非常に一般的で理想的です。これらのスタイルの要素は、装飾目的にも使用できます。（HTMLとCSSを使用して驚くべき芸術作品を作成するために、何千もの創造的な方法についてはCodepenをチェックしてください。） CSS擬似要素を使用した形状の作成は、Webページに装飾的な変更とツールチップを追加するのに非常に便利です。

SVGは、Webページに軽量でレスポンシブな形状を作成するための優れたツールです。 SVGコードは、HTMLページに埋め込むことができます。または、リンクされた画像などのSVGファイルにリンクして、この方法でページに埋め込むこともできます。

要素は、Webページにさまざまなグラフィックスやその他のインタラクティブな機能を作成するために使用できる強力なプラットフォームですが、通常、JavaScriptのかなり詳細な理解が必要です。

最後に、HTMLの形の作成を次のレベルに引き上げたい場合は、CSSを使用するという次の素晴らしい例をチェックすることもできます

：

<canvas></canvas>css

プロパティを導入し、形状をアニメーション化する方法を示します。

clip-path css

関数を使用してきしむ肖像画を作成し、SVGで