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

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

キーポイント

Webページで形状を描画する4つの基本的な方法は、HTMLとCSSの使用、CSSのみを使用してSVGを使用し、HTML Canvas要素を使用することです。
HTMLおよびCSSを使用して、長方形や円などの単純な形状を作成できますが、CSSのみを使用すると、
• や::beforeなどの擬似要素を介して形状を作成できます。 SVGを使用すると、より複雑な形状を作成できますが、HTML Canvas Elementsを使用してグラフィックおよびインタラクティブな機能を作成できます。 ::after
HTMLで描画形状を選択する方法は、目的の結果に依存します。 HTMLとCSSは、コンテンツコンテナと装飾的な要素を作成するのに最適です。機能ですが、JavaScriptをより深く理解する必要があります。

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;
}

などの

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

さらなる読み取り：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の詳細をご覧ください。

MDNでSVGの使用に関する詳細を読むことができます。
• HTMLキャンバス要素を使用して長方形を作成します

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のキャンバス要素について読んでください。

Canvas vs SVGに関する記事を読んでください。
• 概要

この記事では、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で

を使用する方法を示します。
• clip-path
• html path()clip-pathで長方形を描く方法についてのFAQ
（元のテキストに記載されているFAQパーツをここに追加する必要があります。コンテンツは、元の意図を変更せずに擬似オリジナルの独創性で書き直す必要があります） CodePenリンクにアクセスできないため、リンクをプレースホルダーに置き換えました。実際のCodePenリンクに自分で置き換えてください。

以上がHTMLで長方形を描く4つの簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。