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


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

ホームページ等に張り付ける画像は、普通ＧＩＦ形式の画像を使うねん。（写真とか、画像の種類によっては JPEG形式の画像を張り付ける場合もある。）せやから、ＧＩＦ形式の画像を作成または変換するソフトか、著作権フリーのＧＩＦ形式画像を手に入れなアカンでぇ〜。

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

　[著作権フリーのＧＩＦ形式画像]が手に入る代表的なサイト
　　・しろくま君の背景集
　　・ホームページデザイン用著作権フリー素材集
　　・Kazutami Takatori's home page

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

　

画像の張り付けかた

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

　<IMG SRC="sample.gif">

って書くだけでＯＫやねん。

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

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

　<IMG SRC="image/sample.gif"> みたいに書かなアカンでぇ〜。

　

あんまし無いと思うねんけど、もう少し複雑な場合も書いときます。
（実はこのページが↓このような状態なんです。^^;） 

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

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

　っていうふうに書きます。ほんなら↓

↑のように、ちゃんと　このページで表示されます。(^^)

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

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

　

レイアウトのためのタグ

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

　

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

　　記入例：<IMG SRC="shirokuma.gif" ALT="白い熊">

　

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

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" WIDTH="482" HEIGHT="92">
　　　　　　　　　　↓
しろくま君のホームページ

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" WIDTH="241" HEIGHT="46">
　　　　　　　　　　↓
しろくま君のホームページ

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" WIDTH="50%" HEIGHT="20%">
　　　　　　　　　　↓
しろくま君のホームページ

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" ALIGN="TOP" WIDTH="280" HEIGHT="60">しろくまＨＰをよろしく！
　　　　　　　　　　↓
しろくま君のホームページしろくまＨＰをよろしく！

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" ALIGN="CENTER" WIDTH="280" HEIGHT="60">しろくまＨＰをよろしく！
　　　　　　　　　　↓
しろくま君のホームページしろくまＨＰをよろしく！

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" ALIGN="BOTTOM" WIDTH="280" HEIGHT="60">しろくまＨＰをよろしく！
　　　　　　　　　　↓
しろくま君のホームページしろくまＨＰをよろしく！

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" ALIGN="RIGHT" WIDTH="280" HEIGHT="60">
「しろくま君のホームページ」とは「言葉遊び」（回文など）を中心にした
楽しいホームページです。言葉は文化です、みんなで大いに楽しみましょう！
（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）
言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。
みんなどんどん遊びに来てなぁ。待ってまっせぇ。
（しかし、画像タグの「例」使うために意味の無い長文を書くのは難しいなぁ。
このくらいで結構な長さになったかな？あぁ〜疲れた。。。
×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇×○△※■×
●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇　なんじゃこりゃ？^^;）

　　　　　　　　　　↓

しろくま君のホームページ「しろくま君のホームページ」とは「言葉遊び」（回文など）を中心にした楽しいホームページです。言葉は文化です、みんなで大いに楽しみましょう！（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。みんなどんどん遊びに来てなぁ。待ってまっせぇ。（しかし、画像タグの「例」使うために意味の無い長文を書くのは難しいなぁ。このくらいで結構な長さになったかな？あぁ〜疲れた。。。×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇　なんじゃこりゃ？^^;）

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" ALIGN="LEFT" WIDTH="280" HEIGHT="60">
「しろくま君のホームページ」とは「言葉遊び」（回文など）を中心にした
楽しいホームページです。言葉は文化です、みんなで大いに楽しみましょう！
（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）
言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。
みんなどんどん遊びに来てなぁ。待ってまっせぇ。
（しかし、画像タグの「例」使うために意味の無い長文を書くのは難しいなぁ。
このくらいで結構な長さになったかな？あぁ〜疲れた。。。
×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇×○△※■×
●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇　なんじゃこりゃ？^^;）

　　　　　　　　　　↓

しろくま君のホームページ「しろくま君のホームページ」とは「言葉遊び」（回文など）を中心にした楽しいホームページです。言葉は文化です、みんなで大いに楽しみましょう！（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。みんなどんどん遊びに来てなぁ。待ってまっせぇ。（しかし、画像タグの「例」使うために意味の無い長文を書くのは難しいなぁ。このくらいで結構な長さになったかな？あぁ〜疲れた。。。×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇　なんじゃこりゃ？^^;）

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" ALIGN="LEFT" VSPACE="40" HSPACE="40" WIDTH="280" HEIGHT="60">
「しろくま君のホームページ」とは「言葉遊び」（回文など）を中心にした
楽しいホームページです。言葉は文化です、みんなで大いに楽しみましょう！
（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）
言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。
みんなどんどん遊びに来てなぁ。待ってまっせぇ。
（しかし、画像タグの「例」使うために意味の無い長文を書くのは難しいなぁ。
このくらいで結構な長さになったかな？あぁ〜疲れた。。。
×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇×○△※■×
●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇　なんじゃこりゃ？^^;）

　　　　　　　　　　↓

しろくま君のホームページ「しろくま君のホームページ」とは「言葉遊び」（回文など）を中心にした楽しいホームページです。言葉は文化です、みんなで大いに楽しみましょう！（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。みんなどんどん遊びに来てなぁ。待ってまっせぇ。（しかし、画像タグの「例」使うために意味の無い長文を書くのは難しいなぁ。このくらいで結構な長さになったかな？あぁ〜疲れた。。。×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇×○△※■×●▽◆○▲×○◇×○△＊■×●▽※◆○▲×○◇　なんじゃこりゃ？^^;）

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" ALIGN="LEFT" WIDTH="280" HEIGHT="60">
「言葉遊び」（回文など）を中心にした
楽しいホームページです。
<BR CLEAR>
言葉は文化です、みんなで大いに楽しみましょう！
（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）
言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。
みんなどんどん遊びに来てなぁ。待ってまっせぇ。

　　　　　　　　　　↓

しろくま君のホームページ「言葉遊び」（回文など）を中心にした楽しいホームページです。
言葉は文化です、みんなで大いに楽しみましょう！（現在、言葉遊びの中でも [回文の部屋] が一番人気があるみたいです。）言葉遊び以外にも、掲示板やホームパーティなどのコーナーもありまっせぇ。みんなどんどん遊びに来てなぁ。待ってまっせぇ。

　

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

<IMG SRC="../image/s_title.gif" ALT="しろくま君のホームページ" WIDTH="280" HEIGHT="60" BORDER="3">
　　　　　　　　　　↓
しろくま君のホームページ

　

背景（壁紙）に画像を使う

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

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

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

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

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

みたいに書かなアカンでぇ〜。
ちなみに、このページの <BODY> タグは

<BODY BGCOLOR="#FFFFF0" BACKGROUND="../image/orange.gif" TEXT="#000000" LINK="#803000" VLINK ="#806000" ALINK="#FF8000">

です。

　

＜次に進む＞

☆ ホームページ作成ルームへ戻る ／ ★ しろくま君のホームページへ