課題内容
- ＜概要＞
- サイズが横200px/縦200pxで、
- 枠線がついたdivタグを３つ用意しましょう。
- divの順番として、
- div１つ目：赤色
- div２つ目：青色
- div３つ目：黄色
- として動きをつけます。
- 動きは、マウスのカーソルの動きによって、
- divの背景色を変える動きをします。
- マウスカーソルの動きで、
- divタグにカーソルが当たる：背景色をつける
- divタグからカーソルが外れる：背景色を元に戻す
- という動きをつけましょう。
- 実際の表示は、以降の出力結果などを、
- 参考にして作ってみましょう。
- 以降の出力結果などの参考のレイアウトに関しては、
- それぞのdivタグをわかりやすくするために、
- 順番に該当する色（赤、青、緑）を、
- divタグの真ん中に表示しています。
出力結果
初期表示として、
このような表示になるように、
HTMLで表示を作りましょう。
マウスカーソルの動きによるdivタグの表示は、
以下のようになります。
マウスカーソルによるdivタグの背景色の変更
例えば、
最初の赤色に変更するdivタグにカーソルを当てたときは、
このように、
赤色用のdivタグの背景色を「赤色」に変更します。
そして、
マウスカーソルが外れると、
このように、
赤色用のdivタグの背景色が、
元の初期表示に戻ります。
実際の動きを確認（サンプルの動き）
サンプルの動きとして、
以下を参考にしてください。
ポイント（色をつけるためには？）
色をつけたり、消したりするには、
どうしたら良いかという点は、
「クリックした」というイベントのときに、
DOM操作として、
- 要素にクラスを追加する
- 要素からクラスを削除する
ということを行うことで、
divタグに対して、
色をつけたり、消したりすることができます。
具体的には、
- マウスカーソルが当たる → 色を付けるクラスを追加
- マウスカーソルが外れる → 色を付けるクラスを削除
という処理を行うことで、
今回の課題の動きを実現することができます。
この要素に対して、
クラスを追加、削除する方法に関しては、
以下を参考にしてください。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Sample Dom/Event</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div>
<label class="text-result">色の変更</label>
</div>
<div id="target-red" class="target-div">
<span>赤色</div>
</div>
<div id="target-blue" class="target-div">
<span>青色</div>
</div>
<div id="target-green" class="target-div">
<span>緑色</div>
</div>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>CSS
.target-div {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 10px 0px;
display: flex;
justify-content: center;
align-items: center;
}
.target-div {
cursor: pointer;
}
.red {
background-color: red;
color: white;
}
.blue {
background-color: blue;
color: white;
}
.green {
background-color: green;
color: white;
}javaScript
// 赤色のための定義
let sampleRed = document.querySelector('#target-red');
// 青色のための定義
let sampleBlue = document.querySelector('#target-blue');
// 緑色のための定義
let sampleGreen = document.querySelector('#target-green');
// マウスカーソルが当たった（赤色）
sampleRed.addEventListener('mouseenter',event => {
// クラウを追加
sampleRed.classList.add('red');
})
// マウスカーソルが外れた（赤色）
sampleRed.addEventListener('mouseleave',event => {
// クラウを削除
sampleRed.classList.remove('red');
})
// マウスカーソルが当たった（青色）
sampleBlue.addEventListener('mouseenter',event => {
// クラウを追加
sampleBlue.classList.add('blue');
})
// マウスカーソルが外れた（緑色）
sampleBlue.addEventListener('mouseleave',event => {
// クラウを削除
sampleBlue.classList.remove('blue');
})
// マウスカーソルが当たった（緑色）
sampleGreen.addEventListener('mouseenter',event => {
// クラウを追加
sampleGreen.classList.add('green');
})
// マウスカーソルが外れた（緑色）
sampleGreen.addEventListener('mouseleave',event => {
// クラウを削除
sampleGreen.classList.remove('green');
})