もくじ

画像のあるページ

画像は文字の扱い

画像のファイルninjin.pngがhtmlファイルと同じフォルダにある時に、次のように書くと、画像が文字の中に加わります。

<p>たとえば<img src="ninjin.png" alt="にんじん">を表示します。</p>
 ⇩
たとえばにんじんを表示します。

画像ファイルの大きさに合わせて場所を確保し、表示します。高さの大きい画像ならその分行間が広くなります。ちょうど大きい文字のような扱いです。

表示できる画像はブラウザに依存しますが、一般には png, jpg, gif です。GIMPの xcf ファイルはそのままでは表示できません。

imgタグはインライン要素(行の中の要素)ですから,pタグのようなブロックを作るタグの中に置かなければなりません。

img タグ に src属性 と alt属性

画像の表示には<img>タグを使いますが、このタグには終了を表す</img>はありません。(xhtmlでは、その代わりに最後を > でなく /> にしますが、htmlの流れのhtml5では必要ありません)

開始タグ、<img>の中にスぺースで区切って属性を指定しています。

src は source のことで、表示する画像の場所とファイル名をこの後に " " で囲って書きます。ここでは ninjin.png となっています。習慣として画像はフォルダに入れて整理します。よく images というフォルダを作ってその中に入れますが,その場合には、src="images/ninjin.png" と書きます。

src には a タグの href と同様に、URL を書くことで他のサーバーにおかれた画像も指定することができます。これを使えば他人の画像をあたかも自分のものであるかのように表示できますが、著作権の侵害ということも起こり得ますので注意してください。

alt は alternative の略でこの画像が何かの原因で表示できないときに代わりに表示する文字列(代替文字列)を示します。画像が表示できない時にも画像を使って伝えたかった内容がそれなりに伝わるようにします。画像を表示できないブラウザもありますし、接続回線が貧弱なためにわざと画像を表示しないでブラウズする人もいます。また、目が不自由な人のために文字を音声で読み上げる装置はaltの内容を読みます。このような場合にもページの内容がよく理解できるような文字列にします。

いくつかの例

<img src="images/nasu.png" alt="なすびの花は紫色です" >
<img src="icons/maru.png" alt="・" >
<img src="http://www.st.seiai.ed.jp/images/tsutsuji.jpg" alt="ツツジの花の時期に一斉に咲きます" >
<img src="images/graph01.png" alt="気温の上昇がほぼ1ヶ月遅れだとわかります" >

上記 alt の"・"は,画像のmaru.png (●) が何らかの原因で表示できない時に"・"が表示されれば似たような役割ができると考えてのことです。画像に特別意味のない時は特に内容を説明せず alt="" とする方がよいとされています。

従来からaltは必ず書くことが求められていましたが、html5とあわせてふたたび議論になっています。画像を自動生成するようなシステムの場合にどうするのかとか、「気温のグラフ」のようにあっても気温がどうなっているのかが理解できないaltがあっても実際には役に立たないという議論です。画像に特別意味のない時はさらにalt=""そのものを省略したほうが良いという意見もでています。必要なときにだけ書くほうが、目が不自由な人のためには親切だからです。

altの指定 画像のページ内の役割
alt="" 画像は装飾的もしくは補足的なものである。
空文字列以外 画像はそのコンテンツの重要な部分である。
alt 属性は、その画像に相当、もしくは置き換えとなるテキストである
なし 画像はそのコンテンツの重要な部分であるが、画像に相当するテキストはない。

画像が表示できないときは表示しなくてもページの内容に影響しないときにはalt=""を使ってそれを示します。

画像がなくなってしまうと意味が通じなくなってしまう時は、画像から何を読み取って欲しかったのかを、長くなっても構わないのでできるだけ文章で表現してaltの文字列とするように努力します。画像の前後の文章と合わせて読んで、内容が伝わるようにするのが理想です。

どうしても無理なときはaltの属性そのものを指定しないことにします。(最後の文章は正しくなくなるかもしれませんが、意味のない文字列を書き込むよりはましでしょう)

title属性

助言的情報を提供するものです。一般的なブラウザではツールチップとして表示されます。ツールチップとは「マウスのポインタが重なった時に現れる短いメッセージ」をいいます。imgタグ以外でも使えます。

ただし、Windowsのインターネットエクスプローラ(IE)はver6まで alt 属性の内容を表示し、titleを無視しました。ver7ではどうなっているでしょうか。

W3Cの仕様書ではツールチップとして出すことを決めているわけではありません。各ブラウザの設計に任されています。HTML 4仕様書邦訳計画補完委員会が邦訳した仕様書には次のようにあります。

title属性の値は、ユーザエージェントによって様々にレンダリングされるであろう。例えば、視覚系ブラウザはタイトルを「ツールチップ」(ポインティングデバイスがオブジェクトの上にある際に現れる短いメッセージ)として表示しがちである。音声ユーザエージェントは、同様の文脈で、タイトル情報を話すであろう。次のようにリンクにtitle属性を設定すると、視覚系か非視覚系かを問わず、ユーザエージェントはユーザに対してリンク先資源の性質を知らせることができる。