よく分からない現象が起きたので質問させて下さい。
2段組において左右の段落の行頭を揃える為、<h3>の見出しにクラスspace-plan--3mを
設置して外部CSSに以下のようにプロパティを設定しました。
.space-plan--3m {
margin-top: 3em;
}
ですがHTMLファイルには反映されませんでした。
そこで、<h3>にstyle属性を設置して同じ内容のプロパティを記述したところ、
私が意図した通りのレイアウトが出来ました。
どうしてこのような現象が起きるのでしょうか?
出来るだけ外部CSSに記述をしたいのですが…。
No.4ベストアンサー
- 回答日時:
> 2段組において左右の段落の行頭を揃える
左右の段落先頭の h3 を揃えるなら、
スタイルではなく HTML 構成を変更することをお勧めします
<article class=main>
_ <h2> 見出し </h2>
_ <div class=main__inner>
_ _ <div class=main__inner--left> <h3>2段組左</h3> ... </div>
_ _ <div class=main__inner--right> <h3>2段組右</h3> ... </div>
_ </div>
</article>
Ogre7077様
アドバイスありがとうございます。
ご指摘の通りHTMLの構成を改めた所、2段組は完成しました。
しかし、上部の<h2>が大きく崩れる副作用が生じ、今の私の技術ではどうしても解決が出来なかったので、
結局2段組自体をあきらめざるを得ませんでした。
せっかく回答して下っさたのに結果を出せずに申し訳なく思います。
今後はもっと基礎を勉強し直して行きます。
No.3
- 回答日時:
#1です。
お礼拝見しました。基礎知識はあるようですね。 では、応用しましょうよ!
!importantがわかっているなら、それを試せば良いだけです!
その後、 !importantも外しても、そのCSSを優先したいなら、
・他のCSSを消す
・詳細度を優先させる
このどちらかしかありませんよ!
(前回の質問を参照した上で)別の方法としては、例のh3やPの上部スペースを両方空けたいなら、
h3のmargin-topではなく、ボックス(div)のpadding-topがベストです。
h3をやめて、Pが来る場合も想定できるので、、ボックスのpadding-topの方が良いという判断基準です。複数ページになった場合も想定できます。
first-childでも良いでしょうけど。
(実際の現場の判断がベストでしょうけど、あくまでここの質問の条件内での想定ですからw)
No.2
- 回答日時:
ブラウザの開発ツールにて、以下を確認してみましょう。
対象の CSS ファイルが読み込まれていない
→ CSS の URL パスを確認しましょう
対象要素に、指定したスタイルが当たってない
→ セレクターのスペルミスを確認しましょう
当たっているが、別のスタイルに上書きされている
→ セレクターの優先順位を確認しましょう
→ 要素名や ID 名をセレクターに含めると、より優先順位が上がります
同一の優先順位なのに、別のスタイルに上書きされている
→ スタイルの定義順または CSS ファイルの読み込み順を確認しましょう
No.1
- 回答日時:
先日の質問者さんですね? その時の回答者です。
やはり、心配していた事が起きているようですね・・・
何事にもルールが有ります。学業もスポーツもコンピューターでも。適当な我流で解釈していると後々痛い目みますよ(複雑になりすぎて修復困難や作り直しとか。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プロフェッショナル認定試験レベル1」を取得し、
今は「Webクリエイター能力認定試験 スタンダード」とJavaScriptの勉強も少ししています。
私の場合は今後も完全な独学と我流でやっていきます。(金がないので)
この2つの試験を取得すれば基礎知識は取得と考えてよろしいでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS HTMLとcssでページを作っています。右図のような形にしたいのですが、margin topで指定す 3 2023/06/08 23:39
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
幅を可変にし2段組をCSSで組む...
-
min-heightとheightの違いについて
-
cssで2列、複数行のテーブルを...
-
複数のボタンを等間隔に、かつ...
-
開閉式の隠し要素が一瞬表示さ...
-
ヘッダーとフッターだけ背景を...
-
携帯サイト、ナノでのタグ編集...
-
<!-- #BeginLibraryItemとは
-
セクションをdivで囲むと見出し...
-
オシャレな区切り線はありませ...
-
コーディングの勉強法
-
インラインフレームのページ内...
-
何もいじってないのに、表示崩...
-
強調タグの見栄えをCSSで変える...
-
html の divとtable の役割
-
iframeを使わずに上下50%ずつに...
-
hタグの右横に画像を表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報
(追記)
問題のページをアップロードしてみました。
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%;
}
『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>
<h3>インターネットからの予約取消方法について</h3>
<p>インターネットから予約したツアーの取消方法についてご案内しております。 お取消料発生日の前日までは「マイページ」よりお手続き可能です。FAQ手順をご確認ください。</p>
<h3>マイページのパスワード変更方法<br>(ログインできない場合)</h3>
<p>パスワードを忘れマイページにログインできない場合のパスワード変更方法についてご案内しております。 変更手順はFAQよりご確認ください。</p>
<h3>ツアー内容の詳細を確認したいのですが<br>(コース番号検索)</h3>
Ogre7077様、回答ありがとうございます。
クローム・開発ツールは今まで使っていなかったので勉強して使いこなせるようにします。
開発ツールを使って二つ問題点が見えて来ました。
1.問題個所がfloatだった。
2.開発ツールではなぜか<h3>に追加したクラスが表示されない。
この辺に問題がありそうなので少しずつ解決しようと思っています。
<p>ツアー内容の詳細を確認する方法をご案内しております。 詳細を確認したいツアーのコース番号を、FAQ内の「コース番号検索」よりご入力いただきお調べください。</p>
</div><!-- end .main__inner-left -->
<div class="main__inner--right">
<h3>予約状況の確認方法について</h3>←----------問題のポイント
<p>予約したツアーを「マイページ」から確認する方法についてご案内しております。FAQ内の手順に沿って「マイページ」よりご確認ください。</p>
<h3>予約画面に「システムエラーが<br>発生しました」と表示され予約できません</h3>
<p>予約画面に「システムエラーが発生しました」と表示され、次の操作に進めない場合の対処方法についてご案内しております。「キャッシュファイル」と「Cookie(クッキー)」の削除を行い、問題が解決される場合がございます。FAQよりご確認ください。</p>
<h3>会員登録情報(住所や電話番号・メール<br>アドレス等)の確認・変更について</h3>
<p>インターネット会員登録情報の確認・変更の方法についてご案内しております。 マイページにログイン後、「登録情報を確認・変更」をクリックしてお手続きください。</p>
<h3>インターネットから申し込んだのに<br>予約完了メールが届きません</h3>
<p>ツアーのお申し込みが完了すると、予約完了メールをご登録いただいているメールアドレス宛てに自動送信しています。 メールが届かない場合は、FAQ内の原因をご確認いただき、お試しください。</p>
</div><!-- end .main__inner-right -->
</div><!-- end .main__inner -->
</article><!-- end .main -->
naokita様、回答ありがとうございます。
!importantを付けてみましたがやはりダメでした。
どうもセレクタ自体が上手く認識されていないようです。
私はまだ初心者ですが、苦肉の策のstyle属性は邪道でしょうか?