HOME

■イメージ( img )要素■

「img」は、画像を表示するための要素です。かつ「空要素」という特殊な要素です。 「img」は「イメージ」の略です。

通常、要素には開始タグと終了タグが対になっていますがこれは挟む対象である「要素の内容(テキスト)」が存在しないため、 単独のタグ( <img> )が使われます。

プログラム文

<img src="akabana.gif" alt="サンプル画像" width="150" height="99" border="1">

実行結果

サンプル画像

「src」属性には画像ファイルのURIを指定します。「alt」属性には画像の解説を書きます。 「width」属性は画像の幅(ピクセル)、「height」属性は高さ(ピクセル)をそれぞれ指定します。
以前は「ボーダー属性」も組み合わせるのが一般でしたが、将来的にはスタイルシートに統合されそうな気配ですので (制式XHTMLstrictではボーダー属性はCSSのみ)、今の内からスタイルシートの方に書くクセを付けておいた方がいいかもしれません。 (プログラム文中「 border="1" 」の部分。)

URI〜〜ファイルの住所です。htmlファイルとそこで使われる画像ファイルが同じディレクトリ(フォルダ)に置いてある限り、 ファイル名だけでOKです。違うディレクトリに置かれたファイルを使うときには相対パス(参照:階層構造のページ)か 絶対パス(http://で始まる長い住所)を使う必要があり、これはwindowsユーザにとって覚えるのが辛いかもしれないので、 初めのうちは、htmlファイルと画像ファイルを同じディレクトリにアップするようにします。

なおこの画像ファイルの参照は、ローカル(自分のパソコン)で行おうとしても上手くいきません。 後述の「アップロード」のページを参照されて実際にページをアップして確かめて下さい。
本当は別の方法(ローカルなURI指定)もあるのですが、このページの範疇を越えるので紹介しません。

■補足

GIFファイルの寸法はファイル情報ではわからない場合が多いのですが、一旦レタッチソフトなどで画像を開けば、 寸法を確かめられます。 例えばフォトショップ系なら、「全体を選択」「コピー」「新規画像」で保存されてるGIF画像の大きさがわかります。 また、「編集」「画像サイズの変更」でも確認できます。

| 「ホムペ作成」のインデックスに戻る | 次のページ(アンカー( a )要素)へ |


for back up,NYARGO