HTMLタグ・リファレンス
イメージ
Webブラウザは写真やイラストなどのイメージを表示させることができます。この場合、イメージファイルもサーバーにアップロードしておく必要があります。
 |
イメージの表示 | |
|
イメージのサイズ指定 | |
|
イメージの境界線 | |
|
イメージとテキストの配置 | |
|
テキストの回り込み | |
|
テキストの回り込みの中止 | |
|
イメージの周囲の余白を指定する | |
|
イメージの中央配置 |
| ■ イメージの表示 |
| TAG | |
|
<IMG SRC="ファイル名" ALT="テキスト"> |
|
| イメージを表示させたい場合は、SRCで表示させたいイメージのファイル名を指定します。イメージを扱えないブラウザを使用している場合や扱えない設定にしている場合に備えて、代わりに表示される文字列をALTで指定できます。またイメージにマウスポインタを重ねるとALTで記述された内容が表示されます。 |
| SOURCE | |
<IMG SRC="kujira.gif" ALT="クジラの親子です">クジラの親子です<BR> <IMG SRC="iruka.gif" ALT="イルカの親子です">イルカの親子です |
|
| DISPLAY | |
 クジラの親子です イルカの親子です
|
|
| 下は「iruka.gif」が表示されなかった場合です。イメージが表示される代わりにALTで指定した文字が表示されています。 |
| ■ イメージのサイズ指定 |
| TAG | |
|
<IMG SRC="ファイル名" WIDTH="数値" HEIGHT="数値"> 数値にはピクセル数かウィンドウ枠に対する％を指定します。 |
|
| イメージのサイズはテーブルと同様、WIDTHとHEIGHTによって指定します。指定方法はピクセル数かウィンドウ枠に対するパーセンテージで指定します。ピクセル数はイメージの絶対的な大きさを指定するのでウィンドウ枠がどうであれ、いつも同じ大きさで表示されます。一方、パーセンテージで指定した場合、ウィンドウ枠の大きさに依存してイメージの大きさは変化します。 |
| SOURCE | |
<IMG SRC="pengin.gif">サイズ指定なし<BR> <IMG SRC="pengin.gif" WIDTH="60" HEIGHT="120">ピクセル数で指定<BR> <IMG SRC="pengin.gif" WIDTH="15%" HEIGHT="30%">パーセンテージで指定<BR> |
|
| DISPLAY | こちらを参照。 |
| ウィンドウ枠を変えると一番下のイメージの大きさも変化することを確認してください。 |
| ■ イメージの境界線 |
| TAG | |
|
<IMG SRC="ファイル名" BORDER="数値"> 数値にはピクセル数を指定します。 |
|
| イメージに境界線を引くにはBORDER属性に線の幅をピクセル値で指定します。 |
| SOURCE | |
<IMG SRC="pengin2.gif"><BR> <IMG SRC="pengin2.gif" BORDER="3"> |
|
| DISPLAY | |
|
|
| 通常は境界線は引かれませんが、イメージに対してリンクを張った場合、境界線が引かれてしまいます。境界線をなくしたい場合は「BORDER="0"」と指定します。 |
| ■ イメージとテキストの配置 |
| TAG | |
|
<IMG SRC="ファイル名" ALIGN="配置"> 配置には「top」、「middle」、「bottom」を指定します。 |
|
| HTMLではイメージはその大きさに関係なく、一文字として扱われます。ALIGN属性によってイメージとテキストとの並び方を指定することができます。「top」、「middle」、「bottom」が指定可能ですが、何も指定しなければ「bottom」と同じになります。 |
| SOURCE | |
<IMG SRC="pengin2.gif" ALIGN="top">ペンギンワールド<BR> <IMG SRC="pengin2.gif" ALIGN="middle">ペンギンワールド<BR> <IMG SRC="pengin2.gif" ALIGN="bottom">ペンギンワールド<BR> |
|
| DISPLAY | |
|
ペンギンワールドペンギンワールドペンギンワールド
|
|
| この場合イメージはイラストと同様に扱われるわけですから、イメージの横には１行分のテキストしか表示されません。複数の行を表示させたい場合はALIGN属性に「left」か「right」を指定します（次項参照）。 |
| ■ テキストの回り込み |
| TAG | |
|
<IMG SRC="ファイル名" ALIGN="配置"> 配置には「left」、「right」を指定します。 |
|
| 通常、イメージは一文字として扱われるため、イメージの側面に複数行のテキストを配置させることはできません。しかし、ALIGN属性に「left」、「right」を指定することによってイメージの側面に複数行のテキストを配置させることができます。「left」を指定した場合イメージは左に、「right」を指定した場合イメージは右に配置されます。 |
| SOURCE | |
<IMG SRC="pengin.gif" ALIGN="left">ペンギンは南極にのみ生息しています。<BR> これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。<BR> <BR><BR><HR><BR><BR> <IMG SRC="pengin.gif" ALIGN="right">ペンギンは南極にのみ生息しています。<BR> これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。<BR> |
|
| DISPLAY | |
 ペンギンは南極にのみ生息しています。これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。 ペンギンは南極にのみ生息しています。これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。 |
