画像の入れ方

 画像を入れるタグを紹介します。画像の配置について、HTMLでは基本的に画像も文字の一貫として取り扱われています。なお、タグの名称が何の略称かを()で表記しました。



● 画像のの基本形式と仕組み

 画像をホームページに掲載する場合には、二つのファイルを用意しなければなりません。
 一つは、HTMLファイルで、もう一つは画像ファイルです。
 HTMLファイルには、読み込む画像のファイル名、その画像が保存されている場所、どのような大きさで表示するのかといったことを指定します。
 ここでは、HTMLファイルも、画像ファイルも同一のフォルダー内にあると言う前提にします。両者が異なる場所に保存されている場合については、リンクの「パスについて」を参考にして下さい。
 そして、実際に起動するとまずHTMLファイルが起動され、画面に開かれたページに画像ファイルを読み込むというプロセスになります。


<IMG SRC="x"> x=画像ファイル名
(IMG=Image, SRC=Source)

 例えば、


<IMG SRC="kokkai.jpg">
 

 と指定し、このファイルが保存されているのと同じフォルダに、kokkai.jpgというタイトルのイメージファイルを保存します。ブラウザ上では下記のように表現されます。  参考 国会の写真は衆議院ホームページより(http://www.shugiin.go.jp/itdb_main.nsf/html/index_annai.htm)。



 ● 代替テキスト

 写真を入れるときには、必ず代替テキストを入れるようにしましょう。これは何らかの理由でイメージを送ることができない場合でも、その写真が何であったかを言葉で説明できるようにするためです。
 また、写真が表示できている場合には、写真上にマウスを置くとマウスの先にテキスト枠が表示され写真の解説となります。
 その基本書式は下記のようにします。


<IMG SRC="kokkai.jpg" ALT="y">  y=代替テキストのコメント 
(ALT=Alternative)

 例えば、下記のように入力します。ここでは、故意にイメージファイルのファイル名の綴りを誤っています。


<IMG SRC="kokkei.jpg" ALT="衆議院側、つまり「左」から見た国会">
 

 ブラウザ上では下記のように表示されます。
 


衆議院側、つまり「左」から見た国会


 ● 画像と文字位置
 

 画像も文字の一環として処理されているので同じ行として横一列に並びます。イメージの底辺に合わせて配列されます。また、一行に収まりきらない分は二行目に表示されます。
 例えば、下記のように入力します。
 なお、文字の色については無視してください。


<IMG SRC="kokkai.jpg" ALT="衆議院側、つまり「左」からから見た国会">予算について,参議院で衆議院と異なつた議決をした場合に,法律の定めるところにより,両議院の協議会を開いても意見が一致しないとき,又は参議院が,衆議院の可決した予算を受け取つた後,国会休会中の期間を除いて30日以内に,議決しないときは,衆議院の議決を国会の議決とする。  

 ブラウザ上では下記のように表示されます。
 


衆議院側から見た国会。予算について,参議院で衆議院と異なつた議決をした場合に,法律の定めるところにより,両議院の協議会を開いても意見が一致しないとき,又は参議院が,衆議院の可決した予算を受け取つた後,国会休会中の期間を除いて30日以内に,議決しないときは,衆議院の議決を国会の議決とする。 

   これでは見苦しいので、イメージと文字位置を決めるタグが必要になるわけです。
 文字位置の調整の調整は下記のように指定します。

<IMG SRC="Image File" ALIGN="y">
y=TOP,MIDDLE,BOTTOM,LEFT,RIGHT
TOP 写真に対して上寄せ
MIDDLE 写真に対して中央
BOTTOM 写真に対して下寄せ
LEFT 画像を左に、文字列を右に回り込ませる
RIGHT 画像を右に、文字列を左に回り込ませる


 例えば、下記のように入力します。


<IMG SRC="kokkai.jpg" ALIGN="right" ALT="衆議院側、つまり「左」からから見た国会">予算について,参議院で衆議院と異なつた議決をした場合に,法律の定めるところにより,両議院の協議会を開いても意見が一致しないとき,又は参議院が,衆議院の可決した予算を受け取つた後,国会休会中の期間を除いて30日以内に,議決しないときは,衆議院の議決を国会の議決とする。

 ブラウザ上では下記のように表示されます。
 


衆議院側から見た国会。予算について,参議院で衆議院と異なつた議決をした場合に,法律の定めるところにより,両議院の協議会を開いても意見が一致しないとき,又は参議院が,衆議院の可決した予算を受け取つた後,国会休会中の期間を除いて30日以内に,議決しないときは,衆議院の議決を国会の議決とする。 

 これ以外に、文字と画像の位置関係については以下のことができます。


横に回りこませたコメントを途中で解除したいとき
<IMG SRC="Image File" ALIGN="y">〜コメント〜<BR CLEAR="z">〜コメント
z=LEFT,RIGHT,ALL


画像と文字の間に間隔を入れたい時
<IMG SRC="Image File" VSPACE=n HSPACE=n>
n=ピクセル数
VSPACE 画像に対して垂直方向に間隔をあける
HSPACE 画像に対して水平方向に間隔をあける


     


 ● 画像の大きさを指定する
 

 画像の大きさを帰ることができます。方法はピクセル数で大きさを固定して指定する場合と、ブラウザの画面に対する比率として指定する方法の二つです。


画像の大きさを指定したいとき
<IMG SRC="Image File" width="x" height="y">


画像と文字の間に間隔を入れたい時
<IMG SRC="Image File" VSPACE=n HSPACE=n>
  x,y にはピクセル数もしくは、%を指定する


     


 ● 枠線の変更・壁紙・表への貼り付け
 


画像に枠線を入れる
<IMG SRC="Image File" BORDER=n>
  n=枠線の太さ(ピクセル数)
何も指定しない場合にはブラウザに初期設定されている太さになります。

画像を壁紙として用いる
<BODY BACKGROUND="Image File">〜</BODY>

画像を表の壁紙として用いる
<TABLE BACKGROUND="Image File">〜</TABLE>
<TD BACKGROUND="Image File">〜</TD>
<TH BACKGROUND="Image File">〜</TH>