img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

ページのスタイル変更


ページに適用しているスタイルを変更する

  ie6 nn7 op8

素材配布サイトなどで、文字や画像をイメージし易いように使われるJavaScriptです。
色んな記述の仕方が有りますが、当サイトで使っている変更方法です。
下記の方法は、背景だけではなく 文字やその他のプロパティ(セレクタに付ける効果)も変更することが出来ます。
(スタイルシートの書式・プロパティについては、DesignTipsのスタイルシートの項を参照して下さい。)

先ず、htmlの<head>から</head>までの間に、スタイルシートを記述します。
<style type="text/css">
<!--
.任意のクラス名 {
変更したいプロパティ:値;
変更したいプロパティ:値;
}
-->
</style>

幾つも有る場合は、変更したいプロパティ値を増やして下さい。

次に、変更する要素に id を振っておきます。
<div id="任意のid名">変更するボックス</div>
上記ではdiv要素に任意のidを付けています。
このid名の付いたボックス内を変更する場合、下記のようにJavaScriptを記述して下さい。

ボタンの場合:
<input type="button" value="ボタンに表示する文字" onclick="document.getElementById('任意のid名').className='任意のクラス名'; return false;">


画像の場合: <a href="#" onclick="document.getElementById('任意のid名').className='任意のクラス名'; return false;"><img src="画像のurl" width="横幅" height="高さ" border="0"></a>

例: <head>から</head>内のスタイルシート
<style type="text/css">
<!--
.style-a{
background:url(画像のurl) fixed repeat top center;
color:#9900cc;
font-size:14px;
}
.style-b{
background-color:#ffffff;
background-image:url(画像のurl);
background-repeat:repeat-y;
background-position:90%;
color:#009966;
font-size: 12px;
}
-->
</style>

例: <div id="sample-box2">
ボタンの場合
<input type="button" value="ボタンに表示する文字" onclick="document.getElementById('sample-box2').className='style-a'; return false;">
ボタン 

画像の場合
<a href="#" onclick="document.getElementById('sample-box2').className='style-b'; return false;"><img src="画像のurl" width="横幅" height="高さ" border="0"></a>
画像 画像 divなどboxを、ID・クラス名でスタイル変更。(style-b)

</div>

Background-image *DivReset*



bodyのスタイルを変更する

  ie6 nn7 op8

文書の本体であるbody要素のスタイルを変更するJavaScriptです。
divの場合と同様に、htmlの<head>から</head>までの間にスタイルを記述した後、以下をhtmlの必要な場所にに入れて下さい。

例: <head>から</head>内のスタイルシート
<style type="text/css">
<!--
.style-c{
background:url(画像のurl) fixed repeat top center;
color:#cc0000;
font-size:12px;
}
.style-d{
background:url(画像のurl) fixed repeat top center;
color:#0066cc;
font-size:14px;
}
-->
</style>


ボタンの場合:
<input type="button" value="ボタンに表示する文字" onclick="document.getElementsByTagName('body')[0].className='任意のクラス名'; return false;">

ボタン 

画像の場合:
<a href="#" onclick="document.getElementsByTagName('body')[0].className='任意のクラス名'; return false;"><img src="画像のurl" width="横幅" height="高さ" border="0"></a>
画像 画像 bodyをクラス名でスタイル変更。(style-d)

Background-image *BodyReset*