画像

ホームページ・ビルダーには、画像の素材集があり、そこから画像を使用したり、自分の撮ったデジカメ写真をホームページ上に貼り付けたりします。

画像の種類

ホームページで扱う画像は、GIF、JPEG、PNGの3種類の画像ファイルを使用します。
（厳密には沢山ありますが、ホームページ・ビルダーでは3種類）
この3種類の特徴を使い分けながら、画像ファイルを使用します。
ウェブアートデザイナーでのWEB用保存で、この3種類に関しての記述があります。

GIF

GIF とは「Graphics Interchange Format」の頭文字を取った略称。
拡張子は「〇〇.gif」で、読みは「ギフ」もしくは「ジフ」と呼ばれている。

• 主な特徴
  • ロゴ、アイコン、バナーなどの使用色数の少ない画像への使用に適している
  • 利用可能な色数は最大256色(8bit)
  • 背景画像に透明な色を指定する透明化(Transparency)が可能
  • 複数画像を1つのファイルにしてアニメーション表示するアニメーションGIFが可能
  • デジカメ写真などには適さない

JPEG

JPEGとは「Joint Photographic Experts Group」の略称。
拡張子は「〇〇.jpeg」もしくは「〇〇.jpg」などです。読みは「ジェイペグ」。
JPEGはフルカラーに対応しており、インターネットで最も扱われている画像フォーマット。

• 特徴
  • デジカメ写真、スキャナ画像などの使用に適している
  • 利用可能な色数は最大1670万色（24bit）
  • GIF画像が得意とする画像ファイルは適さない
    

PNG

PNGとは「Portable Network Graphics」の略称。
拡張子は「〇〇.png」、読みは「ピング」。
PNGは、GIFとJPEG形式の特徴を併せ持った画像形式です。
但し、対応していないブラウザ（Internet Explorer 6以前のものなど）がある。

• 特徴
  • ロゴやアイコン、デジカメ写真など様々な画像ファイルに適している
  • テキストや線画など色の境界がはっきりしたイメージに適している
  • 色数は256色(8bit)以下からフルカラーまで対応している
  • 圧縮率が高く、同じ内容のGIF画像より画像ファイルサイズが小さい
  • 画像ファイルサイズが大きい（フルカラーの場合、JPEGの数倍）
  • アニメーションは非対応
  • GIFの1色透明に対し、PNGは複数の透過色を指定できる（透過PNG）
• 対応ブラウザ
  • Windows版Internet Explorer4.0以上
  • Mac版Internet Explorer5.0以上
  • Netscape Navigator4.04以上
  • Netscape Navigator 4.x（透過PNGに未対応）

画像を挿入

メニューの「挿入」→「画像ファイル」で画像を挿入できます。
主に挿入できるものは、通常の画像、素材集、ＵＲＬを指定して（インターネット上の画像）です。

画像の属性

画像を挿入したら画像を右クリックし、属性を指定します。
属性は、代替テキスト（ＡＬＴ属性）、サイズ（幅と高さ）を指定します。
この2つは、必ず指定するようにしましょう。

ＨＴＭＬタグ
「alt="HOME"」が代替テキスト、「width="58"」が幅、「height="53"」が高さです。
「border」は、画像に枠を付ける場合に「1」としますが、何も指定しない場合は「0」です。

<img src="file:///画像ファイルのパス" width="58" height="53" border="0" alt="HOME">

代替テキストは、WEBブラウザで画像にマウスを置いた時に表示されます。
また、何らかの理由で画像が表示できない時に、代替テキストが表示されます。
画像が表示されない時に、この代替テキストを指定しておかないと「Ｘ」のみの表示となり、この画像が何を示しているのか分かりません。

画像のサイズ指定は、WEBブラウザが画像を読み込む際に少し読み込みが早くなります。

画像にリンクを付ける

画像を右クリック→「リンクの挿入」で、画像にリンクを付けられます。

<a href="http://リンク先"><img src="file:///画像ファイルのパス" width="58" height="53" border="0" alt="HOME">

リンクを付ける際に注意する事は、画像の枠（border）の指定です。
大抵、枠は必要ないと思うので、何も設定しなければ枠は表示されません。

画像を含むページの保存

画像を使う時は、自分のPC内で画像を保存して、ホームページ・ビルダーへ貼り付けする事が多いと思います。
挿入（貼り付け）した後は、画像のパスが「file:///画像ファイルのパス」となっています。
これは、画像を含むページを保存する時に自動的に変換されます。
ページを保存すると、以下のダイヤログが表示されます。

初めのうちは、このページ（HTMLファイル）と同じディレクトリ（階層）に保存しましょう。
保存場所に「HTMLファイルと同じフォルダ」となっていれば問題ありません。
こちらを正しく指定しないと、WEBブラウザ上で画像が表示されません。

画像のみのディレクトリを指定する、あるいは違うディレクトリに入れたい場合は、「保存場所にファイルをコピーする」のチェックを外し、指定したいディレクトリを入力して下さい。

画像を使ったマーキー

文