質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

1604閲覧

HTML CSS Javascriptで、円周上に8方向の矢印ボタンを作りたい

yamekodev

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2020/05/04 10:41

編集2020/05/05 01:33

前提・実現したいこと

HTML CSS Javascriptで、
・円周上に、外向きの八方向の矢印ボタンを配置
・矢印ボタンを押したイベントを取得
したいと考えております。

それぞれの実現方法、ライブラリなどについて何かご存知でしたら、教えていただけないでしょうか?

発生している問題・エラーメッセージ

以下の実現方法が見つけられません。
・矢印を円周上に配置
・矢印の領域だけをボタンとして認識
・左斜め上矢印(コード上の変数名target6)の表示位置がズレている

試したこと

下記方法で、8方向の矢印をCSSで作ることはできました。
https://migi.me/css/direction-size-flexible-arrow/

下記を参考にして円周上に8方向の外向き矢印を配置できました。
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

また下記レッスンをやることで、単純な四角形、円の領域のみをボタンとして認識させることはできました。
https://dotinstall.com/lessons/basic_javascript_v4

上記ノウハウを組み合わせて、矢印を表示しているdivにイベントリスナーclickを設定しましたが、矢印の余白をクリックしても反応してしまいます。

コード

※右矢印「=>」をクリックすると反応するようにイベントリスナーを設定しています。
コードと実行結果
https://jsfiddle.net/yamekodev/a3koyf1z/

HTML

1<head> 2<script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.min.js'> 3</head> 4 <body> 5 <section class="circle-box"> 6 </section> 7 </body>

CSS

