🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS

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

Q&A

解決済

1回答

879閲覧

ボタンの色付けができない

asako1010

総合スコア50

CSS

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

0グッド

1クリップ

投稿2019/11/28 03:07

編集2019/11/28 03:23

かなり初歩的な話なのですが、ボタンに色を付けることが出来ません。
ボタンを押したときに、青色に変わるようにしたいのですが、色が変化しません。
サルワカ等でも調べてたのですが、解決できず。
リンク内容

イメージ説明

Index.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 <label><input type="radio" name="phone">すべて</label> 13 <label><input type="radio" name="phone" >作業中</label> 14 <label><input type="radio" name="phone">完了中</label> 15 <h3 id="id_h3">IDコメント 状態</h3> 16 <h2>新規タスクの追加</h2> 17 18 <p> 19 <input type="text" id="id_text" value=""> 20 <button id="btn" type="btn" class="btn"> 追加</button> 21 </p> 22 23 24 <script> 25 const btn = document.getElementById('btn'); 26 btn.addEventListener('click', () => { 27 const text = document.getElementById('id_text').value; 28 29 const h2 = document.getElementById('id_h2'); 30 31 document.body.insertBefore(document.createTextNode(text), h2); 32 }); 33 34 </script> 35 36</body> 37</html>

CSS

1.button:hover { 2 background-color: #59b1eb;; 3} 4.button:active { 5 top: 3px; 6 box-shadow: none; 7}

以下の修正後、色付け出来ました。

HTML

1 <p> 2 <input type="text" id="id_text" value=""> 3 <button id="btn" type="btn" class="button"> 追加</button> 4 </p> 5

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSSで.buttonという指定は
「button」というclass名がついている要素
を意味します。

HTMLに「button」というclass名がついた要素が無いので、
適切なクラス名に変更しましょう。

あるいはCSSの.を取ればタグ名を表すので、そちらでも可能です。
状況に応じて適切な方で修正しましょう。

投稿2019/11/28 03:18

dice142

総合スコア5158

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

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

asako1010

2019/11/28 03:24

ありがとうございます。 アドバイス通り、「btn → button」 に変更したところ解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問