第１０話 『絵／写真を貼ってみる』の巻

---

	Ａ子さんのホームページもだいぶ出来てきましたね。たいして難しいタグは使っていないけど 、 そこそこのページは出来るものでしょう。 この章では『イラスト／写真などのイメージ』を ホームページに貼る勉強をします。 　まず、ホームページに貼りたい絵／写真のファイルを用意します。 今回は、ぼく（テル）が書いたＡ子さんの似顔絵ako1.gifを用意しました。
ファイル名　<ako1.gif>
絵／写真を貼るタグは下記の通りです。 イメージ貼り付けのタグ <img src="ファイル名"> イメージを貼るタグは、単独で利用します。 このタグを利用すると基本的に画面左に表示されますが、 タグの前後に<center>〜</center>を指定すると、イメージを中央に表示出来ます。 ◇　注意　◇ 上記の様に<img src="ファイル名">と記述できるのは、 表示する画像ファイルが、htmlと同じフォルダの中にあるときだけで、 違うフォルダにある場合は、"ファイル名"のところの記述が変わってきます。 img src=の後のファイル名というのは、もちろん、絵や写真のファイルのことです。 拡張子が「gif（ジフ）」また 「jpg,jpeg（ジェーペグ）」がついたものが、一般的ですが、 最近は「png（ピング）」というものも 使われるようになりました。 では実際にＡ子さんのhtmlに書いていきましょう。

	Ａ子：ちょっと、そんなぶっさいくな絵をはるなんてヒドイじゃない！ Ｂ子：そう？。私は似てると思うけどなぁ。 Ａ子：似てないわよ！ Ｂ子：分かった。分かった！それじゃあ、似顔絵と実物と両方だして もらえば、いいじゃない。 Ａ子：そーね。それならいいわ。本当に似てないんだから！。
ということで、Ａ子さんの似顔絵の横にもう一つ絵を貼ることになりました。 この場合は<img src="ako1.gif">の横に続けて貼りたいイメージのタグを入力すれば ＯＫです。今回は"ako2.gif"を貼るので <img src="ako1.gif"><img src="ako2.gif"> で出来上がり。 縦に並べる場合は<img src="ako1.gif">と<img src="ako2.gif">の間に<br> 改行タグをいれればＯＫ。 では、イメージのタグをＡ子さんのhtmlに入れていきましょう。どこに入れるかで 表示場所が変わってくるのですが、今回は見出しのすぐ下に表示したいと思います。

htmlの画面

Ａ子のホームページにリンク ここをクリックすると今までで出来上がっているＡ子さんのホームページが見られます。

◇　注釈　◇

１．上記のhtmlで<img src="ako2.gif">の後に<br>改行のタグがあるのは、 <img src="ako2.gif">と「名前は、A子。」がつながって表示されるのを 防ぐためです。

目次へ

前のページへ

次のページへ