画像と画像の間のスペースはどうすればいいのですか

質問

ブログのためのＨＴＭＬを勉強中です。

アイコンくらいの大きさの画像を連続させてラインのようにしたいと思っています。
画像貼り付けタグを並べただけでは、ものすごく詰まっているので
少し間隔を取りたいのですがどうすればいいんでしようか？
スペースを入れただけでは変化がありませんでした。

また、文字の前にも画像を貼り付けたいのですが、同じように接近していて見栄えがよくありません。

２日ほど色々なＨＴＭＬ講座を探してみたのですが、どうしてもわかりませんでした。
どなたか教えてください。　どうぞよろしくお願いします。

回答No.1

siluf · ベストアンサー

半角のスペースではなく、全角のスペースを入れると間が空きます。

> 文字の前にも画像を貼り付けたいのですが
この場合は・・・
<img src="画像のURL"align="left" vspace="15" hspace="15">
で、画像の右側に文字が入れられます。
vspace="15" hspace="15"　で、画像と文字の空きを指定しています。

align="left"　を　align="right"　にすれば、画像の左側に文字を入れられます。

お礼

できました！
長時間悩んだわりには簡単で、肩すかしをくらったようです（笑）

文字の前にも・・・というのは今回、テーブルタイトルをはさむように
画像を貼り付けたかったので、これも全角スペースで整えることができました。

教えていただいたソースは「テキストの回り込み」ですよね？
少し長めの文章の近くに画像を貼り付けることを考えていたので
今度使ってみますね。

どうもありがとうございました。

回答No.3

oru-oru

勉強中とのことですのでソースは書きませんが、
テーブルを組んで一つのセルに一つの画像を入れ、
テーブルのマージン．パディング．ボーダーをいじってみるのもいいかもです。

勉強頑張って。

お礼

今、テーブルを勉強しています。
行や列の挿入、連結が何とかできるようになりました。

おっしゃるとおり、マージン．パディング．ボーダーを工夫すれば
表組みだけど表でないものができそうですね。
そうすると文字と文字の間に画像を入れることもできる・・・
ますます楽しくなってきました。

どうもありがとうございました。

回答No.2

noname#96725

勉強中ということですから、HTMLソースを記述して目的の表示を工夫されたいのですね？

&nbsp;という記述を間に入れればスペースが出来ます。
文字と文字の間でも、画像と画像の間でも、文字と画像の間でも同じ効果が出ます。

ソース例
<P>画像&nbsp;や&nbsp;文字等&nbsp;の間にわずかスペースを空けます。&nbsp;&nbsp;&nbsp;<IMG src="syasin.jpg" width="100" height="80" border="0">&nbsp;&nbsp;&nbsp;<IMG src="syasin２.jpg" width="100" height="80" border="0"></P>

上記例のように&nbsp;は幾つも幾つも並べて記述することが出来ます。その分間隔は広くなって行きます。

他の方法をもう一つご紹介しますと、
透明gif画像を作り、それを置く位置ではwidth="○○”とその場に合うような幅をピクセルで指定してやります。
この為には透明gif画像を作るソフトが必要になります。

更には奇手ではありますが、画像と画像の間に「_」（アンダーバー）や[-]（ハイフン）などを入れてやる方法もあります。でも積極的に模様として利用するのであれば＊（アフタリスク）も使えます。こんな方法が一番お手軽ですね。

あれこれやっているうちに自分で工夫が出来るようになるとHTMLやCSSが面白くなりますし、色彩や配置なども凝れば凝るほど深みにハマりますね。

お礼

そうなんです、一つ一つの方法は理解できても、いざ作成するとなると
組み合わせることが必要なんですよね。
タグの挿入場所を間違えて、とんでもないものができたりしました（笑）

教えていただいた「&nbsp;」は残念ながら私が登録している楽天広場では無効でした^_^;
でもこういう方法もあるということは覚えておきますね。

アンダーバーやアスタリスク、これは目から鱗でした。
色で工夫すれば綺麗なのができそうです！　いつか試してみます。

おっしゃるとおり、今どっぷりハマってます。
少しずつ出来上がっていくのがとても嬉しくて^^
ブログを誰かに読んでもらうというより、色や画像や素材を駆使して
自分の気に入ったものを作る・・・こちらの方が目的になりそうです。

どうもありがとうございました。