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

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

ただいまの
回答率

90.48%

  • PHP

    24451questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20863questions

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

  • HTML

    11803questions

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

  • CSS

    7728questions

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

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

解決済

回答 7

投稿

  • 評価
  • クリップ 0
  • VIEW 413

156fllow

score 2

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/06/13 10:28

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

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

    キャンセル

  • 156fllow

    2019/06/13 10:35

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

    キャンセル

  • mts10806

    2019/06/13 10:39

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

    キャンセル

回答 7

+5

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

ラジオボタン。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/13 10:55

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

    キャンセル

+3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/13 10:54

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

    キャンセル

checkベストアンサー

0

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

<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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/13 10:36

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/13 10:50

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/13 10:42

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

    キャンセル

-3

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/07 18:24

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

    キャンセル

  • 2019/06/07 18:39

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

    キャンセル

  • 2019/06/13 10:44

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

    キャンセル

同じタグがついた質問を見る

  • PHP

    24451questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20863questions

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

  • HTML

    11803questions

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

  • CSS

    7728questions

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