見出し画像

【初心者】HTML CSS JavaScriptで、■が●に

SOZ

こんにちはー。HTML CSS Scriptとかあんまりわからないけど、久々にかいてみました。

HTML

画像1

​<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="stylesheet.css">
   <title>作ってみた1</title>
</head>
<body>
   <h1>Lesson1 : 四角と丸</h1>
   <img src="kadai1.jpg">

   <p>
       使う言語
       <ul>
           <li>html</li>
           <li>script</li>
           <li>css</li>
       </ul>

   </p>

   <div class="box" id="target"></div>

   <script>
       'use strict';
       const target = document.getElementById('target');
       target.addEventListener('click',() =>{
           target.classList.toggle('maru')
       });
   </script>
</body>
</html>

CSS

画像2

.box{
   width: 100px;
   height: 100px;
   background-color: yellow;
   cursor: pointer;
   transition: 0.9s;

}
.maru{
   background-color: pink;
   border-radius: 50%;
   transform: rotate(360deg);
}

実行してみるとこうなります

画像3

上の黄色のところをおしてみると黄色の所が回転してピンクの丸になります。

画像4

一応成功かな？

画像5

こう書いたらこうなる感じ。


画像6


なにとぞ　なにとぞー