HTML講座画像表示/メールマガジン第92号今週のおさらい

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方までメールにてご質問ください。

＜第92号＞ 今週のおさらい
　　　　　　　　　　　　　 毎週金曜日配信　What's New 2004年5月7日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ HTML講座  第34回 --- アクセシブルな画像表示
　　■ CSS講座　第13回 --- 要素の表現形式

◆ HTML講座 --- 画像表示

Webページを彩る要素として「図画像」があります。画像は、内容によっては言葉よりもはるかに雄弁なときさえあります。また、製品の説明などでは、文章よりも図画のほうがはるかに理解しやすい特徴も合わせ持っています。

例えば、言葉で道順を説明するよりも、地図という画像があれば、それこそ一目瞭然というものです。画像は、そうした力を持っています。しかし、画像ファイルには決定的な欠点も持っています。

■ 画像は重い

画像ファイルは、HTMLや CSSファイル、あるいはスクリプトファイルよりも容量が大きくなります。容量が大きければそれを受信して表示するまでに時間が必要になります。つまり、容量が大きいことを「重い」ファイルということになります。

画像ファイルとは、１つの点を集めて画像にするためのバイナリ (2進数) 形式で構成されたデジタルデータですが、当然、色数やサイズが大きくなるとデータ量も増え、それが容量の大きさになります。

■ 容量を下げる工夫

画像の品質や画質を保ちながら容量を下げるのは大変なことですが、ほんの少し工夫を加えることで飛躍的に小さくすることができます。しかし、写真画像では、圧縮率を上げると画質が損なう恐れがありますので、扱いに気をつけましょう。

イラストなどのベタな絵は、なるべく色数を減らすようにします。２～３色でも魅力的なイラスト画像が作れますので工夫してください。

写真画像は表示面積を小さくすることで、かなり容量を下げることができます。オリジナルの写真から上手にトリミングするといいでしょう。10KB前後に収めるとサクサクした感じになります。

■ 画像形式

Webで利用される静止画像は、基本的に以下の３つの圧縮形式で利用されます。

JPEG形式　色数の多い写真画像に適した形式
GIF形式　イラストなどのベタな画像に適した形式
PNG形式　色数の多い高画質な画像に適した形式

ベタなイラスト画像を JPEG形式で変換すると容量が上がってしまい、画質も損なわれます。逆に、写真画像を GIF形式にすると、これも容量が上がり、ザラついた汚い画質になってしまいます。

PNG形式は比較的新しいフォーマットですが、小さな画像を広げて表示しても、シャギーなどが現れず、滑らかで高画質を維持します。

下記の画像はこのサイトのトップページで利用している PNG形式を他の形式で変換したものです。 (画像の大きさ　460×60 ピクセル)

PNG 8色 2.46KB(透過)
GIF 8色 3.53KB(透過)
JEPG(低画質) 5.63KB

■ 画像表示ができない環境のために

閲覧者の中には画像表示を「オフ」にしている、あるいは非視覚系ブラウザを使っている場合があります。

ダイヤルアップ通信のナローバンドでは、画像を表示させると極端に受信が遅くなるため、あえて画像を表示させないようにしています。視覚障害を持った閲覧者はテキスト表示だけのブラウザ、音声ブラウザなどを利用してインターネットを利用しています。

そうした閲覧者は、当然ながら画像を見ることができません。そのために、制作側での配慮が必要となります。

静止画像を表示する img要素には、画像を表示できない代わりの代替テキストを提供する alt属性が定義され、画像を表示するための必須の属性となっています。

代替テキストは、画像の内容を的確にかつ簡潔に表すテキストを用意します。画像をテキストで現すということは、簡単そうに見えて意外と難しいものです。

どのような文章を提示したらいいのか判断の分かれるところですが、作成現場で画像表示を「オフ」にしてみると、案外ヒントが浮かぶかもしれません。

左には本来画像が表示されるのですが、ここではわざと表示していません。その代わりに「代替テキスト」が表示されています。

画像の内容に応じて、画像が表示されない環境のために、考え抜いたテキストを表示するようにしましょう。

■ 画像は必須か？

その昔、初期の HTMLではテキストが中心で画像などは表示することができませんでした。しかしながら、多くの人々が自由に情報を発信したり交換することができました。

やがて、数々の魅力的な表現が可能になる仕様が登場し、今日のマルチメディア化が進みました。ある意味では、こうしたマルチメディアが今日のインターネットの隆盛を支えているのかもしれません。

画像による表現は、視覚的な説得力を持ちます。有名な報道写真は、言葉で語るよりも雄弁に現場を伝えます。その意味で、利用する状況によっては画像の表現は必要なのかもしれません。

しかしながら、閲覧環境によっては画像を表現できない場合があります。先ほど説明したとおり、視覚障害を持った方や通信環境によって画像表示を「オフ」にしている方がいることも事実です。

代替テキストの用意はもちろん、その画像が何を伝えているのかを閲覧者に説明できるよう違う手段で示すことも、アクセシブルなページを提供することになるのではないでしょうか。

また、無意味な画像を表示するのは、不用意なトラフィックや閲覧者にストレスを与えることになります。最低限必要と思われる画像を提供するように心がけましょう。

PageTop

◆ CSS講座 --- 要素の表現形式

スタイルシートでは、要素の見え方をコントロールすることができます。インラインレベルとブロックレベルを逆転して表示するとか、要素そのものを非表示にするといった特殊な見え方を提供します。

■ 要素の性質を変えて表示する

HTMLの文書構造を示すブロックレベル要素は、一般的な Webブラウザでは、前後の改行を持ってレンダリング (描画) されます。一方でインラインレベル要素は、普通の文字列と同等に扱われ前後の改行はありません。

スタイルシートの display属性を利用することで、ブロックレベル、インラインレベル要素の見え方を逆転させることができます。

ただし、見え方を変更するだけであって、文書上の論理構造を変えることではありませんので、各要素型の扱いに気をつけてください。

**`display`属性の値とその機能**
値	機能
block	ブロックレベル要素として描画する (インラインレベル要素に適用)
inline	インラインレベル要素として描画グする (ブロックレベル要素に適用)
list-item	リスト項目として描画する (`li`要素と同様)
none	表示しない (表示領域は確保されない)

display属性の使用サンプル

■ 要素の非表示

要素そのものを非表示するには、display属性の値を「none」としますが、その場合要素の領域 (本来表示したときの領域) は維持されず、無視した状態となります。

領域を維持したまま非表示にする場合には、visibility属性を使います。

**`visibility`属性の値とその機能**
値	機能
visible	表示する (デフォルト値)
hidden	表示領域を確保した上で非表示にする
collapse	テーブルの行、列、およびそのグループを非表示にする

visibility属性の使用サンプル

display属性、および visibility属性は、いずれも CSS Level 2 で定義されているもので、最新の視覚系ブラウザでは両者ともサポートされています。

シーンに応じて使い分けてみると、面白いアイデアが発見できることでしょう。

初版公開日 2004年5月17日

初心者のためのホームページ作り 第92号

初心者のためのホームページ作り　第92号