動的なwebページを作成する

Question

web上で画像のようにクリックすると選択されたことがわかるようにしたいのですが実現するには何が一番簡単だと思いますか？![]

Comments

[yoshinavi]

質問者さんが自ら調べて、試して、そのうえで問題になっている部分はどこでしょうか？
それが無いと、「丸投げ」や「作業依頼」と捉えられて低評価される可能性があります。

[156fllow]

大変失礼致しました。私が思いついた方法としては画像を使うのみでありプラグイン等、他の方法の知恵をお貸し頂けないかと思った次第です。

[yoshinavi]

＞私が思いついた方法としては画像を使うのみ

→ 画像をどのようなコードで使うのでしょうか。それを提示されると良いかと思います。
不備があっても構いません。
何もなく「答えくれ」より「こう考えたけど、上手くいかない」と自分で考えたコードを提示されたほうが、回答はつきやすいです。

質問は編集出来ますので、このコメント欄ではなく、質問本文にコード等を追加されると良いです。

[m.ts10806]

そもそも論なので回答ではなくこちらに書きますが「動的」とは言わないのでは。

[yasutomi]

完成されたコード付きのものがベストアンサーになったということは
最初から「丸投げ」目的だったのですね。
残念です。

[156fllow]

私が求めていたものに近かったのでベストアンサーにさせて頂きました。ベストアンサーにならなかったからといってわざわざ文句を言うとは哀れですね。

[m.ts10806]

https://teratail.com/help/avoid-asking
>何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。
問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。
まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。

さて、この質問内容を読んで「取り組んだ作業」「調べたこと」「試したこと」が伝わるでしょうか。
yasutomiさんの指摘はベストアンサーにならなかったことが動機ではないですよ。
「実現するには何が一番簡単か？」という問いに対しては「手段や手法のみが期待されている」と誰もが感じます。それを「実際に動くコードが簡単だ」と感じるのはあなただけでしょう。
あなたがベストアンサーに選んだ回答のコードはあなたにとって簡単に理解できるものですか？

[156fllow]

このサイトの運営方針に反した質問をした点については反省致します。私のレベルとしてはコードは読めばある程度理解できます。それなので手法の名称だけ教えて頂ければ後は自分で実現します。なぜ手段や手法のみを期待するのが行けないのでしょうか。

[m.ts10806]

なぜ手段や手法のみを期待して「教えて頂ければ後は自分で実現する」と仰っている人が選択したベストアンサーが手段や手法のみのアドバイスではなくそのまま動くコードがついた回答なのでしょうか　
というところが疑問視されています。

※yambejpさんの回答を批判する意図はないです

[156fllow]

その点につきましてはもしyambejpさんが文章でsvgタグを使う方法もあると仰って頂いたとしてもベストアンサーにしました。このタグは初めて見たので、教えて頂いた功績でベストアンサーにしました。

[m.ts10806]

んー揚げ足をとりたいわけではないので誤解しないでもらいたいのですが、
回答の中に「svgタグを使う方法もある」というのはどこにもなく、具体的な説明もなくコードの中に置かれているだけですし、「私が求めていたものに近かった」と今仰ったことと矛盾が発生していませんか？
ひとまず、「わざわざ文句を言うとは哀れだ」というのはアドバイスをしてくれた回答者に非常に失礼な発言ですし、そのあたりをきちんと弁解し、回答にそれぞれコメントをつけられては如何でしょうか。

※私も「ラジオボタン」が最初に浮かび、既にその旨の回答がついていたため高評価することでこの質問には参加しておりますので完全な横やりというわけではありません

[156fllow]

一つ目
svgタグの方法というか正しくいうとsvgタグの存在を教えて頂いたというのが正しい表現です。そしてそのタグが私の求めていたものに近かったということです。
二つ目
この点に関しては回答側にも落ち度がある思っているので謝罪はしませんが他の表現があったにではないかと反省致します。今から回答一つ一つに返信をしていきたいと思います。
的確な指摘をありがとうございました。

