画像を表示させる

画像を表示させる方法です。

画像を表示させるタグは、<img />タグになります。src属性にURLを入れて<img src="URL" />のように使います。

りんごの画像（apple.jpg）を用意して、これを表示させて見ます。（画像を右クリックして保存してください）

<!--XHTML1.0-->
<html>
	<head>
	略
	</head>
	<body>
		<h1>果物について</h1>
			<p>果物の説明</p>
			<h2>りんごについて</h2>
				<p>りんごの説明</p>
				<h3>りんごの種類</h3>
					<p>紅玉、小町etc...</p>
					<p><img src="jpg/apple.jpg" alt="りんごの画像" title="りんごの画像" /></p>
				<h3>りんごの栄養</h3>
					<p>ビタミンが豊富です。</p>
			<h2>みかんについて</h2>
				<p>みかんの説明</p>
		<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
	</body>
</html>

「jpg/apple.jpg」は、jpgというフォルダ（＝ディレクトリ）の中にあるapple.jpgを選択するための指示です。

index.htmlとapple.jpgが同じ階層にいる場合であれば、「jpg/apple.jpg」ではなく、ただの「apple.jpg」にすればOKです。

しかし、htmlファイルや画像の数が多くなってくるとフォルダ内がぐちゃぐちゃになってしまい、後々整理するときに大変です。

そこで、index.htmlがあるフォルダの中に、さらにフォルダを作って、jpgフォルダにjpg画像を、gifフォルダにgif画像を、appleフォルダにりんご関連ページを、orangeフォルダにみかん関連ページを・・・というように整理していきます。

フォルダの作成は、作りたいフォルダ内で、右クリック→新規作成で作ることが可能です。注意点として、

小文字のjpgと大文字のJPGは区別される
検索エンジン最適化（SEO）の都合上、各ページの階層は2階層までとしたほうがよい（画像とかは3階層以降OK）

この要領で、先ほどのapple.jpgをjpgフォルダに入れると

のようになります。

jpgフォルダ内のapple.jpgにアクセスするために、「jpg/apple.jpg」（「./jpg/apple.jp」も同じ意味）のような表記を使っているわけです。

下の階層に下がる時は、./A/B/index.html（Aフォルダの中のBフォルダの中のindex.html）、逆に上の階層に上がるときは、../../../index.html（1階層戻って、さらに戻って、さらに戻ったところにあるindex.html）

このディレクトリ構造を意識することは非常に大切ですので、やりながら慣れましょう。

続いて、alt属性について。

altは図に限らず、ワンポイントの矢印であったとしても、必ず入れなければならない属性です。図の場合は「その図に関する説明」を、ワンポイントの場合は「空欄」にしておきます。

title属性では、画像の上にマウスポインタが重なった時に表示される説明を指定することができます。

HTML5での画像表示

HTML5で図表や挿絵を入れたい時には、<figure></figure>タグを用いる必要があります。（※ワンポイント画像には不要です）

そして、<figcaption></figcaption>をfigure内に記述することで、その画像のキャプション（画像を説明する文）を入れることができます。

<!--HTML5-->
<html>
	<head>
	略
	</head>
	<body>
		<h1>果物について</h1>
			<p>果物の説明</p>
			<h2>りんごについて</h2>
				<p>りんごの説明</p>
				<h3>りんごの種類</h3>
					<p>紅玉、小町etc...</p>
					<figure>
					<figcaption>りんごの写真</figcaption>
					<img src="jpg/apple.jpg" alt="りんごの画像" title="りんごの画像" />
					</figure>
				<h3>りんごの栄養</h3>
					<p>ビタミンが豊富です。</p>
			<h2>みかんについて</h2>
				<p>みかんの説明</p>
		<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
	</body>
</html>

ここまでを保存して、ブラウザで開いてみると、サンプルのようになります。

また下記のように、imgタグの中にwidthとheightを指定すると、画像の大きさを変えることができます。

読み込みスピードを重視するなら予め必要な大きさに加工した状態で挿入するのが最も望ましいし、サイズはスタイルシートで調整するほうが望ましいんですが、めんどうなときはよく使ってしまいます。。。

<img src="jpg/apple.jpg" alt="りんごの画像" title="りんごの画像" width="300" height="200" />

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>