2.イメージ、画像の活用
(1)イメージを貼り付ける
グラフィックイメージや写真などの画像を使うと、ホームページが華やか になります。
標準の画像形式は“GIF形式”ですが、最近では“JPEG(JFIF 形式)”のファイルも表示可能です。・書き方
<IMG SRC=“画像ファイル名”>
・HTML文
<H2>イメージを貼り付ける</H2>
<P>GIF形式のファイル<BR>
<IMG SRC="beer.gif"></P>
<P>JPEG形式のファイル<BR>
<IMG SRC="photo.jpg"></P>
(2)画像と文字の位置関係
画像もテキストの一部として処理されるので、自動改行されず文字と画像 が同じ行に並びます。
このため、画像と文字との位置関係を指定することができます。標準では bottomを指定した場合と同じになります。
・書き方
(*1) Netscapeのみ
<IMG SRC=“画像ファイル名” ALIGN=“位置”> 位置 : top (画像の上部に文字を揃える) middle ( 〃 中心 〃 ) (*1) bottom ( 〃 下部 〃 )
・HTML文
<H2>画像と文字の位置関係</H2>
ビール<IMG SRC="beer.gif">の美味しい季節です。
ビール<IMG SRC="beer.gif" ALIGN="middle">を飲むと一日の疲れがふっとびます。
ただし<IMG SRC="beer.gif" ALIGN="top">飲み過ぎには注意しましょう。
(3)文字の回り込み
画像の説明など、画像の側面に複数行のテキストを配置したい時は、回り 込みの機能を使います。・書き方
<IMG SRC=“画像ファイル名” ALIGN=“位置”>〜 テキスト 〜 <BR CLEAR=“all”> …回り込みの中止 位置 : left (画像が文字の左側) right( 〃 右側)
・HTML文
<H2>文字の回り込み</H2>
<IMG SRC="photo.jpg" ALIGN="left">この写真はこの夏に北海道に<BR>
行ったときに写したものです。<BR>
なかなか上手くとれてるでしょう。<BR CLEAR="all">
(追伸)お土産を持って週末におじゃましたいと思います。<BR>
よろしく。
(ポイント)画像表示サイズの指定
大きな画像ファイルのあるページは、画像データの転送中には何も表示さ れず、イライラすることがあります。
このため、次のような画像表示サイズの指定をすると、ブラウザ側の画像 レイアウトの処理が素早くなります。
また、画像が表示されない時のために、内容を表すテキストを表示するよ うにすると良いでしょう。
・書き方
<IMG SRC=“画像ファイル名”
WIDTH=“幅” HEIGHT=“高さ”
ALT=“テキスト”>
幅、高さ:ピクセル数、または%
・HTML文
<IMG SRC="../g/kyositu.gif" ALIGN="left" HSPACE="5" WIDTH="399" HEIGHT="360"
ALT="パソコン教室">
[応 用]
画像ファイル(マーク)を利用したリスト
マーク付きリスト表示では、利用できるマークは味気ないものです。
そこで、画像ファイルを利用して、カラフルなリスト表示をしてみましょう。
リスト表示のうち <DL>を用いると項目の先頭にマークも番号も付かな いことを応用して、先頭にマークの画像ファイルを貼り付けます。
・HTML文
<H3>画像ファイル(マーク)を利用したリスト</H3>
<DL>
<DT>メダルの種類
<DD><IMG SRC="../g/mark.gif">金メダル
<DD><IMG SRC="../g/mark.gif">銀メダル
<DD><IMG SRC="../g/mark.gif">銅メダル
</DL>
[参 考]ホームページで扱える画像ファイル形式
(1)GIF(ジフ):Graphic Interchange Format
GIF形式は、Mosaic、Netscape、Internet Explorerなど、グラフィック対応のブラウザでは、標準的に利用されてい る形式です。
もともと、アメリカのパソコン通信であるCompuServeで利用されていた もので、使える色の数は256色まで。グラフィックツールで作成した絵、文字 などの画像に適しています。
- インタレースGIF
通常のGIFでは、画像データを読込中に上の方から少しづつ 表示されますが、インタレースGIFでは、まず全体がおおま かに表示され、徐々にモザイクが細かくなって最後にはっきり と表示されるようになります。
- 透過GIF
1色を背景色として指定することにより、背景色の部分を透か して表示します。
- 動画GIF
複数の画像データを次々に表示させることで、アニメーション のように表示することができます。その分だけ、ファイル容量 が大きくなりますので、絵の大きさは小さなサイズのものにす ると効果的です。
(2) JPEG(ジェイペグ):Joint Photographic Experts Group File Interchange Format
JPEGは画像圧縮の国際標準方式のことなので、画像ファイル形式としては JFIFというので正しい呼び方ですが、JPEGと呼ぶのが一般的になって います。
Netscape、Internet Explorerでは、インライン イメージ(テキスト中に表示)として扱うことができます。圧縮効果が高く 1, 677万色を扱うことができるため、写真など色数の多い画像データに 適しています。
- プロクレッシブJPEG
インタレースGIFのように、はじめは全体がぼんやりと表示 され、しだいに画像が鮮明になっていきます。
[目次へ] [次へ]