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

編集履歴

質問編集履歴

5

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

2020/05/05 01:33

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -8,11 +8,11 @@
8
8
  それぞれの実現方法、ライブラリなどについて何かご存知でしたら、教えていただけないでしょうか？
9
9
 
10
10
  ### 発生している問題・エラーメッセージ
11
- 以下2点の実現方法が見つけられません。
11
+ 以下の実現方法が見つけられません。
12
12
  ・矢印を円周上に配置
13
13
  ・矢印の領域**だけ**をボタンとして認識
14
+ ・左斜め上矢印（コード上の変数名target6）の表示位置がズレている
14
15
 
15
-
16
16
  ### 試したこと
17
17
  下記方法で、８方向の矢印をCSSで作ることはできました。
18
18
  https://migi.me/css/direction-size-flexible-arrow/
@@ -32,7 +32,7 @@
32
32
  https://jsfiddle.net/yamekodev/a3koyf1z/
33
33
  ```HTML
34
34
  <head>
35
- <script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
35
+ <script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.min.js'>
36
36
  </head>
37
37
  <body>
38
38
  <section class="circle-box">

4

コードにjsfiddleを追加

2020/05/05 01:33

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -28,7 +28,12 @@
28
28
 
29
29
  ### コード
30
30
  ※右矢印「＝＞」をクリックすると反応するようにイベントリスナーを設定しています。
31
+ コードと実行結果
32
+ https://jsfiddle.net/yamekodev/a3koyf1z/
31
33
  ```HTML
34
+ <head>
35
+ <script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
36
+ </head>
32
37
  <body>
33
38
  <section class="circle-box">
34
39
  </section>

3

試したことを追記

2020/05/05 01:29

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -17,12 +17,17 @@
17
17
  下記方法で、８方向の矢印をCSSで作ることはできました。
18
18
  https://migi.me/css/direction-size-flexible-arrow/
19
19
 
20
+ 下記を参考にして円周上に８方向の外向き矢印を配置できました。
21
+ 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
22
+
23
+
20
24
  また下記レッスンをやることで、単純な四角形、円の領域のみをボタンとして認識させることはできました。
21
25
  https://dotinstall.com/lessons/basic_javascript_v4
22
26
 
23
- ただ、上記を組み合わせて、表示した矢印を押したイベントを取ろうとしても、矢印以外の部分を押してもイベントが発生してしまったりします。
27
+ 上記ノウハウを組み合わせて、矢印を表示しているdivにイベントリスナーclickを設定しましたが、矢印の余白をクリックしても反応してしまいます。
24
28
 
25
29
  ### コード
30
+ ※右矢印「＝＞」をクリックすると反応するようにイベントリスナーを設定しています。
26
31
  ```HTML
27
32
  <body>
28
33
  <section class="circle-box">

2

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

2020/05/04 13:29

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -25,68 +25,40 @@
25
25
  ### コード
26
26
  ```HTML
27
27
  <body>
28
- <div class="arrow" id="target0"></div>
28
+ <section class="circle-box">
29
- <div class="arrow" id="target1"></div>
30
- <div class="arrow" id="target2"></div>
31
- <div class="arrow" id="target3"></div>
32
- <div class="arrow" id="target4"></div>
33
- <div class="arrow" id="target5"></div>
34
- <div class="arrow" id="target6"></div>
35
- <div class="arrow" id="target7"></div>
36
-
37
- <script>
38
- 'use strict';
39
-
40
- const target0 = document.getElementById('target0');
41
- const target1 = document.getElementById('target1');
42
- const target2 = document.getElementById('target2');
43
- const target3 = document.getElementById('target3');
44
- const target4 = document.getElementById('target4');
45
- const target5 = document.getElementById('target5');
46
- const target6 = document.getElementById('target6');
47
- const target7 = document.getElementById('target7');
48
-
49
- // 'd_u', // ↑
50
- // 'd_ur', // ↑→
51
- // 'd_r', // →
52
- // 'd_dr', // →↓
53
- // 'd_d', // ↓
54
- // 'd_dl', // ←↓
55
- // 'd_l', // ←
56
- // 'd_ul // ←↑
57
-
58
- target0.classList.add('d_u');
59
- target1.classList.add('d_ur');
60
- target2.classList.add('d_r');
61
- target3.classList.add('d_dr');
62
- target4.classList.add('d_d');
63
- target5.classList.add('d_dl');
64
- target6.classList.add('d_l');
65
- target7.classList.add('d_ul');
66
- </script>
29
+ </section>
30
+ </body>
67
31
  ```
68
32
  ```CSS
