IMGタグ・要素／写真・画像

写真・画像を表示したい！『IMGタグ・要素編』

IMGタグ・要素

IMGタグとは

　この章はとってもシンプルですよ。なぜなら

　だけで終了だからです。

　ちょっとさみしいので追記しますと

　<IMG>タグのSRC属性に画像ファイル名(拡張子は.jpg .gif等)を設定します。

　また『ALT=""』は画像ファイルの説明を入れます。

　このalt属性に設定したフレーズは画像をカーソルでポイントするとブラウザ上に表示されます。

※<IMG>タグでは終了タグは不要です。

※但しXHTMLでは<img src="" />

※少なくともIEでは確かIE6までは[ alt="" ]で表示され、また後もW3Cの妥当性検証アプリ(HTML Validator)でも[ alt="" ]がないと怒られますが、[ alt="" ]だけでは設定したフレーズが表示されなくなりました。

　表示させたい場合には[ title="" ]属性を設定し、

のようにします。

あと１つもとってもシンプルですよ。

写真をクリックして他のページに移動したい！『Aタグ・アンカー＆IMGタグ編』

　ちなみに要素img、<img>タグの詳細仕様は下記の通りです。

要素img、<img>タグの詳細

　要素img、<img>タグは画像を表示させる為の要素、タグです。

要素	意味	用途	使用例
img	image	イメージ画像表示	<img src="" title="" alt="">

要素 img の属性

　imgタグで非推奨の属性は下記の通りです。

非推奨
属性	意味	用途
align	align/alignment	画像の位置指定／既定値:bottom \| middle \| top \| left \| right
border	border	画像の周囲の線指定
hspace	hspace	イメージの左右の空白指定
vspace	vspace	イメージの上下の空白指定

　imgタグに設定できる属性は下記の通りです。

　ほぼimgタグに固有の属性です。

属性	意味	用途
src	source	画像のURI(URL)
name	alt	スタイルシートやスクリプトファイルからの参照用但し、この用途にはnameよりidを推奨
longdesc	long description	img map用のリンク説明(長文)

要素 img のその他の属性

　imgタグに設定できるその他の属性は下記の通りです。

　imgタグだけでなく他のタグ・要素にも設定できる属性です。

属性	意味	用途
alt	alt	リンクの説明
height	height	高さ指定
width	width	幅指定
ismap	ismap	サーバサイドimg map(イメージマップ)を利用する際に必ず指定する値 <img src="" ismap alt="">
usemap	usemap	サーバサイドまたはクライアントサイドimg map(イメージマップ)に利用する画像のURLを指定

属性	意味	用途
id	identify	タグ識別子・参照設定(セレクタ)
class	class	参照設定(セレクタ)
lang	language	リンク参照先の国・地域言語を設定
dir	direction	右書き・左書きの方向指定
title	title	ブラウザ上でタグをポイントすると表示されるテキストを設定
style	style	CSSインライン設定用
※イベント	イベントハンドル	(マウス)ポインタの動作や状態に応じて処理を記述するための設定

id

　idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。

(アンカーリンクの識別子)
アンカー(aタグ)以外のタグの識別子
scriptやobjectタグの識別子
外部CSS設定用idセレクタ

等々です。

class

　classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。

　また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。

　主な用途は

外部CSS設定用classセレクタ

です。

id と class

　id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。

　id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。