目標
JavaScriptで定数を利用し、四角形から丸に変化する図を作成できようになる。
必要知識
HTML、CSSの基礎(Progate)
環境
・Mac
・VS Code
①divタグ（四角形）を３つ用意
<body>
<div class = "box" id="target1"></div>
<div class = "box" id="target2"></div>
<div class = "box" id="target3"></div>
</body>
解説：bodyタグの中にidを設定した空のdivタグを３つ用意。
<style>
body{
/* ↓divタグを横並びに */
display: flex;
/* ↓横幅がなくなった場合要素を折り返す */
flex-wrap: wrap;
}
.box{
width: 100px;
height: 100px;
background: skyblue;
cursor: pointer;
/* ↓アニメーションが変化する時間 */
transition: 0.8s;
margin: 0 8px 8px 0;
}
.circle{
background: pink;
border-radius: 50%;
/* ↓３６０度回転させるアニメーション */
transform: rotate(360deg);
}
</style>
解説：headerタグ内にstyleタグを用意しCSSコードを記述。
②作成したdivタグに対しJavaScriptを定義。
<script>
// 記述ミスを表示
'use strict';
// 複数使用する場合はconst(定数)で管理すると便利。
const target1 = document.getElementById('target1');
const target2 = document.getElementById('target2');
const target3 = document.getElementById('target3');
</script>
解説：全てのコード(document)に対し、target1、target２、target３を対象とする(getElementById)コードを３つ定義し、それぞれ定数target1,target2,target3に代入。
③代入した定数に対して、どのような変化をさせるのか定義
target1.addEventListener('click' ,() => {
target1.classList.toggle('circle');
});
target2.addEventListener('click' ,() => {
target2.classList.toggle('circle');
});
target3.addEventListener('click' ,() => {
target3.classList.toggle('circle');
解説：指定した定数に対して（target1など）、クリック('click')すると、toggleを使ってCSSで定義したcircleが適用されていれば外し、適用されていなければ適用させるよう実行(addEventListener)する。
結果
スカイブルーの四角形の図をクリックすると、回転しながらピンクの円の図に変化し、逆にピンクの円の図をクリックすると回転しながらスカイブルーの四角形に戻る。
参考：ドットインストール「はじめてのJavaScript」
↧