ホームページで背景を設定する
ページ全体の背景色を設定します
body要素にページの背景色を追加します。<body bgcolor="色"> 〜 </body>
色 の部分にはカラーネームかRGB値を入れます。 <body bgcolor="カラーネームかRGB値"> 〜 </body>
何も指定しなければ、"白"になります。(ブラウザのデフォルト値です)
上記のように要素に直接記述する方法もありますが、スタイルシートに記述することを推奨しています。
ページ全体の背景色をスタイルシートで設定
<head>と</head>の間に下記のように記述します。ページの全体の背景色を#ffcc99にする ↓↓
<style type="text/css">
<!--
body {background-color:#ffcc99;}
-->
</style>
ページ全体の背景色を#666666にして、文字色を#fffffにする ↓↓
<!--
body {background-color:#ffcc99;}
-->
</style>
<style type="text/css">
<!--
body {
background-color:#666666;
color:#ffffff;
}
-->
</style>
<!--
body {
background-color:#666666;
color:#ffffff;
}
-->
</style>
カラーチャートはこちらを参照
ページ全体の背景に画像(壁紙)を使う
body要素にページの背景画像のファイル名を追加します。<body style="background-image: url(画像のファイル名);">
上記のように要素に直接記述する方法もありますが、スタイルシートに記述することを推奨しています。ページの背景画像(壁紙)を abc.gif というファイル名の画像にする↓↓
<head>と</head>の間に下記のように記述します。
<style type="text/css">
<!--
body {background-image: url(abc.gif); }
-->
</style>
ページの背景画像に abc.gif というファイル名の画像を使用し、文字色を#fffffにする ↓↓
<!--
body {background-image: url(abc.gif); }
-->
</style>
<style type="text/css">
<!--
body {
background-image: url(abc.gif);
color:#ffffff;
}
-->
</style>
<!--
body {
background-image: url(abc.gif);
color:#ffffff;
}
-->
</style>
大きい画像(壁紙)は、重いページになり、表示速度が極端に遅くなります。重いページは嫌われます。せっかくの訪問者を帰してしまう結果になるかも・・・
背景画像の並べ方はこちらで詳しく説明しています。
●当サイトのソースは、IE6.0+のみ動作確認をしております。 それ以外のブラウザ、特にネットスケープでは正しく作動しない場 合がございます。ご了承下さい。
★skip ページtop