teratail
回答率
85.40%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップCSS3に関する質問【原因不明】コードが正常に実行されない

編集履歴

質問編集履歴

7

書式の改善

2024/06/07 08:33

投稿

Iris-8
Iris-8

スコア6

test CHANGED
File without changes
test CHANGED
@@ -2,8 +2,12 @@
2
2
 
3
3
  ### 問題点
4
4
  なぜか正常に動作しません。
5
+ Playgroundではスタート画面は出ますが、スタートボタンを押すとエラーコードが出てカードが並べられません。また、一時停止のボタンを押しても同じエラーが出ます。(ReferenceError)
6
+
7
+ Google Chromeの検証ではスタート画面が出てスタートを押して1回目のカードの移動までは動きますが、2回目にカードを動かすことができません。Google Chromeではエラーコードは出ません。
8
+
5
- カーソルと対象の位置もどんどんズレていきます。
9
+ 試行回数の度にカーソルと対象の位置がずれていくバグも直りません。
6
- どなたか助けてください！
10
+
7
11
 
8
12
  ### ソースコードのURL
9
13
  https://playcode.io/1892863
CSS3HTML5JavaScriptHTMLCSS

6

書式の改善

2024/06/07 06:35

投稿

Iris-8
Iris-8

スコア6

test CHANGED
@@ -1 +1 @@
1
- JavaScriptでカーソルと対象の位置がズレてしまう
1
+ 【原因不明】コードが正常に実行されない
test CHANGED
@@ -1,11 +1,18 @@
1
- ロシアンソリティアを制作中です。
1
+ **ロシアンソリティアを制作中です。**
2
- 使用しているライブラリ→interact.js
3
2
 
4
- ⚫︎現状の問題点
3
+ ### 問題点
4
+ なぜか正常に動作しません。
5
- ①なぜかカードとマウスの位置がどんどんズレていく。
5
+ カーソルと対象の位置もどんどんズレていきます。
6
- ②Kの枠が空になった時に寄せられる。
6
+ どなたか助けてください！
7
- ③カードを動かしたら下のカードも一緒に動かせるようにしたい。
8
- ④Kの枠が空になったらKのカードを置けるようにしたい。
9
7
 
10
- playgroundのURLはこちらです。
8
+ ### ソースコードのURL
11
9
  https://playcode.io/1892863
10
+
11
+ ### 実装したいこと
12
+ ①立ち上げたらスタート画面が出る
13
+ ②スタートボタンを押したら時間測定されて、カードが並べられる
14
+ ③ルール通りにカードを移動できる
15
+ ④ストップを押したら時間が止まって一時停止の画面が出る
16
+ ⑤設定やルールを押すとそれぞれの画面が出る
17
+ ⑤クリアしたらゲームクリアの画面が出る
18
+
CSS3HTML5JavaScriptHTMLCSS

5

新たな問題点

2024/06/03 12:08

投稿

Iris-8
Iris-8

スコア6

test CHANGED
@@ -1 +1 @@
1
- jsで指定の位置にドラッグ&ドロップをさせる方法
1
+ JavaScriptでカーソルと対象の位置がズレてしまう
test CHANGED
@@ -2,10 +2,10 @@
2
2
  使用しているライブラリ→interact.js
3
3
 
4
4
  ⚫︎現状の問題点
5
- ①ドラッグできる要素のクラス名はcardAllだが、ドロップ後はクラス名がcardRedもしくはcardBlackに変わる。なのでドラッグ&ドロップができなくなる。そこでドラッグ後のクラス名にcardAllも追加してみたがなぜか動作がおかしくなる。
6
- ②2番目以降のカードの所定位置がposition: relativeでtop: -80ずつずらしている。そのためドロップ後にカードの位置が下になってしまう。
7
- ③なぜかマウスの位置がズレる。
5
+ ①なぜかカードとマウスの位置がどんどんズレていく。
6
+ ②Kの枠が空になった時に寄せられる。
8
- ④カードを動かしたら下のカードも一緒に動かせるようにしたい。
7
+ ③カードを動かしたら下のカードも一緒に動かせるようにしたい。
8
+ ④Kの枠が空になったらKのカードを置けるようにしたい。
9
9
 
