HTML、CSSを勉強しているのですが、
どうしてもCSSの動きというものが理解できません。
なにをどうしたらよいのか・・・・
何か分かるようになるコツみたいなものがあるのでしょうか?
やはり、習うより慣れろ!!で何回も何回も書いて一つ一つの動作を覚えていくしか
ないのでしょうか?
ドットインストールや様々な書籍を参考にして色々調べながら書くようにしていても、
書き方が色々あり、さらに混乱を招くという状態に陥っています。。。
例えば、以下のコードは、同じCSSを適用しているのになぜ表示方法が違うのか?
親要素だとか子要素だとか・・・・もう本当に混乱です。
HTML
1<!--html1--> 2<body> 3 <header> 4 <div class="cntainer"> 5 ヘッダー 6 </div> 7 </header> 8 <main> 9 <div class="cntainer"> 10 メイン 11 </div> 12 </main> 13 14 <footer> 15 <div class="cntainer"> 16 フッター 17 </div> 18 </footer> 19 </div> 20</body>
html
1<!--html2--> 2<body> 3 <div class="cntainer"> 4 <header> 5 ヘッダー 6 </header> 7 <main> 8 メイン 9 </main> 10 11 <footer> 12 フッター 13 </footer> 14 15 </div> 16 </body>
css
1@charset "UTF-8"; 2 3.cntainer{ 4 margin: 0 auto; 5 width: 500px; 6 background: red; 7} 8 9header{ 10 background: tomato; 11} 12 13main{ 14 background: skyblue; 15} 16 17footer{ 18 background: gray; 19}
アドバイス等いただければと思います。
宜しくお願い致します。
回答7件
あなたの回答
tips
プレビュー