ウェブ木箱：HTML講座-画像の表示位置と代替テキスト

☆画像の表示位置と代替テキスト - クイックガイド

			腹減り日誌♪ - donguri browser
		調理道具もいいんだけどね、とりあえずお腹減ったぞ。何か食べるものはないのかぁ？どっちにしろ、画像じゃ食べれないじゃないか。(ショック！)


		１．	画像の表示位置を指定してみよう align


		２．	画像の代わりの文字を指定しよう alt

←前回『背景に画像を使ってみよう』へ

次回『リンクさせてみよう』へ→

画像とその回りのテキストの関係を指定してみよう。画像の前後のテキストを画像の一番上に揃えるとか下に揃えるとかそんな感じ。

align属性は<h1>-<h6>、<p>でも出てきたけど使い方はちょっと違う。属性値は様々あるんだけど代表的なところで top(上揃え),middle(中央揃え),bottom(下揃え)などがある。ブラウザによって表示位置は微妙に違っていたりするんだけど、一番解りやすい表示のものを選んでみたよ。とりあえず各属性の表示を観てみてね。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<img src="keiryou.gif" width="32" height="32"
 align="top">-カップ一杯<br>
<img src="keiryou.gif" width="32" height="32"
 align="middle">-カップ半分<br>
<img src="keiryou.gif" width="32" height="32"
 align="bottom">-カップちょびっと？
</body>
</html>

腹減り日誌♪ -

-カップ一杯

-カップ半分

-カップちょびっと？

ブラウザでの表示はこちら(別ウィンドウ)

この他にも回り込みといって画像の回りをテキストが囲むようにも指定できるよ。その時の属性値はleft(画像は左寄せ)とright(画像は右寄せ)があるよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<img src="risu.gif" width="75" height="50"
 align="left">
炒飯、餃子、回鍋肉<br>
麻婆豆腐、青椒肉絲、芙蓉蟹蛋<br>
粉絲肉未、炸醤麺<br><br><br><br><br>
<img src="risu.gif" width="75" height="50"
 align="right">
チャーハン、ギョウザ、ホイコーロー<br>
マーボー豆腐、チンジャオロースー、カニ玉<br>
マーボー春雨、ジャージャン麺
</body>
</html>

腹減り日誌♪ -

炒飯、餃子、回鍋肉
麻婆豆腐、青椒肉絲、芙蓉蟹蛋
粉絲肉未、炸醤麺

チャーハン、ギョウザ、ホイコーロー
マーボー豆腐、チンジャオロースー、カニ玉
マーボー春雨、ジャージャン麺


		ウィンドウの幅や文字サイズによっても多少表示が左右されるから、ブラウザでの表示を開いてサイズを変更しながら確認してみてね。

ブラウザでの表示はこちら(別ウィンドウ)

ブラウザの設定で画像を読み込まなくしている場合や画像が読み込まれるまでの間に表示されるテキストを指定してみよう。メニューを画像で作る場合などは画像がないと困るよね。でもこれを指定しておけば文字が画像の代わりをしてくれるね。

画像を読み込めない音声ブラウザやテキストブラウザのためにもなるべく重要な個所には指定するようにしよう。

属性値は画像の代わりに表示させたいテキストを書き込めばいい。日本語などでもＯＫだよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<img src="risu_.gif" width="150" height="100"
 alt="りすだよ☆">
<img src="risu.gif" width="75" height="50"
 alt="りすだぞ♪">
</body>
</html>

腹減り日誌♪ -


		左側はわざと読み込めない状態にしてあるよ。

ブラウザでの表示はこちら(別ウィンドウ)

	次は他のページなどにジャンプさせるリンクの説明だよ。次へ→
	前回は背景に画像を使ってみたね。 ←前へ

	画像編－３
	HTML講座第１４回

		画像の代わりのテキストを指定しよう