STEP6 : 画像ファイルを使う　

　第5回では壁紙の設定を覚えましたね＾＾
今回はページの中に画像をいれてみましょう。
　画像ファイルには下のようにイラストや写真、ワンポイントのアクセサリなど様々なものがあります。

　　　　　
　　　　

　これらをうまく使えば、よりきれいで楽しいページが作れるでしょう＾＾

　この時、使う画像のファイル形式に注意して下さい。
jpg（ジェイペグ）,gif（ギフ、ジフ）,png（ピング）の形式の画像ファイルは問題なく使えるのですが、 bmp（ビットマップ）形式はなるべく扱わないようにしましょう。
　なぜかというと、bmp形式の画像は、 Windowsで保存されたものはMacなどその他のOSでは見ることができません。 同様にMacで保存されたものはWindowsなど他のOSでは見えなくなってしまいます。

　もし使いたいファイルがbmp形式だった場合は、
ペイントなどのソフトで使いたいbmpファイルを開き、 名前を付けて保存で「png」や「gif」などの形式を選んで保存すればOKです＾＾


　6-1　画像を表示させる

　では早速画像をはりつけていきましょう♪

　まずは使いたい画像ファイルをサーバーへアップロードします。
他のファイルと同様に、画像があなたのパソコンの中にあるだけでは、お客さんには画像が見えません。

　この時、画像ファイル等はフォルダを新しく作るなどしてきちんと整理しておきましょう。
　そして、画像を表示させたい場所にimgタグを使って次のように書きます。

<img src="画像ファイルのURL">

　URLとはアドレスといっしょで、インターネットでのファイルの場所を表します。
　例を見てみましょう。

　私の場合、ベースとなるURLが「http://skyline.skr.jp」でした。
　ここに作った「image」というフォルダに、「skyline3.jpg」という画像ファイルをアップロードしたら、 この画像ファイルのURLは・・・もうおわかりですか？
「http://skyline.skr.jp/image/skyline3.jpg」になります。
　なのでこの画像を表示させるには、次のように書くことになります。

書き方 <img src="http://skyline.skr.jp/image/skyline3.jpg">
見え方



　6-2　サイズや枠の設定

　imgタグの中でwidth属性やheight属性を加えると画像の表示されるサイズを指定することができるほか、border属性で画像の周りに枠をつけることなどができます。
　画像の大きさはピクセルまたは元の画像のサイズに対するパーセントで指定できます。
　ピクセルというのはパソコン上でよく使われる長さの単位です。
　それぞれ次のように使いますが、指定したいものだけでよく、順番も関係ありません。

<img src="image/bcg.jpg" width="100" height="100" border="5">
<img src="image/bcg.jpg" width="150%" height="150%" border="5">

　ただし、画像のサイズを変えると、粗くなったりつぶれたりして見にくくなってしまうことが多いので注意してください。

　次回はリンクのはりかたについてです＾＾

　このサイトでもオリジナルのフリー素材を配布しておりますので、 　気に入ったものがありましたら使ってみてください＾＾