HTML編 23/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
画像を表示する
画像を配置する
画像の大きさを指定する




画像を配置する

●<IMG SRC="n">
さぁ、だいぶホームページらしくなってきました。では次に、画像を配置してみましょう。画像を配置するには、その画像の在処を相対パスで指示してあげなければなりません。相対パスの書き方を覚えていますか?画像はダウンロードしてありますか?また、ディレクトリはキチンと出来ていますか?まだの人はこちらへ。View
画像を配置するタグは<IMG SRC>です。<BR>同様、閉じタグは必要ありません。パラメータに貼り込みたい画像の場所とファイル名を書き込みます。せっかく作ったタイトルですが(笑)「Kimura's Room」を取って、代わりに「logo.jpg」という画像(タイトルロゴ)を貼り込んでみましょう。

<IMG SRC="img/logo.jpg">

この「index.html」ファイルから見て、「logo.jpg」というファイルは「img」というフォルダ内にあるので、相対パスは「img/logo.jpg」となります。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">

<!--★★ここから内容★★-->
<H2>ようこそ!</H2>
<HR SIZE="5" WIDTH="321">

<!--★★ロゴ★★-->
<IMG SRC="img/logo.jpg"><BR>

<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
------略-------
<TD NOWRAP>●Enquete</TD>
<TD><FONT SIZE="2">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブルを閉じる★★-->
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>




画像の大きさを指定する

●<IMG SRC="n" WIDTH="n" HEIGHT="n">
画像は何も指定しないと、制作された大きさ原寸で表示されます。これをタグで好きな大きさに変えて表示することも出来ます。WIDTHとHEIGHTで指定します。どちらが横幅でどちらが高さなのかは解りますね?パラメータにはピクセル数を指定します。縦横の比率を変えて指定すれば、オリジナルの画像を縦長にしたり横長にしたりも出来ます。
WIDTHとHEIGHTのどちらか片方だけ指定した場合は、その拡大縮小比率に合わせて、もう片方も変形します。幅400、高さ200ピクセルの画像を、WIDTHのみ200と指定すればHEIGHTも自動的に100となります。
ただし、このタグを使って画像のサイズを変えたり、変形したりすると画像自体の表示が乱れて汚いものになります。特殊効果を狙う場合以外は、画像を原寸で作り、そのサイズで表示するように心がけましょう。
また、時々(多分HTML制作ソフトを使っていて、知らずにやっているのでしょう)、タグで無意味に画像を小さくしているサイトを見かけます。画面上小さくても、元の写真DATAが大きければ、ページを表示するための重さは変わりません。軽いページを作るため写真のサイズを小さくするのなら、元画像のサイズを変えましょう。
では、このサイズ指定は特殊な場合以外は「使えないタグなのか?」と言うとそうでもありません。原寸で表示するにしろ原寸の寸法をピクセル数で指定しておくと、画像を全て読み込み終わる前に、ブラウザはページ全体を把握できるため、結果的に表示が早くなるというメリットがあります。またブラウザで「画像を表示しない」ように設定している人や、万が一画像のリンクが切れている場合にも、レイアウトを崩さないで表示することが可能です。この「logo.jpg」は幅321ピクセル、縦42ピクセルで作ってありますので、原寸で表示するには

<IMG SRC="img/logo.jpg" WIDTH="321" HEIGHT="42">

となります。これをわざとリンクを切らして表示してみます。サイズ指定してあるとViewとなり、サイズ指定しないとViewこのようになります。リンクが切れている場合など「ここに本来は画像がある」というアイコンが(ブラウザによってアイコンが違います)表示されますが、サイズ指定のない場合、普通のサイズのアイコンで表示されてしまうため、レイアウトが崩れるのです。たまたま、この「logo.jpg」は高さがアイコンとあまり変わらないサイズなので、それほど崩れていないかもしれませんが、もし、縦に長い画像を使っていたら(もしくは小さいサイズを使っていたら)こちらの意図したレイアウトでは表示されません。面倒くさくても、原寸のピクセル数を指定しておきましょう。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">

<!--★★ここから内容★★-->
<H2>ようこそ!</H2>
<HR SIZE="5" WIDTH="321">

<!--★★ロゴ★★-->
<IMG SRC="img/logo.jpg"
WIDTH="321" HEIGHT="42"><BR>
原寸(幅321、高さ42ピクセル)で表示<BR>
<IMG SRC="img/logo.jpg"
WIDTH="500"><BR>
幅のみ500ピクセルで指定<BR>
<IMG SRC="img/logo.jpg"
WIDTH="100" HEIGHT="80"><BR>
幅100ピクセル、縦80ピクセルで指定<BR>

<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
------略-------
<TD NOWRAP>●Enquete</TD>
<TD><FONT SIZE="2">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブルを閉じる★★-->
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

backindexnext