#?SuikaWiki/0.9 * img 要素型 (HTML, XHTML 1) [33] [[HTML]] の [DFN[[CODE(HTMLe)[img]] 要素型]]は、 [[画像]]を埋込みます。 [34] 仕様書: [[HTML 4]] 13.2 Including an image: the [CODE(HTMLe)[IMG]] element [35] :[[開始タグ]]:必須 :[[終了タグ]] ([[HTML 4]]):禁止 :終了タグ ([[XHTML 1]]):必須 :[[内容模型]]:[[強制空要素]]。 :出現できる文脈:[CODE(SGML)[%inline]] な文脈。 (歴史的変遷: ) :[[属性]]: ,[CODE(HTMLa)[[[align]]]] , , ,揃え位置 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[alt]]]] ,[CODE(SGML)[%[[Text]]]] ,(必須) ,[[代替文]] ,[HTML 4] ,[CODE(HTMLa)[[[border]]]] , , ,枠線 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)[[[dynsrc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,動画 URI ,[WinIE] ,[CODE(HTMLa)[[[height]]]] ,[CODE(SGML)[%[[Length]]]] ,(自動) ,高さ ,[HTML 4] ,[CODE(HTMLa)[[[hspace]]]] , , ,水平余白 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[internal]]]] , , ,内部画像名 ,[WebExplorer] ,[CODE(HTMLa)[[[ismap]]]] ,([[真偽値属性]]) ,(偽) ,[[鯖側画像写像]] ,[HTML 4] ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)[[[longdesc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,説明文書 ,[HTML 4] ,[CODE(HTMLa)[[[lowsrc]]]] ,[CODE(SGML)[%URI]] ,(なし) ,低解像度画像 URI ,[CODE(HTMLa)[[[motion]]]] ,[CODE(SGML)[%URI]] ,(なし) ,動画こま URI ,[CODE(HTMLa)[[[name]]]] , ,(なし) ,名前 ,[HTML 4] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousemove]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[src]]]] ,[CODE(SGML)[%[[URI]]]] ,(必須) ,画像 URI ,[HTML 4] ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[usemap]]]] , ,(なし) ,[[クライアント側画像写像]] ,[HTML 4] ,[CODE(HTMLa)[[[vspace]]]] , , ,垂直余白 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[width]]]] ,[CODE(SGML)[%Length]] ,(自動) ,幅 ,[HTML 4] [[#comment]] ** 内容模型 [37] [CODE(HTMLe)[img]] は[[強制空要素]]です。 どんな[[内容]]も持つことができません。 [38] しばしば、 (代替文のために) [Q[[CODE(HTMLe)[img]] は空要素にするべきではなかった]] と言う人がいます。しかし、 [[SGML]] 的には、そう突飛な設計というわけでもありません。 中には、[Q[[CODE(HTMLe)[img]] は空要素になる''はず''だった]] (のに Mosaic が馬鹿なことをした) などと主張する人もいますが、 根拠がありません。 (あったら教えてください。) >>12 の議論で [CODE(HTMLe)[[[a]]]] 要素を流用する案が出たりもしていますが、 これが根拠なら[Q[空要素になる''はず''だった]]は言い過ぎです。 [[#comment]] ** 出現する文脈 [26] よく、 [CODE(HTMLe)[img]] の親を [CODE(HTMLe)[[[p]]]] にすべきか [CODE(HTMLe)[[[div]]]] にすべきか問題になるけど、 HTML の当初の設計思想であるワープロ互換のための[[フラットでリニアな構造]]化を考えると、 [CODE(HTMLe)[p]] が適当なんじゃないのかな。 [WEAK[(Strict 的に正しいという主張でも、そうするべきだという主張でもないよ。)]] [27] ところで >>26 のネタはしつこいくらいよくでてくるよねぇ。 [CODE(HTMLe)[[[fig]]]] 要素型マンセー。 [[#comment]] [21] [CODE(HTMLa)[[[lowsrc]]]] 属性は W3C HTML には存在しませんが、 [[DOM 1]] HTML の [CODE(DOMi)[[[HTMLImageElement]]]] 界面には定義されていました。 ([[DOM 2]] HTML で削除されました。) [22] >>21 同じ独自拡張 HTML 属性が DOM に紛れている例でも、 [CODE(DOMi)[[[HTMLScriptElement]]]] の [CODE(DOMa)[[[htmlFor]]]] と [CODE(DOMa)[[[event]]]] は削除されてないのにねぇ。 [32] >>2 その二つの属性は HTML 4 で一応予約だけはされていますから。 [[#comment]] ** Mozilla の内部画像 [40] [CODE(HTMLa)[[[src]]]] の説明に移動しました。 ** width/height 両属性問題 [15] 特に [[Stricter]] の間では、 [CODE(HTML)[IMG]] 要素の [[width]], [[height]] 両属性が論理属性なのか物理属性 (表現属性) なのかが議論となることがあります。たとえば: - ''agenda - 2002/5/16〜31 - Personnel'' - ''agenda - 2002/6/1〜15 - Personnel'' なお、以降において、具体的な仕様や実装を念頭に置くときはそれを明記し、明記しない場合は現実の使われ方を無視した、理想的なあり方を考えることとします。 [16] 論理属性として意識している場合: - 画像の実際の大きさを表す参考情報。 -- 画像 (= 別資源) に内在している情報を持つことにやや抵抗がありますが、 [[type]] 属性の同類と考えればすっきりします。 無視していいのです。 - 関連付けられた image map の座標系 (というか単位長) の確定のための情報 物理属性として意識している場合: - 画像の拡大・縮小を狙って実際の大きさと異なる値を指定 - 画像非表示状態の場合に、代替内容の大きさを無視してこの属性の値で表示 - 画像到着前の仮表示における大きさの推定 [17] でも実際のところ、 [CODE(HTML)[WIDTH]] 属性, [CODE(HTML)[HEIGHT]] 属性には表示上の大きさを示す以上の使い方は出来ない気がする。 (大きさを知ってから取り寄せる、という使い方は、 (ブラウザでなく) 画像取り出し器が使うみたいな場合以外つかわなそうだ。) 廃止しても良いのじゃないかな。もしどうしても必要なら、 content feature の埋め込み ([[CC/PP]] かなにか?) でも使って表現するのがいいのでは。 (Image map は、別の方法を考えるとして。) [18] 今まで両属性の strict DTD における存在について判断しかねていたんですけど、 [[agenda]] のそふぃあさんの文章を読んで、あってもいいかなあと思うようになりました。でも想定される用途の幅と誤用の危険性を考えれば、なくてもいいかなあとも思います。個人的意見ですが。 [43] [CODE(HTMLa)[width]] も [CODE(HTMLa)[height]] も、 HTML 4 仕様書では 13.7 Visual presentation of images, objects, and applets のところに解説があるんだから、物理属性以外の何者でもない。 論理的意味があるようなことは一言も書いてないし。 しかも、属性そのものこそ非推奨ではないけど、 [Q[attributes that concern visual alignment and presentation have been deprecated in favor of style sheets]] と前置きされた章の中にあるのだからあまりおすすめされているものでもなさそう。 ([[名無しさん]]) [[#comment]] ** 画像の種類 [28] 有史以来 [CODE(HTMLe)[img]] 要素のリンク先として使われたことのある画像の種類 ([CODE(HTMLa)[src]], [CODE(HTMLa)[lowsrc]] 属性): ,媒体型 (代表) ,説明 ,[CODE(MIME)[[[image/x-bitmap]]]] ,[[WindowsBitmap]] ,[CODE(MIME)[[[image/gif]]]] ,[[GIF]] ,[CODE(MIME)[[[image/jpeg]]]] ,[[JPEG]] ,[CODE(MIME)[[[video/x-mng]]]] ,[[MNG]] ,[CODE(MIME)[[[image/png]]]] ,[[PNG]] ,[CODE(MIME)[[[image/tiff]]]] ,[[TIFF]] ,[CODE(MIME)[[[image/x-xbitmap]]]] ,[[XBitmap]] [29] ([CODE(HTMLa)[dynsrc]] 属性): ,[CODE(MIME)[[[video/x-avi]]]] ,[[AVI]] ,[CODE(MIME)[[[video/mpeg]]]] ,[[MPEG]] , ,[[NetShow]] ([[ASF]]) , ,[[QuickTime]] movie ,[CODE(MIME)[[[model/vrml]]]] ,[[VRML]] , ,[[WMV]] [30] ([CODE(HTMLa)[motion]] 属性): ,[CODE(MIME)[image/png]] ,PNG [24] ''Creating an IMG SRC handler'' : [[WinIE]] で任意の画像形式に対応する handler の作り方。 [[#comment]] ** 応用 [41] [CODE(HTMLe)[img]] 要素は普通 [CODE(HTMLa)[src]] で指定された画像で[[行内]]で置換えられます。 (ただし、左右に揃えた ([CODE(HTMLa)[[[align]]]] 参照。) ときは行外に浮動します。) [HTML 4] [42] 画像を表示できない時には [CODE(HTMLa)[[[alt]]]] 使われます。 [HTML 4] [[#comment]] ** 他との関係 [36] 画像の埋込みは、 [CODE(HTMLe)[[[object]]]] を用いても行えます。 (HTML 4 の時に [CODE(HTMLe)[img]] を廃止または非推奨にするべきとの強硬意見もあったようですが、 当時はまだ非現実的と判断されたようです。) [[#comment]] ** 歴史 [12] ''proposed new tag: IMG'' : [CODE(HTMLe)[img]] 要素の最初の提案 (1993 @ [[www-html]]) [13] 異論を無視して当初の提案どおり実装された Mosaic 0.10 の告知: ''EMail Msg <9303141100.AA22479@wintermute.ncsa.uiuc.edu>'' [14] >>13 でも実装しますた。にはその時には特に文句は出てないね。 異論というのも対案が幾つか出てきただけであまり深い議論になってないし。 [19] ''スラッシュドット ジャパン | IMGタグ10周年'' [[#comment]] ** 参考文献 - [9] [CODE(HTMLe)[img]] 要素はなぜ[[空要素]]になったのか: ''Strict-HTML スレッド10'' - [10] ''alt要素? -- imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明'' [[#comment]] ** 例 [39] [PRE(HTML)[

I just returned from vacation! Here's a photo of my family at the lake: A photo of my family at the lake. ]PRE] [WEAK[(HTML 4 仕様書より)]] 同じことを [CODE(HTMLe)[[[object]]]] で書いた例: [PRE(HTML)[

I just returned from vacation! Here's a photo of my family at the lake: A photo of my family at the lake. ]PRE] [WEAK[(HTML 4 仕様書より)]] [[#comment]] ** メモ [25] [CODE(HTML)[img]] 要素ってそもそも SGML 的には (面倒だけど) [[外部非解析対象実体]]として存在するべきだよね。今更もうどうにもならないけど。 [37] >>25 実際そうする案もありましたが、面倒なので相手にされませんでした。 [[#comment]] * メモ