HTMLの画像で配置を調整する方法

画像のセンタリング

画像は、デフォルトでは左寄せで表示されます。

以下のように、センタリングすることもできます。

画像をセンタリングする方法を、2つご紹介します。

marginを使う

1つ目は、marginのautoを使う方法です。以下は、CSSの記述例です。

.img-block {
  display: block;
  margin: 0 auto;
}

display:block;によって、marginのautoが使えるようになります。marginで上下0、左右autoに指定することで、画像がセンタリングされます。

HTMLは、以下です。

<img src="ファイル名" alt="画像の説明" class="img-block">

クラスimg-blockを適用するだけです。

text-alignを使う

2つ目は、text-alignを使う方法です。以下は、CSSの記述例です。

.img-center {
  text-align: center;
}

text-aliginプロパティは、横方向の表示位置を指定します。text-aligin: center;の代わりに、text-aligin: right;と記述すると右寄せで表示されます。

HTMLでは、以下のようにdivをimgの親要素にする必要があります。

<div class="img-center">
<img src="ファイル名" alt="画像の説明">
</div>

text-alignによって、div内部の表示(画像)がセンタリングされます。

画像を横並びで表示する方法

画像の横並びは、以下のようにimg要素を連続して記述するだけです。

<img src="images/image1.png" alt="image1の説明">
<img src="images/image2.png" alt="image2の説明">

上記は、以下のように表示されます。

HTMLでimg要素を改行して記述しているため、画像間に間隔ができます。もし、img要素を改行せずに記述すると、間隔がなくなります(画像の間に余白がなくなる)。また、間隔の調整はmarginで行えます。

この方法は、text-alignを使ってセンタリングした時も使えますが、marginのautoを使ってセンタリングした時は使えません。2つ目の画像は、1つ目の画像の下に表示されてしまいます。

画像の横に文字を表示する方法

画像は、テキストと同じ扱いです。このため、img要素に続けて文章を記述すると、画像に続けて右に表示されます。ただし、画像の右側で下の方に1行分だけです。

また、文書がp要素などの場合は、画像の横には表示されません。

画像の横に複数行文字を表示したい場合は、CSSで以下のようにします。

.img-left {
  float: left;
  margin-right: 2em;
}

floatプロパティでleftを指定すると、指定した要素を左に寄せて表示して、次の要素を横に回り込ませます。

HTMLの例は、以下です。

<img src="images/image1.png" alt="image1の説明" class="img-left">
<p>春になると木漏れ日が差し、草花は土の中から顔を出します。夏になると、太陽は草花に喜びを与えます。秋になると、草花は実をなして恵を与えます。冬になると雪が降り、草花は種となって土の中で眠ります。</p>

img要素に、クラスimg-leftを適用しています。上記は、以下のように表示されます。

これは、記事で写真などを段落の左に表示する時に、よく使われます。CSSのfloatプロパティでrightを指定すると、画像は右に表示されます。

また、途中の段落から画像の右側に表示したくない場合は、その段落でclear:both;を宣言します。

.p-clear {
  clear: both;
}

clear:bothは、回り込みを解除します。このため、p要素でクラスp-clearを適用すると、画像の下に表示されるようになります。

画像の上に文字を表示する方法

以下のように、画像の上に文字を表示することもできます。

この方法を2つ、ご紹介します。

画像が飾りの場合

画像に意味がなく、飾りのような場合は背景にします。以下は、CSSの例です。

.test {
  background-image: url(../images/image1.png);
  width: 140px;
  height: 70px;
}

background-imageで、背景画像を指定しています。「../」は1つ上のフォルダを示します。CSSファイルがCSSフォルダ、画像がimagesフォルダなど別々に配置されている場合、CSSファイルから見て1つ上のフォルダからの画像ファイル位置を指定する必要があります。

widthは画像の横幅、heightは画像の高さです。

HTMLは、以下とします。

<p class="test">画像を背景として使っています。</p>

p要素の背景として画像が表示されます。

画像に意味がある場合

画像を背景として使うと、読み上げソフトでは読み上げらせません。また、検索の対象にもなりません。

画像に意味がある場合は、positionを使います。以下は、CSSの例です。

.test1 {
  position: relative;
}

.test2 {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 120px;
  margin: 0;
}

親要素でposition: relative;、子要素でposition: absolute;を宣言することで、子要素の表示位置をtopやleftで指定できるようになります。topは上からの位置、leftは左からの位置です。bottomで下からの位置、rightで右からの位置も指定できます。

また、pxだけでなく%やem、autoも使えます。

HTMLは、以下です。

<div class="test1">
<img src="images/image1.png" alt="image1の説明">
<p class="test2" >画像の上に文字を表示しています。</p>
<div>

クラスtest2を適用したp要素が、クラスtest1を適用したdivの子要素のため、div(=画像の表示領域)の上から2px、左から10pxの所で表示が開始されます。

また、以下のように画像上の文書をセンタリングすることもできます。

これは、CSSを以下のように書き直すと実現できます。

.test1 {
  position: relative;
  width: 400px;
}

.test2 {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 120px;
}

赤字のwidth、left、right、marginプロパティ部分が、先ほどのCSSと違う所です。親要素のdivで画像と同じ横幅(width)を指定し、leftもrightも0にすることでmarginのautoによってセンタリングができます。