フィヨルドブートキャンプでのHTML&CSSの学び
【HTML】
マークアップの仕方
- 明確に発言者と発言内容を区別したいときに、
bタグにより他と区別することができる sectionタグを使うにはそのsectionに見出しを持つことが必須- 長いコメントなどには
divを使って区切ると分かりやすい - コメントなどは一つの記事として
articleで囲むのもあり - sectionで区切るほどではない情報にはdl dt dd でのマークアップをすることもできる
divとspanの違い
- div: 基本設定が
display: block - span: 基本設定が
display: inline
HTMLのidとclassの違い
- class: 同classを何度でも宣言可能。CSSでスタイルを一括で変えるときに使用。
- id: 各idは一回しか宣言できない。CSSではclassよりも優先的にスタイルが反映される。ページ内のリンク付に有効。
【CSS】
CSSのポイント
- 子を
position: absoluteを使うときは、親はposition: relativeまたはposition: fixedにする white-space: pre-wrap: 改行や半角スペースがブラウザ表示にそのまま反映&要素の端で行が折り返される- セレクタの指定
| セレクタ | 接頭辞 |
|---|---|
| タグ | なし |
| id | # |
| class | . |
- display
display表
子孫セレクタ（絞り込み指定）に関して
基本はclassによって指定する（そちらの方が処理も早く、HTMLとCSSを分離させることができる）。一方、ユーザーにHTMLを書かせるものは、子孫セレクタを使ってHTMLのタグ自体にスタイルをあてる必要がある。
余白に関して
box-sizing: border-boxにすれば親要素にピッタリハマるようになる- margin指定は値が大きい方が生き残る
