WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUT比べる。WEBCRE8.jpとその仲間達で、web制作における「選択」において最良だと思われるものを考察していくカテゴリです。画像はfigureタグでマークアップするべきなのかとかalt属性はどうするのかとかややこしいので、私としての本文中の画像の解釈、設置にあたってのガイドラインを書いてみます。img要素の解説は長い仕様書におけるimg要素の解説は長いです。それはもう、読もうとする人を寄せ付けないレベルです。それでは一向に理解が進まないので、私なりに実際に画像を文書内に配置する場合の解説を書いてみました。あとHTML5で追加されたfigureタグの用法もわからないという人が多いですよね。今回は本文中で用いられる画像に限って解説します。BBQに行ったとして、その時の作文としてこういう一文を書いたとします。BBQに行ってきました!場所は多摩川河川敷。この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。この日は早起きして色々準備してきました!こうした文章の中に本文の内容として空がフレームインした画像を挿入したい場合、空の写真は本文の一部と置き換えることができます。<p>BBQに行ってきました!場所は多摩川河川敷。alt="この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。"><br>この日は早起きして色々準備してきました!</p>画像のalt属性の内容は、その写真が表示されなかった場合も違和感なく代替テキストをそのまま読めるような内容のものでなくてはいけません。いう事は、まずは本文を画像なしで書いてみて、言葉だけで伝えるより写真があった方がいいような画像を言葉と置き換えて配置してみればいいわけです。写真ありきの文章の中で写真を置く場合は(写真を撮る前から文章が出来ているということはあまりないですよね)、順序は前後してしまいますが、その写真が置き換わるであろう文章を通して書いてみてから写真に置き換えると良いです。alt属性をalt属性だと考えて文字を入れて後で繋げる感じで書くと結構違和感の大きい文章になっちゃうんですよね。画像を非表示にして文章を通して読むとわかります。本文から参照される画像とは、文章の流れに乗らずに独立している、しかしそこにあることで文章の理解を助ける画像です。先ほどの文章にそうした画像を追加するとしたらこうです。alt="雲ひとつない快晴の多摩川の様子"><figcaption>快晴の多摩川</figcaption></figure><p>この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。この日は早起きして色々準備してきました!</p>と、文章は写真のalt属性やキャプションを含めて読むことは出来なくなっていますが、代わりに画像とキャプションを取り去ってしまっても文章の内容は伝わるようになっています。目を引くために配置されている画像も本文から独立している為、同じようにfigureタグでマークアップされると思います。本文の流れに組み込めていないわけだから、figureタグで切り離すしかないんじゃないかなと思うわけです。入門]実制作で迷わない為のマークアップ例:会話文で解説しました。この文章でも触れているfigure要素に関しても既に過去記事[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)で解説していますから、そちらの方も参考にしてみてください。終わりにこの文章でしっくりこないところあったら教えてください。いつものようにHTML5.jpを読んで解釈を検討してみるのも良いでしょう。HTML5.JPtweethatenafacebook_likewebcre8はTwitterを使っています。