画像の配置

こんにちは。すーさんです。

HTMLで画像やテキストをレイアウトする時に、よく使うパターンなのに忘れてしまって毎回調べていることについて、備忘録を兼ねてまとめておきます。
今回は画像を配置したときにできる謎の隙間についてです。

○画像を並べたときにできる余白をなくす

数枚の画像を連続して並べたときに、意図しない余白ができることがあります。

HTML:
    <body>
        <img src=”img/rect1.png” alt=”rect1″>
        <img src=”img/rect2.png” alt=”rect2″>
        <br>
        <img src=”img/rect2.png” alt=”rect2″>
        <img src=”img/rect1.png” alt=”rect1″>
    </body>

fig1

 

 

 

 

 

 

 

これを以下のように変更します。
CSS:
div {
    line-height: 0;
}

HTML:
    <body>
        <div>
            <img src=”img/rect1.png” alt=”rect1″><img src=”img/rect2.png” alt=”rect2″><br>
            <img src=”img/rect2.png” alt=”rect2″><img src=”img/rect1.png” alt=”rect1″>
        </div>
    </body>
 

こうすると、余白なく連続して画像を配置することができます。

fig2

 

 

 

 

 

 

 

 ○divで囲んだ画像の余白をなくす
 divタグで画像を囲むことはよくあるのですが、その場合にも何もしないと画像の下に余白ができます。(分かりやすいように、背景色を設定しています)

HTML:
    <div>
        <img src=”img/rect3.png” alt=”rect3″>
    </div>

fig3

 

 

 

 

この場合は、下記のようにCSSで指定すると余白を消すことができます。
CSS:
img{
    display: block;
}

fig4

 

 

 

 

まだあるのですが、今回はここまでにします。

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社