忍者ブログ

ホームページ作成ビギナーズガイド

HTML4.01とCSSによるWeb標準のホームページ作成入門。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

imgタグ(画像)

imgタグは画像です。imageのimgです。

imgタグの雛型

<img src="" alt="" width="" height="">

imgタグに指定する属性

src属性

「src="画像ファイルのURL"」と書いて、画像ファイルを指定します。
sourceのsrcです。src属性は必須です。

alt属性

「alt="代替テキスト"」として、画像が表示されない環境の訪問者への配慮として代替テキストを書きます。
altはalternate textです。imgタグにはalt属性は必須です。省略できません。

代替テキストですから、画像についての説明とは違います。
例えば、音声ブラウザで、代替テキストと前後の文章をつなげて読み上げた場合に意味が通じるものです。
結果的に画像の説明と同じ内容になることも多いですが、役割は違います。

画像でリンクする場合は、「画像を使わず文字でリンクするとしたら何と書くか」という代替テキストを忘れずに。

単なる飾りのために画像を使う場合は、代替テキストを書いてはいけません。
意味のない画像に代替テキストを書くと、逆に意味がおかしくなります。
そういう場合は「alt=""」としてalt属性を空にします。

空の属性を書くのは妙な気がしますが、HTML4.01仕様書にそうしろと書いてあるので。
(→How to specify alternate text)

そもそも、装飾はCSS(スタイルシート)でするのが望ましいので、なるべく意味の無いimgタグを使わないようにしましょう。

width属性、height属性

画像のサイズを指定します。必須ではないですが、指定しておくとブラウザが画像の分のスペースを空けて画像より後の部分をレイアウトできるので、閲覧者にとっては表示が速く感じられます。 なるべく指定したほうがいいでしょう。

border属性

画像の枠線の太さを指定します。上記の雛型に書いていないのは、非推奨の属性だからです。

ホームページ作成ソフトでは「border="0"」と自動的に挿入されたりします。
画像でリンクをすると枠線が付いてしまうので、それを消すためでしょうか。

border属性を使わずに、CSS(スタイルシート)で画像の枠線を消すには、例えば下記のようにします。

img {border:0;}

これは「全ての画像の枠線(の幅)は0」と指定するものです。
これを書いた場合は、枠線を付けたい画像は個別に枠線を指定することになります。

PR
divタグHOMEdl、dt、ddタグ(定義リスト)

コメント

お名前(N)
タイトル(T)
メールアドレス(M)
URL(U)
コメント(C)
パスワード(P)
送信(S)

トラックバック

divタグHOMEdl、dt、ddタグ(定義リスト)

メニュー

カテゴリー

リンク

RSS

Appendix

リンクはご自由にどうぞ。

最終更新2008/07/09

Valid XHTML 1.0 Transitional
Valid CSS!
Copyright © ホームページ作成ビギナーズガイド All Rights Reserved.
忍者ブログ[PR]