第5章：画像を入れてみる

「百聞は一見にしかず」ということわざがありますように、Webページで説明を行うときに、「長ったらしい文章による説明よりも１つの画像」という場合があります。

画像を使用することで文章だけでは伝えにくい内容を伝えることが出来ますし、より直感的に伝えることが出来ます。また、Webページに彩りを添える役割もあります。

ただし、画像は誰しもが閲覧できるモノではありませんし、重たいページの原因にもなりがちです。上手にかつ、効果的に使うように心がけましょう。

使える画像形式

Webページを作成する際によく使われるのは、GIF形式、JPEG形式、PNG形式があります。ホームページ・ビルダーに付属している、ウェブアートデザイナーでは、この３種類の形式の画像を作成することが出来ます。

GIF形式: アイコンやイラストなどといった色数の少ない画像を扱うのに向いている画像形式です。使用できる色数は256色までですが、透過色、インターレース機能、アニメーション機能などを持ちます。
JPEG形式: 写真などの色数が多い画像に向いています。フルカラーを扱うことが可能で、圧縮率を自由に設定できます。ただし、透過色やアニメーション機能はありません。
PNG形式: GIF形式に取って代わる規格として生まれました。GIF形式が持つ長所に加え、フルカラーを扱えたり、機種による違いを補正できる機能もあります。ただし、一部のブラウザでは、プラグインが必要であったり、透過機能が上手く扱えなかったりするという問題があります。

ホームページ・ビルダーでは上記した以外の画像形式も扱えますが、サイズの問題や扱えるOSの問題などがあります。使うなら、GIF、JPEG、PNGのいずれかの形式に変換しましょう。

画像を入れるには

ツールバーのボタンをクリックし、挿入したい画像を選択します。右側の▼をクリックすると、どこから挿入したいかを選択することが出来ます。

挿入場所は、「ファイルから」「素材集から」「TWAIN対応機器から」「URLを指定して」が選択できます。

画像を挿入すると、以下のようなマークアップになります。
<img src="画像ファイルのURL" width="画像の幅（px）" height="画像の高さ(px）" border="0">

画像の幅と高さは、ホームページ・ビルダーの方で自動入力してくれます。

ポイント

画像の幅、高さ、枠の指定はHTMLでしてよいのか？という疑問が浮かぶ方もいるかもしれません。

枠の指定については、HTML4.01 Strict DTDでは使用できません。

しかし、画像にリンクを貼った場合に問題が出るブラウザがあります。Netscape4.xではスタイルシートでimg { border : none; }としても無効にされてしまいますし、スタイルシートが使えないグラフィカルブラウザでは、リンクの枠線が表示されてしまい、ビジュアル的に問題が生じる場合があります。このようなブラウザでもある程度のビジュアルを保ちたい場合は、border="0"を指定するのもやむ得ないです。

幅や高さの指定については、HTML4.01 Strict DTDでも使うことが出来ます。

画像の幅と高さを指定しておいた方がよい理由として、スムーズに読み込みを行うためというのがあります。幅と高さが指定してあれば、ブラウザは画像の表示領域をあらかじめ確保しておくことができます。

画像の幅と高さが指定されていない場合、ブラウザには小さな四角が表示されます。この小さな四角に画像データが読み込まれると、ページ全体が再描画されます。画像が多いページなら、ページがカクカクと動いて、画像が読み込み終わるまではテキスト部分も読みづらい状態になってしまいます。

CSSで指定すればいいではないのか？と言う意見はごもっともなのですが、CSSが適用されない場合、HTMLでの指定がない場合と同じことになります。CSSが適用されないブラウザやCSSを適用させたくないブラウザは、マシンスペックが低いマシンで動いていることが多いので、再描画でよけいな負荷をマシンに与えるのはよくないと思いますよ。

代替テキストを指定する

画像は誰しもが閲覧できる訳ではありません。以下のような事情によって閲覧できない場合があります。