33
+ .circle-box{
34
+ position: relative;
35
+ width: 300px;
36
+ height: 300px;
37
+ margin: 100px auto;
38
+ background:#eee;
39
+ border-radius: 50%;
40
+ }
41
+ .item{
42
+ position: absolute;
43
+ background: #aaa;
44
+ width: 25px;
45
+ height: 25px;
46
+ text-align: center;
47
+ color: #fff;
48
+ font-weight: bold;
69
- /* before、after要素のサイズ指定にemを使用しているため、親要素のfont-sizeに連動して三角と線のサイズが変わります */
49
+ font-size: 25px;
50
+ }
70
51
 
71
- /* before、after要素の背景、borderの色指定に「currentColor」を使用しているため、親要素のcolorに連動して三角と線の色が変わります */
72
52
 
73
-
74
- /* 矢印のサイズや色、向きの変え方 */
75
-
76
- /* arrowクラスの「font-size: 30px;」を変えるだけで矢印のサイズを変えることができます */
77
-
78
- /* arrowクラスの「color: #3388dd;」を変えるだけで矢印の色を変えることができます */
79
-
80
- /* 矢印の角度は、arrowクラスの「transform: rotate(0deg);」を変えることで変更できます */
81
- /* おおもとになる矢印として、「→」を生成 */
82
53
  .arrow {
83
54
  display: inline-block;
55
+
56
+ /* 矢印サンプルだとrelativeだったが、円周サンプルのabsoluteに変更 */
84
- position: relative;
57
+ position: absolute;
85
58
  width: 4em;
86
59
  height: 4em;
87
60
  color: #3388dd;
88
61
  font-size: 30px;
89
-
90
62
  }
91
63
  .arrow:before,
92
64
  .arrow:after {
@@ -114,7 +86,7 @@
114
86
  width: 3em;
115
87
 
116
88
  /* 矢印の長方形のヨコの長さ */
117
- height: 1.5em;
89
+ height: 1.8em;
118
90
 
119
91
  background-color: currentColor;
120
92
  }
@@ -144,7 +116,97 @@
144
116
  .arrow.d_ul {
145
117
  transform: rotate(215deg);
146
118
  }
