HTML

<img> 画像

詳細を開く 詳細を閉じる

画像 : <img>

<img>要素は、

  • 画像・図(イメージ:image)を表します。
  • 開始タグの単体で使われ、終了タグは要りません。
  • インライン要素です。

別ウィンドウで表示

<img src="../img/sample.jpg">

画像ファイルが見つからない場合に、代替文字列を表示 : alt

  • 画像ファイルが見つからない場合、デフォルトでは絵が壊れたようなアイコンが表示されます。(例1)
  • これを出さないためには、alt属性を指定します。(例2)
  • alt=""(空の文字列)とすると、ファイルが見つからない場合に何も表示しません。(例3)

別ウィンドウで表示

<style>
	.sample {
		margin:	10px;
		padding:	10px;
		border:	1px solid red; 
	}
</style>

例1:	
<div class="sample">
	<img src="aaa.jpg">
</div>

例2:
<div class="sample">
	<img src="aaa.jpg" alt="画像ファイルが見つかりません">
</div>

例3:
<div class="sample">
	<img src="aaa.jpg" alt="">
</div>

フォーカス時にツールチップを表示 : title

  • title属性を指定すると、「ツールチップ」を表示させることができます。
  • 「ツールチップ」は、ポインタ(=マウス)をフォーカスさせると現れる小さなボックスです。

別ウィンドウで表示

<img src="../img/sample.jpg" title="モンサンミッシェル">

画像リンク : <a>

  • <a>要素<img>要素を入れると、画像リンクを作れます。
  • 下のサンプルでは、画像をクリックすると、別のHTMLファイルへ移動します。

別ウィンドウで表示

<a href="aaa.html">
	<img src="../img/sample.jpg">
</a>

<figure><figcaption>

<figure>要素は、

  • HTML5から追加された要素です。
  • 本文から分離可能な図表(巻末などに移動することが可能な図表)などを表します。
  • 本文中に組み込まれた図には使えません(つまり、その図が移動されたり削除された場合に、本文の意味が通じなくなる時には使わない)。
  • 通常、<img>の親要素として使います。
  • ブロック要素です。

<figcaption>要素は、

  • <figure>の子要素です。
  • 図表のタイトルを表示します。

別ウィンドウで表示

<figure>
	<img src="../img/sample.jpg">
	<figcaption>モンサンミッシェル</figcaption>
</figure>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