10
10
  playgroundのURLはこちらです。
11
11
  https://playcode.io/1892863
CSS3HTML5JavaScriptHTMLCSS

4

書式の改善

2024/06/03 05:57

投稿

Iris-8
Iris-8

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,11 @@
1
+ ロシアンソリティアを制作中です。
1
- 補足を書いたら以前のコードが消えてしまいました。申し訳ございません。
2
+ 使用しているライブラリ→interact.js
2
3
 
4
+ ⚫︎現状の問題点
5
+ ①ドラッグできる要素のクラス名はcardAllだが、ドロップ後はクラス名がcardRedもしくはcardBlackに変わる。なのでドラッグ&ドロップができなくなる。そこでドラッグ後のクラス名にcardAllも追加してみたがなぜか動作がおかしくなる。
6
+ ②2番目以降のカードの所定位置がposition: relativeでtop: -80ずつずらしている。そのためドロップ後にカードの位置が下になってしまう。
3
- ロシアンソリティアを制作中です。
7
+ ③なぜかマウスの位置がズレる。
4
- interact.jsを使ってAの枠の中へ子要素の1番最後にあるカードをAから順に格納する機能は成功しましたが、並べられたカードの上に同じマークのカードを小さい順に重ねていくことができません。
8
+ ④カードを動かしたら下のカードも一緒に動かせるようにしたい。
5
9
 
6
- 現状のplaygroundのURLはこちらです。
10
+ playgroundのURLはこちらです。
7
11
  https://playcode.io/1892863
CSS3HTML5JavaScriptHTMLCSS

3

誤字

2024/06/03 02:21

投稿

Iris-8
Iris-8

スコア6

test CHANGED
File without changes
test CHANGED
@@ -3,5 +3,5 @@
3
3
  ロシアンソリティアを制作中です。
4
4
  interact.jsを使ってAの枠の中へ子要素の1番最後にあるカードをAから順に格納する機能は成功しましたが、並べられたカードの上に同じマークのカードを小さい順に重ねていくことができません。
5
5
 
6
- 現状のplaycodeのURLはこちらです。
6
+ 現状のplaygroundのURLはこちらです。
7
7
  https://playcode.io/1892863
CSS3HTML5JavaScriptHTMLCSS

2

ソースコードのURLを記載しました

2024/06/03 02:19

投稿

Iris-8
Iris-8

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,107 +1,7 @@
1
- ### 補足　(6月2日23時更新)
1
+ 補足を書いたら以前のコードが消えてしまいました。申し訳ございません。
2
2
 
3
+ ロシアンソリティアを制作中です。
3
- その後、ドラッグ&ドロップはinteract.jsというライブラリを使って実装することにして、①と②はとりあえずできました。しかしマウスの位置が合わなかったり、カードが画面外に消えるなどのバグが発生します。
4
+ interact.jsを使ってAの枠の中へ子要素の1番最後にあるカードをAから順に格納する機能は成功しましたが、並べられたカードの上に同じマークのカードを小さい順に重ねていくことができません。
4
5
 
