<figure>要素は、html本文の中から参照される単体の視覚的な写真や画像、図版などを対象にし、他所に移動しても本文の構造に影響を与えないものに使います。 そして、この要素にキャプション（短い説明文やタイトルなど）を加えるのが、<figcaption>要素になります。<figcaption>要素は、<figure>要素の子要素としてのみの存在となります。<figure>要素内における img 要素などに対する記述の位置でキャプションの表示位置が決まります。
次のサンプル 1 は、<figcaption>要素が上側でキャプションも上側になり、サンプル 2 は、<figcaption>要素が下側でキャプション下側になります。
サンプル 1
サンプル 2
サンプル 1 とサンプル 2 のhtmlソース
<figure>
<figcaption>figcaption上側・夕焼けの空</figcaption>
<img src="../img/sunset.jpg" alt="sample-select" />
</figure>
<figure>
<img src="../img/sunset.jpg" alt="sample-select" />
<figcaption>figcaption下側・夕焼けの空</figcaption>
</figure>cssソース
figure {
border: thin solid #bfbfbf;
display: flex;
flex-flow: column;
padding: 6px;
max-width: 500px;
margin: auto;
}
figcaption {
background-color: #611;
color: #fff;
font: 14px sans-serif;
padding: 3px;
text-align: center;
}
