これまでのところ、画像の定義はおおよそ次のようになるはずです:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
img要素には（そしてすべきです）、いくつかの属性が割り当てられるべきです。最初にあるのはaltです。ここで定義されたテキストは、画像が（どの理由からであれ）読み込まれない場合にブラウザに表示されます。
残念ながらalt属性と関連して誤解が生じることがよくあります。実際、alt属性は画像が表示されない場合にのみ使用されます。ただし、一部のブラウザは、マウスポインタを画像に合わせるとalt属性の値をツールチップウィンドウに表示することがあります。
この挙動は誤っています。そのようなツールチップにはむしろtitle属性があります。このように定義するとします:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.deのロゴ" />
この場合、titleの値がaltの値を上書きします。
サイズの指定
HTMLでは、属性ではなくCSSを使用してサイズを定義することが一般的です。ただし、幅と高さは依然としてwidthおよびheightの2つの属性で定義されます。以下に例を挙げます:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.deのロゴ" width="200" height="150" />
widthまたはheightに単位を指定しない場合、ブラウザは数値をピクセル値として解釈します。したがって、前の例では画像は幅が200ピクセル、高さが150ピクセルとなります。パーセンテージ指定も可能です。
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.deのロゴ" width="20%" height="15%" />
パーセンテージ指定は、使用可能な表示領域に対して相対指定されます。サイズの指定がない場合、ブラウザは画像を元のサイズで表示します。
画像とテキストの段落
画像を本文と組み合わせて配置する場合は注意が必要です。
<p><img src="logo.png" alt="" width="180" height="150" /> このテキストは画像の横に表示されます。</p>
imgはインライン要素と呼ばれるものです。画像はテキスト内に直接配置できます。画像が行の高さよりも高い場合、ブラウザはテキストを行内で整列させます。通常、テキストは画像の下部に対して整列します。
以前のHTMLバージョンではalign属性を使用して整列を制御していました。HTML5では廃止されているため、使用しないでください。かわりにCSSが提供する方法を活用してください。これにより、例えば画像をテキストの周囲に配置することができます。
詳細説明
HTMLでは、画像に詳細な説明を指定する機会があります。画像に説明が必要な場合に便利です。追加情報は異なる場所に保存し、それに参照することができます。
追加情報はさまざまな場所に記載できます。
<img src="bild1.png" alt="Diagramm 1" title="Diagramm 1" longdesc="#diagramm" />
ここでは、ページ内にIDがdiagrammという部分があると仮定しています。
一般的に、情報は外部ファイルに保存される方法が最も一般的です。
<img src="bild1.png" alt="Diagramm 1" longdesc="diagramm1.htm" />
ただし、ブラウザの対応にはまだ課題があります。さらに、この属性はブラウザの開発者に、簡単に実装方法を検討する問題を提起しているようです。
特にFirefoxでは、実際には見栄えがよく説明的な方法ではないようです。画像にlongdesc属性がある場合、通常の訪問者は最初気づかないでしょう。むしろ、画像を右クリックする必要があります。
その後、コンテキストメニューに説明を表示という項目が表示されます。これをクリックすると、longdescで指定された追加情報が表示されます。前述のように、これはFirefoxでの動作ですが、エレガントではないかもしれません。
オペラは実際によく似た方法で解決しました。 このブラウザで右クリックすると、長い説明を表示できます。
このエントリは、指定された追加情報にリンクします。
WC3は、長い説明をData-URLの形式で指定することも提案しています。
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
これらのData-URLについてまだ経験がない場合は、http://de.wikipedia.org/wiki/Data-URLで詳細な情報を見つけることができます。
画像の説明を定義する
これまで、HTMLには画像のキャプションや画像グループを定義する手段がありませんでした。 これがHTML5で変わった部分です。 ここで、新しい要素figureとfigcaptionが導入されました。
言っておきますが、figureは単なる図形との組み合わせのためだけではありません。 実際には、要素を補完するために要素を使用できます。 これには画像だけでなく、例えば図表、コード例、ビデオなども含まれます。
figureに加えてfigcaptionも存在します。 特定のユーザーグループには表示できないコンテンツを、代替説明として提供することができます。
以下は、figureとfigcaptionの使用例です:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>これが私たちの新しいロゴです。</figcaption> </figure>
ブラウザでの結果は次のようになります:
ブラウザがこれら2つの要素をどのように扱うかは、最終的には彼ら次第です。 ただし、もちろんCSSで表示をカスタマイズすることができます。figure要素内には何枚でも画像や他の要素を挿入できますが、figure内にはfigcaptionが1つだけ含まれることに注意してください。 こちらも例を挙げています:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>これが私たちの新しいロゴです。</figcaption> </figure>
この方法で、1つのfigure要素に複数の画像を追加することもできます。
HTML5では、Webページやコンテンツの論理構造に関しても多くの新機能があります。 このシリーズの途中でこれらを詳しく学ぶ予定です。
