この記事では、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で描畫形狀を選択する方法は、目的の結(jié)果に依存します。 HTMLとCSSは、コンテンツコンテナと裝飾的な要素を作成するのに最適です。機能ですが、JavaScriptをより深く理解する必要があります。 -
HTMLとCSS を使用して長方形を描畫します
HTMLとCSSを使用した形狀の作成は非常に簡単です。
要素を使用して、幅と高さ、および境界や背景の色を設定できます。
div
次のCodepenの例は、結(jié)果を示しています。
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の詳細をご覧ください。
MDNでSVGの使用に関する詳細を読むことができます。 -
HTMLキャンバス要素を使用して長方形を作成します
HTMLキャンバス要素を使用して形狀を作成することもできます。最初にHTMLでキャンバス要素を作成し、幅と高さを設定します：
次のJavaScriptを追加します：
div {
width: 200px;
height: 200px;
border: 10px solid #f32177;
background-color: #f7f7f7;
border-radius: 50%;
}
次のCodepenの例は、結(jié)果を示しています。
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を使用して驚くべき蕓術作品を作成するために、何千もの創(chuàng)造的な方法についてはCodepenをチェックしてください。）
CSS擬似要素を使用した形狀の作成は、Webページに裝飾的な変更とツールチップを追加するのに非常に便利です。
SVGは、Webページに軽量でレスポンシブな形狀を作成するための優(yōu)れたツールです。 SVGコードは、HTMLページに埋め込むことができます。または、リンクされた畫像などのSVGファイルにリンクして、この方法でページに埋め込むこともできます。
要素は、Webページにさまざまなグラフィックスやその他のインタラクティブな機能を作成するために使用できる強力なプラットフォームですが、通常、JavaScriptのかなり詳細な理解が必要です。
最後に、HTMLの形の作成を次のレベルに引き上げたい場合は、CSSを使用するという次の素晴らしい例をチェックすることもできます
：
<canvas></canvas>css
プロパティを?qū)毪贰⑿螤瞍颔ⅴ衰岍`ション化する方法を示します。
clip-path css
関數(shù)を使用してきしむ肖像畫を作成し、SVGで
を使用する方法を示します。 -
clip-path
- html
path()clip-pathで長方形を描く方法についてのFAQ
（元のテキストに記載されているFAQパーツをここに追加する必要があります。コンテンツは、元の意図を変更せずに擬似オリジナルの獨創(chuàng)性で書き直す必要があります） CodePenリンクにアクセスできないため、リンクをプレースホルダーに置き換えました。実際のCodePenリンクに自分で置き換えてください。
以上がHTMLで長方形を描く4つの簡単な方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。