[m.ts10806]

いえいえ。yasutomiさんも皮肉っぽい書き方をされているところもありますが、元々「やってほしいことだけを記載した丸投げの質問」という指摘がこの質問につけられていることも加味すると、個人的な文句を言いたいわけではないというのは分かるとは思います。

Answer 1

選択されたことがわかるようにしたいのですが実現するには何が一番簡単

ラジオボタン。

【<input type="radio"> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/radio

Comments

[156fllow]

リファレンスの掲載までして頂きありがとうございました。

Answer 2

一番簡単なのは確かにラジオボタンとlabelタグの組み合わせなのですが
iOSだと一瞬小さな丸のようなものが表示されるので
JavaScriptでの実装をオススメします。

addEventListenerでclickを指定して
classListでCSSクラスを追加するだけなので
JavaScriptでのやり方も簡単です。

Answer 3

見た目だけこだわっても駄目だからね。
世の中には WAI-ARIA というものがあってだね・・・
（ここまで回答者が誰も触れてないという）

ラジオボタン以外で構成する場合は、WAI-ARIA の利用を薦めます。
「見た目だけで実現できれば良い！」を薦める回答者は、考えを改めるべきだ。
世の中には視覚障害者も情報を得ようと努力しているのだし、そのためのにあるのが
WAI-ARIA だっ！

さぁ～評価を下げたければ下げればいいさっ！
字が見える奴らが盲目とは。

Comments

[yoshinavi]

ここは回答欄です。
回答ならばそのコードまたは、具体例を提示されると良いかと思います。

[退会済みユーザー]

他の回答者にも同じこと（コード・具体例が提示されていない）と言っておくれ。（質問者にも）
なぜ俺だけに？意味がわからん。それとこれ以上関わらないでくれ。

[156fllow]

WAIARIAの存在自体知りませんでした。今後調べてみたいと思います。回答ありがとうございました。

Answer 4

既に回答に出てるラジオボタンとlabelタグの組み合わせで実現可能だと思います

Comments

[156fllow]

回答ありがとうございました。やはりこの組み合わせが定番ですね。

Answer 5

ラジオボタンで実装するのが良いかと思います。

Comments

[156fllow]

一番最初に思い着く方法なので簡単にできるので良いですね。回答ありがとうございました。

Answer 6

○△×を排他的に選択したいという命題ならすでに回答があるとおり
ラジオボタンでしょうが、別視点で文字をクリックしたら
選択されている風に見せたいということであればこんな感じ

<style>
.hoge{
display:inline-block;
}
.hoge text{
  font-weight:bold;
  font-size:1em;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.hoge'),function(x){
    x.addEventListener('click',function(e){
      var t=x.querySelector('text');
      t.setAttribute("fill",(t.getAttribute("fill")=="black")?"white":"black");
      var c=x.querySelector('circle');
      c.setAttribute("fill-opacity",(c.getAttribute("fill-opacity")==1)?0:1);
    });
  });
});
</script>
<svg width="26" height="26" class="hoge"> 
<circle cx="13" cy="13" r="12" fill="lime" fill-opacity="0" />
<text x="5"  y="18" fill="black" >丸</text>
</svg>
<svg width="26" height="26" class="hoge"> 
<circle cx="13" cy="13" r="12" fill="lime" fill-opacity="0" />
<text x="5"  y="18" fill="black" >三</text>
</svg>
<svg width="26" height="26" class="hoge"> 
<circle cx="13" cy="13" r="12" fill="lime" fill-opacity="0" />
<text x="5"  y="18" fill="black" >罰</text>
</svg>

Comments

[156fllow]

このソースコードの中にあるsvgタグはとても有益な情報でした。回答ありがとうございました。

Answer 7

自分だったらラジオボタンで実装しちゃいます。

Comments

[156fllow]

回答ありがとうございました。今後は質問の仕方を工夫するようにします。