画像を表示できないブラウザを使用している
ブラウザの設定で画像を表示しないようにしている
視覚障碍があって、画像を閲覧することが出来ない
サーバーの障害などで画像が上手く読み込めない

画像が閲覧できない場合に、代わりに表示するテキストを用意する必要があります。もちろん、その内容は適切でなければなりません。

画像を右クリックして、「属性の変更」をクリックしましょう。

画像の属性画面

「代替テキスト」の部分に代替テキストとなる文字列を入力します。

すると、以下のようにマークアップが変化します。
<img src="画像ファイルのURL" width="画像の幅（px）" height="画像の高さ(px）" border="0" alt="代替テキストの内容">

代替テキストの内容が不要な場合

単なるイメージ画像
言葉で説明しても意味がない画像
画像の直前もしくは直後に図の説明文がある

しかし、alt属性に何も指定しないわけにはいきません。指定していない場合、ファイル名がそのまま表示されたりするブラウザが存在するからです。

このような場合、マークアップとしては、
<img src="画像ファイルのURL" width="画像の幅（px）" height="画像の高さ(px）" border="0" alt="">
とするべきです。

しかし、alt属性の内容を空にするのは、画像の「属性の変更」画面からは行うことが出来ません。以下の方法で行う必要があります。

HTMLソース編集画面で直接入力する
ドキュメントアウトライナでimg要素を選択後、alt属性の部分で値なしを選択する

ドキュメントアウトライナの使い方を見る

画像の左右に文章などを回り込ませたい

スタイルシートマネージャーを起動して、「追加」ボタンをクリックしたあと、「位置」タブをクリックします。

スタイルの設定画面（位置タブ）

HTMLタグ名のところには指定する要素/クラス名/ID名を入れます。

属性の回り込みで指定できる内容は以下の通りです。何も指定しなければ、「なし」を指定したモノとして扱われます。

なし: 回り込みを行いません。
CSSでの指定は、float : none;
左: 指定した内容を左側に寄せて、後に続く内容を右側に配置します。
CSSでの指定は、float : left;
右: 指定した内容を右側に寄せて、後に続く内容を左側に配置します。
CSSでの指定は、float : left;

<p><img src="pictures/a2carlo.gif" width="68" height="96" border="0" alt="" class="float_example1">回り込みをする場合、画像のプロパティ画面の「回り込み」で指定するのではなく、CSSで指定します。画像のプロパティで指定すると、align属性という非推奨属性が入ります。floatプロパティを使います。</p>

というような文書があって、画像を右側に回したいた場合、属性の回り込みで「右」を指定して、「OK」ボタンをクリックします。

このときのCSSは、以下の通りになります。

.float_example1{
  float : right;
}

回り込みをする場合、画像のプロパティ画面の「回り込み」で指定するのではなく、CSSで指定します。画像のプロパティで指定すると、align属性という非推奨属性が入ります。floatプロパティを使います。

IE6には、画像回り込みに関するバグがあります。
背景色や背景画像が指定されているボックス内でテキストを回り込ませたときに、テキストが消えてしまうというバグです。画像の高さに対して回り込むテキストの量が少ないときに発生しますので、回避するためには、画像回り込みを行うボックスに対しては背景色や背景画像を指定しないようにします。

画像を回り込ませた後は、解除するまでは回り込んだままになります。次で、解除方法を説明します。

回り込みを解除したい

回り込みを解除したい要素/クラス/IDに対して、属性の「回り込み解除」で解除の指定をします。指定できる内容は以下の通りです。指定しない場合は、「なし」として扱われます。

なし: 回り込みの解除を行いません。
CSSでの指定は、clear : none;
左: 左側に配置した要素に対する回り込みを解除します。
CSSでの指定は、clear : left;
右: 右側に配置した要素に対する回り込みを解除します。
CSSでの指定は、clear : right;
両方: 左側もしくは右側に配置したすべての要素に対する回り込みを解除します。
CSSでの指定は、clear : both;

とりあえず、回り込みを解除したいときは、「両方」を選択して、「OK」ボタンをクリックするとよいかと思います。