- 素材をWEBページで使う -
[1] -背景画像編-
背景画像1つ ← 1個だとこんなに小さな画像で心配になっちゃうけど大丈夫!
<BODY>タグで、BACKGROUNDに設定すると、こんな感じになります。
<BODY BGCOLOR="#FFD2D2" BACKGROUND="ssc_16.gif">
この方法はテーブル<TABLE>やセル<TD>の背景にも応用できます♪
※(注記) 背景色は特例を除き、背景画像に近い色を設定しましょう。
背景画像が表示されない時に内容が見えない不具合を防止できます。
[2] -アイコン編-
ひよこ
<IMG src="spis_06.gif" width="25" height="25" alt="ひよこ">
まんま!↑このように<IMG>タグに使用する画像の情報を書き込みます。
画像の縦横のサイズ、代替テキストも忘れずに書いてあげましょう。
サイズを書き込まないと、画像が表示されない場合もありますし
間違ったサイズを指定すると↓こんなになってとてもカワイソ〜T∇Tゞ
変なひよこ1 変なひよこ2
[3] -リンクボタン編‐
<A>と</A>で、リンクボタンに使う画像(バナーも同じ)を挟みます。
アイコンを表示させる要領で<IMG>に指定し、
それを<A>と</A>でサンドウィッチにすることで完成。
<A href="./m_sup.html"><IMG
src="arr_left.gif" width="23" height="13" alt="矢印" border="0">
</A>
↑のように書くと、↓な感じでリンクボタンが表示されます。
矢印
画像の周囲に枠が出るので、border="0"を入れて枠を消しましょう。
矢印 ← border="0"を書かないと...
画像だけでリンクを設定すると、万一画像が表示されない時には
リンク先に飛べないアクシデントが起きてしまうことがあります。
矢印 [戻る]
上のように、<A>-画像-テキスト(この場合[戻る]の文字)-</A>
とする事で、来て下さる方に親切なサイトになると思います。
※(注記)↑ではマウスが乗った時、背景色が変わる様にCSSで指定しています。