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

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

ただいまの
回答率

90.35%

  • CSS

    8357questions

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

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

受付中

回答 4

投稿

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

kikoko09

score 11

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

コード
<!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>
  <!-- ここにコードを書いていきましょう -->
  <div class=top-wrapper>
    <div class=container>
      <h1>LEARN TO CODE.</h1>
      <h1>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。</p>
      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
    <div class=btn-wrapper>
     <a class=btn signup>新規登録はこちら</a> 
     <p>or</p>
    <a class=btn facebook>facebookで登録</a>
    <a class=btn twitter>twitterで登録</a>
    </div>
    </div>
  </div>

</body>
</html>
コード
.top-wrapper{
 background-image:url(https://prog-8.com/images/html/advanced/top.png
);
background-size: cover;
color: white;
padding-top: 180px;
padding-bottom:100px;
}

.container{
  width: 1170px;
  margin: auto;
  opacity: 0.7;
}

.top-wrapper h1{
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: 5px;
}

.top-wrapper p{
  text-align: center;
}

.btn-wrapper{
text-align: center;
}

/*signupとfacebookとtwitterの背景色が反映されません*/

.btn signup{
  background-color:
  #239b76;
  padding-top: 30px;
}

.btn facebook{
  background-color:
  #3b5998;
  margin-right: 10px;
}

.btn twitter{
  background-color:
  #55acee;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

+4

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/23 16:18

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

    キャンセル

  • 2018/09/23 16:26

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

    キャンセル

  • 2018/09/23 16:34

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

    キャンセル

+1

     <a class="btn signup">新規登録はこちら</a> 
     <p>or</p>
    <a class="btn facebook">facebookで登録</a>
    <a class="btn twitter">twitterで登録</a>
.btn.signup{
  background-color:
  #239b76;
  padding-top: 30px;
}

.btn.facebook{
  background-color:
  #3b5998;
  margin-right: 10px;
}

.btn.twitter{
  background-color:
  #55acee;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

イメージ説明
html

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


イメージ説明
これですか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/23 16:20

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

    キャンセル

  • 2018/09/23 16:37

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

    キャンセル

  • 2018/09/23 16:38

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

    キャンセル

0

CSSでは

//aタグに背景色を指定 
a {
    background-color:#000;
}

//aというclassがついたものに背景色を指定
.a {
    background-color:#000;
}

//aというidがついたものに背景色を指定
#a {
    background-color:#000;
}


とします。

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

.btn twitter {
    background-color:#55acee;
}


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

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


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

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

.btn .twitter{
    background-color:#55acee
}


が正解となります。

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • CSS

    8357questions

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