●今回は設置した画像に文字を入れてみましょう

        ●画像とテキスト（文章）の位置関係

        １）
        ＜ＢＯＤＹ＞
        ＜ＦＯＮＴ　ＳＩＺＥ＝”７”＞コメント＜/ＦＯＮＴ＞
        ＜ＩＭＧ　ＳＲＣ＝”ファイル名”ＷＩＤＴＨ＝”３００”ＨＥＩＧＨＴ＝”２００”ＢＯＲＤＥＲ＝”２”＞
        ＜/ＢＯＤＹ＞

        このように画像の前にテキスト（コメント）をいれると画面上では画像の左側にきます

 　　いかがでしょうか？
        このようになりましたか？

        ２）
        ＜ＢＯＤＹ＞
        ＜ＩＭＧ　ＳＲＣ＝”ファイル名”ＷＩＤＴＨ＝”３００”ＨＥＩＧＨＴ＝”２００”ＢＯＲＤＥＲ＝”２”＞
        ＜ＦＯＮＴ　ＳＩＺＥ＝”７”＞コメント＜/ＦＯＮＴ＞
        ＜/ＢＯＤＹ＞

        このように画像の後ろにいれると画面上では画像の右側にコメントがきます

 　　いかがでしょうか？
        このようになりましたか？

        ☆注）
        そしてこれらのコメントはいずれも画像の底辺（一番下のライン）に並んでコメントが書かれています。

        当然このコメントの配置を変更できます

        このときにはＩＭＧエレメントのＡＬＩＧＮ属性を使います
        属性値は上（ｔｏｐ）
        真ん中（ｍｉｄｄｌｅ）
        下（ｂｏｔｔｏｍ）
        これを使います

        ●使用方法です

        ＜ＩＭＧ　ＳＲＣ＝”ファイル名”ＷＩＤＴＨ＝”３００”ＨＥＩＧＨＴ＝”２００”ＢＯＲＤＥＲ＝”２”ＡＬＩＧ
        ＩＮ＝”ｔｏｐ”＞

        こうしておいて、さっきお話したようにこの画像のタグの前にコメントをもってくるか、後ろに持ってくるのかを考え
        れば好みの位置にコメントが書けます

 　　いかがでしょうか？
        このようになりましたか？

        ●応用編

        今までお話をしてきた配置関係ではコメントが少なければ見やすいんだけど、コメントが多くなってくると、ごちゃご
        ちゃしていて見にくくなってしまいます。

        そんな時には画像とコメントとの間に空間をもたせて、すっきりと見せる方法があります

        ●ＩＭＧエレメントのＨＳＰＡＣＥ属性
        ＨＳＰＡＣＥは画像と文章の水平方向の間隔（余白）を意味していて属性値はピクセル数を入れます

        ●ＩＭＧエレメントのＶＳＰＡＣＥ属性
        ＶＳＰＡＣＥは画像と文章の垂直方向の間隔（余白）を意味していて属性値はピクセル数をいれます

        ●使用例

        ＜ＩＭＧ　ＳＲＣ＝”ファイル名”　ＷＩＤＴＨ＝”３００”　ＨＥＩＧＨＴ＝”２００”　ＢＯＲＤＥＲ＝”２”
        ＡＬＩＧＮ＝”ｌｅｆｔ”　ＨＳＰＡＣＥ＝”２５”　ＶＳＰＡＣＥ＝”５”＞

        これはそれぞれ水平方向（実際には画像の左右）に隙間（空白）を２５ピクセルあけて、垂直方向（実際には画像の上
        下）に５ピクセルあいています

 　　いかがでしょうか？
        このようになりましたか？