＆lt; figure＆gt; CSSの要素？

HTML5<figure></figure>要素とCSSスタイルのアプリケーションの詳細な説明

Webページを書くときは、なじみのないHTML要素に遭遇する可能性があります。<figure></figure> 。この記事で説明します<figure></figure>要素の使用と、CSSを使用してスタイルをスタイリングする方法は何ですか。

<figure></figure>これは、イラスト、チャート、写真、コードスニペットなどの独立したストリーミングコンテンツをマークするためにHTML5に追加された新しい要素です。これらのコンテンツは通常、ページのメインコンテンツに関連していますが、独立して理解できます。<figure></figure>それらをラップすると、ページ構造をより明確にすることができます。

たとえば、画像をWebページに挿入してタイトルを追加する場合は、使用できます。<figure></figure>そして<figcaption></figcaption>要素：

<figure>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174278751238156.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="＆lt; figure＆gt; CSSの要素？">
  <figcaption>画像のタイトルまたは説明</figcaption>
</figure>

この例では、<figure></figure>要素にはaが含まれます<img alt="＆lt; figure＆gt; CSSの要素？" >タグと1つ<figcaption></figcaption>ラベル。<figcaption></figcaption>画像のタイトルまたは説明を提供し、コンテンツのセマンティクスを強化するために使用されます。

使用<figure></figure>要素の利点は次のとおりです。

• ページ構造の明確さを強化する：ページコンテンツを理解し、維持しやすくします。
• SEO効果の向上：検索エンジンは、ページコンテンツの構造と意味をより簡単に理解できます。
• アクセシビリティの向上：スクリーンリーダーは、コンテンツをよりよく識別して解釈することができ、障害のある人がアクセスしやすくなります。

CSSでは、他のHTML要素と同じことができます。<figure></figure>たとえば、要素はスタイリングされています。

形 {
  マージン：20px;
  ボーダー：1pxソリッド#ccc;
  パディング：10px;
}

figcaption {
  テキストアライグ：センター;
  フォントスタイル：イタリック;
}

上記のCSSコードを介して、制御できます<figure></figure>要素のマージン、境界、内側の縁、および<figcaption></figcaption>要素のテキストアラインメントとフォントスタイル。

この記事があなたがそれをよりよく理解し、使用するのに役立つことを願っています<figure></figure>Webページ構造をより明確かつ容易にし、アクセスしやすくする要素。

以上が＆lt; figure＆gt; CSSの要素？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。