画像について

▼テキストと並んで重要なのが画像ですね。

　１．画像の貼り込み

まずは普通に画像を貼り付けてみようね。

●タグ書式
<IMG src="画像のＵＲＬ"> （とりあえず、これだけの指定でやってみましょう。）
●タグ例
<IMG src="../image/rin4.gif">　　表示→　　　
　　　　
※とりあえず、手元にある画像で練習できたらしてみましょう。
※ＰＣへの画像の取り込み方は、あとのほうで説明しています。覚えても、取り込み過ぎない
　ように注意しようね。（ＰＣが重くなるよ）

　２．画像の貼り込み２

いろいろな指定をしてみましょう。（実際に使う場合はこんな感じですね。）

●タグ書式
<IMG src="画像のＵＲＬ" width="画像幅" height="画像高さ" alt="説明コメント">
●タグ例１
<IMG src="../image/rin4.gif" width="48" height="48" alt="マスコットアイコン">
●例１の表示　　　　　　　　　　　　　　　　　　　　
※上の画像にカーソルを合わせてね。説明が表示されるよ。

●タグ例２
<IMG src="../image/rin4.gif" align="top" alt="画像は上に表示されるよ。"><BR>
<IMG src="../image/rin4.gif" align="middle" alt="これは真ん中に表示される"><BR>
<IMG src="../image/rin4.gif" align="bottom" alt="一番下に表示されるよ。">

●例２の表示
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ＴＯＰ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ＭＩＤＤＬＥ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ＢＯＴＴＯＭ
※これはあくまでもブラウザでの表示のイメージです。

●タグ例３
<IMG src="../image/rin4.gif" width="70" height="48" alt="横長になるよ。"><BR>
<IMG src="../image/rin4.gif" width="48" height="70" alt="縦長になるし。">

●例３の表示
　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
※結構おもしろいことができるよね。いろいろやってみると楽しいですよ。

　３．画像の貼り込み３

今度は背景画像の貼りこみについてやってみましょう。

●タグ書式
<BODY background="画像のＵＲＬ">　（ページ全体に背景画像を使用する時）

●タグ例
<BODY background="../image/rinrin15.gif">←これが使うイメージ画像

●ブラウザ表示イメージ
　　　　　　　　　　　　　

　　　　文字を入れるとこんな感じ
　　　　あんまり目立たないね・・・。
　　　　これだと画像がウザイよね

※上はあくまでもイメージであり、テーブルの背景画像で表しています。
※見てもおわかりの通り、このような画像を背景に使用すると、文字などが見にくくなったりしますので、背景には適した画像を選ぶことが大切です。
※文字などの色も考えて、マッチしたものを使うようにしましょう。

★ちょっと一言！！

画像のパスという言葉は、初心者には耳慣れない言葉だと思います。
その画像パスについて、説明しておきますね。

　　★絶対パスと相対パス

ＨＴＭＬでは、<A>（アンカータグ）を使うことで文書内の特定の位置や、他のページや、他の人のページにリンクを張ることもできるし、<IMG>（イメージタグ）や<EMBED>（エンベッドタグ）で画像やプラグインファイルをページに表示することもできます。（画像ファイルや音声ファイル）
このような場合に、リンクするページの位置や場所をを指定する方法がパスというわけです。
パスの記述には「絶対パス」と「相対パス」という２つのやり方があります。
絶対パスはインターネットでの場所を特定する方法で、相対パスとはそのファイルから見た位置関係で場所を指定する方法です。
単にこういう風に聞いても、ピンとこないと思いますので、図の説明を付け加えておきます。
これから先勉強していくと、いろいろな部分で出てくる言葉なので覚えておくと後々役に立ちますよ。（特にＣＧＩやＪａｖａＳｃｒｉｐｔなどには必須です。）

　　　　　　　

図は、ホームページの構成図の例です。
すべてが同じ構造とは言いませんので単に一例として見てください。

http://www.siteq.net/
┃
rans ━┳━index.html
　　　　　　 ┣━img1.gif（画像）
　　　　　　 ┣━etc　━┳━index2.html（ここに画像を貼る）
　　　　　　 ┃　　　　　　　　 ┣━img2.jpg（画像）
　　　　　　 ┃　　　　　　　　 ┗━last━┳━test.html
　　　　　　 ┃　　　　　　　　　　　　　　　　 ┗━img3.gif（画像）
　　　　　　 ┗━img ━┳━img4.gif（画像）
　　　　　　　　　　　　　　　　　┗━jpe ━━img5.jpg（画像）

例えば、今　index2.html　に画像を貼りこむ時の絶対・相対パスを指定した時の例をあげてみます。

★img1.gifを貼りこむ場合

絶対パス
<IMG src="http://www.siteq.net/rans/img1.gif">
相対パス
<IMG src="../img1.gif">

★img2.jpgを貼りこむ場合

絶対パス
<IMG src="http://www.siteq.net/rans/etc/img2.jpg">
相対パス
<IMG src="img2.jpg">

★img3.gifを貼りこむ場合

絶対パス
<IMG src="http://www.siteq.net/rans/etc/last/img3.gif">
相対パス
<IMG src="last/img3.gif">

★img4.gifを貼りこむ場合

絶対パス
<IMG src="http://www.siteq.net/rans/img/img4.gif">
相対パス
<IMG src="../img/img4.gif">

★img5.jpgを貼りこむ場合

絶対パス
<IMG src="http://www.siteq.net/rans/img/jpe/img5.jpg">
相対パス
<IMG src="../img/jpe/img5.jpg">

※このような感じになりますが、最初は理解できないかも知れないで
　すけど、段々わかってきます。
　これは、あくまでもサーバを借りてディレクトリを構成した時の例です
　から、そこまでしない場合は必要ないかも知れないですけど。
※ディレクトリとは、ＰＣ上でいうとフォルダです。と言えば、わかりやす
　いですよね？ファイル収納場所って覚えておくといいです。

こんな説明で納得できましたでしょうか？・・・/(^◇^;)
じっくり見てみると、なんとなくつかめると思うんですけど・・・。
がんばって理解してみてください。ｗ

画像に関しては、かなり使用頻度が高い指定になりますので、確実に覚えておきたいですね。
それと、将来ＣＧＩなどの設置を考えている人は、パスも確実に覚えておきましょうね。