画像を表示する

2013年3月28日：HTML

自分のホームページに画像を表示させたい場合は多いかと思います。

そこで、本記事では、HTMLで画像を表示するタグを紹介します。

imタグ

画像を表示するには簡単で、

というようにimgタグを使用します。

srcでURLを指定する

srcで指定したURLの画像が表示されます。例えば、

とすれば、

が表示されます。

widthやheightと幅や高さを指定する

widthやheightで表示する画像の幅や高さを設定します。例えば

とすれば

となります。幅や高さは「%」による指定もできます。画面いっぱいに表示させたいなら100% を指定します。

widthとheightは必須でないので、記述しなくてもかまいません。

記述しないと、画像のサイズがそのまま表示されます。

altで画像を説明する

altでは、画像が何なのか説明します。

altは、画像が表示されない環境で代わりに表示される文字のことです。

alt属性は必ず記述しなければいけません。

もしも、画像を記述する言葉がないなら

alt=""

というように値を空にしておきます。

左寄せや右寄せを設定する

画像の右寄せや左寄せを設定するには、alignにより指定します。

文章はここからはじまります。

というように、alignにleftかrightを設定すると左寄せや右寄せを設定できます。

この場合は、左へ寄せていて、文章は右上から始まります。

画像の左寄せを解除したい場合は

を使用します。右寄せ解除の場合は

です。

余白を指定する

画像と文章の間に余白を指定したいなら、vspaceやhspaceを使用します。

とすれば、

文章はここから始まります。

というように、縦方向に10px、横方向へ20pxのスペースを確保できます。

vspaceでvertical(縦)方向のスペース
hspaceでhorizontal(横)方向のスペース

を指定できます。

境界線を表示する

画像の境界線を指定したい場合は、borderにより指定します。

とします。

figureタグ

本文から参照される画像にはfigureタグをつけます。

figureタグをつけることで、

本文で使用されている画像
装飾用で本文とは関係ない画像

を区別できます。ですから、

本文と関係ない画像にはfigureタグをつけないようにしましょう。

使い方は、<figure>と</figure>でimgタグを囲むだけです。

<figure><img src="http://jprogramer.com/jprogramer.png" alt="Jprogramerのロゴ"></figure>

figcaptionタグ

画像にキャプションをつけたい場合は、figcaptionタグを使用します。

以下のように使用します。

<figure>
<img src="http://jprogramer.com/jprogramer.png" alt="Jprogramerのロゴ">
<figcaption>Jprogramer</figcaption>
</figure>

TOPICS「画像の形式」

ウェブサイトでよく使用される画像である「GIF(じふ)」「JPEG(じぇいぺぐ)」「PNG(ぴんぐ)」について解説します。

GIF

イラストやアイコンなどのように色の変化がはっきりしている画像に向いているファイル形式です。

透過GIFとしても利用でき、背景を透明化することが可能です。

また、GIFを使用してアニメーションを作成することもできます。

JPEG

JPEGの特長は色数の多さにあります。

GIFとかPNGの場合、赤8bit=256、青8bit=256、緑8bit=256で一つの色を表現します。

一方、JPEGでは赤24bit=16777216、青24bit=16777216、緑24bit=16777216で色を表現します。

圧倒的に色の表現できる細かさがJPEGは大きいのです。

蛇足ですが、色の数が24bitであることを「フルカラー」といいます。

色が急激に変化する場所ではブロックノイズがのりやすいので、イラストには向いていません。

色変化がなめらかなものにはJPEGが向いています。

PNG

ウェブで使用する画像という目的で開発された画像形式です。

透過対応
圧縮による画像の劣化がない
イラスト・写真にも利用可能

などウェブでの使用にすぐれた仕様となっています。

ウェブサイトで使用するならとりあえずPNGを使っておけばいいでしょう。

著者：安井真人(やすい　まさと)
@yasui_masatoさんをフォロー