10.4 WEBページ上に画像を表示する
ウェブページで画像を表示する
画像データ
一口に画像と言っても,いろいろな種類があります.次のような分類によって整理することができます.
- 時間的変化による分類
- 静止画:写真のように,時間的に変化しません.
- 動画:映画のように,あらかじめ決められた通りに変化します.
- インタラクティブアニメーション:見る人の操作に応じて変化します.
- 次元による分類
- 2次元:平面的な図形から構成された画像です.
- 3次元:立体的な図形から構成された画像です.ただし,表示装置はディスプレイやプリンタなどの2次元的なものしかありませんので,3次元から2次元へ変換してから表示します.3次元の図形データを作ることをモデリング (modeling),視点や照明を指定して,実際に見える2次元画像に変換することをレンダリング (rendering)と呼びます.
- 表現方法による分類
- ビットマップ画像:ビットマップ画像は小さなタイルで作成されたモザイクのように,細かい点の集まりで画像を表現します.このタイルに相当するのは,画素(pixel)です.例えば,直線は連続した画素に同じ色を塗ることによって表現されます. ビットマップ画像は写真のように,形や色が不規則なものの表現に向いています.編集は画素単位で行います.しかし,モザイクになっているため,画像を移動,拡大,または回転すると画像が汚くなりやすいです.たとえば,拡大すると小さなタイルが大きなタイルで置き換えられたかのように表示され,ギザギザが目立ちます.
- ベクトル画像:幾何学的図形の組合わせによって画像を表現します.模式図のように,規則的な図形の表現に向いています.編集は図形単位で行います.ベクトル画像は拡大,縮小,回転,変形,塗りつぶしなどを自由に行っても汚くなることがないのが特徴です.図形の一種としてビットマップ画像を含めることができる形式もあります.
CNSでは,ビットマップ画像を編集するためのソフトウェアとしてXpaintやPhotoshopが,ベクトル画像を編集するためのソフトウェアとしてはTgifやIllustratorが用意されています.詳しくは,CNSガイドをご覧下さい.
WEBページ上に画像を表示する
自分のウェブページに画像を表示させたい場合は,HTML 文書でimg 要素を使います.以下のような属性を指定できますが,src 属性と alt 属性は必ず書かなければいけません.また,終了タグはありません.
- src 属性:画像ファイルの URL を指定します.a 要素の href 属性同様,絶対パスでも相対パスでもどちらでも指定できます.
- alt 属性:画像を表示しないブラウザは,代わりにこの属性で指定された文字列を表示します.画像を表示しない理由としては,画像形式に対応していない,携帯電話のように表示能力が限られている,画像転送に時間がかかり過ぎる,視覚障害者のための専用ブラウザである,などが考えられます.
注意
alt 要素の内容は画像を表示しないブラウザで見る人の為に,その画像がどういうものであるのを簡潔に分かりやすく書きましょう. - width 属性,height 属性:画像の幅と高さを指定します.数字だけのときは画素数,うしろに % を付けると,ブラウザのウィンドウに対する割合を表します.指定された大きさに画像を拡大,縮小して表示します.
例えば「image」というディレクトリの下にある,photo.pngという画像を表示させたい場合は以下のように記述します.
<img src="image/photo.png" alt="特別教室の風景">
また,ページの背景を画像にすることもできます.この場合はスタイルシートを使い,以下のように body 要素について背景画像をURLで指定します.
body { background-image: URL(backImage.gif)}
● 練習問題
余裕のある人は画像を作成してみましょう.また,WEBページ上に画像を表示してみましょう.