JS:JavaScriptでホームページの見た目を変える

JavaSciptのロゴ画像JavaScript
スポンサーリンク

JavaScriptを使うとホームページの見た目を変化させることが出来ます。ホームページの見た目は、CSSが担っています。
ですからホームページの見た目を変えるという事は、要するにJavaScriptでCSSの値を変化させるということになります。

スポンサーリンク

見た目を変える簡単なサンプル

簡単なサンプルを例に説明します。
以下のサンプルでは、ボタンを押すとホームページの背景色が空色に変化します。

サンプルを見る

上記サンプルのソースコード
cssChange1.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>ホームページの見た目を変える1</title>
	<script>
		function changeColor(){
			document.getElementById("bd").style.backgroundColor = "skyblue";
		}
	</script>
</head>

<body id="bd">
	<h1>ホームページの見た目を変える1</h1>
	<p>
		<input type="button" value="見た目を変える" onclick="changeColor()">
	</p>
</body>

</html>

解説
ボタンを押した時に背景色を変更する、という処理のため、ボタンのクリックイベントにJavaScriptで作成した関数changeColorを設定しています。

<input type="button" value="見た目を変える" onclick="changeColor()">

関数changeColorは、headタグ内に定義されています。

function changeColor(){
	document.getElementById("bd").style.backgroundColor = "skyblue";
}

実際にCSSの値を変える部分は、DOMのstyle属性に続けて指定しています。

document.getElementById(“bd”).style.backgroundColor = “skyblue”;

この記述は、一定の法則があります。CSSを憶えている方ならすぐに慣れるはずです。
次に詳しく説明します。

憶えておくと便利!CSSとJavaScriptコードの関係

ホームページの背景色は、基本的にbodyタグのCSSで通常次のように設定すると思います。

body{
	background-color: skyblue;
}

JavaScriptでこの設定を行う場合、DOMのstyle属性で次のように指定します。

document.getElementById("ID名").style.backgoundColor = "skyblue";

styleの後の記述に注目して下さい。

CSSでは、backgound-colorとする部分が、JavaScriptでは、

backgroundColor

となっていることが分かります。

これには一定の法則があります。
CSSでは、-(ハイフン)で単語同士を繋げます。
JavaScriptに直した場合、ハイフンは消えて次にくる単語の先頭が大文字に変化するということです。
値を代入する際、CSSだと:(コロン)の後に値を指定しますが、JavaScriptでは、=(イコール)を使って変数のように代入する記述となります。
また、代入は、“”(ダブルクォーテーション)で文字列としてくくります。

主な例で示します。

CSSの記述JavaScriptのstyle属性での記述使用例
colorcolordocument.getElementById(“hoge”).color = “red”;
font-sizefontSizedocument.getElementById(“hoge”).fontSize = “24px”;
margin-topmarginTopdocument.getElementById(“hoge”).marginTop = “1em”;
background-colorbackgroundColordocument.getElementById(“hoge”).backgroundColor = “#ffcc00”;
imageimagedocument.getElementById(“hoge”).image = “url(‘hoge.jpg’)”;

実際にいくつかのCSSを変更した例を次に示します。

サンプルを見る

ソースコード
cssChange2.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>ホームページの見た目を変える2</title>
	<script>
		function changeCss(){
			// 余白
			document.getElementById("message").style.padding = "24px";
			// フォントサイズ
			document.getElementById("message").style.fontSize = "48px";
			// 背景色
			document.getElementById("message").style.backgroundColor = "#dddddd";
			// 文字色
			document.getElementById("message").style.color = "deeppink";
			// 枠の丸み具合
			document.getElementById("message").style.borderRadius = "20px";
		}
	</script>
</head>

<body id="bd">
	<h1>ホームページの見た目を変える2</h1>
	<p id="message">大根おろしのせたら和風かよ!</p>
	<p>
		<input type="button" value="変更する" onclick="changeCss()">
	</p>
</body>

</html>

テキストボックスに入力した色名を背景色に設定する

もう少し応用してみます。
次の例ではテキストボックスに色名(red, #ffcc00…)を入力させてボタンを押すと入力した色名に背景色を変更しています。

サンプルを見る

ソースコード
cssChange3.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>ホームページの見た目を変える</title>
	<script>
		function changeColor(){
			// テキストボックスの文字列を取得
			var color = document.getElementById("color").value;
			// 背景色を変更
			document.getElementById("bd").style.backgroundColor = color;
		}
	</script>
</head>

<body id="bd">
	<h1>ホームページの見た目を変える</h1>
	<p>
		<input type="text" id="color" size="20" placeholder="例)red, #ffcc00...">
		<input type="button" value="変更" onclick="changeColor()">
	</p>
</body>

</html>

以上、JavaScriptでホームページの見た目を変えるでした。

コメント