ボタンの背景色が反映されない

今、Progateで練習をしているのですが、ボタンの背景色が反映されません。
なぜか教えて頂けますでしょうか。

HTML
1コード
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <title>Progate</title>
7  <link rel="stylesheet" type="text/css" href="stylesheet.css">
8  <!-- ここでFont Awesomeを読み込んでください -->
9 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
10</head>
11<body>
12  <!-- ここにコードを書いていきましょう -->
13  <div class=top-wrapper>
14    <div class=container>
15      <h1>LEARN TO CODE.</h1>
16      <h1>LEARN TO BE CREATIVE.</h1>
17      <p>Progateはオンラインプログラミング学習サービスです。</p>
18      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
19    <div class=btn-wrapper>
20     <a class=btn signup>新規登録はこちら</a> 
21     <p>or</p>
22    <a class=btn facebook>facebookで登録</a>
23    <a class=btn twitter>twitterで登録</a>
24    </div>
25    </div>
26  </div>
27  
28</body>
29</html>

CSS
1コード
2.top-wrapper{
3 background-image:url(https://prog-8.com/images/html/advanced/top.png
4);
5background-size: cover;
6color: white;
7padding-top: 180px;
8padding-bottom:100px;
9}
10
11.container{
12  width: 1170px;
13  margin: auto;
14  opacity: 0.7;
15}
16
17.top-wrapper h1{
18  text-align: center;
19  font-size: 45px;
20  font-weight: bold;
21  letter-spacing: 5px;
22}
23
24.top-wrapper p{
25  text-align: center;
26}
27
28.btn-wrapper{
29text-align: center;
30}
31
32/*signupとfacebookとtwitterの背景色が反映されません*/
33
34.btn signup{
35  background-color:
36  #239b76;
37  padding-top: 30px;
38}
39
40.btn facebook{
41  background-color:
42  #3b5998;
43  margin-right: 10px;
44}
45
46.btn twitter{
47  background-color:
48  #55acee;
49}
50

行動規範の内容に同意します

回答4件

cssの基本ですが、.つけたらclass、#をつけたらid、なにもつけなければhtmlタグに対する指定となります。
twitterなりなんなり名前はつけられていますが、htmlタグではありませんよね？

複数指定したい場合はクォートで囲って
class="a b"のようにしないと同じ属性の属性値として認識されません。

.a .b{}
のようにスペースをつけて指定した場合、単語としても切れるので２つで１クラスとはみなさず、aクラスの配下のbクラス、への指定となるため同列にしたい場合はスペースなしで定義してください
.a b{}
は「aクラスの配下のbタグへの指定」となります。

投稿2018/09/23 06:40

編集2018/09/23 07:33

m.ts10806

総合スコア80850

kikoko09

2018/09/23 07:18

ご回答ありがとうございます。 class="a b"で同じ属性値として認識されるんですね。詳しくご説明頂きありがとうございます＾＾

m.ts10806

2018/09/23 07:26

私の回答はどこまで理解されましたか？直後に別の回答にコメントされていますが、「クォートで囲うことでその属性値のものとなる」というところが理解されていればあのコメントにはならないのではないかなと・・・。私の伝え方も良くなかったのでしょうか・・・。

m.ts10806

2018/09/23 07:34

少し追記してみました。私の回答をヒントにご自身の指定内容を見比べてみてください。

行動規範の内容に同意します

HTML
1     <a class="btn signup">新規登録はこちら</a> 
2     <p>or</p>
3    <a class="btn facebook">facebookで登録</a>
4    <a class="btn twitter">twitterで登録</a>

CSS
1.btn.signup{
2  background-color:
3  #239b76;
4  padding-top: 30px;
5}
6
7.btn.facebook{
8  background-color:
9  #3b5998;
10  margin-right: 10px;
11}
12
13.btn.twitter{
14  background-color:
15  #55acee;
16}

投稿2018/09/23 08:29

kei344

総合スコア69407

CSSでは

CSS
1//aタグに背景色を指定　
2a {
3    background-color:#000;
4}
5
6//aというclassがついたものに背景色を指定
7.a {
8    background-color:#000;
9}
10
11//aというidがついたものに背景色を指定
12#a {
13    background-color:#000;
14}

とします。

これを今回のものに当てはめると、

CSS
1.btn twitter {
2    background-color:#55acee;
3}

というのは、
「"btn"というclsasが付いている"twitter"タグに背景色を指定するという意味になってしまいます。
実際に書くと、

HTML
1<twitter class="btn">aaa</twitter>

という実際には存在しないプログラムに対して背景色を指定しているということです。

今回の場合、
「"btn"というclassがついててかつ、"twitterというクラスがついている"」ものに背景をつけたいということですから、

CSS
1.btn .twitter{
2    background-color:#55acee
3}

が正解となります。

長くなってしまいましたが、これでわかりましたか？
頑張ってください

投稿2019/03/30 15:09

編集2019/03/30 15:13

ryuto.nakamura

総合スコア60

html

     <a class=btn-signup>新規登録はこちら</a> 
     <p>or</p>
    <a class=btn-facebook>facebookで登録</a>
    <a class=btn-twitter>twitterで登録</a>

これですか？

投稿2018/09/23 06:48

fcitx

総合スコア134

kikoko09

2018/09/23 07:20

それです！ CSSのコードはどのように書いたらよいでしょうか。また、btn-signupと”btn"signupの違いはなんでしょうか。

fcitx

2018/09/23 07:37

すみません,理解し間違えてしまった

fcitx

2018/09/23 07:38

すみません,理解し間違えてしまった

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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

ボタンの背景色が反映されない

関連した質問