figure要素、図表を示す：html step24

figure要素、図表を示す：html step24

前回は、インラインフレーム（iframe）の配置方法につきまして、ソースコードを交えながら記載いたしました。

インラインフレームを使うことができると、いざバイト数制限でソースコードが記載しきれない場合など、とても便利な要素であることと思います。しかしながらSEOの観点から、あまり多用しすぎるのは如何なものかと、個人的には思っております。

また、前回注意点を1点記載し忘れましたが、PCでインラインフレームを表示させることは何ら問題ないことと思いますが、スマホなど、ブラウザの横幅がデバイスにより異なるものは、デバイスによって高さも変わり、高さの指定をした場合にフレームにスクロールが表示されり、フレーム下に無駄な余白が出来てしまったりと注意が必要です。

この問題を解消するには、インラインフレームではなくJavaScriptでページの高さを計算してから読み込ませる必要が出てくることになります。
この内容は、また別記事に記載したいと思います。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

figure要素、図表を示す

figure要素は、その要素内容が図表であることを表す要素です。

要素内容としてはフローコンテンツであれば、なんでも入れることができるため、画像や表のほかソースコードを掲載したい場合などにも利用可能です。
また、図表は本文から参照される内容ですが、本文に影響を与えることなく、イラスト・図・写真・ソースコードなど別表にして切り離すことができます。

図表にキャプションを付ける

figcaption要素は、figure要素であらわす図表にキャプション（見出しや説明文など）を付けるための要素です。<figcaption> ～ </figcaption>の範囲内の任意の位置に配置することができます。

という事で今回は、figure要素の記載方法をサンプルコードと共に記載いたしました。

HTML5から追加されたfigure要素、要素内の内容に対して、必要に応じてキャプションを持つことができる要素で、figure要素内だけで自己完結しても意味合いを伝える要素であることと思います。

HTML5より追加された要素なので、私個人に取りましても、あまりなじみのない要素になります。
しかしながら、今後HTML5でコーディングをおこなう際は、積極的に取り入れたい要素だと思いっています。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。