【第２４講】画像の貼り付け・基本編

（1998年11月24日更新）

【There have been visitors since 1997. 9.24.】

　文字しかないホームページは見ていても面白くありませんし、あまり見る気がしませんよね。そこで、画像貼り付けのタグをマスターしましょう。第4講でも紹介したように、ふつうホームページの画像というとGIFファイル（〜.gif）を指しますが、たまに、精細な写真などにはJPEGファイル（〜.jpg／〜.jpeg）を使うことがあります。

【画像：IMaGe】
<IMG  SRC="src">
※src＝{画像ファイルのアドレス}

　<IMG>タグのSRC属性srcに貼り付けたい画像ファイルのアドレスを書き込むと、その箇所に指定した画像ファイルを貼り付けることができます。このタグには、開始・終了の区別はなく、単独で使います。ただし、そのアドレスに画像ファイルがなければ表示されません。あと、注意したいのは、自動的に改行されないので、必要に応じて改行タグ（<P>や<BR>）を入れておくということですね。以下の例で見比べてください。

画像を貼り付けます<IMG SRC="logo.gif">貼り付けました。<P>

（表示結果）

　上のように、<IMG>タグを使うと画像を貼り付けることができます。しかし、貼り付ける画像が手元にないのが普通です。自分で作るという方法もありますが、手っ取り早くもらってきましょう。

　ブラウザに表示されている画像にマウスポインタ（画面に出てくる矢印）を移動し、マウスの右ボタンをクリックして指示に従うとその画像を自分のディレクトリにコピーすることができます。しかし、こうした画像には著作権があることが多く、あまり取り込むべきではありません。

　そこで、著作権フリーで自由に持って行ってくれて構いませんというページから取り込んできて使うというのが一般的だと思います。こういうページをYAHOOで検索しましたので「画像をもらいに行こう」を参考にしてください。もちろんフリー素材を取り込んでくるのは無料ですが、ページによっては「画像を自由に使ってもいいので必ずリンクを張ること」という条件があるところもあるので注意してくださいね。

　ちなみに、私の場合は、書店で売っている「ホームページ用素材集CD-ROM」を購入して使っています。この場合は、著作権フリーの見返りとして本代を払うという感覚ですね。こうした本を購入した場合も、画像を使用できるのは購入者のみです。昨年度の、応用ソフトウェア実習IIの課題のときには、私のホームページから画像を『盗んだ』方がたくさんいて、非常に迷惑しました。皆さんは、このようなことのないようにして下さいね。

【代替文字列】
<IMG  SRC="src"  ALT="alt">
※src＝{画像ファイルのアドレス}
※alt＝{画像の代わりに表示する文字列}

　このALT属性は何かというと、ブラウザによっては画像が表示されないことがあります。そうしたときに画像の変わりに表示する文字列をこのALT属性に指定しておけば、何が表示されるはずだったのかが分かります。また、表示に時間がかかる場合も、同様です。私は、学外から学内のページを見た場合に、表示速度が非常に遅いことから、表示されるまでの間に何が表示されるか見当がつくように、このALT属性をできる限り使うようにしています。見た目は変わりませんが、指定しておいた方が親切なページだといえるでしょう。

<IMG SRC="logo.gif" ALT="ロゴ">

（表示結果）

【第２５講】画像の貼り付け・応用編

【第２４講】に関する質問フォーム

【第２３講】インデント