119
+
120
+ .clicked {
121
+ /* 押されたことがわかるように矢印を赤く */
122
+ color: red;
123
+ }
147
124
  ```
125
+ ```Javascript
126
+ $(function(){
127
+
128
+ //hour の　arrow を .circle-box に出力
129
+ //for( i=0; i<8; i++){
130
+ $('.circle-box').append('<div class="arrow" id="target1"></div>');
131
+ $('.circle-box').append('<div class="arrow" id="target2"></div>');
132
+ $('.circle-box').append('<div class="arrow" id="target3"></div>');
133
+ $('.circle-box').append('<div class="arrow" id="target4"></div>');
134
+ $('.circle-box').append('<div class="arrow" id="target5"></div>');
135
+ $('.circle-box').append('<div class="arrow" id="target6"></div>');
136
+ $('.circle-box').append('<div class="arrow" id="target7"></div>');
137
+ $('.circle-box').append('<div class="arrow" id="target8"></div>');
138
+ //}
139
+
140
+ const target1 = document.getElementById('target1');
141
+ const target2 = document.getElementById('target2');
142
+ const target3 = document.getElementById('target3');
143
+ const target4 = document.getElementById('target4');
144
+ const target5 = document.getElementById('target5');
145
+ const target6 = document.getElementById('target6');
146
+ const target7 = document.getElementById('target7');
147
+ const target8 = document.getElementById('target8');
148
+
149
+ target1.classList.add('d_r'); // →
150
+ target2.classList.add('d_dr'); // →↓
151
+ target3.classList.add('d_d'); // ↓
152
+ target4.classList.add('d_dl'); // ←↓
153
+ target5.classList.add('d_l'); // ←
154
+ target6.classList.add('d_ul'); // ←↑
155
+ target7.classList.add('d_u'); // ↑
156
+ target8.classList.add('d_ur'); // ↑→
157
+
158
+ //arrowの親要素の半径を計算
159
+ var r = $('.circle-box').width()/2;
160
+
161
+ //arrow要素数から角度を計算
162
+ var angle = 360/$('.arrow').length;
163
+
164
+ //arrow要素の幅,高さの2分の1を取得
165
+ var l = $('.arrow').width()/2;
166
+ var h = $('.arrow').height()/2;
167
+
168
+ //指定
169
+ $(".arrow").each(function(i, elem) {
170
+
171
+ var deg = angle * i;
172
+ //console.log(deg);
173
+
174
+ //x,y座標の取得
175
+ var x = Math.cos(deg*Math.PI/180)*r+r;
176
+ var y = Math.sin(deg*Math.PI/180)*r+r;
177
+
178
+ //円周上を中心に配置されるよう位置を指定
179
+ $(".arrow").eq(i).css("left",x-l);
180
+ $(".arrow").eq(i).css("top",y-h);
181
+
182
+ });
183
+
184
+ //hour １が先頭に来るようにする
185
+ // $(".arrow").each(function(i) {
186
+ // $(this).text(i+3);
187
+ // var a = $(this).text();
188
+ //
189
+ // if( a > 8){
190
+ // $(this).text(a - 8);
191
+ // }
192
+ // });
193
+
194
+ target1.addEventListener('click', () => {
195
+ target1.textContent = "clicked";
196
+ target1.classList.toggle('clicked');
197
+ });
198
+ // target1.classList.add('d_r'); // →
199
+ // target2.classList.add('d_dr'); // →↓
200
+ // target3.classList.add('d_d'); // ↓
201
+ // target4.classList.add('d_dl'); // ←↓
202
+ // target5.classList.add('d_l'); // ←
203
+ // target6.classList.add('d_ul'); // ←↑
204
+ // target7.classList.add('d_u'); // ↑
205
+ // target8.classList.add('d_ur'); // ↑→
206
+
207
+
208
+ });
209
+ ```
148
210
  ### 補足情報（FW/ツールのバージョンなど）
149
211
  chrome
150
212
  ここにより詳細な情報を記載してください。

1

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

2020/05/04 13:12

投稿

yamekodev
yamekodev

スコア17

title CHANGED
File without changes
body CHANGED
@@ -22,6 +22,129 @@
22
22
 
23
23
  ただ、上記を組み合わせて、表示した矢印を押したイベントを取ろうとしても、矢印以外の部分を押してもイベントが発生してしまったりします。
24
24
 
25
+ ### コード
26
+ ```HTML
27
+ <body>
28
+ <div class="arrow" id="target0"></div>
29
+ <div class="arrow" id="target1"></div>
30
+ <div class="arrow" id="target2"></div>
31
+ <div class="arrow" id="target3"></div>
32
+ <div class="arrow" id="target4"></div>
33
+ <div class="arrow" id="target5"></div>
34
+ <div class="arrow" id="target6"></div>
35
+ <div class="arrow" id="target7"></div>
36
+
37
+ <script>
38
+ 'use strict';
39
+
40
+ const target0 = document.getElementById('target0');
41
+ const target1 = document.getElementById('target1');
42
+ const target2 = document.getElementById('target2');
43
+ const target3 = document.getElementById('target3');
44
+ const target4 = document.getElementById('target4');
45
+ const target5 = document.getElementById('target5');
46
+ const target6 = document.getElementById('target6');
47
+ const target7 = document.getElementById('target7');
48
+
49
+ // 'd_u', // ↑
50
+ // 'd_ur', // ↑→
51
+ // 'd_r', // →
52
+ // 'd_dr', // →↓
53
+ // 'd_d', // ↓
54
+ // 'd_dl', // ←↓
55
+ // 'd_l', // ←
56
+ // 'd_ul // ←↑
57
+
58
+ target0.classList.add('d_u');
59
+ target1.classList.add('d_ur');
60
+ target2.classList.add('d_r');
61
+ target3.classList.add('d_dr');
62
+ target4.classList.add('d_d');
63
+ target5.classList.add('d_dl');
64
+ target6.classList.add('d_l');
65
+ target7.classList.add('d_ul');
66
+ </script>
67
+ ```
68
+ ```CSS
69
+ /* before、after要素のサイズ指定にemを使用しているため、親要素のfont-sizeに連動して三角と線のサイズが変わります */
70
+
71
+ /* before、after要素の背景、borderの色指定に「currentColor」を使用しているため、親要素のcolorに連動して三角と線の色が変わります */
72
+
73
+
74
+ /* 矢印のサイズや色、向きの変え方 */
75
+
76
+ /* arrowクラスの「font-size: 30px;」を変えるだけで矢印のサイズを変えることができます */
77
+
78
+ /* arrowクラスの「color: #3388dd;」を変えるだけで矢印の色を変えることができます */
79
+
80
+ /* 矢印の角度は、arrowクラスの「transform: rotate(0deg);」を変えることで変更できます */
81
+ /* おおもとになる矢印として、「→」を生成 */
82
+ .arrow {
83
+ display: inline-block;
84
+ position: relative;
85
+ width: 4em;
86
+ height: 4em;
87
+ color: #3388dd;
88
+ font-size: 30px;
89
+
90
+ }
91
+ .arrow:before,
92
+ .arrow:after {
93
+ position: absolute;
94
+ top: 50%;
95
+ transform: translateY(-50%);
96
+ content: "";
97
+
98
+ }
99
+ .arrow:before {
100
+ right: -1em;
101
+ width: 0px;
102
+ height: 0px;
103
+
104
+ /* 矢印の三角形の底辺の長さ */
105
+ border: 1.4em solid transparent;
106
+
107
+ /* 矢印の三角形の高さ */
108
+ border-left: 0.7em solid currentColor;
109
+ }
110
+ .arrow:after {
111
+ left: 0px;
112
+
113
+ /* 矢印の長方形のタテの長さ */
114
+ width: 3em;
115
+
116
+ /* 矢印の長方形のヨコの長さ */
117
+ height: 1.5em;
118
+
119
+ background-color: currentColor;
120
+ }
121
+
122
+ /* 縦×横×斜め 8方向分のクラス */
123
+ .arrow.d_u {
124
+ transform: rotate(270deg);
125
+ }
126
+ .arrow.d_ur {
127
+ transform: rotate(315deg);
128
+ }
129
+ .arrow.d_r {
130
+ transform: rotate(0deg);
131
+ }
132
+ .arrow.d_dr {
133
+ transform: rotate(45deg);
134
+ }
135
+ .arrow.d_d {
136
+ transform: rotate(90deg);
137
+ }
138
+ .arrow.d_dl {
139
+ transform: rotate(135deg);
140
+ }
141
+ .arrow.d_l {
142
+ transform: rotate(180deg);
143
+ }
144
+ .arrow.d_ul {
145
+ transform: rotate(215deg);
146
+ }
147
+ ```
25
148
  ### 補足情報（FW/ツールのバージョンなど）
26
149
  chrome
27
150
  ここにより詳細な情報を記載してください。