CSSがどうしても理解できない

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}

アドバイス等いただければと思います。
宜しくお願い致します。

nullpon

2017/12/23 00:02

html2のほう、最後の</div>は余分ですよ

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

回答7件

初心者「CSS分からん」
上級者「CSS分からん」

改善したJavaScriptと比べるとCSSは未だにつらいので
基本的なことを理解したら早めになるべく自分で書かない方向に行ったほうが楽。

投稿2017/12/23 01:13

kawax

総合スコア10377

まずは html と css の区別をつけるところから始めたらどうでしょうか。

html は文書の階層構造を示すもので、外側を親要素、内側を子要素と言います。
css は html の要素の色や形や大きさを示すものです。

同じ css を適用しているのになぜ表示方法が違うのかという質問ですが、それは全く見当違いです。
そもそも文書の構造自体が違います。

構造というのは要素(部品)がどのように組み立てられているかを示すものです。
人間で言えば体に頭と手足がついていて、頭に目や鼻や口がついている、というのが構造です。
html はこれを示します。
この場合は体が親で頭と手足が体の子、そして目鼻口が頭の子になります。

構造自体が違うということは、頭に目鼻口がついているのではなく、手に目がついていたり体に口がついていたりするということです。
同じ「赤い」という css を適用しても同じ見た目になるわけがありません。

投稿2017/12/22 23:37

Zuishin

総合スコア28660

退会済みユーザー

2017/12/22 23:42

html が文書の階層構造ということは理解し、なるべく大枠(親要素・外側)からざっくり構造化していくイメージは持てているのですが、大枠を決めてからさらに、大枠の中にdivなどで領域をいれ、CSSでfloatや装飾しようとすると、訳がわからなくなり、思った通りの動作にならない状態です。。。。

Zuishin

2017/12/22 23:47

大雑把な質問には大雑把な回答しかできません。思い通りにできないのは経験が足りないので、サンプルをたくさん集めてそれを弄りながら経験を積んで下さい。

Zuishin

2017/12/22 23:57

例えばこのような構造にしたいというのがあって、そのサンプルが見つからなければ、それを具体的に図に描いて新しく質問してみてください。きっと誰か答えてくれるでしょう。ただし聞きたいことだけ聞くのではなく、どのように試行錯誤したのかがわかるよう、自分で書いたソースを数種類上げるのを忘れないように。

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

なんとなくですが

DOMとはなにか、構造（ツリー構造）がどうなっているか
CSSのセレクターが何を意味するか

ここが曖昧なために「わからない」のではないでしょうか？HTMLを見た時、それを以下のような「階層構造」であることが「頭に思い浮かばないと理解が難しいはず」です。

text
1/// HTML1
2+ body  + header   + div class="cntainer"
3        |
4        + main     + div class="cntainer"
5        |
6        + footer   + div class="cntainer"
7
8/// HTML2
9+ body  + div class="cntainer"   + header
10                                 |
11                                 + main
12                                 |
13                                 + footer

上記のように構造が違います。よって

css
1.cntainer{
2  margin: 0 auto;
3  width: 500px;
4  background: red;
5}

が適用される場所と範囲が違ってきます。HTML1ではheader, main, footerの各要素の下にある領域が各々このcssのスタイルに従ってレイアウトされますが、HTML2では3つを全て包含する一つ上にあるdiv領域にcssのスタイルが適用されます。この基本的な点を把握しておけばレイアウト結果について理解の助けになると思います。

なお、CSSのレイアウト機能は単に上記のような「構造が把握できればわかる」というレベルではない「難しい点」があると思います。CSSに限らずGUI一般のレイアウト機能はもともとが複雑な動作を宣言的に記述する関係で「指定とその結果を結びつけるのが難しいもの」だと思います。それらについては機能体系を自分の頭の中で一つ一つ整理できるようひたすら仕組み・パターンを実際に書いて学んでいくのがよいと思います。仕様書や解説を座学で見てもなかなかピンとこない・・・自分はそういう印象を持っています。

HTML1/HTML2ともに最後の</div>タグが余分です。

DOMノードの構造がツリーだから開始タグと終了タグにより子供ノードを明示する仕組みになっているという点が曖昧だったりするのではないか・・・とも感じました。

cntainerって単語は変ですね。containerのtypoではないでしょうか？