5
- 変更後のコードはこちらです。
6
+ 現状のplaycodeのURLはこちらです。
6
- HTMLに追加したコード
7
-
8
- <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
9
-
10
- CSSに追加したコード
11
-
12
- .cardRed {
13
- color: red;
14
- background: white;
15
- font-size: 20px;
16
- padding: 5px;
17
- width: 70px;
18
- height: 110px;
19
- border: solid 1px black;
20
- border-radius: 10%;
21
- }
22
- .cardBlack {
23
- color: black;
24
- background: white;
25
- font-size: 20px;
26
- padding: 5px;
27
- width: 70px;
28
- height: 110px;
29
- border: solid 1px black;
30
- border-radius: 10%;
31
- }
32
-
33
- jsに追加したコード
34
-
35
- const pos = { x: 0, y: 0 }
36
- interact('.cardAll').draggable({
37
- listeners: {
38
- move(event) {
39
- pos.x += event.dx
40
- pos.y += event.dy
41
- event.target.style.transform =
42
- `translate(${pos.x}px, ${pos.y}px)`
43
- },
44
- },
45
- })
46
- interact('.box-a').dropzone({
47
- ondrop(event) {
48
- const relatedTarget = event.relatedTarget
49
- const target = event.target
50
- const dragData = relatedTarget.dataset.interact
51
- const dropData = target.dataset.interact
52
- if (dragData === dropData) {
53
-
54
- // ドラッグ要素とドロップ範囲のhtmlを取得
55
- const targetHTML = target.innerHTML;
56
- const relatedHTML = relatedTarget.innerHTML;
57
-
58
-
59
- // ハートとダイヤをbox-aに固定
7
+ https://playcode.io/1892863
60
- fixHeart(targetHTML, relatedHTML, target, relatedTarget);
61
- function fixHeart(targetHTML, relatedHTML, target, relatedTarget) {
62
- const cardOrder = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
63
- const markOrder = ["❤︎", "♦︎"]
64
- for (let j = 0; j < 2; j++){
65
- const cardMark = markOrder[j];
66
- const cardMark2 = '"'+markOrder[j]+'"';
67
- for (let i = 0; i < cardOrder.length; i++) {
68
- const cardNumber = cardOrder[i];
69
- const nextCardNumber = cardOrder[i + 1];
70
-
71
- if ( targetHTML.includes(cardMark) && relatedHTML.includes(cardMark) && targetHTML.includes(cardNumber) && relatedHTML.includes(cardNumber)) {
72
- relatedTarget.style.display = "none";
73
- target.innerHTML = "<div class='cardRed' id='"+nextCardNumber+" draggable='false'>"+cardMark+cardNumber+"</div>";
74
- }
75
- }
76
- }
77
- }
78
-
79
- // スペードとクローバーをbox-aに固定
80
- fixSpade(targetHTML, relatedHTML, target, relatedTarget);
81
- function fixSpade(targetHTML, relatedHTML, target, relatedTarget) {
82
- const cardOrder = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
83
- const markOrder = ["♠︎", "♣︎"]
84
- for (let j = 0; j < 2; j++){
85
- const cardMark = markOrder[j];
86
- const cardMark2 = '"'+markOrder[j]+'"';
87
- for (let i = 0; i < cardOrder.length; i++) {
88
- const cardNumber = cardOrder[i];
89
- const nextCardNumber = cardOrder[i + 1];
90
-
91
- if ( targetHTML.includes(cardMark) && relatedHTML.includes(cardMark) && targetHTML.includes(cardNumber) && relatedHTML.includes(cardNumber)) {
92
- relatedTarget.style.display = "none";
93
- target.innerHTML = "<div class='cardBlack' id='"+nextCardNumber+" draggable='false'>"+cardMark+cardNumber+"</div>";
94
- }
95
- }
96
- }
97
- }
98
-
99
-
100
- }
101
- }
102
- }).on('dropactivate', (event) => {
103
- event.relatedTarget.classList.add('active')
104
- }).on('dropdeactivate', (event) => {
105
- event.relatedTarget.classList.remove('active')
106
- })
107
-
CSS3HTML5JavaScriptHTMLCSS

1

ライブラリを使用

2024/06/02 14:28

投稿

Iris-8
Iris-8

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,330 +1,107 @@
1
- ### 実現したいこと
1
+ ### 補足　(6月2日23時更新)
2
- ロシアンソリティアを制作しています。ゲームのルールは一般的なものと同じです。
3
2
 
