埋め込みオブジェクトに関するメモ
<h1>猫式Webメモ</h1>
上記の様な、見出し要素でマークアップされたサイトロゴがあったとする。ページ作成者は、このサイトロゴを画像で表現したいと考えるかもしれない。以下のマークアップ例を比較してみる。
<h1><img src="./nekoshiki.png" alt="猫式Webメモ"></h1><h1><object data="./nekoshiki.png" type="image/png">猫式Webメモ</object></h1><h1 style="background-image:url(./nekoshiki.png)">猫式Webメモ</h1><h1 src="./nekoshiki.png" type="image/png">猫式Webメモ</h1>
一番上はimg要素を用いた、古いHTMLのやり方だ。画像を置くためには一度見出し文を消去しなければならず、タグを取り除いた後は何も残らない。このような元のテキストを改変するマークアップの仕方は、望ましくない。alt属性による代替テキストも、気休め程度にしかなっていない。
二番目はobject要素を用いた割と新しいHTMLの方式で、見出し文を損なうことなく画像を配置できる。マークアップとしては比較的良好だ。ただ、画像を置くというためだけに見出しをオブジェクトとしてマークアップするのは、欲を言えば避けたいかもしれない。見出しはあくまで見出しに過ぎず、インラインで埋め込むオブジェクトとは本質的に異なっている。
三番目はCSSを用いた方式。サイトロゴの画像をあくまで装飾と考えたマークアップである。考えとしては良いのだけれど、実際は全面のテキストと背景画像が重なって表示されてしまうというレンダリング上の問題がある。テキストを無理矢理隠したとしても、画像OFFでは何も表示されないなど本質的な解決は得られない。
最後はXHTML2で提案されている方式である。ご察しの通り、画像が表示できればロゴ画像を、出来なければロゴテキストを提供する事が期待される。わざわざobject要素としてマークアップする必要も無く、あくまで見出しという立場を維持したままでサイトロゴ画像をも提供できる。マークアップとしては極めて理想的な方式だ。
XHTML 2.0では、src属性を殆どの要素に含める事が出来るようになっている。これによりページ作成者は、「何処に画像を配置すべきか」などと悩まされる事無く、安心してマークアップに集中できるようになる。
これは何もHTMLに限った話ではない。先日「MS PowerPoint」によるプレゼンテーションで、見出しとしてワードアートを用いようと考えた時のこと。PowerPointでワードアートは独立したオブジェクトとして扱われるので、見出しの中に張りつけることは出来ない。ワードアートを見出しのように表示させるためには、元々の見出し用テキストボックスを消去しなければならず、仕方なく見出しを消して位置にワードアートを置いた。結果的に、見出しが空白の奇妙なプレゼンテーション・シートが出来上がってしまった。これではアウトラインモードで見たときにシートの概要が掴めないし、なんだか気持ちが悪い。もしも見出し用テキストボックスにワードアートを埋め込む事が出来たならば、このような問題は発生しなかったはずだ。
