topページソース土台

画像表示とバックカラー

見ていて「面白い」「楽しい」HPを作る上で写真を載せたり,土台の色を変えたりという方法がある.
シンプルofザ・ベストというように白の土台に黒の文字,画像なしなどを好まれる場合もあるのでやり
すぎには注意が必要.というわけで,このページではHPのコーディネート方の1つである画像表示や土台
の色付けのコピー用ソースを載せておく.
まずは画像表示から
<img src="picture.gif">
である.picture.gifは,表示したい画像のファイルである.この部分をかえれば,好きな画像を載せる
ことが出来る.例えば,生活メモ「ネクタイの結び方」にある,画像ファイル「nekutai3.GIF」を表示し
たい場合は"picutre.gif"を"nekutai3.GIF"に変えれば
と表示される.しかし,ファイル名を書くときには2つ注意しなければならないことがある.
@当然ではあるが,大文字,小文字は区別すること.もちろんgifなどの拡張子も例外ではない.
Aフォルダを作らずに同じフォルダ内に画像ファイルがあれば気にすることはないが,もし同じフォルダに
画像ファイルがない場合は,その画像の正確な場所をいれてやらないといけない.その画像にURLがあれば
picture.gifをそのURLに変える.もし別のフォルダに画像ファイルがある場合は以下の例のようになる.
例@
大元となるフォルダを「HP」として画像を載せたいページが「HP」中にあるファイルとして,
載せたい画像ファイル「a1.gif」が「HP」中にあるフォルダ「img」の中にあるとすると
<img src="./img/a1.gif">
となる../は同じフォルダ上に目的のものがあることを意味する.解釈すると
「画像を載せたいページと同じフォルダ内にimgフォルダがあり,そのimgフォルダの中にa1.gifファイルがある」
となる.
例A 大元となるフォルダを「HP」とする.
画像を載せたいページが「HP」中の「abc」フォルダの中にある「want」フォルダの中にあるとする.
載せたい画像ファイル「b2.GIF」は「HP」中にある「dada」フォルダの中にあるとすると
<img src="../../dada/b2.GIF">
となる.../は画像を載せたいページがあるフォルダが入っているフォルダ,つまり1つ上のフォルダを意味する.
../../であれば2つ上のフォルダ.../../../であれば3つ上のフォルダにあるという意味になる.
解釈すると
「画像を載せたいページがある「want」フォルダの1つ上にある「abc」フォルダの1つ上にある「HP」フォルダ中
にある「dada」フォルダ中に「b2.GIF」ファイルがある」
ということになる.
次にバックカラーの設定方法を載せる.
<body bgcolor="#ffffff">
見てすぐ分かると思うが,<body>内に書く.バックカラーのほかにも書けるタグはあるが,それはまたの機会
に載せるとする.
#ffffffは白を表し,#000000は黒を表す.ffffffの左の2つは赤の割合を,真ん中の2つは緑の割合を右2つは青の割合
を表している.バックカラーは気をつけて設定しないと文字が見えにくくなるので注意が必要.参考までにいくつか例を
載せておく.
#ff0000 #00ff00 #0000ff #ffff00 #ff00ff #00ffff #aaaaaa
#の後に書く数字は16進数であるため0〜9,a〜fがはいる.
+α
バックを色ではなく写真などの画像にしたい場合は
<body background="haikei.gif">
とバックカラーを設定したときと同じように書く.ただしバックを画像にすると文字が見づらく
なる場合が多いため注意しなければならない.