TOP ＞　Back ＞ Place ＞　Next

ページに画像

画像を貼り込む、IMG要素の基本的な使い方と、ホームページで扱う画像ファイルの種類と特徴について解説します。まず、基本的な部分をしっかり覚えましょう。画像の説明は、少しページが重くなるので、数ページに分散して説明します。

画像や曲（MIDI）を素材屋さんでもらう

PCに保存する

画像を使用するには、素材屋さんから画像（素材）を自分のパソコンにダウンロード（保存）しなければいけないですね！その保存方法ですが、一般的な方法を説明します。

  1. 画像はリンクではなくダウンロードして使う。Winの場合は、名前を付けて画像を保存(S)、Macは、「画像を別名で保存...」
  2. 素材屋さんの使用上の注意書き・使用条件は、必ず読みましょう。

Windowsの場合は、画像にカーソルを合わせて、マウスの右ボタンを押すとメニューが現れますので、「名前を付けて画像保存...」を選んでください。

Macintoshの場合は、画像にカーソルを合わせて、マウスボタンをしばらく押すとメニューが現れますので、「画像をディスクにダウンロード」又は、「画像を別名で保存...」）を選んでください。

BGM(MIDI)を使用するには、素材屋さんから曲（素材）を自分のパソコンにダウンロード（保存）しなければいけないですね！その保存方法ですが、一般的な方法を説明します。

ネットスケープの場合
１　好みの曲を見つけて
２　マウスボタンを押し続けて、 「名前を付けて保存」を選ぶ。
３　保存先を指定。
インターネットエクスプローラーの場合
１　好みの曲を見つけて
２　右クリック(Windows) 「対象をファイルに保存」を選ぶ。
３　保存先を指定。

注意：容量の少ないノートパソコンでの出来事・・・
素材屋さんから素材をダウンロードした時に、一つの画像や音楽で良いのに、一括のダウンロード素材とか、勝手に（警告なし）フォルダを作り素材全部をダウンロードしてしまうところがあります。容量の少ないパソコンに、ダウンロードした矢先・・・ドライブがパンクしたり、やたらフォルダが増え（同じファイル名がある時も・・・）、ショートカットにされリソースが食われフリーズする場合もあります。（Thank you for nothing.ですね！注意しましょう）

◆　IMG要素とSRC属性

HTMLファイルと同じフォルダに置いた「wine_ks.gif」をホームページに貼り込むためには、
<IMG SRC="wine_ks.gif">と、記述します。閉じタグは存在しません。空要素になります。
XHTMLでは、<img src="ファイル名" alt="代替テキスト" />になります。

ソース：<IMG SRC="wine_ks.gif">
表示結果：
ソムリエくまさん
この画像はふぁんし〜・ぱ〜つ・しょっぷさんより、戴いた画像です。

画像を貼り込むには、<IMG>タグにSRC属性をつけ、属性値に画像ファイルのURLを指定します。つまり、同じフォルダ内の場合はファイル名のみの相対URI（パス）だけでOKです。
また、同階層に別の名前のフォルダを作りその中にに画像を保存する場合は
例えば「gazou/wine_ks.gif」のようになります。

もちろん、絶対URI（パス）での指定も可能です。
所有権Moment.さんのタイトルロゴ（バナー）を、下に貼り込んでみましょう。
この、方法は「あなた自身のミラーサイトの素材」を使用するときには効果的ですが、他の方のサイトからの絶対URI（パス）の使用は、相手のサイトの引越しやファイル移動又は閉鎖で表示されなくなり一々URIの書き換えをしなければなりません。

ソース：
      <IMG SRC="http://www60.tok2.com/home/cake/moment_brn.gif">

絶対URL（パス）：上のように記述すると、このように貼り込むことができます。ただし、この方法を、使用するときは、必ず！著作物・所有物である方に使用許諾をもらいましょう。

表示結果：（絶対URLでのバナー使用許可をいただいた、Moment.の管理人さんのご好意、感謝します。）
Moment.バナー（提供：Moment.さん）

※注意：著作権・所有権について、（くどい、ようですが・・・）
フリーの素材以外の著作物・所有物である画像ファイル・その他を、無許可でＰＣに保存し自分のホームページに貼り込んだり、絶対URI（パス）での使用は著作権・所有権の侵害となる可能性があるので注意しましょう。
素材屋さんでも、無許可無料提供（勝手に持っていける）の画像・その他もありますが、著作権・所有権は放棄していないのが現実です。（それぞれの素材屋さんで注意事項を読みましょう！）

◆　画像にリンク！

画像にリンクを張るのは、前章の「A HREF=」を使い、画像のタグIMGを囲むだけです。
例えば、<A HREF=" ジャンプ先のＵＲＬ "><IMG SRC="画像ファイル名" ALT="代替テキスト" style="border:none"></A>　に記述します。
表示例：スーさんのバナー　（クリックすると、トップのページにジャンプします。）

　【←BACK ┃NEXT→】
Copyright (c) Producer by System KS. 2001 All rights reserved.