<絵や写真を貼ろう>

 ここでは、ページにイラストや写真などを表示させる方法を説明をします。
使用出来る画像は背景の時と同じく、「GIF」・「JPEG」だけですのでこれらの画像を用意して下さい。
適当な物が無い方は、当サイトのフリー素材からダウンロードして下さい。

 さて、ホームページに画像を貼るときにはイメージタグを使います。このタグも単独で使用しますので覚えておいて下さい。また、このタグには色々なオプションがつけられますので、1つずつ説明して行きます。

 まず、基本は次のとおりです。「この色」の部分はあなたの用意した画像ファイル名などに書き換えて下さい。

<IMG SRC="画像ファイル名">

 これで画像は表示されますが、画像ファイルとドキュメントファイルの位置関係(背景画像の説明を参照して下さい。)の記述には注意して下さい。場合によっては、次のようになる事もあります。

<IMG SRC="フォルダ名/画像ファイル名">

 次にイメージタグのオプションについて説明します。

「ALT」

 ブラウザの中には画像を表示できないものがあります。そういったブラウザでどういう画像ファイルなのかという説明を表示させるようにするオプションです。オプションといっても、このオプションは必ず付けるようにしましょう。

<IMG SRC="画像ファイル名" ALT="画像の説明文">


「BORDER」

 これは画像の外枠の太さを指定するオプションです。普通に画像を貼る場合は外枠は表示されませんが、「リンク」を付けると外枠が表示されます。外枠が要らない場合は、BORDER="0"と記述します。

<IMG SRC="画像ファイル名" BORDER="ピクセル数">


「WIDTH」・「HEIGHT」

 これらは画像の幅・高さを指定するオプションです。指定はピクセル数か画面の大きさに対する%で記述します。このオプションを記述しておいた方が読み込みが早くなるブラウザもありますので、記述しておいたほうが良いでしょう。

<IMG SRC="画像ファイル名" WIDTH="ピクセル数または%" HEIGHT="ピクセル数または%">


「ALIGN」

 このオプションは、画像そのものの位置を指定するものではなく、その画像と他の文字との位置関係もしくは並び方を指定するものです。次のサンプルを試してみましょう。

<IMG SRC="画像ファイル名" ALIGN="LEFT">画像の左側に表示<BR>改行して複数行表示<BR>
<IMG SRC="
画像ファイル名" ALIGN="RIGHT">画像の右側に表示<BR>改行して複数行表示<BR>

<IMG SRC="画像ファイル名" ALIGN="LEFT" HSPACE="30">画像の横方向の余白を指定<BR>
<IMG SRC="
画像ファイル名" ALIGN="LEFT" VSPACE="30">画像の縦方向の余白を指定<BR>

<IMG SRC="画像ファイル名" ALIGN="TOP">画像の上端に表示<BR>
<IMG SRC="
画像ファイル名" ALIGN="MIDDLE">画像の中央に表示(Netscape Navigator)<BR>
<IMG SRC="
画像ファイル名" ALIGN="BOTTOM">画像の下側に表示<BR>
<IMG SRC="
画像ファイル名" ALIGN="BASELINE">画像の下側に表示(BOTTOM)と同じ<BR>

<IMG SRC="画像ファイル名" ALIGN="TEXTTOP">画像をテキストの上端に合わせる<BR>
<IMG SRC="
画像ファイル名" ALIGN="ABSMIDDLE">その行の中央に画像を合わせる<BR>
<IMG SRC="
画像ファイル名" ALIGN="ABSBOTTOM">その行の下端に画像を合わせる

 これらは横一列に高さの違った画像を表示させる場合の位置指定にも使用しますので覚えておきましょう。
 また、1番目や2番目のサンプルでは画像横のテキストはいくら改行しても画像の高さ分まではそのまま画像の横に表示されます。これを解除して新たに画像の下に表示させたい場合は改行タグ<BR>にオプションを付けます。

<IMG SRC="画像ファイル名" ALIGN="LEFT">テキスト1<BR CLEAR>画像の下に移る<BR>

「LOWSRC」(Netscape Navigator)

 このオプションは、容量の大きな画像を表示させようとするとデータの読みこみが完了するのに時間がかかる為、最初に容量の小さな画像を仮の画像として表示させるものです。その後に元のデータの読みこみが完了すると画像が置き換わります。但し、これはネットスケープでしか使用できません。

<IMG SRC="画像ファイル名1" LOWSRC="画像ファイル名2">

 自分のお気に入りのイラストや写真でホームページを飾って見みましょう。
但し、あまり容量が大きくなってしまうと読み込みに時間がかかり過ぎて見る人が退屈してしまいます。
なるべく小さなサイズになるような工夫も大切です。


メニュー / 基礎 / 文字 / 装飾 / 画像 / リンク / テーブル / フレーム / フォーム / ステップ