<<PREV | TOP | NEXT>>

IMG 要素の基本

last modified 09th/Mar. 2005

  1. 画像要素
  2. IMG 要素の基本
    1. 代替テキストの指定 - alt 属性と title 属性の利用
    2. 画像をより軽快に - フォーマットなど
  3. 画像の垂直方向の表示位置
  4. 浮動化と後続テキストの周りこみ
  5. 周囲に空白を挿入
  6. 周囲にボーダーを表示

IMG 要素は %special に属するインライン要素です。

画像を挿入する要素です。

画像を表示出来ないブラウザも一般に存在しますので、利用する時は十分注意してください。

<p>
日本では「モナリザ」 (Monna Lisa; vers 1503-1506)
<img
   src="http://www.louvre.or.jp/louvre/img/photos/collec/peint/vignet/inv0779.jpg"
   alt="Les visages de la Joconde">
として知られるダビンチ (Leonard de Vinci) の傑作は、ルーブル美術館に所蔵されています。＆</p>

挿入するべき画像の位置を src 属性で表し、その画像が表示出来ない場合のための代替テキストを alt 属性で表します。

日本では「モナリザ」 (Monna Lisa; vers 1503-1506) Les visages de la Joconde として知られるダビンチ (Leonard de Vinci) の傑作は、ルーブル美術館に所蔵されています。

画像ファイルの位置

src = uri [CT]

上の例では、画像の位置をフル URL で指定しましたが、勿論相対 URL でも指定できます。例えば、相対 URL の例として、この文書と同じディレクトリにある、 w3c_home.png と云う画像ファイルを参照する場合は、次のようになります；

<img alt="W3C - World Wide Web Consortium" src="./w3c_home.png">

表示例；

W3C-World Wide Web Consortium

IMG 要素には、 alt 属性と src 属性が必須であることに注意してください。

IMG 要素には、 src 属性と alt 属性が必須です。

インターネット上には、ページ作成用の画像素材集が沢山あります。画像素材集の基本的な利用法も参照ください。

<<PREV | TOP | NEXT>>