BootstrapでのHTML、CSSの編集（CSSが部分的に反映されないため解決したい）

###前提・実現したいこと
BoostrapでのHTML、CSSについて。
部分的にCSSが反映されないためその原因を知りたい。

###発生している問題・エラーメッセージ
①HTMLテキストのbodyエリアにある<h1 class ="aaa">テキスト</h1>をcssで編集し、
ブラウザ表示の際に反映させたいのですが部分的に反映されません。

text-align: center; → 反映される
font-size:10px; → 反映されない
color:white; → 反映されない

反映されない部分を反映させたいです。

⓶jumbotronの左右に余白を入れたいのですがこちらも反映されません。

<div class="jumbotron"> <div class="container-fluid"> <h1>Cemal Can Dinça</h1> <p><a class="btn btn-primary btn-lg" href="#" role="button">CONTACT ME</a></p> </div> </div>

この方法で余白が入ると思ったのですが入りませんでした。

エラーメッセージ

###該当のソースコード

```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <div class="jumbotron jumbotron-extend">
  <div class="container-fluid jumbotron-container">
      <h1 class="site-name">aaa</h1>
      <p><a class="btn btn-black" href="#" role="button">CONTACT ME</a></p>
  </div>
  <div class="sns-button">
      <ul class="list-inline">
          <li><a href="#"><img src="img/icon_linkedin.png" alt="Linkedin"></a></li>
          <li><a href="#"><img src="img/icon_vimeo.png" alt="vimeo"></a></li>
          <li><a href="#"><img src="img/icon_tel.png" alt="tel"></a></li>
          <li><a href="#"><img src="img/icon_insta.png" alt="instagram"></a></li>
          <li><a href="#"><img src="img/icon_tumblr.png" alt="tumblr"></a></li>
      </ul>
  </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

/ここからはCSSのソースコードになります。/

```ここに言語を入力
.jumbotron-extend {
    height: 100vh;
    min-height: 350px;
    margin-bottom: 60px;
    background: url(../img/bluewater.jpeg) no-repeat center center;
    background-size: cover;
}
.jumbotron-container {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 30px;
    padding-right: 30px;
}
.site-name {
    margin-bottom: 60px;
    text-align: center;
    text-align:;
    font-size:10px;
}
.btn-black {
    border-radius: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Avenir', serif;
}
.btn-black:hover {
    background-color: #fff;
    color: #000;
}
.sns-button {
    position: absolute;
    bottom: 32px;
    left: 46px;
}
.site-name {
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}
.btn-black {
    border-radius: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Avenir', serif;
}
.btn-black:hover {
     background-color: #fff;
     color: #000;
}

###補足情報(言語/FW/ツール等のバージョンなど)
フォルダ階層は以下のようになっております。

Desktop/
└── bootstrap-demo/
├── index.html
├── img
├── css/
│ ├── style.css
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
│ └── npm.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

kei344

2017/02/16 20:04

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答2件

ベストアンサー

CSSの適用優先度は基本的にHTMLで下に記述された方が優先されますが、上に記述されていても具体性の高いセレクタが設定されている場合そちらが優先されます。

http://www.htmq.com/csskihon/007.shtml

特に、bootstrapのようなCSSフレームワークの場合、どのようなセレクタが選択されているかわからないため、こういう時はGoogleChromeやFireFoxの開発ツール(いずれもWindowsならF12を押すと出てくる)で調べるとよいです。

打消し線で適用されていないことがわかります。
これは.site-nameのセレクタよりbootstrapの.jumbotron h1のセレクタの方が具体性が高いため、同じCSS定義はbootstrapに記述された方が優先されているためです。

この場合、style.cssの方のセレクタの具体性を上げてあげれば適用されるようになります。

css
1.jumbotron h1.site-name {
2    margin-bottom: 60px;
3    text-align: center;
4    color:white;
5    font-size:10px;
6}

もしどうしても.site-nameというセレクタで使いたいよ！という場合は、!importantをつけて強引に上書きさせることも可能ですが、乱用するとどこで適用されるのか分からなくなる為、あまりオススメはしません。

css
1.site-name {
2    margin-bottom: 60px !important;
3    text-align: center;
4    color:white !important;
5    font-size:10px !important;
6}

投稿2017/02/17 01:44

nayuneko

総合スコア133

baaaaan

2017/02/17 03:40

ご回答いただき誠にありがとうございます。勉強させていただきました。

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

①については、bootstrapの.jumbotron .h1, .jumbotron h1が優先されているため、font-sizeが決まっています。
もし、変更したいのであれば下記のように定義を上書きしてあげるか、

CSS
1.jumbotron .h1, .jumbotron h1{
2    font-size:20px;
3    color: white;
4}

または、下記のようにimportantと付加すれば良いのではないでしょうか。

css
1.site-name {
2    margin-bottom: 60px;
3    text-align: center;
4    margin-bottom: 10px;
5    font-size:20px !important;
6    color: white !important;
7    font-family: 'Playfair Display', serif;
8}

②については、ご自身で実現されているように、下記のコードにしてしまえば良いのではないでしょうか。

        <div class="jumbotron jumbotron-extend">
            <div class="container-fluid jumbotron-container">  
                <h1 class="h1 jumbotron site-name">Cemal Can Dinça</h1>  
                <p><a class="btn btn-primary btn-lg" href="#" role="button">CONTACT ME</a></p>
            </div>  
        </div>

投稿2017/02/17 02:02