素人珈琲

< 新しい記事

新着記事一覧(全70件)

過去の記事 >

January 8, 2006

HTML教えます　その22

(1)

テーマ：ホームページ作成の悩み(550)

カテゴリ：ホームページ作成教室

今回のテーマは前回の「 背景に画像を持ってくる方法 」を使っての応用です！

そのテーマは「 画像に簡単に文字を書き込む 」です

と、いうことでさっそく例から参ります

HTML

<table border="0" background="http://image.space.rakuten.co.jp/lg01/16/0000178716/93/
img7b3f7cc280mlw3.gif" width="135" height="78">
<tr><td><font style="color:red;">カメの画像にラクガキ</font></td></tr>
</table>

表示

カメの画像にラクガキ

これは <table> 、つまりは表の背景に画像をもってきて、その表に字を書き込んだだけのことです

※このときに、注意があります

「 背景として画像を持ってきたときの性質 」という問題です

HTML

<table border="0" background="http://image.space.rakuten.co.jp/lg01/16/0000178716/93/
img7b3f7cc280mlw3.gif" >
<tr><td><font style="color:red;">カメの画像にラクガキ</font></td></tr>
</table>

表示

カメの画像にラクガキ

さきほどと何が変わったか分かりますか？
そう！<table>タグのサイズ（＝表の大きさ）を指定していないのです

この場合、例を見れば分かるように字を書いた分のスペースしか画像は表示されません

では、適当な大きさを指定してやります

HTML

<table border="0" background="http://image.space.rakuten.co.jp/lg01/16/0000178716/93/
img7b3f7cc280mlw3.gif" width="300" height="200" >
<tr><td><font style="color:red;">カメの画像にラクガキ</font></td></tr>
</table>

表示

カメの画像にラクガキ

適当な大きさにすると、画像が並んで表示されます

これが「 背景として画像を持ってきたときの性質 」です

では「 どうやってちょうどイイ大きさを調べるの？ 」

答えはですねぇ

一度、その画像をここ（日記本文）に表示してみます

<img src="http://image.space.rakuten.co.jp/lg01/16/0000178716/93/img7b3f7cc280mlw3.gif" width="135" height="78" alt="カメの画像" border="0">
っていうタグが出ますよね？

（実際「プレビューを開く」を押すと、その画像↓

が出てきます）

はい、そのタグの中でこの赤い部分に注目↓
width="135" height="78" alt="カメの画像" border="0">

これは画像の標準サイズを示しているものなのです！

つまり、この width="135" height="78" という値を<table>で指定してやれば、一番上のような例のように出来るのです

参考までにもう１回やってみます

HTML

<table border="0" background="http://image.space.rakuten.co.jp/lg01/16/0000178716/93/
img7b3f7cc280mlw3.gif" width="135" height="78" >
<tr><td><font style="color:red;">カメの画像にラクガキ</font></td></tr>
</table>

表示

カメの画像にラクガキ

これで出来ましたねｂ
今回は以上です！
次もこのテーマの続編ですので、どうぞヨロシク

お気に入りの記事を「いいね！」で応援しよう