4
- 実現したいこと
5
- ①box-spade, box-dia, box-clover, box-heartに、それぞれマークが同じかつAのカードをドロップできるようにしたい。
3
+ その後、ドラッグ&ドロップはinteract.jsというライブラリを使って実装することにして、①と②はとりあえずできました。しかしマウスの位置が合わなかったり、カードが画面外に消えるなどのバグが発生します。
6
- ②Aの次は2、3…と同じマークのカードをドロップできるようにしたい。
7
4
 
5
+ 変更後のコードはこちらです。
6
+ HTMLに追加したコード
7
+
8
+ <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
9
+
10
+ CSSに追加したコード
11
+
12
+ .cardRed {
13
+ color: red;
14
+ background: white;
15
+ font-size: 20px;
16
+ padding: 5px;
17
+ width: 70px;
18
+ height: 110px;
19
+ border: solid 1px black;
20
+ border-radius: 10%;
21
+ }
22
+ .cardBlack {
23
+ color: black;
24
+ background: white;
25
+ font-size: 20px;
26
+ padding: 5px;
27
+ width: 70px;
28
+ height: 110px;
29
+ border: solid 1px black;
30
+ border-radius: 10%;
31
+ }
32
+
33
+ jsに追加したコード
34
+
35
+ const pos = { x: 0, y: 0 }
36
+ interact('.cardAll').draggable({
37
+ listeners: {
38
+ move(event) {
39
+ pos.x += event.dx
40
+ pos.y += event.dy
41
+ event.target.style.transform =
42
+ `translate(${pos.x}px, ${pos.y}px)`
43
+ },
44
+ },
45
+ })
46
+ interact('.box-a').dropzone({
47
+ ondrop(event) {
48
+ const relatedTarget = event.relatedTarget
49
+ const target = event.target
8
- ③もしカードの数字が1つ大きい、かつ同じマークならそのカードの列の1番下にドロップできるようにしたい。
50
+ const dragData = relatedTarget.dataset.interact
51
+ const dropData = target.dataset.interact
52
+ if (dragData === dropData) {
53
+
54
+ // ドラッグ要素とドロップ範囲のhtmlを取得
55
+ const targetHTML = target.innerHTML;
56
+ const relatedHTML = relatedTarget.innerHTML;
57
+
58
+
9
- ④この時、連なっている下のカード達も一緒に移動させたい。
59
+ // ハートとダイヤをbox-aに固定
60
+ fixHeart(targetHTML, relatedHTML, target, relatedTarget);
61
+ function fixHeart(targetHTML, relatedHTML, target, relatedTarget) {
62
+ const cardOrder = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
63
+ const markOrder = ["❤︎", "♦︎"]
64
+ for (let j = 0; j < 2; j++){
65
+ const cardMark = markOrder[j];
66
+ const cardMark2 = '"'+markOrder[j]+'"';
67
+ for (let i = 0; i < cardOrder.length; i++) {
68
+ const cardNumber = cardOrder[i];
69
+ const nextCardNumber = cardOrder[i + 1];
70
+
71
+ if ( targetHTML.includes(cardMark) && relatedHTML.includes(cardMark) && targetHTML.includes(cardNumber) && relatedHTML.includes(cardNumber)) {
72
+ relatedTarget.style.display = "none";
73
+ target.innerHTML = "<div class='cardRed' id='"+nextCardNumber+" draggable='false'>"+cardMark+cardNumber+"</div>";
74
+ }
75
+ }
76
+ }
77
+ }
78
+
79
+ // スペードとクローバーをbox-aに固定
80
+ fixSpade(targetHTML, relatedHTML, target, relatedTarget);
81
+ function fixSpade(targetHTML, relatedHTML, target, relatedTarget) {
82
+ const cardOrder = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
83
+ const markOrder = ["♠︎", "♣︎"]
84
+ for (let j = 0; j < 2; j++){
85
+ const cardMark = markOrder[j];
86
+ const cardMark2 = '"'+markOrder[j]+'"';
87
+ for (let i = 0; i < cardOrder.length; i++) {
88
+ const cardNumber = cardOrder[i];
89
+ const nextCardNumber = cardOrder[i + 1];
90
+
91
+ if ( targetHTML.includes(cardMark) && relatedHTML.includes(cardMark) && targetHTML.includes(cardNumber) && relatedHTML.includes(cardNumber)) {
92
+ relatedTarget.style.display = "none";
93
+ target.innerHTML = "<div class='cardBlack' id='"+nextCardNumber+" draggable='false'>"+cardMark+cardNumber+"</div>";
94
+ }
95
+ }
96
+ }
97
+ }
10
98
 
11
99
 
12
- ### 発生している問題・分からないこと
100
+ }
101
+ }
13
- カードを指定の位置にドラッグ&ドロップをする方法が分かりません。
102
+ }).on('dropactivate', (event) => {
103
+ event.relatedTarget.classList.add('active')
14
- 実現したいこと①〜④までの実現方法を教えていただけると助かります。
104
+ }).on('dropdeactivate', (event) => {
105
+ event.relatedTarget.classList.remove('active')
106
+ })
15
107
 
