teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問HTML CSS Javascriptで、円周上に８方向の矢印ボタンを作りたい

編集履歴

質問編集履歴

5

jqueryを読み込むコード追加、問題点１つ（矢印の表示位置がずれる）追加

2020/05/05 01:33

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -18,13 +18,13 @@
18
18
 
19
19
  ### 発生している問題・エラーメッセージ
20
20
 
21
- 以下2点の実現方法が見つけられません。
21
+ 以下の実現方法が見つけられません。
22
22
 
23
23
  ・矢印を円周上に配置
24
24
 
25
25
  ・矢印の領域**だけ**をボタンとして認識
26
26
 
27
-
27
+ ・左斜め上矢印（コード上の変数名target6）の表示位置がズレている
28
28
 
29
29
 
30
30
 
@@ -66,7 +66,7 @@
66
66
 
67
67
  <head>
68
68
 
69
- <script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
69
+ <script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.min.js'>
70
70
 
71
71
  </head>
72
72
 

4

コードにjsfiddleを追加

2020/05/05 01:33

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -58,8 +58,18 @@
58
58
 
59
59
  ※右矢印「＝＞」をクリックすると反応するようにイベントリスナーを設定しています。
60
60
 
61
+ コードと実行結果
62
+
63
+ https://jsfiddle.net/yamekodev/a3koyf1z/
64
+
61
65
  ```HTML
62
66
 
67
+ <head>
68
+
69
+ <script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
70
+
71
+ </head>
72
+
63
73
  <body>
64
74
 
65
75
  <section class="circle-box">

3

試したことを追記

2020/05/05 01:29

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -36,18 +36,28 @@
36
36
 
37
37
 
38
38
 
39
+ 下記を参考にして円周上に８方向の外向き矢印を配置できました。
40
+
41
+ https://codepen.io/shmd966/pen/epawaQ?__cf_chl_captcha_tk__=72622b0b820b07f16c78e4f8c60d41f155dfff1e-1588598505-0-ATqn1ayFNQb4FfaFTo9sBuJwtLmFpuJTJDiAhkwguDvXmL1JiI7oxQEgbbVft5IKLtaYyuVciARMBSSd2LioeUzF3n5ukMo60YE38aDEURFseZDyLVCHlGd4Oo0w_h632pbx7OB1FetI6grTiXwVJJe2cUJg68i9PhfAaNDuJT2IsdZE0gfwSyDcL9SLjxApAkn3Z3aZBz_bUFyvI1uHFfxbIHTv67ofAJMMcxJhdqE-dIzXwdGlcCifVevi2w7FJhUoLUfMOiDr3THtBHOZpWRzTW21GyxsnJzxSRKfl-NTv_VRAnQGsnVXVw6J3xWNBbD6-LHNzxUidzQ8-AoQatp5FONcC3rPtJq4oWlCB6jCJwLEl9UHSJizbFPCi9lfHWI1yNDpEda4uf7rVQwussuhzyQi2oTBBdWt2F7nfMsKlaJSeGuTTvccuEqp9N01AFOmomgt8dZmsvTCjhYPmZNlVbHGyfSNCndCmpgORFRgvV6j-p1nwl0lJ_36chINxK76NpMjftiNdQ_sCWYldXrPfPMhyKRBJ-LcBJ2vo1r3ObcboPEkuSyIOyeWPDMZ5g
42
+
43
+
44
+
45
+
46
+
39
47
  また下記レッスンをやることで、単純な四角形、円の領域のみをボタンとして認識させることはできました。
40
48
 
41
49
  https://dotinstall.com/lessons/basic_javascript_v4
42
50
 
43
51
 
44
52
 
45
- ただ、上記を組み合わせて、表示した矢印を押したイベントを取ろうとしても、矢印以外の部分を押してもイベントが発生してしまったりします。
53
+ 上記ノウハウを組み合わせて、矢印を表示しているdivにイベントリスナーclickを設定しましたが、矢印の余白をクリックしても反応してしまいます。
46
54
 
47
55
 
48
56
 
49
57
  ### コード
50
58
 
59
+ ※右矢印「＝＞」をクリックすると反応するようにイベントリスナーを設定しています。
60
+
51
61
  ```HTML
