LoginSignup
1

More than 5 years have passed since last update.

そもそもfigure要素ってなんだ? ~画像・図版表示をしよう~

Last updated at Posted at 2017-05-15

figure要素とはなんぞや

HTML4.01からHTML5へバージョンアップする際に追加された新要素。
画像・図版であることを示す際に使用する。

今までは画像を表示するときにこうやって書いていました。

HTML4.01以前
<div class="article">
  <div class="img">
    <img src="nori.jpg" alt="フエキ">
    <p id="capition">フエキでんぷんのり</p>
  </div>
    <p>主原材料とうもろこしでんぷん100%、きいろは安心のいろ<br>
    グリーン購入法適合品</p>
</div>

HTML5から採用された「figure要素」を使ってみる

HTML5
<article>
  <figure>
    <img src="nori.jpg" alt="フエキ">
    <figcapition>フエキでんぷんのり</figcaption>
  </figure>
    <p>主原材料とうもろこしでんぷん100%、きいろは安心のいろ<br>
    グリーン購入法適合品</p>
</article>

とりあえず全部divで囲っておけ精神があったのですが
そろそろ、そうもいかない感じのようです。

HTML5は、より要素自体の細かい情報も加えていこうよ!という印象を感じました。
この辺りはセクションの話につながるのでそっちは後からまとめていこう…

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1