3.背景や画像の使い方



HTMLは画像を使うことが出来ます。大きさを指定して表示したり、背景に使うことも可能です。
ただし重い画像を貼ったり、画像を多様すると、データの量が大きくなってしまいなかなか表示されない、などといった問題が起こるので気を付けましょう
その点をふまえて背景やロゴにはなるべくタグを使ってきれいにしていきましょう。あとで紹介するCSSを使うときれいなロゴを画像を使わずに出来ます
※この背景のグラデーションは画像を使っています。

 3-1,背景を飾る

背景は<body>タグにbgcolor="#oooooo"を追加してあげれば出来ます。
色を使うだけでずいぶんと雰囲気がかわり見た目が良くなります。※見た目を悪くしないように
これでも物足りないという方は画像を使ってください。
画像を背景にするには<body>タグにbackgrond="画像のファイル名(URL)"でオーケーです
この画面の画像は<body background="colorful.gif">と指定しています※素材にも著作権があるため気をつけましょう

 3-2,画像を挿入

画像を表示させるには、<img src="画像のファイル名(URL)">で終わりなのですが、
大きさを決めて表示させることも出来ます。
その場合は、<img src="oooo" width="横幅" height="高さ" >と、いれます。数字にはピクセルまたは%(ピクセルの時は数字だけ書く、%は50%の用に書く)。
%は画面の大きさの何%かという意味です。
何らかの原因によって画像が表示されないことがあります、そのときに画像の代わりにテキストを表示させることもできます。
<img src="oooo" alt="画像の代わりの文字">このALTを書くことで、画像が表示されなかった時に見た人が本当なら何が表示されるのかがわかり親切なページとなります。
画像を目立たせるようにするには画像の周りに枠を作ってあげると効果的だと思います。
<img src="oooo" border="枠の太さ">枠は太さを変えることは出来ますが色の変更は出来ません。

 3-3,画像の隣に文字をおく

指定なしに画像を貼り、文字を続けて書くと画像は前後のテキストと一緒に同じ行に置かれます。
こんな感じ→あいうえお
この文字の位置を中段に表示させたいという方は<img src="oooo" align="middle">上段はtop、下段(デフォルト)はbottom
一行だけではなくそのまま文章を書いていきたい方は、 <img src="oooo" align="left">rightと、記述すると画像が右端にいきます。
改行してもそのまま画像のよこに書かれていきます。
途中で回り込みを解除したい方は、解除したいところで<br clear="all">と、打ちましょう。
画像についての基礎はこれくらいで終わりです。
後は画像を使ってのリンクなどを作れます。<a href="index.html"><img src="grid_orange1.gif" border="0" width="96" height="15"></a>など。


GET HOMEPAGE 講座へ戻る     4,TABLEタグを使う

Copyright © 2004-2005 BREAKDOWN. All rights reserved.

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