Home ＜ 第９号 ＞ 第11号

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

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  目次

プレーンテキスト版

今週＜第10号＞マガジンのおさらい
まず、記事から抜書きでおさらいします。

　　　　　　　　　　　　　　　　　  毎週金曜日配信　What's New 2002/7/19
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題■ Webで扱う画像　その１


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Webで扱う画像については、今週と次週の２回にわたって解説します。

さっそく画像を表示するHTML文書を作りましょう。
テキストエディタ（メモ帳、SimpleTextなど）を起動して、新規にHTML文書を作
ります。下記のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>画像を扱う</title>
</head>

<body>
<div>
<img src="images/hana_01.png" width="200" height="175" alt="花の絵です">
</div>

</body>
</html>

入力が終わりましたら保存します。保存する際に拡張子 .html をつけます。
すべてうまく出来たら保存後のHTML文書のアイコンがいつも使っているブラウ
ザのアイコンになっているはずです。
　ダブルクリックをしてブラウザで見てみましょう。 Sample

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
img要素は画像（オブジェクト）を埋め込む要素です。ただし、Ｗ３Ｃではこの要素ではなく、object要素を用いる方向で標準化の動きがあります。

src属性は、画像ファイルの URLを指定します。ここではimagesフォルダの中のhana.pngというPNG形式の画像を指定しています。

width属性は、この画像ファイルの横幅を指定します。
　height属性は、画像の高さを指定します。
width、及び heightの指定があると、ブラウザ画面に領域を確保するため、感覚的に早く表示されます。

alt属性は、画像の代替テキストとして用いられ、何らかの理由で画像が表示されない場合、ここで記述したテキストが画面に表示されます。この属性はHTML4.01では必須の属性となります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

次に、写真をページに貼りつけてみましょう。写真の画像フォーマットは　jpg 
です。先ほどのHTML文書の下記の部分を書き直してください。

<img src="images/hana_01.png" width="200" height="175" alt="花の絵です">
　　↓
<img src="images/shoki.jpg" width="225" height="315" alt="鍾馗像">

src属性で、画像ファイル shoki.jpg を指定し、横幅、高さも変更しました。
 Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆画像フォーマットの透過処理
画像のフォーマットによっては、背景などを透過させる処理が可能なものがあり
ます。現在では、PNG形式と、GIF形式だけですが、実際にどのような効果がある
のか、試してみましょう。
　テキストエディタで新たにHTML文書を作成します。下記のようにタイプしてく
ださい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>画像を扱う</title>
<style type="text/css">
<!--
body { background-color: #fcc }
-->
</style>
</head>

<body>
<div>
<img src="images/hana_01.png" width="200" height="175" alt="花の絵です">
</div>

</body>
</html>

入力が終わりましたら保存します。
 Sample
先ほどと比べて単に背景色が薄いピンク色の変わっただけで、花の絵の背景色である白がそのままになっています。これは、画像の透過処理をしていないためです。

透過処理をした画像に変えるには、

<img src="images/hana_01.png" width="200" height="175" alt="花の絵です">
　↓
<img src="images/hana.png" width="200" height="175" alt="花の絵です">

と、画像ファイルを変更してみます。 Sample  ←Sampleを見てお分かりいただけたと思います。
画像フォーマット
◆GIF形式画像フォーマット
GIF（Graphic Interchange Format）は、Webページにイメージを貼り込めるようになった当初から、利用されてきた人気のある画像フォーマットです。

もともと、米国のパソコン通信会社である CompuServr（現在はAOLに吸収されている）が作ったもので、現在のバージョンは GIF89a となっています。 256色までのパレットを扱うことが可能で、イラストレーションなどベタな色使いのイメージに適しています。また、特定の色を透過させる機能も持っています。

しかしながら、現在、GIF画像の使用や、GIFを使用するアプリケーションの開発などには、米国UNISYS社とのライセンス契約が必要です。これは米国UNISYS社が GIFで使用されている LZW（Lempel Ziv Welch）圧縮アルゴリズムの特許を持っているためで、ライセンス契約なしで GIFを利用した場合、特許を侵害したことになります。

Microdoft社やAdobe社などの主な企業は、米国UNISYS社とライセンス契約を行っているため、DrawやPhotoshopなどで作成したGIF画像の利用に対して、私たちエンドユーザーがライセンス契約をする必要がありません。エンドユーザーにとって問題となるのは、ライセンス契約を行っていないフリーソフトウェアで作成したGIF画像や、CGIなどのプログラムによって GIF画像を生成する場合などは、エンドユーザーにもライセンス契約が求められることになります。つまり非常に高額なライセンス料を支払わなければならないわけです。

◆PNG形式画像フォーマット
PNG（Portable Network Graphics)は、特許によるライセンス問題が出てきたGIFに代わって、誰もが自由に利用できるように作成されたフォーマットです。Ｗ３Ｃにおいても、PNGの利用が推奨されています。

ひとつ問題なのが、古いブラウザではPNGに対応していないことです。4.0以降のInternet ExplorerやNetscape、icabやOperaなどではサポートされていますが3.0以前の古いブラウザやMacintosh版のInternet Explorer4.5では表示することができません。

しかし、携帯端末やゲーム機で採用されているNetFrontでは、2.5からPNG対応になっています。時代の流れとしては、 PNGを利用する方向に動いていると言えるでしょう。

色もフルカラーで扱うことが出来、透過機能もサポートしています。残念ながら今のところ、アニメーションがサポートされていません。

◆JPG形式画像フォーマット
JPEG（Joint Picture Experts Group） 形式の略で、主な長所とは、元の画像ファイルが同じ場合、概して GIFよりもファイルサイズ（容量）が小さくなり、ユーザがダウンロードするのにかかる時間が短くてすむことです。

また、カラーパレットも GIFより圧倒的に多く1670万色がサポートされていますので、写真画像によく用いられます。

欠点としては、 GIFのように特定の色を透過したり、アニメーション化することはできません。また、ファイルのダウンロードにかかる時間をせっかく短縮しても、ブラウザが画像を解凍して表示するのにかかる時間で相殺されてしまったり、圧縮比を上げると、画質が非常に汚くなってしまうことがあります。

次回は、Webで扱う画像　その２を予定しています。

PageTop / Home / 目次
Copyright(C) 2002-2003 banban@scollabo.com