WEBCRE8.jp > 比べる > [HTML5 入門]本文における画像の設置の簡単なガイドライン

[HTML5 入門]本文における画像の設置の簡単なガイドライン

この記事は約4分ぐらいで読めます

画像はfigureタグでマークアップするべきなのかとかalt属性はどうするのかとかややこしいので、私としての本文中の画像の解釈、設置にあたってのガイドラインを書いてみます。

img要素の解説は長い

仕様書におけるimg要素の解説は長いです。それはもう、読もうとする人を寄せ付けないレベルです。それでは一向に理解が進まないので、私なりに実際に画像を文書内に配置する場合の解説を書いてみました。あとHTML5で追加されたfigureタグの用法もわからないという人が多いですよね。今回は本文中で用いられる画像に限って解説します。

文章の代わりになる画像の設置

例えばBBQに行ったとして、その時の作文としてこういう一文を書いたとします。

BBQに行ってきました！場所は多摩川河川敷。この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。この日は早起きして色々準備してきました！

こうした文章の中に本文の内容として空がフレームインした画像を挿入したい場合、空の写真は本文の一部と置き換えることができます。

<p>BBQに行ってきました！場所は多摩川河川敷。<br>
<img src="location-01.png" alt="この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。"><br>
この日は早起きして色々準備してきました！</p>

画像のalt属性の内容は、その写真が表示されなかった場合も違和感なく代替テキストをそのまま読めるような内容のものでなくてはいけません。という事は、まずは本文を画像なしで書いてみて、言葉だけで伝えるより写真があった方がいいような画像を言葉と置き換えて配置してみればいいわけです。

写真ありきの文章の中で写真を置く場合は(写真を撮る前から文章が出来ているということはあまりないですよね)、順序は前後してしまいますが、その写真が置き換わるであろう文章を通して書いてみてから写真に置き換えると良いです。

alt属性をalt属性だと考えて文字を入れて後で繋げる感じで書くと結構違和感の大きい文章になっちゃうんですよね。画像を非表示にして文章を通して読むとわかります。

本文から参照される画像

本文から参照される画像とは、文章の流れに乗らずに独立している、しかしそこにあることで文章の理解を助ける画像です。先ほどの文章にそうした画像を追加するとしたらこうです。

<figure>
<img src="location-01.png" alt="雲ひとつない快晴の多摩川の様子">
<figcaption>快晴の多摩川</figcaption>
</figure>
<p>この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。この日は早起きして色々準備してきました！</p>

と、文章は写真のalt属性やキャプションを含めて読むことは出来なくなっていますが、代わりに画像とキャプションを取り去ってしまっても文章の内容は伝わるようになっています。