Shino's Bar  あなたのホームページの画像はみんなに見て貰えているのか? 忘れているHTMLタグの使い方。シノバー・マスターが送る、 ホームページ作りのためのデジタル・カメラの使い方講座第3弾。 チェコ風景
画像表示のHTML作法

ホームページ作りのためのデジカメ使いこなし術
(HTML作法編)


Jan. 1, 1998 M.Shino

1部 デジカメ撮影編
2部 デジタル処理編
関連リンク

  1. インターネットをスイスイ進む画期的方法
  2.  心もとなき糸電話、インターネットは人々の期待ほどには能力がない。 いたるところでつまってしまう、目的のところに辿り着くまでにメゲてしまう。 その元凶は大量の画像データにある。 そこで妙案、ブラウザの画像表示を止めてしまおう。 掲示板などを主体にするときはこれで十分役に立つ。 こうすれば素早くインターネットの中を歩ける。 そうして必要な画像だけを取り込めば良い。 Netscape Navigatorには画像読み込みボタンがあってとても便利だ。

     このチェック・ボタンを外す。 画像が必要なときは当の画像位置のマークをクリックするなどで表示できるようになっている。 ページ内の画像を一括して表示するには

  3. 画像表示を強要するサイトは誰も見ない
  4.  ところがこれでいつもスイスイというわけにはいかない。 画像でしかリンク先を作っていないサイトがときどきある。 画像の読めないブラウザを拒否しているサイトだ。 たしかに画像の読めないブラウザはいまや希にしかない。 でもこうやって画像表示を止めている人は多い。 2大ブラウザのNN, IEのいずれもがこの機能を備えているのだから。
     こんな細工をしなくとも、回線状態が悪いと画像がなかなか読み込めず、結果的にテキスト・オンリーになってしまう。 あなたのホームページを訪れたとき画面が真っ白だったら、諦めて他のページに行ってしまうだろう。 あなたのページを見てくれるのは、あなた自身とせいぜい親戚縁者だけになってしまう。  ホームページはテキストだけで最低限の用が足せるように作るべきだ!

  5. あなたのページをチェックしよう
  6.  これで自分のページを見てみよう。あれ?画像が出てくる! これはブラウザが最近使われた画像を一時ファイルに保存しているからだ。 またIEでは自分のコンピュータ内部の画像は常に表示される。
     こうして画像を表示しなくてもあなたのページの中を歩くことができるだろうか?

  7. テキスト・リンクの併記
  8.  画像ボタンをクリックして次のページへリンクする場合、画像表示を停止していると困るのだが、 親切なサイトはテキストでも同じ物を用意している。
     画像の一部をクリックすることでリンク先を分ける クリッカブル・マップでは次のALT表示も役に立たない。 クリッカブル・マップには必ずテキスト・リンクを併記しよう。 それ以前に、クリッカブル・マップを用いる必然性があるのか? 一部の本に「画像ボタンをたくさん付けるよりも 一まとめにしてクリッカブル・マップにしたほうがアクセスが早い」 などと書いているものがある。 これは馬鹿でかい画像の読み込みを強要する論理だ!

  9. 画像にはALT表示
  10.  必要な画像はクリックすると表示されたり、あるいは画像表示ボタンをクリックして表示することができるが、 自分の欲しいものかどうか分からない。 そのために画像の説明をテキストで注釈しておいてくれると助かる。
     注釈を画像の位置に表示することもできる。HTMLでIMGタグのALTオプションがそれ。 画像表示しないブラウザでは画像の代わりにALT=の後のテキストが表示される。 飾り文字(ロゴ)を画像にしていることがあるが、ALTを使えばテキスト表示でも同じ機能は果たすわけだ。 少なくともロゴは必ずALTオプションを用いてテキストを併記しよう。 しかし文字で用が足りるものをなぜ画像(ロゴ)にしなければならないのか? それもALT表示を併用するならまだ許されるとしよう。
     画像表示する設定でも、回線が混んでいて画像がなかなか読み込めないときは、 とりあえずこのALTで指定した文字が代わりに表示される。

  11. 画像サイズ指定は何のため?
  12.  HTMLのIMGタグではWIDTH=HEIGHT=で画像のサイズが指定でき、 画像ファイルに書かれているがサイズにかかわりなくブラウザがIMGタグの指定サイズで表示する。 この指定のないときはもとの画像サイズそのままに表示される。 このためIMGタグでのサイズ指定は画像の拡大縮小のためと誤解されやすい。 しかしこの方法で拡大すると画像がモザイク状になり見苦しく、 ブラウザによる縮小は通信量が大きくなるからどちらにしても良いことはない。 拡大縮小は専用の画像処理ソフトで予め処理したものを用意し、 IMGタグではそのままのサイズを指定するべきだ。
     ならばわざわざこれを指定する必要があるのだろうか? ・・・これはブラウザにレイアウト情報を与えるために必要なものだ。 画像が組み込まれたHTML文書を呼んだときに画像の大きさが分からないと、 全体のレイアウトが分からないためにせっかく読み込んだテキストも表示できない。 サイズ指定をしておくと、とりあえずテキストは表示される。

  13. 背景画像がないと本文も読めない?
  14.  こうして画像表示を停止すると当然ながら背景画像も表示されない。 このために本文テキストまで見えないものがある。 背景画像に暗い色調のものを使い、 テキストの文字色を白色にしているとこういうことが起きる。 これを避けるには背景画像の指定BACKGROUND=に加え、 背景色BGCOLOR=を同系色で指定しておく。 まず最初に指定された背景色でべた塗りされるから、 背景画像が読み込まれるまでの間にもテキストを読むことができる。 背景画像を読み終えるとべた塗り部分が画像で置き換えられる。
     逆に最初は楽に読めるのに、 背景画像が表示されたとたん読みづらくなるものもある。 背景は控えめに、コントラストの低い、淡い色調に。

  15. IMGタグの使い方−まとめ
  16. <IMG SRC=imageurl ALT=text WIDTH=wdots HEIGHT=hdots ALIGN=position BORDER=bdots >

     このうちALT, WIDTH, HEIGHTまで必須として考えたい。

  17. アイコンは何度でも使え

 ・・・つづく


1部 デジカメ撮影編
2部 デジタル処理編
3部 HTML作法編トップへ

関連リンク


このテーマについてもっとご存知の方、あるいはもっと知りたい方は アンケート・コーナー へお知らせ下さい。

マスターの部屋

Shino's Bar HomePageへ