前回のお話はと言いますと、、、
「本質」について。
です。
マークアップは一日にして成らず
~~~~~~~~~~~~~~~~~~~~~~~~~
ということをお伝えいたしました。
忘れた方は、過去のメールを掘り起こしてみてくださいね。
さて。
本日は、画像についてお話しようと思います。
その前に、下記を見ておきましょう。
- HTMLを構成する7つの基本構成要素
-
- 見出し（ブロック要素）
- 段落（ブロック要素）
- リスト（ブロック要素）
- 表組み（ブロック要素）
- 画像（インライン要素）
- リンク（インライン要素）
- グループ化（ブロック要素・インライン要素）
前回までは、表組みまでをお話しました。
覚えてますか？
こちらも、忘れた方は過去のメールを掘り起こしてみてくださいね。
では、本題にいきましょう！
画像（インライン要素）
画像には大きく分けて2種類あると考えます。
- 意味のある画像
- 装飾のための画像
「意味のある画像」とは、写真や図、つまりaltを入れて説明ができる画像を指します。
「装飾のための画像」とは、背景やアイコン表示、罫線など、装飾をするための画像です。
そのままですねｗ
でも、この概念が重要なんです。
これらを踏まえて、仕様書（日本語訳）を見ていきましょう。
IMG要素は、現在文書中の、当該要素定義箇所に、画像を埋め込む。IMG要素に内容はない。
通常はsrc属性が指し示す画像と行の中で置き換えられるが、
左寄せや右寄せにされた画像は行の外に「浮動」する。
とありますね。
IMG要素に内容はない。
~~~~~~~~~~~~~~~~~~
意味深なコトバですねｗ
内容を持たないということは、どういうことか。
HTMLでは、内容を持たない要素のことを「空要素」といいます。
簡単に言うと、終了タグが必要ない要素のことを指します。
よく使う要素の中では、下記があります。
<br>
<hr>
<input>
これを見ると、わかりやすいですよね。
特に難しいことはありません。
難しいといえば、altの扱い。
著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。
代替テキストを指定すると、グラフィックディスプレイ端末がないユーザ、
フォーム非対応のブラウザを使っているユーザ、視覚障害のあるユーザ、
音声合成装置のユーザ、グラフィック系ユーザエージェントを画像を
表示しない設定で使っているユーザ、等の助けになる。
とあります。
ここでは、アクセシビリティの観念から、あらゆる人に対して、情報提供できる手段を持っておきましょうということを言っています。
つまり、だれもが通常のPCで見ているわけではなく、それぞれの環境にあったレンダリングの仕方があるので、それにも対応しうる対策をこのaltで行いましょう。ということなんです。
alt属性は、IMG要素とAREA要素では必ず指定しなければならない。
とあります。
仕様で決められていますので、必ず記述するようにしましょう。
ただし、何でもかんでも、altに記述すればいいというものではありません。
ここが難しい所。
そこで！
冒頭に述べた、下記2点が判断の分かれ目になるのです。
- 意味のある画像
- 装飾のための画像
「意味のある画像」には、altを入れて説明を行う。
「装飾のための画像」には、alt=""と空にしておく。
どうですか？
この2点を覚えておけば、ある程度対処は可能です。
altをつける際のポイントとしては、
画像を相手に言葉で説明するときに、何と言うか。
というものを考えれば、自然と出てくると思います。
altは画像の代替テキストなので、その画像が何を示しているのかを伝える義務があるのです。
国語力も問われるわけですｗ
これが、画像の扱いが難しいと思われる理由でしょう。
- 意味のある画像
- 装飾のための画像
しかし！
この2つを理解していれば、画像の扱いも怖くありません！
（補足）
最近では、何でもかんでもCSSの背景処理で画像を多用しているサイトを見ます。
それは、本来の使い方ではないです。
その判断も、下記2点がポイントになります。
- 意味のある画像 → imgで対応
- 装飾のための画像 → CSSで処理できる
というような感じです。
参考にしてみてください！
これで、あなたもプロフェッショナル！
それでは、また次回！
※HTML4.01をベースにお話をしています。