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

                  毎週金曜日配信 What's New 2002/7/19
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第10号>

             banban@scollabo.com

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

 この講座はタグを覚えてテキストエディタだけでホームページを作るという、
どちらかというとやや専門的な作業が中心になります。各種の専用のオーサリン
グソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題■ Webで扱う画像 その1

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

◆Webで扱う画像

 今回は画像について解説します。なお、講座で使用する画像を当サイトでダウ
ンロードできるようにしてありますので、是非、ファイルをあなたのパソコンに
ダウンロードしてください。この画像ファイルを教材として講座を進めます。
 容量が小さいので、数秒でダウンロードが出来るようになっています。

・ダウンロード先
 http://www.scollabo.com/banban/daf/material.html
 Windows および Macintosh に対応しています。なお、教材は圧縮しています
がUNIX系を除いてダブルクリックで自己解凍します。

 Windows版=LHA形式  Macintosh版=sit形式  UNIX系=tar形式
UNIX系(Linux、FreeBSDなど)のOSの方はお手数ですが、圧縮・解凍ソフトを使
ってください。
 なお、圧縮率は上げておりません。もともとが小さいファイルなので、画質を
優先させるための処置です。

 今までこの講座でお使いになっていたフォルダの中に、新たに images という
名前のフォルダを作っておきます。
 上記サイトでダウンロード後、圧縮ファイルをダブルクリックして解凍し、あ
らかじめ作っておいた images フォルダに解凍された画像ファイルを移動してお
いてください。画像は全部で8点あります。

 ここにある画像は、今回だけでなくその後の講座でも使用するものが含まれて
います。また、各画像ファイルはすべて、ウィルスチェック済みです。

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

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

さっそく画像を表示する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 をつけます。
半角小文字で、test_6.html とタイプして、今まで使っていたフォルダに保存し
ます。すべてうまく出来たら保存後のHTML文書のアイコンがいつも使っているブ
ラウザのアイコンになっているはずです。
 ダブルクリックをしてブラウザで見てみましょう。

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

◆解説

<img src="images/hana_01.png" width="200" height="175" alt="花の絵です">
 img 画像を埋め込む要素です。ただし、W3Cではこの要素ではなく、<object>
 を用いる方向で標準化の動きがあります。これについては後述します。

  src属性は、画像ファイルの URLを指定します。ここではimagesフォルダの中
 の、hana.pngという PNG形式の画像を指定しています。
  (PNGについては後述します)
 ここでは先週勉強した相対パスを記述し imagesフォルダを指定しています。

  なお、絶対パスで記述する場合は、ネット接続を前提として下記のようにし
 ます。

<img src="http://www.scollabo.com/banban/magazine/sample/images/hana_01.png"
 width="200" height="175" alt="花の絵です"> ← 1行で記述します。
 このように記述すれば、画像ファイルを指定されたURLから送信され表示します。

 width属性は、この画像ファイルの横幅を指定します。
 height属性は、画像の高さを指定します。

  width、及び heightの指定があると、ブラウザ画面に領域を確保するため、
 体感的に早く表示されます。

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

  必須となる大きな理由として、目に障害のある方のために、音声ブラウザが
 読み上げるのを助ける役目があります。

  W3CのWAI(Web Accessibility Initiative)の中でも優先度を高くして、制
 作者に義務付けています。
  そういう意味では、 alt属性で詳しく説明を入れておいたほうがいいと思わ
 れます。なお、この alt属性で、「お前、見えねえのかよ」などとは決して書
 かないように。

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

 次に、写真をページに貼りつけてみましょう。
 写真の画像フォーマットは 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 を指定し、横幅、高さも変更しました。
保存後、ダブルクリックしてブラウザで見てください。よくあるミスで、ダブル
コーテーションの閉じ忘れがあります。

 jpg画像フォーマットについては後述します。

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

◆画像フォーマットの透過処理

 画像のフォーマットによっては、背景などを透過させる処理が可能なものがあ
ります。現在では、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>

 入力が終わりましたら保存します。
