画像のサイズを指定する

<img src = "画像URL"alt = "画像の代わりのテキスト"width = "幅" height = "高さ" />

画像は、サイズを指定してもしなくとも表示されます。例えばサイズを小さめにし、リンク付きの画像を表示させておき、クリックすると大きな画像が表示されるようにすると、スペースの節約、表示時間の節約になります。記事部分の領域からはみでるような、大きな画像を掲載した場合は、デザインが崩れる場合もあります。それを回避する時にも使われます。

また、画像のサイズをしているのとしていないのとでは、表示速度にも違いが出ます。指定されている画像の方が速く表示されるので、出来るだけ指定するようにしましょう。

指定出来る値

  • px  ピクセル
  • %   パーセント

pxでサイズを指定する

ひよこの画像

  1. HTMLソース
  2. <p><img src="http://blog13.fc2.com/f/fc2blogshop/file/fc2.gif" alt="ひよこの画像" width="200" height="200" />

    </p>

%でサイズを指定する

ひよこの画像

  1. HTMLソース
  2. <p><img src="http://blog13.fc2.com/f/fc2blogshop/file/fc2.gif" alt="ひよこの画像" width="20%" height="20%" />

    </p>

%で指定した場合、ウィンドウサイズを変えると画像のサイズも変わります。

CSSで指定する事も可能

CSSで画像のサイズを指定する事も可能です。表示される全ての画像のサイズを一括指定したり、ある領域内での画像を全て一括指定にします。

全ての画像に適用

  1. HTMLソース
  2. <p><img src="http://blog13.fc2.com/f/fc2blogshop/file/fc2.gif" alt="ひよこの画像" /></p>
  1. CSSソース
  2. img{
  3.   border: 1px solid #000;
  4.   width: 200px;
  5.   height: 200px;
  6. }

領域内の画像に適用

  1. HTMLソース
  2. <p class="imgsize"><img src="http://blog13.fc2.com/f/fc2blogshop/file/fc2.gif" alt="ひよこの画像" /></p>
  1. CSSソース
  2. .imgsize img{
  3.   border: 1px solid #000;
  4.   width: 200px;
  5.   height: 200px;
  6. }

前後の記事

最近の記事