52
62
 
53
63
  <body>

2

ソースコード更新　イベントリスナー追加

2020/05/04 13:29

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -52,31 +52,229 @@
52
52
 
53
53
  <body>
54
54
 
55
- <div class="arrow" id="target0"></div>
56
-
57
- <div class="arrow" id="target1"></div>
58
-
59
- <div class="arrow" id="target2"></div>
60
-
61
- <div class="arrow" id="target3"></div>
62
-
63
- <div class="arrow" id="target4"></div>
64
-
65
- <div class="arrow" id="target5"></div>
66
-
67
- <div class="arrow" id="target6"></div>
68
-
69
- <div class="arrow" id="target7"></div>
70
-
71
-
72
-
73
- <script>
74
-
75
- 'use strict';
76
-
77
-
78
-
79
- const target0 = document.getElementById('target0');
55
+ <section class="circle-box">
56
+
57
+ </section>
58
+
59
+ </body>
60
+
61
+ ```
62
+
63
+ ```CSS
64
+
65
+ .circle-box{
66
+
67
+ position: relative;
68
+
69
+ width: 300px;
70
+
71
+ height: 300px;
72
+
73
+ margin: 100px auto;
74
+
75
+ background:#eee;
76
+
77
+ border-radius: 50%;
78
+
79
+ }
80
+
81
+ .item{
82
+
83
+ position: absolute;
84
+
85
+ background: #aaa;
86
+
87
+ width: 25px;
88
+
89
+ height: 25px;
90
+
91
+ text-align: center;
92
+
93
+ color: #fff;
94
+
95
+ font-weight: bold;
96
+
97
+ font-size: 25px;
98
+
99
+ }
100
+
101
+
102
+
103
+
104
+
105
+ .arrow {
106
+
107
+ display: inline-block;
108
+
109
+
110
+
111
+ /* 矢印サンプルだとrelativeだったが、円周サンプルのabsoluteに変更 */
112
+
113
+ position: absolute;
114
+
115
+ width: 4em;
116
+
117
+ height: 4em;
118
+
119
+ color: #3388dd;
120
+
121
+ font-size: 30px;
122
+
123
+ }
124
+
125
+ .arrow:before,
126
+
127
+ .arrow:after {
128
+
129
+ position: absolute;
130
+
131
+ top: 50%;
132
+
133
+ transform: translateY(-50%);
134
+
135
+ content: "";
136
+
137
+
138
+
139
+ }
140
+
141
+ .arrow:before {
142
+
143
+ right: -1em;
144
+
145
+ width: 0px;
146
+
147
+ height: 0px;
148
+
149
+
150
+
151
+ /* 矢印の三角形の底辺の長さ */
152
+
153
+ border: 1.4em solid transparent;
154
+
155
+
156
+
157
+ /* 矢印の三角形の高さ */
158
+
159
+ border-left: 0.7em solid currentColor;
160
+
161
+ }
162
+
163
+ .arrow:after {
164
+
165
+ left: 0px;
166
+
167
+
168
+
169
+ /* 矢印の長方形のタテの長さ */
170
+
171
+ width: 3em;
172
+
173
+
174
+
175
+ /* 矢印の長方形のヨコの長さ */
176
+
177
+ height: 1.8em;
178
+
179
+
180
+
181
+ background-color: currentColor;
182
+
183
+ }
184
+
185
+
186
+
187
+ /* 縦×横×斜め 8方向分のクラス */
188
+
189
+ .arrow.d_u {
190
+
191
+ transform: rotate(270deg);
192
+
193
+ }
194
+
195
+ .arrow.d_ur {
196
+
197
+ transform: rotate(315deg);
198
+
199
+ }
200
+
201
+ .arrow.d_r {
202
+
203
+ transform: rotate(0deg);
204
+
205
+ }
206
+
207
+ .arrow.d_dr {
208
+
209
+ transform: rotate(45deg);
210
+
211
+ }
212
+
213
+ .arrow.d_d {
214
+
215
+ transform: rotate(90deg);
216
+
217
+ }
218
+
219
+ .arrow.d_dl {
220
+
221
+ transform: rotate(135deg);
222
+
223
+ }
224
+
225
+ .arrow.d_l {
226
+
227
+ transform: rotate(180deg);
228
+
229
+ }
230
+
231
+ .arrow.d_ul {
232
+
233
+ transform: rotate(215deg);
234
+
235
+ }
236
+
237
+
238
+
239
+ .clicked {
240
+
241
+ /* 押されたことがわかるように矢印を赤く */
242
+
243
+ color: red;
244
+
245
+ }
246
+
247
+ ```
248
+
249
+ ```Javascript
250
+
251
+ $(function(){
252
+
253
+
254
+
255
+ //hour の　arrow を .circle-box に出力
256
+
257
+ //for( i=0; i<8; i++){
258
+
259
+ $('.circle-box').append('<div class="arrow" id="target1"></div>');
260
+
261
+ $('.circle-box').append('<div class="arrow" id="target2"></div>');
262
+
263
+ $('.circle-box').append('<div class="arrow" id="target3"></div>');
264
+
265
+ $('.circle-box').append('<div class="arrow" id="target4"></div>');
266
+
267
+ $('.circle-box').append('<div class="arrow" id="target5"></div>');
268
+
269
+ $('.circle-box').append('<div class="arrow" id="target6"></div>');
270
+
271
+ $('.circle-box').append('<div class="arrow" id="target7"></div>');
272
+
273
+ $('.circle-box').append('<div class="arrow" id="target8"></div>');
274
+
275
+ //}
276
+
277
+
80
278
 
81
279
  const target1 = document.getElementById('target1');
82
280
 
@@ -92,206 +290,132 @@
92
290
 
93
291
  const target7 = document.getElementById('target7');
94
292
 
95
-
96
-
97
- // 'd_u', // ↑
98
-
99
- // 'd_ur', // ↑→
100
-
101
- // 'd_r', // →
102
-
103
- // 'd_dr', // →↓
104
-
105
- // 'd_d', // ↓
106
-
107
- // 'd_dl', // ←↓
108
-
109
- // 'd_l', // ←
110
-
111
- // 'd_ul // ←↑
112
-
113
-
114
-
115
- target0.classList.add('d_u');
116
-
117
- target1.classList.add('d_ur');
118
-
119
- target2.classList.add('d_r');
120
-
121
- target3.classList.add('d_dr');
122
-
123
- target4.classList.add('d_d');
124
-
125
- target5.classList.add('d_dl');
126
-
127
- target6.classList.add('d_l');
128
-
129
- target7.classList.add('d_ul');
130
-
131
- </script>
293
+ const target8 = document.getElementById('target8');
294
+
295
+
296
+
297
+ target1.classList.add('d_r'); // →
298
+
299
+ target2.classList.add('d_dr'); // →↓
300
+
301
+ target3.classList.add('d_d'); // ↓
302
+
303
+ target4.classList.add('d_dl'); // ←↓
304
+
305
+ target5.classList.add('d_l'); // ←
306
+
307
+ target6.classList.add('d_ul'); // ←↑
308
+
309
+ target7.classList.add('d_u'); // ↑
310
+
311
+ target8.classList.add('d_ur'); // ↑→
312
+
313
+
314
+
315
+ //arrowの親要素の半径を計算
316
+
317
+ var r = $('.circle-box').width()/2;
318
+
319
+
320
+
321
+ //arrow要素数から角度を計算
322
+
323
+ var angle = 360/$('.arrow').length;
324
+
325
+
326
+
327
+ //arrow要素の幅,高さの2分の1を取得
328
+
329
+ var l = $('.arrow').width()/2;
330
+
331
+ var h = $('.arrow').height()/2;
332
+
333
+
334
+
335
+ //指定
336
+
337
+ $(".arrow").each(function(i, elem) {
338
+
339
+
340
+
341
+ var deg = angle * i;
342
+
343
+ //console.log(deg);
344
+
345
+
346
+
347
+ //x,y座標の取得
348
+
349
+ var x = Math.cos(deg*Math.PI/180)*r+r;
350
+
351
+ var y = Math.sin(deg*Math.PI/180)*r+r;
352
+
353
+
354
+
355
+ //円周上を中心に配置されるよう位置を指定
356
+
357
+ $(".arrow").eq(i).css("left",x-l);
358
+
359
+ $(".arrow").eq(i).css("top",y-h);
360
+
361
+
362
+
363
+ });
364
+
365
+
366
+
367
+ //hour １が先頭に来るようにする
368
+
369
+ // $(".arrow").each(function(i) {
370
+
371
+ // $(this).text(i+3);
372
+
373
+ // var a = $(this).text();
374
+
375
+ //
376
+
377
+ // if( a > 8){
378
+
379
+ // $(this).text(a - 8);
380
+
381
+ // }
382
+
383
+ // });
384
+
385
+
386
+
387
+ target1.addEventListener('click', () => {
388
+
389
+ target1.textContent = "clicked";
390
+
391
+ target1.classList.toggle('clicked');
392
+
393
+ });
394
+
395
+ // target1.classList.add('d_r'); // →
396
+
397
+ // target2.classList.add('d_dr'); // →↓
398
+
399
+ // target3.classList.add('d_d'); // ↓
400
+
401
+ // target4.classList.add('d_dl'); // ←↓
402
+
403
+ // target5.classList.add('d_l'); // ←
404
+
405
+ // target6.classList.add('d_ul'); // ←↑
406
+
407
+ // target7.classList.add('d_u'); // ↑
408
+
409
+ // target8.classList.add('d_ur'); // ↑→
410
+
411
+
412
+
413
+
414
+
415
+ });
132
416
 
