WEBサイトをつくる (4) 画像を入れる

■WEBサイトには写真を入れることができる。まず、見るがわの画面のサイズを考える必要がある。昔々、パソコンの画面はVGA(640*480)が普通という時代もあったが、今の日本ではSVGA(800*600)か、XGA(1024*768)以上になっているものが多い。

■このためWEBページは800*600ぐらいの大きさを目安にすることになっている。写真を主に見せるのであれば、それよりひと回り小さい(640*480)ぐらいが適当だろう。

■いっぽう、文章の中に説明的に写真を入れるような場合は、もっと小さく、たとえばVGAの1/4の160*120程度にするとバランスがよい。

■小さい写真を文章中に入れておいて、写真にリンクを張り、クリックすると大きな写真が出る、という二段構えにするとスマートだ。この場合は新規ウィンドウ(blank)にリンクするとよい。小さい写真(サムネイル)を目次のように並べる方法もある。縮小すると被写体が小さくなりすぎてなにが写っているのかわからなくなる場合、

1、強力にアンシャープマスクをかける
2、被写体の重要な部分をトリミングする

という方法でサムネイルを見やすくすることができる。

■写真を張り込むには、まず、サイズなどを調整した画像ファイルをWEB用のフォルダの適当な場所に保管する。つぎに、HTMLドキュメントを開き、テキストの中の写真(その他の画像でもおなじ)を入れたい場所を選び、【挿入→イメージ】でファイルを選ぶことで簡単に張り込むことができる。ただし、これだけだと文字と写真の配置はあまり美しくない。
こねこ

■画像とテキストの関係については、テキストの回り込みを指定しなければならない。写真と文字の間に入れる余白も指定できる。

カピバラ
カピバラ
Hydrochoerus hydrochaeris
南米に生息する最大のゲッ歯類

■黒っぽい色など、明度も彩度も低い色を背景にすると写真は引き立つが、黒っぽい背景に白っぽい文字は、長文だと読みにくくなる。

■さらに、表機能を使い、表の中に写真を張り込むとより細かい配置が可能になる。たとえば、写真の解説を本文とは独立に写真の下に入れるなどのレイアウトが可能になる。セルの枠は必ずしも表示する必要はなく、セル内に余白をすこし入れると本文との間に空白ができて読みやすくなる。

■画像が表示できない環境で見ている人や、目の不自由な人のために、画像の裏に代替テキストを入れておくほうが良い。これは、テキストを音声で読み上げる方式への配慮である。










(2006/2549-06-30 蛭川 立)