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%> のように、ピクセルで設定した部分をパーセント表示に変えると、 「表示している画面に対して何パーセントで表示する」というサイズ指定になります。

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


<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　などを組み合わせたいところですが、それは出来ません。




次は４へゴ→






SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送