初心者のためのホームページ作成動画解説付

画像について

img src="画像名"

何か画像をホームページに表示させたい時は「img」要素を使用します。
img src="画像名"と記述します。

ただ、画像名が日本語の場合は半角英数字にします。
× img src="画像.jpg"
○ img src="gazou.jpg"

ポイントは作成しているホームページからその画像が何処にあるかを示すパスです。
画像を使うホームページのファイルと画像が同じ階層にあれば問題はないのですが、階層が違うとパスを記述しなくてはなりません。
文章ではわかりづらいので動画を見てください(^^;)
<img src="title-1.gif">
と記述すると下記のように画像が出てきます。(この名前の画像ファイルがある場合です)

「alt="代替テキスト"」を記述すると、画像の上にカーソルを持ってきたときに文字が表示されます。
(ブラウザの種類や設定によっては表示されません。)
<img src="title-1.gif" alt="初心者のためのホームページ講座画像">
と記述すると画像が出て、カーソルを置くと代替テキストが表示されます。(この名前の画像ファイルがある場合です) 初心者のためのホームページ講座画像

代替テキストaltは記述した方が良いです。
目の障害がある方に優しいホームページになりますし、SEO対策になるためです。

画像が大きい場合は「width」を設定すると大きさを変更できます。
<img src="title-1.gif" alt="初心者のためのホームページ講座画像" width="200">
初心者のためのホームページ講座画像

画像を使ったリンクをしたい場合はimgタグをaタグで囲みます。
<a href="http://www.hp-w.com"><img src="title-1.gif" alt="初心者のためのホームページ講座画像"></a>
初心者のためのホームページ講座画像
リンクの枠を消したい場合はimgタグのstyle属性で「border:none」を記述します。
<a href="http://www.hp-w.com"><img src="title-1.gif" alt="初心者のためのホームページ講座画像" style="border:none"></a>
初心者のためのホームページ講座画像


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
こんなこともできます。
カーソルをリンク画像に置いたときに他の画像を表示する。

①=普通時の画像
②=カーソルを置いたときに表示する画像
③=カーソルを離したときに表示する画像
<a href="http://www.hp-w.com"><img src="①" style="border:none" onmouseover="this.src='②'" onmouseout="this.src='③'" /></a>
初心者のためのホームページ講座画像
この場合は①と③で同じ画像を使ってます。(^^)
文字の色が変わっただけに見えますが違う画像です。
下は①~③まで全部違う場合です。
初心者のためのホームページ講座画像