3.画像を使ってみる


前回、色々な文字の装飾を学びました。
大きさや色も自由だし、段落も変えられ、スクロールする効果まで付けられるようになりました。
もう立派なHPです。卒業です。
え?
写真や画像を載せてアルバムや個展チックなモノを作りたい?
わかりました、やりましょう!


画像を表示するタグは <img src=""> です。 今まで、フォントタグなどは<font></font>のように 閉じていましたが、<img>は閉じません。



↑の画像をメモ帳と同一フォルダ内に保存してください。

この画像のファイル名は「test.jpg」です。 <img src="test.jpg"> とすることで、画像が表示されます。されましたか?
ここで要注意
ファイル名を「TEST.jpg」「test.jpeg」「test.JPG」の様に、
大文字や小文字、スペル違いをすると画像が表示されません。
実はファイル名をこのように間違えて記述してもPC内では表示されます。
しかし、これがネット上だと表示されないのです。
ネットにアップしてから表示されないことに気づくととても面倒くさいので、 ファイル名には注意しましょう。


<img src="test.jpg" width=ピクセル height=ピクセル> で、高さや幅の変更が出来ます。 <img src="test.jpg" width=200 height=100> とすると、
<img src="test.jpg" width=80% height=10%> のように、ピクセルで設定した部分をパーセント表示に変えると、 「表示している画面に対して何パーセントで表示する」というサイズ指定になります。

この2種類の画像サイズ指定方法は使い分けると大変便利で、大いに役立ちます。



<img src="test.jpg" border=自然数> で、枠をつけることが出来ます。例として30とすると、

この様に枠がつきます。数字を変えて試してみてください。
ちなみに、0にすると「枠を表示しない」という設定になります。



<img src="test.jpg" alt="ここに文を入れます"> 下の画像にカーソルを当ててみてください。説明が出るでしょ?
ここに文を入れます
このタグを使えば相手にどのような画像なのかを知らせることが出来ます。




画像の横に文字を入れることが出来ます。
どういうことかよく分からないと思いますので、じっくり読んでください。
<img src="test.jpg" align="">ここに横に入れたい文を書く<br clear=all> を使います。

align=top に設定しました。
align=bottom に設定しました。
align=middle に設定しました。
align=right に設定しました。
align=left に設定しました。

align=right と align=middle などを組み合わせたいところですが、それは出来ません。




次は4へゴ→







SEO [PR] おまとめローン Windows7 冷え性対策 動画 掲示板 レンタルサーバー ライブチャット SEO