執筆ガイドライン11、「Figure+Figcaption」と「alt+title」

執筆ガイドライン11、「Figure+Figcaption」と「alt+title」

FigureタグとFigcaptionタグ

FC2では、アンカー要素の子要素の状態でimg要素が挿入され、alt属性、title属性を内包した状態で貼り付けられます。

ワードプレスでは、メディア(画像など)を記事に貼る際、caption(説明文)をつけるか選択することができます。figureタグ(親)の中にaタグ(子1)とそこに内包されるimgタグ(孫)、figcaptionタグ(子2)の構成になっています。↓こんな感じ↓

figure-element
Figureタグ(親)とAタグ(子1)とFigcaptionタグ(子2)

更に言えば、孫要素のimgタグの中に、alt属性とtitle属性を追加すればフル装備です。

いくつか親→子→孫のパターンを検証してみました。aタグの中にfigcaptionタグが内包できればよかったのですが、それは文法エラーの様です。ブラウザーでは表示できますケド。

figcaptionタグ、CSS追記

figcaption {
font-size: 0.75em;
color: #999;
}

画像の付属情報っぽく見えるように、字をちっさく、グレーに変えたCSSを追記しました。なんか雰囲気出たな~っと自己満足。ふふふ。

毎回この仕様で図を挿入するかは謎ですが、補足情報フル装備のサンプルは知っておいた方がいいかな~っと。

W3Cサイト関連項目「Images in HTML

Comment

コメントを投稿する
記事: 執筆ガイドライン11、「Figure+Figcaption」と「alt+title」

お気軽にコメントをどうぞ~。

  非公開 (管理人のみ閲覧可能)
 

Trackback