人に聞けない痔の悩み、これでスッキリ >>

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

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


<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>

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

教えて!ください。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

通常、お書きになったソースでも横に並んで表示されるはずだと思いますが、画像が入る場所の横幅が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>
    • good
    • 0
この回答へのお礼

コピペで出来ました。

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

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

画像 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)を評しする必要があるときのサイズも指定しておく。
    • good
    • 0
この回答へのお礼

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

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

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

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

表の線が邪魔なら線の幅を0にする。
    • good
    • 0
この回答へのお礼

わたし、初心者です。

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

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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング