画像の表示

視覚だけに頼るようなWebページはダメである。 Webアクセシビリティ上で大きな支障があるからだ。誰もがアクセスし利用できるWebページを作成することの意義を理解することがWebページ作成の前提である。

画像の張り込み

Webページに画像を表示するには、次のようにimg要素を使ってオプション src に目的の画像ファイルのURLを指定し、さらに alt で説明文字列を記載する。画像ファイルの拡張子には、.jpg、.png、.pdf、.gifなど様々な書式に応じたものがある。 img要素には終了タグがなく単独で使うため、「<img ..... />」のように記載することに注意する。

<img src="目的画像ファイルのURL" alt="説明文" />

HTML5ではオプション alt の使用が必須で、二重引用符「 " 」で囲って画像ファイルの様子を説明する。画像を表示しないブラウザ、特にWebページ読み上げ用に必要で、画像を含むページ全体を文字だけで説明するために用いられる。

画像の左右配置

img要素には、HTML4では画像位置を制御するオプションalign="位置"があったが、HTMLでは廃止された。画像をページの左右に置くには、cssスタイルファイルに、たとえば、次を記載しておく。

img.right {float: right; padding: 0pt 0pt 0pt 10pt;}
img.left  {float: left; padding: 0pt 10pt 0pt 0pt;}

こうしておいて、画像を次のように貼り込む

<img src="目的画像のURL" alt="説明文" class="left" />

または

<img src="目的画像のURL" alt="説明文" class="right" />

img要素内でclass="left" または "right" を指定すると、それに次く文書要素は左右に回り込むことになる。

たとえば、次のようになる：

<img src="image/einstein.gif" alt="[Einstein]" class="left" />
<p>
この用例は、画像をページの左および右に置くようCSSスタイルファイルで指定し、class="left" によって左置きしている。
画像は左寄せに表示され、文字列は画像の右側に回り込んでいる。
</p>
<br />
<p>
ここから次の文が始まる。
</p>

強制改行タグの使い方に注意しよう。

この用例は、画像をページの左および右に置くようCSSスタイルファイルで指定し、class="left" によって左置きしている。画像は左寄せに表示され、文字列は画像の右側に回り込んでいる。

ここから次の文が始まる。