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

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

ただいまの
回答率

88.77%

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

解決済

回答 2

投稿

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

Akaho

score 39

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

イメージ説明

コード<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <!-- ここでFont Awesomeを読み込んでください -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
  <!-- ここにコードを書いていきましょう -->
  <header>
    <div class="container">
      <div class="header-left">

      </div>
      <div class="header-right">

      </div>
    </div</header>
  <div class="top-wrapper">
    <div class="container">
      <h1>LEARN TO CODE.
      <br>
      LEARN TO BE CREATIVE.
      </h1>
      <p>
        Progateはオンラインプログラミング学習サービスです。
        <br>
        初心者にやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
      </p>
      <a href="#" class="btn sign up">新規登録はこちら</a>
      <p>or</p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
    </div>
  </div>
``</body>
</html>

ここに言語を入力
コード

```css  
コード/* CSSのリセット(消さないでください) */  
html, body,  
ul, ol, li,  
h1, h2, h3, h4, h5, h6, p, div {  
margin: 0;  
padding: 0;  
}  

body {  
font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;  
}  

li {  
list-style: none;  
}  

a {  
text-decoration: none;  
}/* ここからCSSを書いていきましょう */  
.top-wrapper{  
display:flex;  
justify-content:center;  
align-items:center;  
height:628px;  
width:1170px;  
padding-top:80px;  
padding-bottom:100px;  
background-image:url(https://prog-8.com/images/html/advanced/top.png);  
background-size:cover;  

}  
.container h1{  
font-size:45px;  
opacity:0.7;  
letter-spacing:5px;  
color:white;  

}  
.container p{  
font-size:16px;  
margin-bottom:15px;  
.btn{  
padding:8px 24px;  
color:white;  
opacity:0.8;  
border-radius:4px;  
}  
.sign up{  
background-color:#239b76;  
};  
}  

`ここに言語を入力 コード ```

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+2

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="header-left">

      </div>
      <div class="header-right">

      </div>
    </div>
  </header>
  <div class="top-wrapper">
    <div class="container">
      <h1>LEARN TO CODE.
        <br> LEARN TO BE CREATIVE.
      </h1>
      <p>
        Progateはオンラインプログラミング学習サービスです。
        <br> 初心者にやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
      </p>
      <a href="#" class="btn sign-up">新規登録はこちら</a> <!-- sign up を sign-up に変更 -->
      <p>or</p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
    </div>
  </div>
</body>

</html>
html,
body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
div {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.top-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 628px;
  width: 1170px;
  padding-top: 80px;
  padding-bottom: 100px;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
}

.container h1 {
  font-size: 45px;
  opacity: 0.7;
  letter-spacing: 5px;
  color: white;
}

.container p {
  font-size: 16px;
  margin-bottom: 15px;
}

.btn { /* クラスの宣言位置を変更 */
  padding: 8px 24px;
  color: white;
  opacity: 0.8;
  border-radius: 4px;
}

.sign-up { /* クラス名とクラスの宣言位置を変更 */
  background-color: #239b76;
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/14 20:05

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

    キャンセル

checkベストアンサー

+1

.sign.up {
background-color:#239b76;
}
a.sign.up {
display: inline-block;
}

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

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


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

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

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

.sign up {
background-color:#239b76;
};
}


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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/14 19:40

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

    キャンセル

  • 2019/05/14 20:06

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

    キャンセル

  • 2019/05/15 10:32

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

    キャンセル

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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