背景色をランダムに変更してみるページを作成して見ました。ポイントはJavaScriptです。まずはHTMLですが特に変わったことはしていません。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>背景色をクリックでランダム変更する</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body onclick="changeBackColor()">
<h3>文字付近をクリックでカラー変更</h3>
<script src="links/action.js"></script>
<h1 id="hex-code"></h1>
</body>
</html>
<!-- index.html -->
問題はJavaScriptですね。
/* action.js */
// ランダムな16進数を生成する
function getHexCode() {
//ユーザー設定の関数（getHexCode）を宣言
var letters = "0123456789ABCDEF";
//ユーザー設定の変数（letters）に16進数値を定義
var hexCode = "#";
//ユーザー設定の変数（hexCode）に#を定義
for (var i = 0; i < 6; i++) {
/*ループ変数iを0から開始して6未満までループを実行。
6回のループが実行されるため、16進数の色コードは6桁となる。*/
hexCode += letters[Math.floor(Math.random() * 16)];
/*+＝は加入代入演算子
x += y は x = x + y
letters配列からランダムに1文字を取得し、
hexCode文字列に追加。Math.random()は、
0以上1未満の乱数を生成。Math.floor()は、
小数点以下を切り捨てて整数値を返す。
よって、Math.floor(Math.random() * 16)は、
0から15までのランダムな整数を返す。
これで、letters配列からランダムに1文字を取得することができる。*/
}
return hexCode;
}
//生成されたランダムな16進数の色コードを返す。
// 背景色をランダムに変更し、16進数を表示する
function changeBackColor() {
//ユーザー設定の関数（changeBackColor）を宣言
var hexCode = getHexCode();
//ユーザー設定の変数（hexCode）にgetHexCodeを定義
document.body.style.backgroundColor = hexCode;
//HTML文書のbody要素の背景色をhexCode変数に格納する値で表示
document.getElementById("hex-code").innerHTML = "16進数: " + hexCode;
}
/*任意のHTMLタグで指定した16進数（hexCode）
にマッチする文字列を取得（getElementById）し
HTML要素の中身を変更（innerHTML）して
「16進数: hexCode」を表示。*/
/*body要素にonclick属性を追加して、画面クリックで
changeBackColor()関数を呼び出す。
新規作成したchangeBackColor()関数は、
ランダムな16進数を取得し、背景色を変更し、
その16進数をHTMLのh1要素に表示。
また、カーソルをポインター変更するため、
CSSのcursorプロパティを設定。*/
/* action.js */
CSSは特別な設定なしです。
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
html {
overflow-y:scroll;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body {
text-align: center;
padding: 100px;
font-size: 24px;
font-weight: bold;
font-family: Arial, sans-serif;
color: white;
background-color: gray;
-webkit-text-size-adjust: 100%;
cursor: pointer; /* カーソルをポインターに変更 */
}
/* rule.css */
index.htmlを実行した直後の画面
クリックした結果。背景色の16進数も表示。
※ランダムなのでこの色とは限らない。
続けてクリックするとクリック毎に背景色が変更される。
