HTMLの画像を横に並べて表示のやり方

エディターでブログを書いています。

画像を横に並べて表示する方法を教えてください。


<a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" /></a>

<a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" /></a>

上の二枚の画像を横に並べるには、どこをどのようにすればいいでしょうか？

教えて！ください。

No.2 ベストアンサー 回答者： kon77 回答日時： 2015/06/26 09:42

通常、お書きになったソースでも横に並んで表示されるはずだと思いますが、画像が入る場所の横幅が480pxよりも狭いか、スタイルで何か設定されているか、その他の原因があるのかも知れません。

簡単に実現するなら、私もNo.1さんのやり方が良いかと思います。

<table border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>

<td>
<a href="ttp://.jpg/" target="_blank">
<img src="ttp://.jpg/" alt=".jpg" border="0" width="240" height="180" /></a>
</td>

<td>
<a href="ttp://.jpg/" target="_blank">
<img src="ttp://.jpg/" alt=".jpg" border="0" width="240" height="180" /></a>
</td>

</tr>
</tbody>
</table>


あと、幅の問題で下に画像が落ちてしまっているなら、スタイルで画像の幅をパーセント指定も出来ます。

<a href="ttp://.jpg/" target="_blank">
<img src="ttp://.jpg/" alt=".jpg" border="0" style="width: 45%;"/></a>

<a href="ttp://.jpg/" target="_blank">
<img src="ttp://.jpg/" alt=".jpg" border="0" style="width: 45%;"/></a>

この回答へのお礼

コピペで出来ました。

回答ありがとうございました。

お礼日時：2015/06/26 18:46

No.3 回答者： ORUKA1951 回答日時： 2015/06/26 17:20

画像 img 要素は行内要素ですから、そのままで横に並ぶはずです。

★表は決して使ってはなりません。

<p>
　<a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" /></a>
　<a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" /></a>
</p>
　必ずブロック要素内ですけど・・

>上の二枚の画像を横に並べるには、
　この質問が、画像間に半角スペースが現れることを避けたいのでしたら、
<p>
　<a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" /></a><a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" /></a>
</p>
とする。
　仕様書で言うと、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLでは、次に挙げる文字だけが空白類文字であると定義される。
・ASCIIスペース (&#x0020;)
・水平タブ (&#x0009;)
・書式送り (&#x000C;)
・ゼロ幅スペース (&#x200B;)
　行区切り類もまた、空白類文字である。
・・・【中略】・・・
　本仕様は、ここに空白類文字と明示的に定めたもの以外のスペース文字類については、レンダリングその他の挙動を示すことはない。
・・・【中略】・・・
　ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。 特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　そのままでは、改行が半角スペースとして処理されますので

<p style="font-size:0px;white-space:nowrap;">
　<a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" style="font-size:14px"></a>
　<a href="ttp://.jpg/" target="_blank"><img src="ttp://.jpg" alt=".jpg" border="0" width="240" height="180" style="font-size:14px"></a>
</p>
whitespaceは半角スペース・タブ・改行の表示の仕方を指定する。
　nowrapだと、狭くても改行されない。改行やタブはひとつにまとめられる。
font-sizeでその空白のサイズを指定
　画像が読み取れないときの大体テキスト(alt)を評しする必要があるときのサイズも指定しておく。

この回答へのお礼

上手くできません。わたし、初心者です。

回答ありがとうございました。

お礼日時：2015/06/26 18:46

No.1 回答者： mapascal 回答日時： 2015/06/26 05:14

確か表組みして、その中に写真を並べる。

表の線が邪魔なら線の幅を０にする。

この回答へのお礼

わたし、初心者です。

回答ありがとうございました。

お礼日時：2015/06/26 18:45