[HTML] Figure タグと Figcaption タグの正しい使い方 (翻訳)_html/css_WEB-ITnose

原文: クイックヒント: Figure および Figcaption 要素を使用する正しい方法

Figure 要素と figcaption 要素は通常、2 つのセマンティック タグとして一緒に使用されます。詳細を読んでいない場合、プロジェクトで使用する機会がなかった場合、または使用方法がわからない場合は、正しく使用するためのヒントをいくつか紹介します。

Figure タグは通常、ピクチャ要素に使用されます。

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

Figure タグはコンテキストに依存しない単位です。つまり、どこに移動しても、文書内の意味には影響しません。

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

Figure 内の複数の画像

コンテンツに関連する場合は、Figure に多数の img タグを配置できます。

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

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 を入れ子にすることができます。ここで、ARIA 属性とロール属性を使用すると、セマンティクスを改善できます。

<figurerole="group">  <figcaption>Dogbreeds</figcaption>  <figure>    <imgsrc="dog1.jpg" alt="Maltese Terrier">    <figcaption>AdorableMalteseTerrier</figcaption>  </figure>  <figure>    <imgsrc="dog2.jpg" alt="Black Labrador">    <figcaption>Cuteblacklabrador</figcaption>  </figure></figure> 

ARIA での Figure と figcaption の使用方法の詳細については、HTML5 で ARIA を効果的に使用する方法に関する以前の記事を参照してください。

figcaption を正しく使用する

figcaption タグは、図のタイトルまたは内容を説明するために使用されます。

すべての図に図キャプションが必要なわけではありません。

ただし、figcaption を使用する場合は、図の先頭または最後のブロックである必要があります:

<figure>  <figcaption>Threedifferentbreedsofdog.</figcaption>  <imgsrc="dog1.jpg" alt="Maltese Terrier">  <imgsrc="dog2.jpg" alt="Black Labrador">  <imgsrc="dog3.jpg" alt="Golden Retriever"></figure> 

または

<figure>  <imgsrc="dog1.jpg" alt="Maltese Terrier">  <imgsrc="dog2.jpg" alt="Black Labrador">  <imgsrc="dog3.jpg" alt="Golden Retriever">  <figcaption>Threedifferentbreedsofdog.</figcaption></figure> 

figcaption でフロー要素を使用することもできます。

画像にさらにセマンティクスを追加したい場合は、h1 や p などの要素を使用できます。

<figure>  <imgsrc="dogs.jpg" alt="Group photo of dogs">  <figcaption>    <h2>PuppySchool</h2>    <p>ChampionshipClass of 2016</p>  </figcaption></figure> 

図や図のキャプションに関するその他のヒントはありますか?