前提・実現したいこと
現在、ドットインストールのJavascript入門を学習しています。
bodyタグに書いた要素を横並びにするために、
styleタグに「display: flex; flex-wrap: wrap;」
を設定したのですが、うまく横並びに表示されません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<htnl lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript Practice</title> 6 <style> 7 body{ 8 display: flex; 9 flex-wrap: wrap; 10 } 11 .box{ 12 width: 100px; 13 height: 100px; 14 background: skyblue; 15 cursor: pointer; 16 transition: 0.8s; 17 margin: 0px 8px 8px 0px; 18 } 19 .circle{ 20 background: pink; 21 border-radius: 50%; 22 transform: rotate(360deg); 23 } 24 </style> 25 </head> 26 <body> 27 <div id="target1" class="box"></div> 28 <div id="target2" class="box"></div> 29 <div id="target3" class="box"></div> 30 31 <script> 32 'use strict'; 33 34 const target1 = document.getElementById('target1'); 35 const target2 = document.getElementById('target2'); 36 const target3 = document.getElementById('target3'); 37 38 target1.addEventListener('click', function(){ 39 target1.classList.toggle('circle') 40 }); 41 target2.addEventListener('click', function(){ 42 target2.classList.toggle('circle') 43 }); 44 target3.addEventListener('click', function(){ 45 target3.classList.toggle('circle') 46 }); 47 48 </script> 49 </body> 50</htnl>
試したこと
Chormeのデベロッパーツールで確認しましたが、特にエラーは出ていませんでした。
補足情報
実行環境:Chrome 74.0.3729.157
テキストエディタ:VSCode 1.33.1
回答3件
あなたの回答
tips
プレビュー