Figure と figcaption の正しい使用法 elements_html/css_WEB-ITnose

Figure と figcaption は、よく一緒に使用される 2 つの意味要素です。仕様でそれらについて学んだことがない場合、プロジェクトでそれらを使用する機会がなかった場合、またはまだ何も知らない場合は、それらを正しく使用する方法についてのヒントをいくつか紹介します。

Figure 要素は、以下に示すように、画像とともによく使用されます。

<figure>    <img src="dog.jpg" alt="Maltese Terrier"></figure>

Figure 要素は、自己完結型のコンテンツ単位を表します。これは、要素を文書内で下に移動したり、文書の下部に配置したりしても、文書の意味には影響しないことを意味します。

したがって、すべての画像が Figure であるわけではないことを覚えておく必要があります。

Figure 内に複数の画像

画像が次の場合、Figure 内に複数の画像を配置できます。文書内で文脈的に関連性のあるもの。

<figure>    <img src="dog1.jpg" alt="Maltese Terrier">    <img src="dog2.jpg" alt="Black Labrador">    <img src="dog3.jpg" alt="Golden Retriever"></figure>

Figure では他の要素も使用できます

Figure 要素は画像に限定されず、次のように他の要素にも適用されます。

• コードブロック
• ビデオ
• オーディオクリップ
• 広告

以下は図要素のコードです:

<figure>    <pre class="brush:php;toolbar:false">        <code>            p {                color: #333;                font-family: Helvetica, sans-serif;                font-size: 1rem;            }        </code>    

Figure 内にネストされた Figure

意味があれば、Figure 要素を別の Figure 要素内にネストできます。ここでは、セマンティクスを変更するために ARIA ロール属性が追加されています。

<figure role="group">    <figcaption>Dog breeds</figcaption>    <figure>        <img src="dog1.jpg" alt="Maltese Terrier">        <figcaption>Adorable Maltese Terrier</figcaption>    </figure>    <figure>        <img src="dog2.jpg" alt="Black Labrador">        <figcaption>Cute black labrador</figcaption>    </figure></figure>

Figure および figcaption 要素と ARIA の関係を正しく処理する方法については、以前に書いた記事「HTML5 で ARIA を正しく使用する方法?」を参照してください。

WAI-ARIA に関するその他のチュートリアルについては、「WAI-ARIA のアクセシブルな Web 仕様」の記事を参照してください。

figcaption の正しい使い方

figcaption 要素は、figcaption 要素のタイトルまたは関連する説明を表します。

すべての Figure 要素に figcaption が必要なわけではありません。

ただし、figcaption を使用する場合は、Figure ブロックの最初または最後の要素にすることをお勧めします。

<figure>    <figcaption>Three different breeds of dog.</figcaption>    <img src="dog1.jpg" alt="Maltese Terrier">    <img src="dog2.jpg" alt="Black Labrador">    <img src="dog3.jpg" alt="Golden Retriever"></figure>

または:

<figure>    <img src="dog1.jpg" alt="Maltese Terrier">    <img src="dog2.jpg" alt="Black Labrador">    <img src="dog3.jpg" alt="Golden Retriever">    <figcaption>Three different breeds of dog.</figcaption></figure>

figcaption で他の要素を使用することもできます

画像にさらにセマンティクスを追加する必要があります。その後、複数の要素を追加できます。 h1 や p などを使用します。

<figure>    <img src="dogs.jpg" alt="Group photo of dogs">    <figcaption>        <h2>Puppy School</h2>        <p>Championship Class of 2016</p>    </figcaption></figure>

Figure 要素と figcaption 要素を使用するためのその他のヒントはありますか?もしそうなら、コメントで私たちと共有してください。

拡張読書

• HTML5 アクセシビリティ チョップ: Figure 要素と figcaption 要素
• クイック ヒント: コードを「figure」要素で囲むことを検討してください

この記事は、@Georgie Luhur の「Quick Tip: The Right Way to Use Figure & Figcaption Elements」をもとに翻訳したものであり、翻訳が適切でない場合や翻訳に誤りがある場合があります。何か間違っていることがあれば、私は業界の同僚にもアドバイスを求めます。この翻訳を転載したい場合は、英語の出典を明記してください: http://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/。

Jingzi

現役学生、コンピューターサイエンスを専攻する学部生。積極的で笑いが大好きな女の子。フロントエンドが大好きで、他の人とコミュニケーションしたり共有したりするのが好きです。自分の心の中の自分を自分の努力で実現したいと思っています。 Weibo: @京-如秋叶