133
417
  ```
134
418
 
135
- ```CSS
136
-
137
- /* before、after要素のサイズ指定にemを使用しているため、親要素のfont-sizeに連動して三角と線のサイズが変わります */
138
-
139
-
140
-
141
- /* before、after要素の背景、borderの色指定に「currentColor」を使用しているため、親要素のcolorに連動して三角と線の色が変わります */
142
-
143
-
144
-
145
-
146
-
147
- /* 矢印のサイズや色、向きの変え方 */
148
-
149
-
150
-
151
- /* arrowクラスの「font-size: 30px;」を変えるだけで矢印のサイズを変えることができます */
152
-
153
-
154
-
155
- /* arrowクラスの「color: #3388dd;」を変えるだけで矢印の色を変えることができます */
156
-
157
-
158
-
159
- /* 矢印の角度は、arrowクラスの「transform: rotate(0deg);」を変えることで変更できます */
160
-
161
- /* おおもとになる矢印として、「→」を生成 */
162
-
163
- .arrow {
164
-
165
- display: inline-block;
166
-
167
- position: relative;
168
-
169
- width: 4em;
170
-
171
- height: 4em;
172
-
173
- color: #3388dd;
174
-
175
- font-size: 30px;
176
-
177
-
178
-
179
- }
180
-
181
- .arrow:before,
182
-
183
- .arrow:after {
184
-
185
- position: absolute;
186
-
187
- top: 50%;
188
-
189
- transform: translateY(-50%);
190
-
191
- content: "";
192
-
193
-
194
-
195
- }
196
-
197
- .arrow:before {
198
-
199
- right: -1em;
200
-
201
- width: 0px;
202
-
203
- height: 0px;
204
-
205
-
206
-
207
- /* 矢印の三角形の底辺の長さ */
208
-
209
- border: 1.4em solid transparent;
210
-
211
-
212
-
213
- /* 矢印の三角形の高さ */
214
-
215
- border-left: 0.7em solid currentColor;
216
-
217
- }
218
-
219
- .arrow:after {
220
-
221
- left: 0px;
222
-
223
-
224
-
225
- /* 矢印の長方形のタテの長さ */
226
-
227
- width: 3em;
228
-
229
-
230
-
231
- /* 矢印の長方形のヨコの長さ */
232
-
233
- height: 1.5em;
234
-
235
-
236
-
237
- background-color: currentColor;
238
-
239
- }
240
-
241
-
242
-
243
- /* 縦×横×斜め 8方向分のクラス */
244
-
245
- .arrow.d_u {
246
-
247
- transform: rotate(270deg);
248
-
249
- }
250
-
251
- .arrow.d_ur {
252
-
253
- transform: rotate(315deg);
254
-
255
- }
256
-
257
- .arrow.d_r {
258
-
259
- transform: rotate(0deg);
260
-
261
- }
262
-
263
- .arrow.d_dr {
264
-
265
- transform: rotate(45deg);
266
-
267
- }
268
-
269
- .arrow.d_d {
270
-
271
- transform: rotate(90deg);
272
-
273
- }
274
-
275
- .arrow.d_dl {
276
-
277
- transform: rotate(135deg);
278
-
279
- }
280
-
281
- .arrow.d_l {
282
-
283
- transform: rotate(180deg);
284
-
285
- }
286
-
287
- .arrow.d_ul {
288
-
289
- transform: rotate(215deg);
290
-
291
- }
292
-
293
- ```
294
-
295
419
  ### 補足情報（FW/ツールのバージョンなど）
296
420
 
297
421
  chrome

1

ソースコードを追加しました。

2020/05/04 13:12

投稿

yamekodev
yamekodev

スコア17

test CHANGED
File without changes
test CHANGED
@@ -46,6 +46,252 @@
46
46
 
47
47
 
48
48
 
49
+ ### コード
50
+
51
+ ```HTML
52
+
53
+ <body>
54
+
55
+ <div class="arrow" id="target0"></div>
56
+
57
+ <div class="arrow" id="target1"></div>
58
+
59
+ <div class="arrow" id="target2"></div>
60
+
61
+ <div class="arrow" id="target3"></div>
62
+
63
+ <div class="arrow" id="target4"></div>
64
+
65
+ <div class="arrow" id="target5"></div>
66
+
67
+ <div class="arrow" id="target6"></div>
68
+
69
+ <div class="arrow" id="target7"></div>
70
+
71
+
72
+
73
+ <script>
74
+
75
+ 'use strict';
76
+
77
+
78
+
79
+ const target0 = document.getElementById('target0');
80
+
81
+ const target1 = document.getElementById('target1');
82
+
83
+ const target2 = document.getElementById('target2');
84
+
85
+ const target3 = document.getElementById('target3');
86
+
87
+ const target4 = document.getElementById('target4');
88
+
89
+ const target5 = document.getElementById('target5');
90
+
91
+ const target6 = document.getElementById('target6');
92
+
93
+ const target7 = document.getElementById('target7');
94
+
95
+
96
+
97
+ // 'd_u', // ↑
98
+
99
+ // 'd_ur', // ↑→
100
+
101
+ // 'd_r', // →
102
+
103
+ // 'd_dr', // →↓
104
+
105
+ // 'd_d', // ↓
106
+
107
+ // 'd_dl', // ←↓
108
+
109
+ // 'd_l', // ←
110
+
111
+ // 'd_ul // ←↑
112
+
113
+
114
+
115
+ target0.classList.add('d_u');
116
+
117
+ target1.classList.add('d_ur');
118
+
119
+ target2.classList.add('d_r');
120
+
121
+ target3.classList.add('d_dr');
122
+
123
+ target4.classList.add('d_d');
124
+
125
+ target5.classList.add('d_dl');
126
+
127
+ target6.classList.add('d_l');
128
+
129
+ target7.classList.add('d_ul');
130
+
131
+ </script>
132
+
133
+ ```
134
+
135
+ ```CSS
136
+
137
+ /* before、after要素のサイズ指定にemを使用しているため、親要素のfont-sizeに連動して三角と線のサイズが変わります */
138
+
139
+
140
+
141
+ /* before、after要素の背景、borderの色指定に「currentColor」を使用しているため、親要素のcolorに連動して三角と線の色が変わります */
142
+
143
+
144
+
145
+
146
+
147
+ /* 矢印のサイズや色、向きの変え方 */
148
+
149
+
150
+
151
+ /* arrowクラスの「font-size: 30px;」を変えるだけで矢印のサイズを変えることができます */
152
+
153
+
154
+
155
+ /* arrowクラスの「color: #3388dd;」を変えるだけで矢印の色を変えることができます */
156
+
157
+
158
+
159
+ /* 矢印の角度は、arrowクラスの「transform: rotate(0deg);」を変えることで変更できます */
160
+
161
+ /* おおもとになる矢印として、「→」を生成 */
162
+
163
+ .arrow {
164
+
165
+ display: inline-block;
166
+
167
+ position: relative;
168
+
169
+ width: 4em;
170
+
171
+ height: 4em;
172
+
173
+ color: #3388dd;
174
+
175
+ font-size: 30px;
176
+
177
+
178
+
179
+ }
180
+
181
+ .arrow:before,
182
+
183
+ .arrow:after {
184
+
185
+ position: absolute;
186
+
187
+ top: 50%;
188
+
189
+ transform: translateY(-50%);
190
+
191
+ content: "";
192
+
193
+
194
+
195
+ }
196
+
197
+ .arrow:before {
198
+
199
+ right: -1em;
200
+
201
+ width: 0px;
202
+
203
+ height: 0px;
204
+
205
+
206
+
207
+ /* 矢印の三角形の底辺の長さ */
208
+
209
+ border: 1.4em solid transparent;
210
+
211
+
212
+
213
+ /* 矢印の三角形の高さ */
214
+
215
+ border-left: 0.7em solid currentColor;
216
+
217
+ }
218
+
219
+ .arrow:after {
220
+
221
+ left: 0px;
222
+
223
+
224
+
225
+ /* 矢印の長方形のタテの長さ */
226
+
227
+ width: 3em;
228
+
229
+
230
+
231
+ /* 矢印の長方形のヨコの長さ */
232
+
233
+ height: 1.5em;
234
+
235
+
236
+
237
+ background-color: currentColor;
238
+
239
+ }
240
+
241
+
242
+
243
+ /* 縦×横×斜め 8方向分のクラス */
244
+
245
+ .arrow.d_u {
246
+
247
+ transform: rotate(270deg);
248
+
249
+ }
250
+
251
+ .arrow.d_ur {
252
+
253
+ transform: rotate(315deg);
254
+
255
+ }
256
+
257
+ .arrow.d_r {
258
+
259
+ transform: rotate(0deg);
260
+
261
+ }
262
+
263
+ .arrow.d_dr {
264
+
265
+ transform: rotate(45deg);
266
+
267
+ }
268
+
269
+ .arrow.d_d {
270
+
271
+ transform: rotate(90deg);
272
+
273
+ }
274
+
275
+ .arrow.d_dl {
276
+
277
+ transform: rotate(135deg);
278
+
279
+ }
280
+
281
+ .arrow.d_l {
282
+
283
+ transform: rotate(180deg);
284
+
285
+ }
286
+
287
+ .arrow.d_ul {
288
+
289
+ transform: rotate(215deg);
290
+
291
+ }
292
+
293
+ ```
294
+
49
295
  ### 補足情報（FW/ツールのバージョンなど）
50
296
 
51
297
  chrome