style属性と外部CSSの非整合性について

よく分からない現象が起きたので質問させて下さい。
２段組において左右の段落の行頭を揃える為、<h3>の見出しにクラスspace-plan--3mを
設置して外部CSSに以下のようにプロパティを設定しました。

.space-plan--3m {
margin-top: 3em;
}

ですがHTMLファイルには反映されませんでした。
そこで、<h3>にstyle属性を設置して同じ内容のプロパティを記述したところ、
私が意図した通りのレイアウトが出来ました。

どうしてこのような現象が起きるのでしょうか？
出来るだけ外部CSSに記述をしたいのですが…。

質問者からの補足コメント

• （追記）
  問題のページをアップロードしてみました。
  https://training2017.web.fc2.com/root/html/plan. …
  左右二つの<h3>「</h3>←----------問題のポイント」の箇所の高さを揃えて見栄えを良くする。
  『CSS』
  【親要素】
  .main__inner:after {
  clear : both;
  content : "";
  display : block;
  overflow:auto;
  }
  
  【子要素】
  .main__inner--left {
  float : left;
  width : 47%;
  }
  
  【子要素】
  .main__inner--right {
  float : right;
  width : 47%;
  }

    補足日時：2017/10/12 21:13

• 『HTML』
  <article class="main"><!-- メニュー -->
  <div class="main__inner">
  <div class="main__inner--left">
  <h2><a id="app-frm-web"><i class="fa fa-check-square-o"></i>Webサイトからの申し込み方法</a></h2>
  <h3>インターネットからのお支払いについて</h3>←----------問題のポイント
  <p>インターネットをご利用の場合のお支払い方法についてご案内しております。「お振込み」「ゆうちょ銀行貯金口座自動引き落とし」「クレジットカード決済」の詳細はFAQよりご確認ください。</p>

    補足日時：2017/10/12 21:16

• <h3>インターネットからの予約取消方法について</h3>
  <p>インターネットから予約したツアーの取消方法についてご案内しております。 お取消料発生日の前日までは「マイページ」よりお手続き可能です。FAQ手順をご確認ください。</p>
  <h3>マイページのパスワード変更方法<br>（ログインできない場合）</h3>
  <p>パスワードを忘れマイページにログインできない場合のパスワード変更方法についてご案内しております。 変更手順はFAQよりご確認ください。</p>
  <h3>ツアー内容の詳細を確認したいのですが<br>（コース番号検索）</h3>

    補足日時：2017/10/12 21:18

• Ogre7077様、回答ありがとうございます。
  
  クローム・開発ツールは今まで使っていなかったので勉強して使いこなせるようにします。
  開発ツールを使って二つ問題点が見えて来ました。
  １．問題個所がfloatだった。
  ２．開発ツールではなぜか<h3>に追加したクラスが表示されない。
  この辺に問題がありそうなので少しずつ解決しようと思っています。

  No.2の回答に寄せられた補足コメントです。 補足日時：2017/10/12 21:26

• <p>ツアー内容の詳細を確認する方法をご案内しております。 詳細を確認したいツアーのコース番号を、FAQ内の「コース番号検索」よりご入力いただきお調べください。</p>
  </div><!-- end .main__inner-left -->

    補足日時：2017/10/12 21:27

• <div class="main__inner--right">
  <h3>予約状況の確認方法について</h3>←----------問題のポイント
  <p>予約したツアーを「マイページ」から確認する方法についてご案内しております。FAQ内の手順に沿って「マイページ」よりご確認ください。</p>
  <h3>予約画面に「システムエラーが<br>発生しました」と表示され予約できません</h3>
  <p>予約画面に「システムエラーが発生しました」と表示され、次の操作に進めない場合の対処方法についてご案内しております。「キャッシュファイル」と「Cookie（クッキー）」の削除を行い、問題が解決される場合がございます。FAQよりご確認ください。</p>

    補足日時：2017/10/12 21:28

• <h3>会員登録情報（住所や電話番号・メール<br>アドレス等）の確認・変更について</h3>
  <p>インターネット会員登録情報の確認・変更の方法についてご案内しております。 マイページにログイン後、「登録情報を確認・変更」をクリックしてお手続きください。</p>
  <h3>インターネットから申し込んだのに<br>予約完了メールが届きません</h3>

    補足日時：2017/10/12 21:29

• <p>ツアーのお申し込みが完了すると、予約完了メールをご登録いただいているメールアドレス宛てに自動送信しています。 メールが届かない場合は、FAQ内の原因をご確認いただき、お試しください。</p>
  </div><!-- end .main__inner-right -->
  </div><!-- end .main__inner -->
  </article><!-- end .main -->

    補足日時：2017/10/12 21:29

• naokita様、回答ありがとうございます。
  
  !importantを付けてみましたがやはりダメでした。
  どうもセレクタ自体が上手く認識されていないようです。
  私はまだ初心者ですが、苦肉の策のstyle属性は邪道でしょうか？

  No.3の回答に寄せられた補足コメントです。 補足日時：2017/10/12 21:34

No.1 回答者： naokita 回答日時： 2017/10/11 05:09

先日の質問者さんですね？　その時の回答者です。

