【html】画像を横並びにしたときずれる原因と修正方法

画像を横並びにしたとき画像の高さがあってなく、うまくそろってない、ずれていることがあります。
ここではその原因と修正方法についてご説明します。

画像はtable（表）を使って横並びにしたとします。

結論

原因1.画像比率が異なる

• 解決策1.画像のサイズを縦横ともにまったく同じにする
• 解決策2.heightをそろえる

原因2.画像サイズが異なる

• 解決策1.画像のサイズを縦横ともにまったく同じにする
• 解決策2.heightをそろえる

原因3.空白スペースが入っている

• 解決策.空白を削除する

原因4.pタグが入っている

• 解決策1.pタグを消す
• 解決策2.もう一方もpタグ付ける
• 解決策3.tableごと消して最初からやり直す
• 解決策4.pタグのmargin,paddingを0にする

原因1.画像比率が異なる

失敗イメージ

html

<table>
<tr>
<td><img src="1.jpg" alt="" ></td>
<td><img src="2.jpg" alt="" ></td>
</tr>
</table>

画像の比率が4：3と16：9では当然高さが変わってきます。

原因2.画像サイズが異なる

（比率が同じでも元の写真の横幅が違う場合）
tableは内容のサイズに合わせてtdの横幅が自動で変わります。
見た目上は同じサイズでも元の画像サイズのサイズが違うとずれることがあります。

失敗イメージ

解決策1.画像のサイズを縦横ともにまったく同じにしましょう。

ペイントやフォトショップで画像を加工しましょう。
WordPressなら画像アップロード後編集することもできます。

解決策2.heightをそろえる

画像は調整できない・したくない場合CSSで調整しましょう。

完成イメージ

css

img{
height:100px;/* 任意のサイズ */
width:auto;
}

これで高さを固定します。
比率が違う場合、高さは同じでも横幅は異なります。

原因3.空白スペースが入っている

選択して空白があるか確認しましょう。
なお、Ctrl+Aで全選択ができます。

<table>
<tr>
<td><img src="1.jpg" alt="" > </td>
<td><img src="2.jpg" alt="" ></td>
</tr>
</table>

失敗イメージ

↑左の写真の下に空白スペースがあります。

対策

空白を削除しましょう。

原因4.pタグが入っている

WordPressの多くはenterを押すと（改行すると）pタグが付きます。
そのpタグにmarginかpaddingがあるせいでずれることがあります。
画像のうち一方にてenterを押してしまったかもしれません。

失敗イメージ

↑右の写真にpタグが付いていて、そのpタグにmarginが設定されています。

<table>
<tr>
<td><p><img src="1.jpg" alt=""></p></td>
<td><img src="2.jpg" alt=""></td>
</tr>
</table>

成功イメージ

<table>
<tr>
<td><img src="1.jpg" alt="" ></td>
<td><img src="2.jpg" alt="" ></td>
</tr>
</table> 

解決策 1.pタグを消す

htmlソースのimgを囲んでいるpタグを消しましょう。

解決策2.もう一方もpタグ付ける

一番簡単です。

解決策3.tableごと消して最初からやり直す

今度はenter押さないよう注意しましょう。

解決策4.pタグのmargin,paddingを0にする

css

p{
margin:0;
padding:0;
}

まとめ

原因1.画像比率が異なる

• 解決策1.画像のサイズを縦横ともにまったく同じにする
• 解決策2.heightをそろえる

原因2.画像サイズが異なる

• 解決策1.画像のサイズを縦横ともにまったく同じにする
• 解決策2.heightをそろえる

原因3.空白スペースが入っている

• 解決策.空白を削除する

原因4.pタグが入っている

• 解決策1.pタグを消す
• 解決策2.もう一方もpタグ付ける
• 解決策3.tableごと消して最初からやり直す
• 解決策4.pタグのmargin,paddingを0にする

以上、画像を横並びにしたときずれる原因と修正方法でした。