素人珈琲

< 新しい記事

新着記事一覧(全70件)

過去の記事 >

January 9, 2006

HTML教えます　その23

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

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

前回の続編「 画像に簡単に文字を書き込む 」です

今回は前回の応用します！

では、例から

HTML

表示

カメの画像にラクガキ

この <align> と <valign> タグの説明につきましては「その15 」を参考にしてください

このタグを使えば、画像に文字（テキスト）を自由に書き込めますね

「 画像の上下に、別々の文字を入れたいときはどうすれば？ 」

つまりはこういう状況↓

カメの画像にラクガキ
ラクガキもホドホドに

「 え？普通に上側に書きたい文字のあとに何行か「改行」して下側に書きたい文字を書けばいいんじゃないの？ 」

HTML

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

ラクガキもホドホドに</font></td></tr>
</table>

表示

カメの画像にラクガキ

ラクガキもホドホドに

まぁ確かに出来ないことはないんですが…
こうすると、この空白の量を間違えると

HTML

表示

カメの画像にラクガキ

ラクガキもホドホドに

せっかく表のサイズを、画像のサイズに調整したのに無駄になっちゃいます！

ですので、次の方法を用いましょう

HTML

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

表示