css 使い方（のまとめ）集

2018-10-25 (Thu) · 122 words

---

class 属性と、id 属性の使い分け

class 属性

<p class="example01">Example Class Attribute</p>
p.example01 { color:red; }
<!- p要素の指定は省略可能 ->

• class名 : example01
• 要素名 : p

学級名 - 種別名を割り当てる - 同一 class 名を１ページで何度でも使える

id 属性

<p id="example02">Example Id Attribute</p>
p#example02 { color:blue; }
<!- p要素の指定は省略可能 ->

• id名 : example02
• 要素名 : p

学籍番号 - 固有の名前を割り当てる - 同一 id 名は、１ページに1度しか使えない

スタイルの適用順序

• 同一属性内でのスタイル適用重複については、後勝
• id属性、class属性でスタイル適用が重複している場合は id属性が優先される ```html

  Example Class

p.example01 { color:red; } p.example01 { color:blue; } // こちらが優先される

#example02 { color:bule; } // こちらが優先される p.example01 { color:red; }

## まとめ
- 基本的には class 属性を使う
- id属性を使う場合は、その要素を一意に特定する必要があるのか？、　特定した方がわかりやくすいのか？を判断基準にする。
- id属性は、一意に要素を特定するという性質より、ページ内リンクの指定先として使用できる
```html
<a href="#footer">ページ末尾へ</a>

<div id="footer">
  ページフッター
</div>

命名規則は BEM(Block-Element-Modifier)

BEM表記

block__element--modifier

exmaple

• block フロントエンドフレームワークでいうところのコンポーネントに近い
  • card
• element block 内にのみ存在できるもの
  • cardtitle, cardtext, card__button
• modifier block または element を修飾したい場合に使用する
  • TODO

CSS設計

スタイル役割の分割