img
画像の埋め込み

2008/3/26

構文

説明

img要素は、画像の埋め込みを表すインライン要素です。 src属性およびalt属性は必須属性です。

src属性には、画像ファイルのあるURL（絶対または相対パス）を指定します。

alt属性には、画像の代替テキストを指定します。この代替テキストは、画像のパスなどが間違っている場合や、画像を無効にしている場合など、画像が表示されない場合に表示されます。

属性

サンプル

画像の埋め込み

<!-- 画像の埋め込み -->
<p><img src="/content/img/pic1-thumb.png" alt="ケーキ" /></p>

画像の枠線を指定

<!-- 画像の枠線を指定 -->
<style type="text/css">
	img#cake {
		border:3px dotted maroon;
	}
</style>
<p><img src="/content/img/pic1-thumb.png" alt="ケーキ" id="cake" /></p>

画像を左揃え

<!-- 画像を左揃え -->
<style type="text/css">
	div#img_float {
		clear:both; /* 回り込み解除 */
		overflow:hidden;
	}
	div#img_float img {
		float:left; /* 左揃え */
		margin-right:10px; /* 画像の右側に余白 */
	}
</style>
<div id="img_float">
	<p><img src="/content/img/pic1-thumb.png" alt="ケーキ" id="cake2" /></p>
	<p>話題のKrispy Kreme Doughnuts（クリスピー・クリーム・ドーナツ）♪有楽町にある丸井のB1で、並ぶこと1時間20分。ついにゲットしました！！</p>
	<p>やわらかくてフワフワした生地。大きさは、アメリカンサイズかと思ったら、それほどでもなかった。味も甘すぎず、日本人に合う感じ。それにしても、あの行列はいつまでつづくのやらやらｗ</p>
</div>