Last Update : 03/13/2003
HTML基礎講座 :: ページに画像を載せる
画像の保存の仕方が分からない？
画像保存の仕方
ページに画像を載せる方法をこれから説明すんだけど、画像がないとどうしようもないじゃん。そういう人は、右の画像を自分のパソコンに保存するといいぜ。保存の仕方は、下を参考にな。
- Windows
- 画像の上にマウスを持っていって、右クリックするとメニューが出る。そのメニューの [名前をつけて画像の保存] とか [画像の保存] を選べばイイ。
- Macintosh
- 画像の上でずーっとマウスボタンを押してるとメニューが出るから、そこで [画像の保存] を選べばイイ。
で、画像を保存する場所は、１回目 で作ったフォルダの中に入れよう。
画像のファイル名は今までと同じく半角英数字とハイフン(-)、アンダーバー(_)、ピリオド(.) だけを使った名前ならなんでもいいけど、〜.gif の .gif って部分は GIF画像 っていうファイルの種類を示す記号だから、変えたらダメだぜ！
画像の基本
画像を表示するには
<img src="画像ファイル名">
ページに画像を載せるには、「<body> </body>」の間に、上のを書けばオッケー。ただし、“画像ファイル名”の所は、ちゃんと画像のファイル名にあわせて書き換えんのを忘れずになー。
代替テキストを表示する
<img src="画像ファイル名" alt="代替テキスト">
画像が表示されない時に代わりの文章を表示させるには、alt属性を使う。
Internet Explorer だと、マウスを乗せたときに吹き出しが出るけど、Netscape 7 とか Opera 7 とかだと、吹き出しは出ないから、長い説明なんかは、下みたいにtitle属性を使おうぜ。
誤：<img src="xxx.gif" alt="みんな、この画像見てくれよ！すげぇだろ！">
正：<img src="xxx.gif" alt="オレ画像" title="みんな、この画像見てくれよ！すげぇだろ！">
んで、alt属性ってのは、絶対に省略しちゃダメなもんなんだ。でも、
こんなヤツみたいに、わざわざ代替テキストなんてつけなくてもよさそーな物もあるじゃん。そういうときは、下みたいに、空欄にしておけばいいぞ。
<img src="yyy.gif alt="">
枠を表示する・消す
<img src="画像ファイル名" alt="代替テキスト" border="数値">
画像に枠をつけるには、border属性をつけるぞ。例えば、「border="10"」ってすると、幅10ピクセルの枠が画像につく。
で、画像にリンクを張ったときに、枠が出るんだけど、それを消すには、下みたいに「border="0"」を入れればイイ。
<a href="xxx.html">
<img src="xxx.gif" alt="xxx" border="0">
</a>
縦横幅を指定する
<img src="画像ファイル名" alt="代替テキスト" width="横数値" height="縦数値">
画像の縦横花を指定したり、変えたりするときは、<img> にwidth属性とheight属性をつける。
例えば、「width="100" height="100"」なんて風に数字をいれんだけど、「width="30%" height="30%"」なんて、パーセント指定を入れることも出来る。でも、パーセント指定にすると、ブラウザウィンドウの大きさのパーセント幅になるから、画像がすげぇ歪むよ。だから、パーセント指定は使わないようにしよう。
画像とテキストの配置
文章と画像の位置を調整
<img src="画像ファイル名" alt="代替テキスト" align="位置指定">
文章の中に、
画像を入れたときに、文章と画像の縦位置を調整するには、IMG要素にalign属性を入れるぞ。
この“位置指定”の中には、「top」「middle(center)」「absmiddle」「absbottom」「bottom(baseline)」の値を入れられる。それぞれの値の意味は下を参考にしてくれよ。
- top
- その行の中の最も高いものの上端に全てを揃える。
- middle
- その行のベースラインに画像の真ん中を揃える。absmiddle より、ちょっとテキストが上になる。
- absmiddle
- その行の最も高いものの真ん中に全てを揃える。
- absbottom
- その行の最も高いものの下部に全てを揃える。
- bottom
- その行のベースラインに画像の下を揃える。これがデフォルト
分かりやすいように、基準線を薄い青で入れておいたから、参考に。
画像の横に複数行の文章を書きたい
<img src="画像ファイル名" alt="代替テキスト" align="位置指定">
画像の横に複数行の文章を書きたい場合、IMG要素に align属性を入れる。ここまでは上とおんなじだけど、違うのは“位置指定”の値に「left」か「right」を入れるってコト。
「align="right"」「align="left"」の説明は、右のサンプル画像を確認しよう。
で、回り込みを解除したい場合は、下みたいに、解除する場所に「<br clear="all">」といれればオッケーだ。
<img src="xxx.gif" alt="xxx" align="left">
文章が画像の右側に回りこんで表示される。
<br clear="all">
<br clear="all"> を入れた直後から、こんな風に、回り込みが解除されて画像の下に文章が表示される。もしくは、スタイルシートをつかって、<br style="clear : both ;"> としても、同じく回り込みが解除されるぞ。
画像の周りに余白を作る
<img src="画像ファイル名" alt="代替テキスト" hspace="左右スペース" vspace="上下スペース">
画像の上下左右に余白を入れるには、IMG要素にhspace属性とvspace属性をそれぞれ入れればオッケー。
例えば「hspace="20" vspace="10"」とすると、画像の左右にそれぞれ20ピクセル分の空白が、画像の上下にそれぞれ10ピクセル分の空白が出来る。