6.背景とライン


背景を設定します。

背景というのはページの地の色です。
今編集しているページは地の色、背景が白ですよね?
それを別の色に変えたり、画像を持ってくることが出来ます。



背景色を変える <body bgcolor="#000000"> bodyタグに↑のように挿入します。ここでは黒に設定しました。
色々やってみてください。

俗に、背景が黒い方がデザインを構築しやすいといわれています。
白という基本色の方が視覚的には見やすいのですが、デザイン作りは難しいそうです。

ちなみに、黒背景に赤文字を使うと浮き出た感じになります。



背景に画像を使う。 <body background="test.jpg"> bodyタグに↑のように挿入します。
実行すると分かりますが、画面いっぱいに設定した画像が敷き詰められます。



背景に画像を使い、固定する。

どういう事かというと、普通は、画像を背景に使うと自動的に敷き詰められます。
しかし、そのようにさせずに、一枚の画像として一箇所に固定することが出来ます。
やってみましょう。
<head> <STYLE TYPE="text/css"> <!-- BODY { background:url(test.jpg) #FFFFFF no-repeat fixed 50% 50% } --> </STYLE> </head> ↑のようにヘッダーにスタイルタグを挿入し設定します。
上の設定ですと、「test.jpg」を画面に対して縦50%横50%の位置に固定します。
つまり中心に固定することになります。
これも数字を変えて試してみてください。




ラインを引いてみましょう。

そうですね、この講座ではラインがいっぱい引いてあります。
色やサイズを変えることが出来るので、使いようによってはかなり実用的です。
<hr> これが、ラインタグです。下のようになります。
サイズを変えてみます。 <hr size=5> <hr size=10>


長さを変えます。 <hr width=50%> <hr width=100>

%でもピクセルでも設定できます。自然とセンタリングされます。


<hr align=left width=50%> <hr align=center width=50%> <hr align=right width=50%>


こうすることで寄せることが出来ます。


影の無いラインを引きます。 <hr noshade> <hr noshade size=5> <hr noshade size=13>




ラインに色をつけることが出来ます。 <hr color="#8855ee"> <hr color="#ee4499"> <hr color="#44dd66">


色をつけると、影の無いラインに自然となります。



次は7へゴ→

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