Q&A
このラジオボタンのサンプルはどこのですか
ラジオボタンを以下の形にしたいのですが、上手く設定できません。
サンプル
以下の記事を読みながら、作成したのですが、ボタンがつぶれたり、四角になってしまったりと上手くいきません。
リンク内容
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>ToDoリスト</title> 8<link rel="stylesheet" href="css/styles.css"> 9</head> 10<body> 11<h1>ToDoリスト</h1> 12 13 <label> 14 <input type="radio" name="radio" class="radio" /> 15 <span class="radio-icon"></span> 16 すべて 17 </label> 18 19 <label> 20 <input type="radio" name="radio" class="radio" /> 21 <span class="radio-icon"></span> 22 作業中 23 </label> 24 25 <label> 26 <input type="radio" name="radio" class="radio" /> 27 <span class="radio-icon"></span> 28 完了中 29 </label> 30 31 <h3 id="id_h3">IDコメント 状態</h3> 32 <h2>新規タスクの追加</h2> 33 34 <p> 35 <input type="text" id="id_text" value=""> 36 <button id="btn" type="btn" class="button"> 追加</button> 37 </p> 38 39 40 <script> 41 const btn = document.getElementById('btn'); 42 btn.addEventListener('click', () => { 43 const text = document.getElementById('id_text').value; 44 45 const h2 = document.getElementById('id_h2'); 46 47 document.body.insertBefore(document.createTextNode(text), h2); 48 }); 49 50 </script> 51 52</body> 53</html>
CSS
1.button:hover { 2 background-color: #59b1eb; 3} 4.button:active { 5 top: 3px; 6 box-shadow: none; 7} 8 9.radio { 10 display: none; 11} 12 13.radio + .radio-icon:before { 14 content: "\f3a6"; 15 font-family: "Ionicons"; 16 color: #ccc; 17 font-size: 22px; 18} 19 20.radio:checked + .radio-icon:before { 21 content: "\f3a7"; 22 color: #17bcdf; 23}
7
【追記】
リンク「<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>」をHTMLを挿入することで、ボタンはうまく反映されました。
サンプル通りのラジオボタンのコードはどのように検索すれば見つかるモノなのでしょうか？
検索は書けたのですが、見つからず途方に暮れています。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>ToDoリスト</title> 8<link rel="stylesheet" href="css/styles.css"> 9<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> 10</head> 11<body> 12<h1>ToDoリスト</h1> 13 14 <label> 15 <input type="radio" name="radio" class="radio" /> 16 <span class="radio-icon"></span> 17 すべて 18 </label> 19 20 <label> 21 <input type="radio" name="radio" class="radio" /> 22 <span class="radio-icon"></span> 23 作業中 24 </label> 25 26 <label> 27 <input type="radio" name="radio" class="radio" /> 28 <span class="radio-icon"></span> 29 完了中 30 </label> 31 32 <h3 id="id_h3">IDコメント 状態</h3> 33 <h2>新規タスクの追加</h2> 34 35 <p> 36 <input type="text" id="id_text" value=""> 37 <button id="btn" type="btn" class="button"> 追加</button> 38 </p> 39 40 41 <script> 42 const btn = document.getElementById('btn'); 43 btn.addEventListener('click', () => { 44 const text = document.getElementById('id_text').value; 45 46 const h2 = document.getElementById('id_h2'); 47 48 document.body.insertBefore(document.createTextNode(text), h2); 49 }); 50 51 </script> 52 53</body> 54</html>
CSS
1.button:hover { 2 background-color: #59b1eb; 3} 4.button:active { 5 top: 3px; 6 box-shadow: none; 7} 8 9 10.radio { 11 display: none; 12} 13.radio + .radio-icon:before { 14 content: "\f3a6"; 15 font-family: "Ionicons"; 16 color: #ccc; 17 font-size: 22px; 18} 19.radio:checked + .radio-icon:before { 20 content: "\f3a7"; 21 color: #17bcdf; 22}
【追記】
上手く行きました！
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>ToDoリスト</title> 8<link rel="stylesheet" href="css/styles.css"> 9 10</head> 11<body> 12<h1>ToDoリスト</h1> 13 14<div class="radiobutton"> 15 <input type="radio" id="button-1" name="radio1" value="1" checked /> 16 <label for="button-1">すべて</label> 17 <input type="radio" id="button-2" name="radio1" value="2" /> 18 <label for="button-2">完了中</label> 19 <input type="radio" id="button-3" name="radio1" value="3" /> 20 <label for="button-3">作業中</label> 21 22 23 24 <h3 id="id_h3">ID コメント 状態</h3> 25 <h2>新規タスクの追加</h2> 26 27 28 <p id=id_p> 29 <input type="text" id="id_text" value=""> 30 <button id="btn" type="btn" class="button"> 追加</button> 31 </p> 32 33 <script> 34 35 const btn = document.getElementById('btn'); 36 btn.addEventListener('click', () => { 37 const text = document.getElementById('id_text').value; 38 const p1 = document.getElementById('id_p'); 39 const p2 = document.getElementById('id_p'); 40 const h2 = document.getElementById('id_h2'); 41 42 //const button = <button id="btn" type="btn" class="button"> 作業中</button> 43 //const button = document.createElement('btn'); 44 //btn.textContent = '作業中'; 45 //document.body.appendChild(button); 46 47 p1.innerHTML("作業中"); 48 p2.innerHTML("削除"); 49 document.body.insertBefore(document.createTextNode(text), h2); 50 51 }); 52 53 54 55 </script> 56 57</body> 58</html>
回答1件
0
ベストアンサー
サイトが良くないですねぇ
HTML
1<!-- headタグ内に下記コード追加 --> 2<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
あとCSS正しくは下記らしいですね
CSS
1.checkbox + .checkbox-icon:before { 2 content: "\f372"; 3 font-family: Ionicons; /* ダブルクォーテーションいらないらしい */ 4 color: #ccc; 5 font-size: 22px; 6} 7.checkbox:checked + .checkbox-icon:before { 8 content: "\f374"; 9 color: #17bcdf; 10}
投稿2019/11/28 04:57
編集2019/11/28 04:59
総合スコア2341
<!-- headタグ内に下記コード追加 -->
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
を入れるとボタンが反映されました。
Ioniconsを使う場合はリンクを挿入しないといけないのですね。
ありがとうございます。
さらに質問して図々しいのですが、私の質問文のサンプルのラジオボタンにする為のコードはどのように調べればよいのでしょうか？
教えて頂けるとありがたいです。
「サンプルのラジオボタン」が何を指しているのかはわかりませんけど、
あなたが参考にしているサイトだと回答に記載した公式サイトからアイコンを取得して表示しているだけです。
アイコンを好きなように変更するか、ここのデザインをその「やりたいように」変更したらよいのでは？
アイコンで事足りないなら、それは自作でスタイルを設定するしかないので別質問になるかと思います。
サンプルのラジオボタンは以下になります。
https://gyazo.com/d2c1c87a05c786e2ded8873d13fd0a0d
了解しました。
回答ありがとうございます。
デザインを変更します。
あなたの回答
tips
プレビュー
