気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
HTML/XHTMLタグ・要素・属性・属性値

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

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
写真・画像を表示したい!『IMGタグ・要素編』

IMGタグ・要素

IMGタグとは

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


<img src="お好きな画像ファイル名.jpg(or gif...etc.)" alt="ファイルの説明文">

 だけで終了だからです。

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

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

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

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

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

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

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

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


<img src="お好きな画像ファイル名.jpg(or gif...etc.)" title="ファイルの説明文" alt="ファイルの説明文">

のようにします。

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

写真をクリックして他のページに移動したい!『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 の設定より優先されます。

lang

 langは、aタグで設定される場合には、[ lang="en" ]、[ lang="ja" ]のようにリンク参照先の国や地域の言語を設定することができます。

dir

 dirは、direction(方向)の略で右から左に向かって書く右書き(right to left)か左から右に向かって書く左書き(left to right)の記述書式の方向指定で国際化における指定可能属性です。

 dirの属性値は、right to leftの略語、[ rtl ]か、left to rightの略語[ ltr ]です。

title

 titleは、aタグを含むほぼ全てのタグで設定可能で、ブラウザ上でポイントされた場合に、titleに設定された属性値が表示されます。

style

 styleは、CSSのインライン設定を行うことができる属性です。

イベント

 HTMLではユーザーの操作によって何らかの処理を行いたい場合にそのタイミングにあたる属性がいくつか用意されています。

 こうしたタイミングにあたる属性はイベントハンドル、イベントハンドラなどと呼ばれ、JavaScriptやvbscriptの関数等を設定することができます。

 詳細は、イベントハンドル・イベントハンドラ参照。

各種HTMLとHTMLタグ/要素・属性・属性値

ウェブ造ホーム前へ次へ