ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

画像を貼り付けてみよう

初心者のためのＨＰの飾りつけ教室VOL.6

■ 【画像を貼り付けてみよう】画像を貼り付けるタグとは！

前回は、ページ上で、音を鳴らすにはどうすればいいかやってみました。

私が思うに、文字だけのホームページというのは、ちょっと物足りない物があると思うんです。
そこで、【初心者のためのＨＰの飾りつけ教室】で、飾り付けの素材について、説明してきました。
VOL.1からVOL.4まで、バナー、アイコン、ボタン、ライン、壁紙、アニメＧＩＦなど、
どういうものなのか、どういう用途で使うのか、お話をさせていただきました。

では、これらのＨＰを飾るための素材を、どうやって表示するのかやって見ましょう。

★ 色々な素材を貼り付けてみよう！ ★

これまで、説明してきました、飾り付けの素材は、音楽以外はすべて「画像」です。
これらの画像には「ＪＰＧ」「ＧＩＦ」「ＰＮＧ」などのファイル形式があります。
デジカメの画像などは、ほとんどが「ＪＰＧ」です。
また、バナーアイコンなどは「ＧＩＦ」が良く使われます。
みなさんが素材屋さんから集めてきた、これらの画像を実際に貼り付けるための、
ＨＴＭＬのタグを下に書いて見ましょう

楽天の「画像の倉庫」に画像をアップしますと、↑上のように表示されると思います。

タグを説明しておきます。

SRC="～画像ファイルのＵＲＬ～"　には画像の拡張子まで含めた、画像のファイル名までを指定します。

WIDTH="画像の巾"　には画像の横幅を指定できます。
HEIGHT="画像の高さ"　には画像の高さを指定できます。
（このWIDTH　とHEIGHT　を指定しなければ、元画像がもっている大きさが自動的に表示されます。）

ALT="画像の説明文"　には画像の説明文を入れられます。
（画像が表示されない環境や、画像を読み込み中にはこの説明文が表示されます。）

では、実際に画像のＵＲＬを入れて見ましょう。

この画像のＷＥＢ上（インターネット上）のＵＲＬ（アドレス）は

http://plaza.rakuten.co.jp/img/user/65/14/1286514/1.jpg　

なのですが、これを確認するには、画像の上で、右クリックして、プロパティ(P) からアドレス(URL)で、画像のＵＲＬを確認することができます。これを、先ほどのタグで、

と貼り付けますと、上のような画像が現れます。
WIDTH　と　HEIGHT　を指定しなければ、元画像がもっている大きさが自動的に表示されます。
ちなみにこの画像の　WIDTH="画像の巾"とHEIGHT="画像の高さ"は、
WIDTH="370"　HEIGHT="222"　となっておます。
この、画像の大きさも画像の上で右クリックでプロパティから見る事が出来ます。

では、この　WIDTH="画像の巾"とHEIGHT="画像の高さ"の数値を指定して、
画像を小さくして見ましょう。小さくする場合も、大きくする場合も、幅と高さの比率は変えない事です。
そうしないと、伸びたり縮んだりした、画像になってしまいます。

では、WIDTH="370"をWIDTH="200"に小さくして見ましょう。
これは、０．５４倍にした事になります。ですから高さも同じ０．５４倍にすると、HEIGHT="222"は、HEIGHT="120"という事になりますね。・・あってるよね・・・？（*^_^*）
幅と高さを指定してあげますと、画像はちゃんと小さくなってくれます。↓このように

では、ALT="画像の説明文"　に，画像の説明文を入れて見ましょう。ALT="この車は私のＨＮである、ＧＴ－ＯＮＥです"と入れてみましょうか。↓そうするとこうなります。

マウスを画像の上に当てて見てください。

この車は私のＨＮである、ＧＴ－ＯＮＥです

どうですか！画像の説明が出ましたか？

この、ALT="画像の説明文"はバナーとか、ボタンの説明に有効ですね。例えば下のバナーボタンは
ホームに戻るためのバナーボタンですが、ALT="ホーム"　と書くより、ALT="トップページに戻ります"　と書いた方が、訪問者には、よくわかりますね。
左と右のバナーにマウスをあてて見てください。違いが分かりますね。