画像とテキスト

画像とテキストの組み合わせ

１枚の画像は大きさに関係無く、１文字として扱われています。アライン属性（ＡＬＩＧＮ）を用いると、画像や文字列の並び場所を 変更する事が出来ます。「ＡＬＩＧＮ」属性には「ｔｏｐ」・「ｍｉｄｄｌｅ」・「ｂｏｔｔｏｍ」・「ｌｅｆｔ」・「ｒｉｇｈｔ」などが有ります。「ｉｍｇ」エレメントの「ＡＬＩＧＮ」属性は、属性値に「ｃｅｎｔｅｒ」を持ちません。 サンプル 一個目 二個目 三個目 ソース <img src="画像のURL" border="10" align="top"><font size="5">一個目</font><br> <img src="画像のURL" border="10" align="middle"><font size="5">二個目</font><br> <img src="画像のURL" border="10" align="bottom"><font size="5">三個目</font><br> 説明 上の画像は文字列も上ぞろいに、真ん中の画像は文字列も中ぞろいに、下の画像は文字列も下ぞろいに成ります。 アライン属性を何も指定しない場合は、文字列は下ぞろいに成ります。どんな風に表示されるか色々と挑戦してみて下さい。

画像とテキストを分ける

上と何が違うか、違いを探してみてください。 サンプル 一個目 二個目 ソース <img src="画像のURL" border="10" align="left"><font size="5">一個目</font><br> <img src="画像のURL" border="10" align="right"><font size="5">二個目</font><br> 説明 今回のアライン属性では、「ｌｅｆｔ」・「ｒｉｇｈｔ」を使用しています。「ｌｅｆｔ」を指定すると、画像は左端に寄って、文字列は 画像の右側に並んで表示されます。「ｒｉｇｈｔ」を指定すると、画像は右端に寄り文字列は左端に表示されます。

画像の周りに空白を入れる

ページの内容によっては画像と文字列がくっついているとあまり見栄えが良くない場合が有ります。このような時には、「ｈｓｐａｃｅ」・「ｖｓｐａｃｅ」属性を用いて画像と文字列の間隔を調整することが出来ます。 サンプル 一個目 ソース <img src="画像のURL" border="10" align="left" hspace="30" vspace="30" ><font size="5">一個目</font><br> 説明 「ｈｓｐａｃｅ」は、横方向の空白のピクセル数を指しています。「ｖｓｐａｃｅ」は、縦方向の空白のピクセル数を指しています。