Q&A
前提・実現したいこと
HTML,CSS,javascriptを使って作ったタイル16枚を4x4に整列したいです.
よろしくお願いします.
該当のソースコード
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript 3150</title> 6 <h1> マインスイーパー </h1> 7 <style> 8 body{ 9 display: flex; 10 flex-wrap: wrap; 11 } 12 .box{ 13 width: 100px; 14 height: 100px; 15 background-color: skyblue; 16 cursor: pointer; 17 transition: 1s; 18 margin: 0 8px 8px 0; 19 text-align: center; 20 line-height: 100px; 21 } 22 .win{ 23 background: pink; 24 border-radius: 50%; 25 transform: rotate(720deg); 26 } 27 .lose{ 28 transform: scale(0.9); 29 } 30 </style> 31 </head> 32 <body> 33 <script> 34 'use strict'; 35 36 const num = 16; 37 const seikai = Math.floor(Math.random() * num); 38 39 for (let i = 0; i < num; i++){ 40 const div = document.createElement('div'); 41 div.classList.add('box'); 42 43 div.addEventListener('click', () => { 44 if (i == seikai){ 45 div.textContent ='正解！'; 46 div.classList.add('win'); 47 winplay(); 48 }else{ 49 div.textContent = '3150!'; 50 div.classList.add('lose'); 51 loseplay(); 52 } 53 }); 54 document.body.appendChild(div); 55 56 function winplay(){ 57 document.getElementById('seikai-file').play(); 58 } 59 function loseplay(){ 60 document.getElementById('3150-file').play(); 61 } 62 } 63 </script> 64 <audio src="seikai.wav" id="seikai-file" preload="auto"></audio> 65 <audio src="3150.wav" id="3150-file" preload="auto"></audio> 66 </body> 67</html>
試したこと
改行しようと思いdiv.classList.add('box');のあとにif文でi==4の時に
<br>や\nをつけてみたのですが駄目でした.
参考画像
回答1件
0
ベストアンサー
現状のHTMLのままなら、body に適切な幅を設定すればいいでしょう。
css
1 body{ 2 display: flex; 3 flex-wrap: wrap; 4 width: 440px; /* 追加 */ 5 }
本来は、box を囲む親要素を追加してそれに幅を設定したほうがいいとは思います。
投稿2021/03/25 18:28
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/26 06:16