background-colorの指定がきかない理由を教えて下さい。

progateの中級道場コース（自分で最初からお手本のサイトを目指して作るコース）で学習していて分からなくなりました。
cssの所で、　　　
.sign up{background-color: ;と色指定しても色が付きません。
理由を教えてください。

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

css
1コード/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}/* ここからCSSを書いていきましょう */
20.top-wrapper{
21  display:flex;
22  justify-content:center;
23  align-items:center;
24  height:628px;
25  width:1170px;
26  padding-top:80px;
27  padding-bottom:100px;
28  background-image:url(https://prog-8.com/images/html/advanced/top.png);
29  background-size:cover;
30  
31}
32.container h1{
33  font-size:45px;
34  opacity:0.7;
35  letter-spacing:5px;
36  color:white;
37  
38}
39.container p{
40  font-size:16px;
41  margin-bottom:15px;
42  .btn{
43  padding:8px 24px;
44  color:white;
45  opacity:0.8;
46  border-radius:4px;
47}
48.sign up{
49  background-color:#239b76;
50};
51}
52````ここに言語を入力
53コード

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

回答2件

HTML, CSS を以下のように修正することで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。また、プロゲートの見本のコードでは、 sign クラス、 up クラスという 2 つのクラスを用意するのではなく、 signup というクラス名になっています。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>Progate</title>
7  <link rel="stylesheet" type="text/css" href="stylesheet.css">
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10
11<body>
12  <header>
13    <div class="container">
14      <div class="header-left">
15
16      </div>
17      <div class="header-right">
18
19      </div>
20    </div>
21  </header>
22  <div class="top-wrapper">
23    <div class="container">
24      <h1>LEARN TO CODE.
25        <br> LEARN TO BE CREATIVE.
26      </h1>
27      <p>
28        Progateはオンラインプログラミング学習サービスです。
29        <br> 初心者にやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
30      </p>
31      <a href="#" class="btn sign-up">新規登録はこちら</a> <!-- sign up を sign-up に変更 -->
32      <p>or</p>
33      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
34      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
35    </div>
36  </div>
37</body>
38
39</html>

CSS
1html,
2body,
3ul,
4ol,
5li,
6h1,
7h2,
8h3,
9h4,
10h5,
11h6,
12p,
13div {
14  margin: 0;
15  padding: 0;
16}
17
18body {
19  font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;
20}
21
22li {
23  list-style: none;
24}
25
26a {
27  text-decoration: none;
28}
29
30.top-wrapper {
31  display: flex;
32  justify-content: center;
33  align-items: center;
34  height: 628px;
35  width: 1170px;
36  padding-top: 80px;
37  padding-bottom: 100px;
38  background-image: url(https://prog-8.com/images/html/advanced/top.png);
39  background-size: cover;
40}
41
42.container h1 {
43  font-size: 45px;
44  opacity: 0.7;
45  letter-spacing: 5px;
46  color: white;
47}
48
49.container p {
50  font-size: 16px;
51  margin-bottom: 15px;
52}
53
54.btn { /* クラスの宣言位置を変更 */
55  padding: 8px 24px;
56  color: white;
57  opacity: 0.8;
58  border-radius: 4px;
59}
60
61.sign-up { /* クラス名とクラスの宣言位置を変更 */
62  background-color: #239b76;
63}

投稿2019/05/14 10:09

編集2019/05/14 11:08

s8_chu

総合スコア14731

Akaho

2019/05/14 11:05

出来ました。ありがとうございました。

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

ベストアンサー

css
1.sign.up {
2background-color:#239b76;
3}
4a.sign.up {
5display: inline-block;
6}

で効くようになるかと。
クラス名に、半角スペースを入れても、そのスペースは、クラス名ごとの区切り文字になるというCSSの仕様です。クラス名自体に空白文字含めることはできません。

html
1<a href="#" class="btn sign up">新規登録はこちら</a>

これは、"btn"、"sign"、"up"の三つのクラスを当てたことになります。
.sign upというセレクタは、
.signというクラス名の中の、upという子要素にCSSを当てる、という命令になってしまいます。

また、a要素は、インライン要素であり、ブロック要素ではないので、そのままだと、背景は中途半端に表示されるか、そもそも背景色が効かないので、
display: inline-blockを適用させました。

また、もう一個突っ込むと、

css
1.sign up {
2background-color:#239b76;
3};
4}

この部分の、最後から二行目のセミコロンと、最終行のブロック終了文字は、間違った構文なので、CSSエラーを起こす可能性大です。

投稿2019/05/14 10:17

編集2019/05/14 10:23

miyabi_pudding

総合スコア9528

Akaho

2019/05/14 10:40

さらに補足して教えていただきたいんですが a.sign.up { display: inline-block; } の　a.sign.up　で.sign.upが付いている理由が分からない事と　もう一つ、今回はsign.upの　.（ドット）で一つのクラスとなっていますがドット以外の文字でも良いですか？

Akaho

2019/05/14 11:06

出来ました。ありがとうございました。

miyabi_pudding

2019/05/15 01:32

.sign.upは、signとup、二つのクラスがついている要素、というセレクタになります。つまり、class="sign"だけでも、class="up"だけでもなく、class="sign up"というふうに二つともついている要素にcssを当てるというセレクタになるということです。 a.sign.up　というセレクタは、sign、up、両方のクラスがついた、a要素にcssを当てる、というセレクタになります。なぜそうしているかというと、 a {}としてしまうと、ページ内の全てのaに対してCSSが適用されてしまい、後々都合が悪くなるはずだからです。

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

あなたの回答