ホームページに画像を入れる


　 張り付ける画像について、、、

ホームページ等に張り付ける画像の形式は、一般的には次のものがあります。

　　　　@　ＧＩＦ形式　　　　拡張子が「gif」である。
　　　　A　ＪＰＥＧ形式　　　拡張子が「jpg」または「jpeg」である。

なかでもＧＩＦ形式の画像を使うのが多いみたいですね。（写真及び画像では JPEG形式の画像を張り付ける事の方が多い。）とりあえず、 ＧＩＦ形式の画像を作成または変換するソフトか、著作権フリーのＧＩＦ形式画像を手に入れてみましょうね。

　おすすめ [変換ソフト]
　　・GIX Pro（For Windows）

　[著作権フリーのＧＩＦ形式画像]が手に入る代表的なサイト
　　・ＦｒｅｅＰａｒｔｓ
　　・各種素材

　おすすめ [背景画像作成ソフト]
　　・壁紙Maker Pro（For Windows）

　

　 画像の表示について

画像を表示するには、次のタグを使用する。なお、IMGはImage，SRCはSource（源）の略である。

<IMG SRC="画像のファイル名">

このとき、ファイル名には、必ず、GIF,JPGなどの拡張子を書きます。

　ファイル名をつけるときの注意

自分のパソコンでホームページのテストをしている場合には、ファイル名に，たとえば、「image.gif」，「IMAGE.GIF」， 「Image.gif」という名称を使ってもおなじファイルとなりますね。
しかし、実際にインターネットに乗せる場合には、大文字と小文字を厳重に区別するサーバが多いので、上記の 考えでいると異なるファイルとされてしまうので、ファイル名を書くときには大文字と小文字には注意することが大事である。

ちなみに、私はファイル名にはできるだけ小文字を使用することに心がけています。

IMGタグに、幅をあらわす　WIDTH属性と高さを表す　HEIGHT属性を追加して画像の大きさを指定することができる。 次にその例を示す。

<IMG SRC="画像のファイル名" HEIGHT="200" WIDTH="150">

数字の単位はピクセル（１ピクセル=0.34ミリ）である。なお、ピクセルの代りに画面の縦または横の長さを100として 「%」で指定することもできる。次にその例を示す。

<IMG SRC="画像のファイル名" HEIGHT="20%" WIDTH="50%">

ピクセルで指定した場合には、どのデｲスプレイでもほぼおなじ大きさになるが「％」で指定した場合には、 デｲスプレイの種類によっては大きさが異なることがあるので注意してくださいね。

　画像の張り付けかた

画像を張り付けたい場所に

　<IMG SRC="sample.gif">

って書くだけでＯＫですね。

ここで注意しないといけないのは、画像ファイル（この例では sample.gif ）がどこにあるかですね。ＨＴＭＬファイルと同じディレクトリに置いてある場合は、これでいいのですが、ＨＴＭＬファイルを置いてるディレクトリの下のディレクトリに置いてる場合は 

　親ディレクトリ
　　　│
　　　├─「image」ディレクトリ
　　　│　　　│
　　　│　　　├─sample.gif
　　　│　　　│
　　　│　　　└─aaaa.gif
　　　│
　　　│
　　　├─ＨＴＭＬファイル（*****.html）
　　　│
　　　└─abcd.html
　　（↑こんな場合）

　<IMG SRC="image/sample.gif"> みたいに書かないと読み込まれませんよ。

　

あまり無いと思いますが、もう少し複雑な場合も書いておきます。

　親ディレクトリ
　　　│
　　　├─「image」ディレクトリ
　　　│　　　│
　　　│　　　├─sample.gif
　　　│　　　│
　　　│　　　└─aaaa.gif
　　　│
　　　├─「myhp」ディレクトリ　　　　　　　
　　　│　　　│　　
　　　│　　　├──hp_1.html
　　　│　　　│
　　　│　　　└──hp_2.html　　
　　　│
　　　├─abcd.html
　　　│
　　　└─efgh.html
　↑このような状態で hp_2.html に sample.gif という画像を張り付ける場合は

　<IMG SRC="../image/sample.gif">

　っていうふうに書きます。そうしたら↓

　　↑のように、ちゃんと　このページでも表示されているでしょ。

簡単に説明すると、画像ファイルが上の階層にあるときには「../」を画像ファイル名の前に付けてください。このページの場合は、ＨＴＭＬファイルと画像ファイルが同層にあるので、更に「/」を使って場所を指定しています。

つまり「../」で１階層上の親ディレクトリを指定して「image/」でその下の階層の imageディレクトリを指定して、最後の「sample.gif」で画像ファイルそのものを指定しているんです。

　

　レイアウトのためのタグ

これらのタグ参考にしながら、いろいろとレイアウトしてみてくださいね。

　

　 <IMG SRC="ファイル名" ALT="テキスト">
　　画像が表示されないブラウザのためにテキスト（文字）を表示させる

　　記入例：<IMG SRC="sample.gif" ALT="さんぷる画像">

　

　 <IMG SRC="ファイル名" WIDTH="数字" HEIGHT="数字">
　　表示される画像サイズを指定する（数字：ピクセル数）

　注意：画像サイズを指定してない場合、ブラウザは画像ファイルを読み終わるまでは、
　　　　そこから先の文章を表示しないのです。見てくれてる人にできるだけストレス
　　　　を感じさせないためにも、画像のサイズ指定をしたほうがいいと思いますね。

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" WIDTH="482" HEIGHT="92">
　　　　　　　　　　↓
さんぷる画像

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" WIDTH="241" HEIGHT="46">
　　　　　　　　　　↓
さんぷる画像

　

