HTML&CSSコーディング
画像の挿入・サイズ調整・中央寄せ

画像を挿入するときは、imgタグを使用します。

ここでは、imgタグとセットで使うsrc属性、画像表示サイズの調整、画像の中央寄せについてわかりやすく解説します。

imgタグとsrc属性

画像を挿入する場合、imgタグにsrc属性を記述します。

タグ名のimgはimage（画像）に、属性名のsrcはsource（源）に由来します。

src属性の値には画像のパスを記述します。

imgタグは空要素と呼ばれ、閉じタグが必要ありません。空要素はimgタグの他にも、brタグ（改行タグ）、inputタグ（フォームの入力欄をつくるタグ）などがあります。

画像のパスの書き方には、相対パス、絶対パス、URLがありますが、次の例では相対パスで記述します。

画像の表示サイズを調整する

画像を挿入するだけなら、これだけでOKですが、このままだと画像が元サイズのまま表示されます。上記の例では、元サイズの512x512ピクセルで表示されます。

そのため、たいていは表示サイズを調整します。

表示サイズの調整はCSSで行います。HTMLファイルとは別にCSSファイルを用意してそこに記述することが多いですが、CSSコードはstyle属性を使ってHTMLタグ内に直接

記述することもできます。

style属性の値として、横幅を制御するwidthプロパティを使います。使い方は、次のとおりです。

widthの値はpxの他、%でも指定できます。%で指定すると、親要素の横幅に対してのパーセントで表示されます。レスポンシブなページにするには%指定が便利です。

画像を中央に寄せる

最後に、画像を中央に寄せる方法です。

画像は挿入すると、左寄せになっています。これを中央に寄せるにはdivタグを使うのが便利です。まずはdivタグでimgタグを囲います。

<div>
  <img src="./test.png" style="width: 100px;">
</div>

このように、タグの中にタグがある構造のことを入子構造といいます。

また、囲んでいるタグは親要素、囲まれているタグは子要素といいます。

この場合、divタグがimgタグの親要素、imgタグがdivタグの子要素となります。

さて、画像を中央寄せにするには、divタグ（のようなブロック要素）にstyle属性を設定して、text-alignプロパティで制御するのが実用的です。言葉で説明されるよりも、見た方がわかりやすいですね。

<div style="text-align: center;">
  <img src="./test.png" style="width: 100px;">
</div>

画像が中央に揃わない場合

画像が中央揃えできないトラブルはとても多いです。

やりがちなミスとして、次のものが考えられます。

以下、少し細かい話になるので、不必要なら読み飛ばしてください。

text-alignはブロック要素に指定して、そのブロック要素の中のインライン要素に対して制御するものです。

また、marginの左右の値をautoにする方法は、中央揃えしたいブロック要素にそのまま記述するものです。

imgタグはインライン要素なので、いったんdivタグのようなブロック要素に入れてから、ブロック要素にtext-alignを記述して制御します。

なお、中央寄せの中央とは、親要素の横幅に対しての中央です。親要素の横幅が思っていたより短くて、思うような位置に来てくれていない場合もありますので、そのような場合は親要素の横幅をwidthで調整してみてください。

SEOにはalt属性を

imgタグに設定すべき属性は、もうひとつあります。それはalt属性です。

altという名称は"alternate"（代わり）に由来し、何らかの理由で画像が表示されなかったときに代わりに表示するテキストを記述できます。

altタグの設定は、SEO（検索エンジン最適化）にとっても大切なので、面倒でも設定することをおすすめします。

altの重要性については、拙著「コツコツやる人のためのAdSense攻略本」でも触れていますので、ご興味あればご覧ください。