投稿2017/12/23 00:06

KSwordOfHaste

総合スコア18394

ベストアンサー

＞なにをどうしたらよいのか・・・・

逆に「こういうことをしたいからどうしたら実現できるか調べる・考える・やってみる」という考え方ではどうでしょうか。
正直なところ、全てを身につけるのは非常に難しいと思いますので、「やりたいこと」を少しずつ「できること」に変えていくようなやり方もありだと思います。

確かにこれでは身につく知識や技術は偏ってしまうことにはなりそうですが、
「やりたいこと」の幅を広げていくといいのでは、と思います。

その中で、同じ結果であっても色々な表現方法があることを学び、
自身にどれが合っているか、世間的なトレンドを調べてみたり、
より効率的な方法を選んでみたり。ですね。

ホワっとした回答で申し訳ないですが、私自身も「やりたいこと」「仕事で必要なこと」から身につけていったタイプなので、参考になればと思います。
昔書いたコードを今見ると、もう少しうまく書けたりとかするので、その辺りも成長を感じる瞬間ですね。

投稿2017/12/25 03:00

m.ts10806

総合スコア80850

みなさん言われてますが、大雑把に言うなら今回の構造のみでお話すると、divというもののありかたからあると思います。

divという箱があり、その箱にはクラス名を記載する。
当然一つの箱の中には何かが入っているわけですが、、、
例えばcntainerという部屋があり、cntainerと書かれた箱はその部屋に入れるとなった時に、一つの箱の中にheaderから全部入った大きな箱一つなのか？
一つの箱に一つだけ入れた複数の箱なのか？

CSSにおいて.cntainerは同じスタイルというのは、箱のデザインはバラバラではなく、大きさが違うだけで見た目は同じということ。
引越し屋は同じダンボールですよね？

大きい箱と小さい箱の違いは、箱からは中身を出さないでレイアウトしてとなったとしたら、大きい箱は動かせるけど、中身はその中でしか動かせない。

小さい箱は箱ごと動かせるということ。

少し離れましたが、HTMLのレイアウトをこの箱はここで、箱の中身はと考えた後に、ここはこの色とかやっていけば、わかりやすいかもです。

投稿2017/12/23 00:47

Z-TALBO

総合スコア525

私もちょうど学習しているところなのですが、原理原則を押さえると、学習がすすむと思います。この質問への回答にはなっていないのですが、学習をすすめる上で、手助けになれば＾＾；

HTML は構造を表現する言語
CSS はそれを修飾する言語

その前提で、昨今の HTML ファイルを眺めると、文章の構造とは無関係な<div> が大活躍している状況を不思議に思うことになります。

<div> 定義と使用法

The <div> tag defines a division or a section in an HTML document.

<div>は、分割またはHTMLドキュメント内のセクションを定義します。

The <div> tag is used to group block-elements to format them with CSS.

<div>は、CSSでそれらの書式を設定するためにグループ・ブロック要素に使用されます。

つまり、文章の構造とは無関係な修飾用の tag なのです。
文章構造を表現する中に、修飾用の構造を表記するので混乱します。

CSS の学習中は、文章の構造は無視して、<div> のみでレイアウトを設計してみると、純粋に修飾構造が理解できるので、学習がはかどります。

一部例外はありますが、これをすることで、スッキリした構造で理解できるようになるので、試してみてください。

投稿2017/12/23 00:27

編集2017/12/25 15:13

退会済みユーザー

総合スコア0

kei344

2017/12/24 09:17

タイプミス ⇒ 就職する言語

退会済みユーザー

2017/12/25 15:13

指摘ありがとうございます。修正しました＾＾

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

例えば、以下のコードは、同じCSSを適用しているのになぜ表示方法が違うのか?

div要素もheader,main,footerなどと同様に独立したブロックのため、入れ子の順番がかわるとcssの適用順が変わります。
最近のブラウザには、最初から開発者ツールというのが搭載されていて有効にするとHTMLの構造やCSSの適用状況を視覚的に確認できます。しかも、直接値を書き換えたりできる。
例えば、firefoxなら「ツール→ウェブ開発→開発メニューを表示」で有効にできます。

投稿2017/12/23 00:17

編集2017/12/23 00:25

nullpon

総合スコア5737