　 <IMG SRC="ファイル名" WIDTH="ページ幅対比" HEIGHT="ページ幅対比">
　　画像サイズをページ画面サイズに比例した大きさで表示する
　　（ページ幅対比は、50% のように書く。100% 以上は画面からはみ出す。）

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" WIDTH="50%" HEIGHT="20%">
　　　　　　　　　　↓
さんぷる画像

　

　 <IMG SRC="ファイル名" ALIGN="TOP">
　　画像の横の文章を、画像の上の辺に揃える

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" ALIGN="TOP" WIDTH="280" HEIGHT="60">サンプル画像！
　　　　　　　　　　↓
さんぷる画像サンプル画像！

　

　 <IMG SRC="ファイル名" ALIGN="CENTER">
　　画像の横の文章を、画像の高さの中央に表示

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" ALIGN="CENTER" WIDTH="280" HEIGHT="60">サンプル画像！
　　　　　　　　　　↓
さんぷる画像サンプル画像！

　

　 <IMG SRC="ファイル名" ALIGN="BOTTOM">
　　画像の横の文章を、画像の下の辺に揃える（指定なしと同じ）

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" ALIGN="BOTTOM" WIDTH="280" HEIGHT="60">サンプル画像！
　　　　　　　　　　↓
さんぷる画像サンプル画像！

　

　 <IMG SRC="ファイル名" ALIGN="RIGHT">
　　二行以上の文章等の右側に、画像を割り込ませる

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" ALIGN="RIGHT" WIDTH="280" HEIGHT="60">
「エスシーシーのホームページ」では「リンク集」を中心にして
「ホームページ作成」などなど楽しいホームページ作りに励んでいます。
（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。）
みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。。

　　　　　　　　　　↓

さんぷる画像エスシーシーのホームページ」では「リンク集」を中心にして「ホームページ作成」などなど楽しいホームページ作りに励んでいます。（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。）みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。。

　

　 <IMG SRC="ファイル名" ALIGN="LEFT">
　　二行以上の文章等の左側に、画像を割り込ませる

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" ALIGN="LEFT" WIDTH="280" HEIGHT="60">
「エスシーシーのホームページ」では「リンク集」を中心にして
「ホームページ作成」などなど楽しいホームページ作りに励んでいます。
（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。）
みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。。

　　　　　　　　　　↓

さんぷる画像「エスシーシーのホームページ」では「リンク集」を中心にして「ホームページ作成」などなど楽しいホームページ作りに励んでいます。（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。）みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。。

　

　 <IMG SRC="ファイル名" VSPACE="数字" HSPACE="数字">
　　文章と画像の間隔を指定（VSPACE：上下の余白　HSPACE：左右の余白　数字：ピクセル数）

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" ALIGN="LEFT" VSPACE="40" HSPACE="40" WIDTH="280" HEIGHT="60">
「エスシーシーのホームページ」では「リンク集」を中心にして
「ホームページ作成」などなど楽しいホームページ作りに励んでいます。
（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。）
みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。

　　　　　　　　　　↓

さんぷる画像

「エスシーシーのホームページ」では「リンク集」を中心にして「ホームページ作成」などなど楽しいホームページ作りに励んでいます。（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。）みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。

　　　

　　

　　

<BR CLEAR="ALL">
文章の回り込み解除（ <BR CLEAR="ALL"> より後の文章は画像の下に表示される）

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" ALIGN="LEFT" WIDTH="280" HEIGHT="60">
「エスシーシーのホームページ」では「リンク集」を中心にして
「ホームページ作成」などなど楽しいホームページ作りに励んでいます。
<BR CLEAR="ALL">
（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。）
みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。

　　　　　　　　　　↓

さんぷる画像「エスシーシーのホームページ」では「リンク集」を中心にして 「ホームページ作成」などなど楽しいホームページ作りに励んでいます。
（現在、ＨＰの中でも [リンク集] が一番人気があるみたいですね。） みなさんのご協力を合わせて、楽しいＨＰにしたいと考えております。 　

　

　 <IMG SRC="ファイル名" BORDER="数字">
　　画像に黒色の枠をつける（数字が 0 の場合、枠は無し）
　　（Internet Explorer では、画像をリンクボタンに設定した時のみ有効）

<IMG SRC="../image/sample.gif" ALT="さんぷる画像" WIDTH="280" HEIGHT="60" BORDER="3">
　　　　　　　　　　↓
さんぷる画像

　

<#haikei> 　背景（壁紙）に画像を使う

背景(壁紙)に画像を使う時は、最初に書く<BODY>タグに「BACKGROUND="ファイル名」を付け加えて

　<BODY BACKGROUND="ファイル名">

みたいに書けば背景(壁紙)に画像を使うことができます。

この場合も、通常の画像ファイルを指定する時と同じように、ＨＴＭＬファイルを置いてるディレクトリの下のディレクトリに置いてる場合（下層ファイル）とかは、

　<BODY BACKGROUND="image/sample.gif">

みたいに書けば背景に画像がでます。
ちなみに、このページの <BODY> タグは

<BODY BGCOLOR="#FFF4EL" TEXT="#000000" LINK="#0047EL" VLINK ="#000090" ALINK="#FF8000">

BACKGROUNDは使用していません、エスシーシーのｈｏｍｅでは使用しています。

　

＜次に進む＞

ホームページ作成の部屋へ戻る ／ 趣味の部屋へ