やはり、心配していた事が起きているようですね・・・
何事にもルールが有ります。学業もスポーツもコンピューターでも。適当な我流で解釈していると後々痛い目みますよ（複雑になりすぎて修復困難や作り直しとか。Webサイト制作あるある）
遠回りに感じるかもしれませんが最初に基本をしっかり覚えることが大事です。

外部CSSが効かず、style属性なら効くというなら、詳細度の問題でしょう（他にミスがなければ・・）
きっと、他（別記）のCSSが優先しているのでしょう。
例えば、
他に、h3.space-plan--3m{margin-top: 0;}があれば貴方ののCSSは効きません！

前回の注意で：
　＞CSSが重複しないように、詳細度（優先度）がありますので、
　＞他で優先していれば、CSSが効かない場合もあります。
なぜ、前回↑↑示唆したかというと、
　・CSSが効かない点
　・貴方のセレクタがclassのみだったから → .space-plan--3m
これ、詳細度（優先度）が一番弱いんですよ・・・
この辺は詳細度を優先させる点数を学びましょう（ネットで検索しましょう）


<h3 class="space-plan--3m" id="space-plan--3m">これ何色？</h3>

.space-plan--3m{color:green !important;}
h3#space-plan--3m{color:yellow;}
#space-plan--3m{color:blue;}
h3.space-plan--3m{color:red;}
.space-plan--3m{color:black;}

さて、同じh3のCSSの別指示で並べてみましたが、
上記HTMLのh3は何色でしょうか？　このルール/理由/利用方法を理解しましょう！


もしかしたら、marginの相殺かもしれませんけどね・・・
なので、前回の方法が良いとは思いますが・・・

この回答へのお礼

naokitaさん、再度回答ありがとうございます。

答えは緑色ですよね？
理由:!importantが詳細度において全てに優先されるからです。

実は今回の二段組は前回の質問の場合とは別の箇所になっております。
前回は
.nav-link {
margin-top:4em;
}
というコードで上手行ったので同様にしてみましたがなぜか反映されませんでした。
初めて本格的なWebサイトの作成で、何度も作り直している内に自分でも構造がよく分からなくなってしまいました。
空間を調整する際にはブロックごとにボーダーラインを表示して構想を練っています。
がしかし、問題のブロックがこちらの意図しない形で、形成されておりました。

基礎知識につきましては今年「HTML5プロフェッショナル認定試験レベル１」を取得し、
今は「Webクリエイター能力認定試験　スタンダード」とJavaScriptの勉強も少ししています。
私の場合は今後も完全な独学と我流でやっていきます。（金がないので）
この２つの試験を取得すれば基礎知識は取得と考えてよろしいでしょうか？

お礼日時：2017/10/11 10:14

No.2 回答者： Ogre7077 回答日時： 2017/10/11 15:40

ブラウザの開発ツールにて、以下を確認してみましょう。

対象の CSS ファイルが読み込まれていない
→ CSS の URL パスを確認しましょう

対象要素に、指定したスタイルが当たってない
→ セレクターのスペルミスを確認しましょう

当たっているが、別のスタイルに上書きされている
→ セレクターの優先順位を確認しましょう
→ 要素名や ID 名をセレクターに含めると、より優先順位が上がります

同一の優先順位なのに、別のスタイルに上書きされている
→ スタイルの定義順または CSS ファイルの読み込み順を確認しましょう

No.3 回答者： naokita 回答日時： 2017/10/11 19:45

#1です。

お礼拝見しました。
基礎知識はあるようですね。　では、応用しましょうよ！

!importantがわかっているなら、それを試せば良いだけです！
その後、 !importantも外しても、そのCSSを優先したいなら、
　・他のCSSを消す
　・詳細度を優先させる
このどちらかしかありませんよ！


（前回の質問を参照した上で）別の方法としては、例のh3やPの上部スペースを両方空けたいなら、
h3のmargin-topではなく、ボックス（div）のpadding-topがベストです。
h3をやめて、Pが来る場合も想定できるので、、ボックスのpadding-topの方が良いという判断基準です。複数ページになった場合も想定できます。
first-childでも良いでしょうけど。
（実際の現場の判断がベストでしょうけど、あくまでここの質問の条件内での想定ですからｗ）

No.4 ベストアンサー 回答者： Ogre7077 回答日時： 2017/10/13 19:17

> ２段組において左右の段落の行頭を揃える

左右の段落先頭の h3 を揃えるなら、
スタイルではなく HTML 構成を変更することをお勧めします

<article class=main>
_ <h2> 見出し </h2>
_ <div class=main__inner>
_ _ <div class=main__inner--left> <h3>２段組左</h3> ... </div>
_ _ <div class=main__inner--right> <h3>２段組右</h3> ... </div>
_ </div>
</article>

この回答へのお礼

Ogre7077様

アドバイスありがとうございます。
ご指摘の通りHTMLの構成を改めた所、2段組は完成しました。
しかし、上部の<h2>が大きく崩れる副作用が生じ、今の私の技術ではどうしても解決が出来なかったので、
結局2段組自体をあきらめざるを得ませんでした。

せっかく回答して下っさたのに結果を出せずに申し訳なく思います。
今後はもっと基礎を勉強し直して行きます。

お礼日時：2017/10/16 13:57