GT-ONE 楽天タグ講座 パイプ奮闘記

画像を貼り付けてみよう

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




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

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

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

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

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

    これまで、説明してきました、飾り付けの素材は、音楽以外はすべて「画像」です。
    これらの画像には「JPG」「GIF」「PNG」などのファイル形式があります。
    デジカメの画像などは、ほとんどが「JPG」です。
    また、バナーアイコンなどは「GIF」が良く使われます。
    みなさんが素材屋さんから集めてきた、 これらの画像を実際に貼り付けるための、
    HTMLのタグを下に書いて見ましょう
<IMG SRC="~画像ファイルのURL~" WIDTH="画像の巾" HEIGHT="画像の高さ" ALT="画像の説明文">
    楽天の「画像の倉庫」に画像をアップしますと、↑上のように表示されると思います。
    タグを説明しておきます。

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

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

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



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

    この画像のWEB上(インターネット上)のURL(アドレス)は

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

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

    <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/1.jpg" >

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


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

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

    <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/1.jpg" WIDTH="200" HEIGHT="120">


    では、ALT="画像の説明文" に,画像の説明文を入れて見ましょう。
    ALT="この車は私のHNである、GT-ONEです"と入れてみましょうか。↓そうするとこうなります。

    <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/1.jpg" WIDTH="200" HEIGHT="120" ALT="この車は私のHNである、GT-ONEです">

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

    この車は私のHNである、GT-ONEです

    どうですか!画像の説明が出ましたか?

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

    ホーム トップページに戻ります

    このように、マウスで画像をポイントすると、画像の説明文が表示されます。


    次に↓下のようなボタンバナーに余白を持たせて見ましょう。
    これじゃあ少しくっつきすぎですね。


    これに、HSPACE="横余白" VSPACE="縦余白"の属性のタグを追加しますと、
    画像の上下左右に余白が出来ます。このように書いて見ます。

<IMG SRC="~画像ファイルのURL~" HSPACE="横余白" VSPACE="縦余白">
    HSPACE="横余白"をHSPACE="50" VSPACE="縦余白"をVSPACE="50"として見ましょう。


    前後左右、50ピクルスの間隔が開きました。
    どのようにタグを書いたか、載せて見ましょう。

    <IMG SRC="http://www.geocities.co.jp/SweetHome-Ivory/7682/link_w.gif" HSPACE="50" VSPACE="50"> <img src="http://www.geocities.co.jp/SweetHome-Ivory/7682/aicon/gallery_w.gif" HSPACE="50" VSPACE="50"><BR><IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/14.gif" HSPACE="50" VSPACE="50"> <IMG SRC="http://www.geocities.co.jp/SweetHome-Ivory/7682/home_w.gif" HSPACE="50" VSPACE="50">

    画像の張り方は判ったでしょうか。次回は、バナー、ボタン、など画像にリンクを貼る事をやってみましょう。




    【飾りつけ教室 MENU】にもどる。








Copyright (c) 1997-2020 Rakuten, Inc. All Rights Reserved.