|
| ■ テキストの回り込みの中止 |
| TAG | |
|
<BR CLEAR="all"> |
|
| ALIGN属性によってイメージの側面に複数行のテキストを配置させた場合、ある特定の位置で<BR CLEAR="all">を指定すると、回り込みを中止して強制改行を行うことができます。 |
| SOURCE | |
<IMG SRC="pengin.gif" ALIGN="left">ペンギンは南極にのみ生息しています。 <BR CLEAR="all"> これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。<BR> |
|
| DISPLAY | |
|
ペンギンは南極にのみ生息しています。 これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。 |
|
| ■ イメージの周囲の余白を指定する |
| TAG | |
| <IMG SRC="ファイル名" HSPACE="数値" VSPACE="数値"> | |
| イメージの周囲に余白を指定することができます。これによってイメージとテキストとの間隔を空けることができます。HSPACEは横方向の余白を、VSPACEは縦方向の余白を指定します。共にピクセル数で指定します。 |
| SOURCE | |
<IMG SRC="pengin.gif" ALIGN="left">ペンギンは南極にのみ生息しています。 <BR CLEAR="all"> これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。 <BR><BR><HR><BR><BR> <IMG SRC="pengin.gif" ALIGN="left" HSPACE="20" VSPACE="20"> ペンギンは南極にのみ生息しています。 <BR CLEAR="all"> これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。<BR> |
|
| DISPLAY | |
|
ペンギンは南極にのみ生息しています。 これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。 ペンギンは南極にのみ生息しています。これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。 |
|
| 下の画像の周囲20ピクセルに余白が空いていることを確認してください。 |
| ■ イメージの中央配置 |
| TAG | |
|
<P ALIGN="center"><IMG SRC="ファイル名"></P> <DIV ALIGN="center"><IMG SRC="ファイル名"></DIV> <CENTER><IMG SRC="ファイル名"></CENTER> |
|
| イメージはALIGN属性に「left」、「right」を指定することによって位置を配置することできましたが、イメージのALIGN属性では「center」は指定できません。そのためイメージを中央に配置したい場合は、文章レイアウトの項で述べた<P>〜〜</P>、<DIV>〜〜</DIV>、<CENTER>〜〜</CENTER>でイメージを段落や区画として指定することによって中央配置を行います。イメージの左や右の位置指定も、周囲にテキストを配置させないのであればこれらのタグを使用すると便利です。 |
| SOURCE | |
ペンギンは南極にのみ生息しています。 <P ALIGN="CENTER"><IMG SRC="pengin.gif"></P> これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。 <BR><BR> ペンギンは南極にのみ生息しています。 <DIV ALIGN="CENTER"><IMG SRC="pengin.gif"></DIV> これは、ペンギンの誕生地が南半球のニュージーランドであるからだと考えられています。<BR> |
|
| DISPLAY | |
|
ペンギンは南極にのみ生息しています。
ペンギンは南極にのみ生息しています。 |
|
| <P>〜〜</P>タグではイメージとテキストの間に１行空きますが、<DIV>〜〜</DIV>タグでは空かないことは既に述べたとおりです。 |
| ページ先頭へ ホームページ作成Tipsへ トップページへ |