CSSファイルの読み方

CSSって知識ゼロで見ると結構謎が多い。

h1 {
  xxx: xxx;
  xxx: xxx;
}

.contents {
  xxx: xxx;
  xxx: xxx xxx xxx xxx;
}

.contents h1 {
  xxx: xxx;
  xxx: xxx;
}

• 頭に「.」がついている/ついていないの違いは何？
• .contents h1みたいにスペース区切りは何？引数？

.から始まるCSS

h1 {
  xxx: xxx;
  xxx: xxx;
}

.contents {
  xxx: xxx;
  xxx: xxx xxx xxx xxx;
}

結論

• 特定のHTMLタグのスタイル指定はタグ名 {}
• 特定のClassのスタイル指定は.クラス名 {}
• 特定のClassの中の特定のHTMLタグのスタイル指定は.クラス名 タグ名 {}

タグ名 {}の使いどころ

• ページ全体のデザイン統一とかに使いそう
• フォント指定とか文字色の統一など

.クラス名{}の使いどころ

• いわゆる「デザイン」で使うイメージ
• TOPページや、上下の帯状のパーツなど

.クラス名 タグ名 {}の使いどころ

例えばcontents(ページのメイン部分によく使われるクラス名)に3つの画像を説明付きで並べて表示するとき。それぞれの画像につける見出しや文章のスタイルを統一するときに使う。

教材

Progateいいぞー

あーいや、Reactを学ぶうえではそんなことなかった。
JavaScript, CSSの基礎を学ぶために1ヶ月の金額を出せるかどうかがポイント。