質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • HTML

    8332questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5352questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3733questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1920questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    140questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

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

解決済

回答 7

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 626

pipi

score 145

HTML、CSSを勉強しているのですが、
どうしてもCSSの動きというものが理解できません。

なにをどうしたらよいのか・・・・
何か分かるようになるコツみたいなものがあるのでしょうか?
やはり、習うより慣れろ!!で何回も何回も書いて一つ一つの動作を覚えていくしか
ないのでしょうか?

ドットインストールや様々な書籍を参考にして色々調べながら書くようにしていても、
書き方が色々あり、さらに混乱を招くという状態に陥っています。。。

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

親要素だとか子要素だとか・・・・もう本当に混乱です。

<!--html1-->
<body>
  <header>
    <div class="cntainer">
      ヘッダー
  </div>
  </header>
  <main>
    <div class="cntainer">
      メイン
    </div>
  </main>

  <footer>
    <div class="cntainer">
      フッター
    </div>
  </footer>
  </div>
</body>
<!--html2-->
<body>
    <div class="cntainer">
      <header>
        ヘッダー
      </header>
      <main>
        メイン
      </main>

      <footer>
        フッター
      </footer>

  </div>
  </body>
@charset "UTF-8";

.cntainer{
  margin: 0 auto;
  width: 500px;
  background: red;
}

header{
  background: tomato;
}

main{
  background: skyblue;
}

footer{
  background: gray;
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hichon

    2017/12/23 09:02

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

    キャンセル

回答 7

+6

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/23 08:42

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

    キャンセル

  • 2017/12/23 08:47

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

    キャンセル

  • 2017/12/23 08:57

    例えばこのような構造にしたいというのがあって、そのサンプルが見つからなければ、それを具体的に図に描いて新しく質問してみてください。
    きっと誰か答えてくれるでしょう。

    ただし聞きたいことだけ聞くのではなく、どのように試行錯誤したのかがわかるよう、自分で書いたソースを数種類上げるのを忘れないように。

    キャンセル

+3

なんとなくですが

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

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

/// HTML1
+ body  + header   + div class="cntainer"
        |
        + main     + div class="cntainer"
        |
        + footer   + div class="cntainer"

/// HTML2
+ body  + div class="cntainer"   + header
                                 |
                                 + main
                                 |
                                 + footer

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

.cntainer{
  margin: 0 auto;
  width: 500px;
  background: red;
}

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

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


  • HTML1/HTML2ともに最後の</div>タグが余分です。
    DOMノードの構造がツリーだから開始タグと終了タグにより子供ノードを明示する仕組みになっているという点が曖昧だったりするのではないか・・・とも感じました。
  • cntainerって単語は変ですね。containerのtypoではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+2

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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/24 18:17

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

    キャンセル

  • 2017/12/26 00:13

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

    キャンセル

+2

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8332questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5352questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3733questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1920questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    140questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。