1 .circle-box{ 2 position: relative; 3 width: 300px; 4 height: 300px; 5 margin: 100px auto; 6 background:#eee; 7 border-radius: 50%; 8 } 9 .item{ 10 position: absolute; 11 background: #aaa; 12 width: 25px; 13 height: 25px; 14 text-align: center; 15 color: #fff; 16 font-weight: bold; 17 font-size: 25px; 18 } 19 20 21.arrow { 22 display: inline-block; 23 24 /* 矢印サンプルだとrelativeだったが、円周サンプルのabsoluteに変更 */ 25 position: absolute; 26 width: 4em; 27 height: 4em; 28 color: #3388dd; 29 font-size: 30px; 30} 31.arrow:before, 32.arrow:after { 33 position: absolute; 34 top: 50%; 35 transform: translateY(-50%); 36 content: ""; 37 38} 39.arrow:before { 40 right: -1em; 41 width: 0px; 42 height: 0px; 43 44 /* 矢印の三角形の底辺の長さ */ 45 border: 1.4em solid transparent; 46 47 /* 矢印の三角形の高さ */ 48 border-left: 0.7em solid currentColor; 49} 50.arrow:after { 51 left: 0px; 52 53 /* 矢印の長方形のタテの長さ */ 54 width: 3em; 55 56 /* 矢印の長方形のヨコの長さ */ 57 height: 1.8em; 58 59 background-color: currentColor; 60} 61 62/* 縦×横×斜め 8方向分のクラス */ 63.arrow.d_u { 64 transform: rotate(270deg); 65} 66.arrow.d_ur { 67 transform: rotate(315deg); 68} 69.arrow.d_r { 70 transform: rotate(0deg); 71} 72.arrow.d_dr { 73 transform: rotate(45deg); 74} 75.arrow.d_d { 76 transform: rotate(90deg); 77} 78.arrow.d_dl { 79 transform: rotate(135deg); 80} 81.arrow.d_l { 82 transform: rotate(180deg); 83} 84.arrow.d_ul { 85 transform: rotate(215deg); 86} 87 88.clicked { 89 /* 押されたことがわかるように矢印を赤く */ 90 color: red; 91}

Javascript

1$(function(){ 2 3 //hour の arrow を .circle-box に出力 4 //for( i=0; i<8; i++){ 5 $('.circle-box').append('<div class="arrow" id="target1"></div>'); 6 $('.circle-box').append('<div class="arrow" id="target2"></div>'); 7 $('.circle-box').append('<div class="arrow" id="target3"></div>'); 8 $('.circle-box').append('<div class="arrow" id="target4"></div>'); 9 $('.circle-box').append('<div class="arrow" id="target5"></div>'); 10 $('.circle-box').append('<div class="arrow" id="target6"></div>'); 11 $('.circle-box').append('<div class="arrow" id="target7"></div>'); 12 $('.circle-box').append('<div class="arrow" id="target8"></div>'); 13 //} 14 15 const target1 = document.getElementById('target1'); 16 const target2 = document.getElementById('target2'); 17 const target3 = document.getElementById('target3'); 18 const target4 = document.getElementById('target4'); 19 const target5 = document.getElementById('target5'); 20 const target6 = document.getElementById('target6'); 21 const target7 = document.getElementById('target7'); 22 const target8 = document.getElementById('target8'); 23 24 target1.classList.add('d_r'); // → 25 target2.classList.add('d_dr'); // →↓ 26 target3.classList.add('d_d'); // ↓ 27 target4.classList.add('d_dl'); // ←↓ 28 target5.classList.add('d_l'); // ← 29 target6.classList.add('d_ul'); // ←↑ 30 target7.classList.add('d_u'); // ↑ 31 target8.classList.add('d_ur'); // ↑→ 32 33 //arrowの親要素の半径を計算 34 var r = $('.circle-box').width()/2; 35 36 //arrow要素数から角度を計算 37 var angle = 360/$('.arrow').length; 38 39 //arrow要素の幅,高さの2分の1を取得 40 var l = $('.arrow').width()/2; 41 var h = $('.arrow').height()/2; 42 43 //指定 44 $(".arrow").each(function(i, elem) { 45 46 var deg = angle * i; 47 //console.log(deg); 48 49 //x,y座標の取得 50 var x = Math.cos(deg*Math.PI/180)*r+r; 51 var y = Math.sin(deg*Math.PI/180)*r+r; 52 53 //円周上を中心に配置されるよう位置を指定 54 $(".arrow").eq(i).css("left",x-l); 55 $(".arrow").eq(i).css("top",y-h); 56 57 }); 58 59 //hour 1が先頭に来るようにする 60// $(".arrow").each(function(i) { 61// $(this).text(i+3); 62// var a = $(this).text(); 63// 64// if( a > 8){ 65// $(this).text(a - 8); 66// } 67// }); 68 69 target1.addEventListener('click', () => { 70 target1.textContent = "clicked"; 71 target1.classList.toggle('clicked'); 72 }); 73// target1.classList.add('d_r'); // → 74// target2.classList.add('d_dr'); // →↓ 75// target3.classList.add('d_d'); // ↓ 76// target4.classList.add('d_dl'); // ←↓ 77// target5.classList.add('d_l'); // ← 78// target6.classList.add('d_ul'); // ←↑ 79// target7.classList.add('d_u'); // ↑ 80// target8.classList.add('d_ur'); // ↑→ 81 82 83});

補足情報(FW/ツールのバージョンなど)

chrome
ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/05/04 10:49

(質問文は編集できます)書かれている状況が再現するコード(HTML/CSS/JavaScript)を質問文に追記されたほうが回答を得やすいと思います。
yamekodev

2020/05/04 11:01

ご指摘ありがとうございます。ソースコードを追記しました。
kei344

2020/05/04 12:35 編集

https://jsfiddle.net/jks8a75g/ 提示のコードについて、クリックイベントについても設定がないので、どこについて言っているかがわかりません。(修正:円形については質問文を読めていませんでした)
yamekodev

2020/05/04 13:32

更新したソースコードで、右矢印をクリックしたときにイベントを追加しました。 jsfiddleに入力してURLをお伝えしようと思ったのですが、実行しても矢印が表示されませんでした(ローカルだと出ます)。 申し訳ありません。
guest

回答1

0

ベストアンサー

円形に配置するのは

https://qiita.com/hirokishirai/items/938c4341b0647766d8dc

こんなのが参考になりそうです。

div要素にonclickイベントを設定したら、divの形の部分だけ有効になりませんか?

投稿2020/05/04 11:42

okina

総合スコア471

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamekodev
okina

2020/05/04 16:45

矢印の形になっていません、、、
yamekodev

2020/05/05 01:34 編集

申し訳ありません、jqueryが必要でした。 https://jsfiddle.net/yamekodev/a3koyf1z/ jsfiddle上でも動作確認できたのでurlをご連絡します。 右矢印を押すとイベント発生します。 ただ、右矢印が表示されている一定マスの範囲を押してもイベント発生してしまいます。
okina

2020/05/05 07:39

あまりいい案が思い付かず、、、 https://jsfiddle.net/x5vfzwd0/ 例えばこれだとかなり近くはなりますが、矢印の先の三角形の部分はやはり周囲もクリックが有効になってしまいます。 調べてみるので少し時間をください。
okina

2020/05/05 07:48

https://jsfiddle.net/tq4fv5sc/ clip-pathで切り抜く方法で実現しました。結構めんどくさいですが、arrow1が棒部分、arrow2が三角形部分になっていますので、サイズはそれで調整してください。
yamekodev

2020/05/07 11:09

お礼が遅くなり申し訳ありません。 大変助かりました。 今回はありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問