16
- 大変お見苦しいコード失礼いたします。初心者なので簡単な言葉で解説してくださると嬉しいです。その他、質問内容以外のアドバイスでも大歓迎です。
17
-
18
-
19
-
20
- ### 該当のソースコード
21
-
22
- ```index.html
23
- <!DOCTYPE html>
24
- <html>
25
- <head>
26
- <meta charset="utf-8">
27
- <title>ソリティア</title>
28
- <link rel = "stylesheet" href="style.css">
29
- <script src="script.js"></script>
30
- <script src="https://kit.fontawesome.com/b3b03cb8e0.js" crossorigin="anonymous"></script>
31
- </head>
32
-
33
- <body>
34
- <header>
35
- <h1>Solitaire</h1>
36
- <p id="time" class="fa-regular fa-clock" >0:00:00</p>
37
- <button class="fa-solid fa-pause" onclick="stop();"></button>
38
- </header>
39
-
40
- <main>
41
- <div id="box-a">
42
- <div class="box-a" id="box-spade">A ♠︎</div>
43
- <div class="box-a" id="box-dia">A ♦︎</div>
44
- <div class="box-a" id="box-clover">A ♣︎</div>
45
- <div class="box-a" id="box-heart">A ❤︎</div>
46
- </div>
47
- <div id="box-k">
48
- <div class="box-k" id="card1"></div>
49
- <div class="box-k" id="card2"></div>
50
- <div class="box-k" id="card3"></div>
51
- <div class="box-k" id="card4"></div>
52
- <div class="box-k" id="card5"></div>
53
- <div class="box-k" id="card6"></div>
54
- <div class="box-k" id="card7"></div>
55
- </div>
56
-
57
- <div id="modalMusk"></div>
58
- <div id="modal">
59
- <h1>Solitaire</h1>
60
- <div id="menu1">
61
- <button id="continue" onclick="continueGame();">続きから</button>
62
- <button id="start" onclick="start();">START</button>
63
- </div>
64
- <div id="menu2">
65
- <button class="fa-solid fa-info"></button>
66
- <button class="fa-solid fa-gear"></button>
67
- </div>
68
- </div>
69
- </main>
70
- </body>
71
- </html>
72
- ```
73
-
74
- ```script.js
75
- //ストップウォッチの初期値
76
- let intervalId = null;
77
- let passedTime = 0;
78
- let previously = null;
79
-
80
- // 一時停止のモーダル非表示
81
- document.getElementById("continue").style.display = "none";
82
-
83
- // カード作成
84
- const mark = ["♠︎","♦︎","♣︎","❤︎"];
85
- const number = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
86
- const card = [];
87
- for (let i = 0; i < mark.length; i++){
88
- for (let j = 0; j < number.length; j++){
89
- let result = { number: number[j], mark: mark[i] };
90
- card.push(result);
91
- }
92
- }
93
-
94
- // スタートを押して関数を呼び出す
95
- function start(){
96
-
97
- //モーダルを非表示
98
- document.getElementById("modalMusk").style.display = "none";
99
- document.getElementById("modal").style.display = "none";
100
-
101
- //シャッフル
102
- for (let i = card.length - 1; i > 0; i--){
103
- let j = Math.floor(Math.random() * i);
104
- let temp = card[i];
105
- card[i] = card[j];
106
- card[j] = temp;
107
- }
108
-
109
- //カードを分ける
110
- const card1 = card.slice(0, 1);
111
- const card2 = card.slice(1, 7);
112
- const card3 = card.slice(7, 14);
113
- const card4 = card.slice(14, 22);
114
- const card5 = card.slice(22, 31);
115
- const card6 = card.slice(31, 41);
116
- const card7 = card.slice(41);
117
-
118
- // 2回目のスタートのためにカードの中身を初期化
119
- for (let i = 1; i < 8; i++){
120
- const add = document.getElementById("card" + i);
121
- add.innerHTML = "";
122
- }
123
-
124
- //カードを並べる関数を呼び出す
125
- makeCard(card1.length, "card1", "cardk1-", card1);
126
- makeCard(card2.length, "card2", "cardk2-", card2);
127
- makeCard(card3.length, "card3", "cardk3-", card3);
128
- makeCard(card4.length, "card4", "cardk4-", card4);
129
- makeCard(card5.length, "card5", "cardk5-", card5);
130
- makeCard(card6.length, "card6", "cardk6-", card6);
131
- makeCard(card7.length, "card7", "cardk7-", card7);
132
-
133
- //ストップウォッチをリセットして関数を呼び出す
134
- clearInterval(intervalId);
135
- passedTime = 0;
136
- previously = new Date();
137
- intervalId = setInterval(stopwatch, 1000);
138
- }
139
-
140
- // カードを並べる関数
141
- function makeCard(cardLength, cardGet, cardIdPrefix, cards) {
142
-
143
- // divを追加して色を分ける
144
- for (let i = 1; i < cardLength + 1; i++) {
145
- const add = document.getElementById(cardGet);
146
- const cardId = cardIdPrefix + i;
147
- const card = cards[i - 1];
148
- add.innerHTML += '<div class="cardAll" draggable="true" id="' + cardId + '">' + card.mark + card.number + '</div>';
149
- if (card.mark === "❤︎" || card.mark === "♦︎") {
150
- document.getElementById(cardId).style.color = "#e10000";
151
- } else {
152
- document.getElementById(cardId).style.color = "black";
153
- }
154
- }
155
-
156
- // カードの位置をずらす
157
- let eighty = -80;
158
- for (let i = 2; i < cardLength + 1; i++) {
159
- const cardPosition = document.getElementById(cardIdPrefix + i);
160
- if (cardPosition) {
161
- cardPosition.style.position = "relative";
162
- cardPosition.style.top = eighty + "px";
163
- eighty -= 80;
164
- }
165
- }
166
- }
167
-
168
- //ストップウォッチを開始する関数
169
- function stopwatch(){
170
- const now = new Date();
171
- passedTime += now - previously;
172
- previously = now;
173
-
174
- const h = String(Math.floor(passedTime / (1000 * 60 * 60))).padStart(2, "0");
175
- const m = String(Math.floor(passedTime / (1000 * 60) % 60)).padStart(2, "0");
176
- const s = String(Math.floor(passedTime / 1000) % 60).padStart(2, "0");
177
-
178
- document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
179
- }
180
-
181
-
182
-
183
- // 停止ボタンを押したら関数を呼び出す
184
- function stop(){
185
-
186
- // ストップウォッチを一時停止
187
- clearInterval(intervalId);
188
-
189
- // モーダルを表示
190
- document.getElementById("modalMusk").style.display = "grid";
191
- document.getElementById("modal").style.display = "grid";
192
- document.getElementById("continue").style.display = "block";
193
- }
194
-
195
- // 続きからを押したら関数を呼び出す
196
- function continueGame(){
197
-
198
- // モーダルを非表示
199
- document.getElementById("modalMusk").style.display = "none";
200
- document.getElementById("modal").style.display = "none";
201
-
202
- // ストップウォッチの再開
203
- previously = new Date();
204
- intervalId = setInterval(stopwatch, 1000);
205
- }
206
- ```
207
-
208
- ```style.css
209
- header {
210
- color: white;
211
- margin: 30px 0 80px 0;
212
- display: grid;
213
- gap: 100px;
214
- grid-auto-flow: column;
215
- align-items: center;
216
- }
217
- #time {
218
- width: 200px;
219
- font-size: 30px;
220
- margin-right: 50px;
221
- display: grid;
222
- gap: 10px;
223
- grid-auto-flow: column;
224
- }
225
- main {
226
- display: grid;
227
- gap: 50px;
228
- }
229
- .box-a, .box-k {
230
- color: white;
231
- width: 70px;
232
- height: 110px;
233
- border: solid 1px white;
234
- border-radius: 10%;
235
- display: grid;
236
- align-items: center;
237
- justify-content: center;
238
- }
239
- #box-a, #box-k {
240
- display: grid;
241
- grid-auto-flow: column;
242
- justify-content: center;
243
- gap: 20px;
244
- }
245
- .cardAll {
246
- background: white;
247
- font-size: 20px;
248
- padding: 5px;
249
- width: 70px;
250
- height: 110px;
251
- border: solid 1px black;
252
- border-radius: 10%;
253
- cursor: grab;
254
- }
255
- #modalMusk {
256
- background: black;
257
- opacity: 0.5;
258
- position: fixed;
259
- top: 0;
260
- bottom: 0;
261
- right: 0;
262
- left: 0;
263
- }
264
- #modal {
265
- background: white;
266
- width: 600px;
267
- height: 400px;
268
- position: absolute;
269
- display: grid;
270
- gap: 10px;
271
- justify-content: center;
272
- align-content: center;
273
- justify-items: center;
274
- }
275
- #start, #continue {
276
- font-size: 20px;
277
- width: 200px;
278
- height: 60px;
279
- }
280
- #menu1 {
281
- display: grid;
282
- gap: 10px;
283
- }
284
- #menu2 {
285
- width: 200px;
286
- height: 40px;
287
- display: grid;
288
- gap: 15px;
289
- grid-auto-flow: column;
290
- align-items: center;
291
- }
292
- .fa-solid {
293
- font-size: 25px;
294
- padding: 10px;
295
- }
296
- .fa-pause {
297
- width: 70px;
298
- height: 70px;
299
- border-radius: 50%;
300
- }
301
- *{
302
- margin: 0;
303
- padding: 0;
304
- }
305
- body{
306
- margin: auto;
307
- width: 960px;
308
- height: 1400px;
309
- display: flex;
310
- flex-direction: column;
311
- align-items: center;
312
- background: radial-gradient(#1ca11c, #084008);
313
- }
314
- main {
315
- display: grid;
316
- justify-items: center;
317
- }
318
- ```
319
-
320
- ### 試したこと・調べたこと
321
- - [x] teratailやGoogle等で検索した
322
- - [x] ソースコードを自分なりに変更した
323
- - [ ] 知人に聞いた
324
- - [ ] その他
325
-
326
- ##### 上記の詳細・結果
327
- ChatGPTに聞いたり、YouTubeやインターネットで調べても実現できませんでした。
328
-
329
- ### 補足
330
- 特になし
CSS3HTML5JavaScriptHTMLCSS