半角小文字で、test_7.html とタイプして、保存します。
保存後、ダブルクリックしてブラウザで確かめてみます。

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

◆解説

body { background-color: #f9c }
 背景色を、薄いピンク色で設定しました。

  花の画像の背景が白くなっています。これは、この画像のフォーマットが透
 過処理をしていないためです。

  画像を処理するソフトウェアには、画像の背景を透過する機能を持っている
 ものが多く存在します。
  特に、GIF形式やPNG形式は、透過をサポートしていますので、ご自分が使っ
 ているソフトウェアを確認してください。

 それでは、透過処理をしてある画像を使ってみます。上記HTMLの文中、変更を
加えます。

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

 変更部分は、ファイル名だけです。hana_01.png → hana.png
変更後、上書き保存してブラウザで確認します。

 変更後では、画像の白の背景部分が透過され、ページの背景色が表示されます。
画像を透過させても画像の容量(サイズ)はそれほど増えることがないので、こ
の機能を利用するといいでしょう。

(注)透過画像の PNG形式は、Netscape4.7 以前のブラウザでは、正しく表示さ
れません。最新のブラウザをダウンロードして、「カスタム」を選んでから別の
フォルダにインストールすることをお奨めします。
 通常のインストールでは、今までのバージョンに上書きされてしまいますので
古いものを残す場合には「カスタムインストール」を選びます。

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

◆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形式に代わって、誰もが自由に利用できるように作成されたフォーマットです。
 W3Cにおいても、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のように特定の色を透過したり、アニメーション化するこ
とはできません。また、ファイルのダウンロードにかかる時間をせっかく短縮し
ても、ブラウザが画像を解凍して表示するのにかかる時間で相殺されてしまった
り、圧縮比を上げると、画質が非常に汚くなってしまうことがあります。

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

◆img要素とobject要素

 W3Cでは、画像などのオブジェクトを扱う要素として、object要素を使用する
よう求めていますが、残念ながら、多くのブラウザがまだ対応していないため、
普及には時間がかかるようです。

 大きな理由は、 img要素では、利用できるオブジェクトに限界があるためです。
マクロメディア社の FLASH で生成された swfファイルは、img要素では扱えませ
ん。多くの制作者が間違いなく、object要素を使って表示させています。

 今後、どのようなメディアであっても、オブジェクトを統一した要素で利用で
きることは、制作者の負担を減らす効果もあります。

◆object要素の使用例

<object data="images/hana.png" type="image/png" width="200" height="175"
 alt="花の絵です">
</object>

◆解説

data="images/hana.png"
 data属性は、従来のsrc属性と同じ働きをします。URLを指定します。

type="image/png"
 data属性で指定されたファイルの形式を指定します。なお、このPNG形式は、
 MSIEでは対応していません。そのため表示されません。Netscapeは 6.0から対
 応しています。
  MSIE で表示させたい場合、"image/jpeg"とすると表示されます。

 width="200" height="175"
 横幅、高さの指定です。これがないと表示されないブラウザもあります。

 Windows環境のMSIEでは、不意な枠とスクロールが表示される場合があります。

 object要素は、静止画像だけでなく、動画、アプレット、ほかのHTML文書など
さまざまなデータをHTML文書に埋め込むという、汎用的な性質を持っています。
 つまり、img、applet など、これまで別々の要素で扱われていたデータなどを
一括して同じ要素で処理しようというものです。
 そのため、データ形式に応じて様々な属性が定義されています。object要素に
ついては、違うオブジェクトを扱う講座で、改めて解説します。

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

◆画像を扱う注意点

 画像ファイルはどうしても容量が大きくなりがちです。教材の中のファイルを
見ていただければ分かると思いますが、非常に小さなサイズで作ってあります。

 画像は、ソフトウェアによって圧縮が行われ、GIF JPG PNG として扱います。
圧縮率が大きくなると、容量は小さくなりますが、JPG GIF などでは荒い画質と
なり、「ごみ」が目立ってきます。大きさにもよりますが、適切な圧縮率を心が
けたいものです。

 JPG における圧縮とは、色数を減らす作業です。画像の品質を落とさず、情報
を正確に伝える最低限の色数を選ぶこともポイントです。
 また、何枚も画像を表示するページを作る時、総容量を計算して大きくなって
しまう場合には、ページを分けるなどして工夫をするのも方法です。

 画像によってファイルサイズが大きくなると、表示までの時間が長くなり、ダ
イヤルアップ接続をしている遅い回線ではストレスがかかり、訪問者が逃げてし
まいます。

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

◆今週のポイント

●画像を表示する要素と属性は、 img要素、src属性です。
 なお、img要素には終了タグはありません。また、src属性は画像だけでなく、
 他のオブジェクトのURLも指定できます。たとえば外部においてあるスクリプト
 文書もこの属性を使って埋め込むことも出来ます。いずれ JavaScriptを講座で
 解説するときに、あらためて説明します。

● width属性で横幅、 height属性で高さを指定します。オブジェクトの大きさを
 指定する時に使います。

● alt属性で、画像の代替テキストを記述し、万一の事故や視覚障害のある人の
 ための対応を忘れないようにします。


今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
Webページは画像が使えるので、より分かりやすく説明しています。あわせて
過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_010.html

次回も、Webで扱う画像 その2 で引き続き画像の扱いを解説します。

教材をダウンロードしていない方は、下記URLにて提供しています。
・ダウンロード先
 http://www.scollabo.com/banban/magazine/material.html
 Windows および Macintosh に対応しています。なお、教材は圧縮しています
が、多くは自己解凍になっています。

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

質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、お使いのOS、ブラウザ、テキストエディタなど、なる
べく分かりやすく制作環境を明記していただけると回答しやすくなります。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
のすべての記述に誤りがある場合、叱咤と罵声と共に私まで突きつけていただく
と幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

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

<えでぃた〜ず・るーむ>

 ウィルスが蔓延しています。といっても風邪の話ではなく、コンピューターで
のことです。
 昨年には「サーカム」「コード・レッド」「ニムダ」、今年5、6月にはクレ
ズ(WORM_KLEZ.H )が、そして今週には、フレズム(WORM_FRETHEM.K)が広がり
を見せています。私のメールボックスにほぼ毎日やってきます。皆さんはいかが
ですか?

 クレズは、第三者のメールアドレスを勝手に使い、それを踏み台にして撒き散
らしています。ですから、「メールに感染してますよ」なんて、忠告の返信を出
しても、当人は何のことか分からないのです。

 今回、急速な勢いで広がったフレズムも、やはり第三者のメーリングリストを
使用して撒き散らしました。実は今回、あの「Turbo Linux Japan」 が所有する
メーリングリストがやられました。
 こいつの悪さは、Windows環境のMicrosoft Outlookだけで起き、プレビューす
るだけで感染してアドレス帳や、フォルダに入っているメールアドレスから参照
して、一斉にウィルスを送りつけます。LinuxのMLからWindowsを攻撃するなん
てまったく皮肉なことですね。

 ウィルスのワクチンソフトは、ネット利用者にとっては欠かせないものです。
ワクチンソフトをインストールしているなら、常に最新の定義ファイルを入手し
てガードを固めたいものです。
 また、万一に備えて重要なデータだけはバックアップしておくことも忘れない
ようにしましょう。ワクチンソフトとて完璧ではありません。

 それにしても Microsoftは、クラッカーにとって格好の餌食なんですね。

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

◆Webサイト更新情報

 ●JavaScriptのページ
 まだすべてが完成していませんが、とりあえずサンプルと共に、チュートリア
 ルを掲載しました。

 ●個人情報に関するページ
 当マガジン、Webサイトでの個人情報に関して 管理者としてのスタンスを掲載
 しました。

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

◆著作権について

個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容について、無断で使用することを固く禁じ
ます。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



Copyright(C) 2002-3003 banban@scollabo.com