CSSの雑多知識
#CSS
基礎用語
code:css
/* ここはコメント文 */
div.foo { /* ←はセレクタ */
display: none;
/* ← プロパティ */
/*     値 → */
}
上の場合、
div.fooがセレクタ
セレクタの隣の中かっこ{}の中にあるのがスタイル
displayがプロパティ名
noneが値
marginは外側の余白・paddingは内側の空白
borderを引いてみればわかる
id属性は1種類の値につき1つのみ使う
class属性はたくさん使ってもいい
もちろん1種類につき1ヶ所だけで使っても良い
とりあえずレイアウトを組むならdisplay: flex;かdisplay: grid;を使うべき
flexなら、width: 100%;とflex-directionとalign-items: center;で中央揃えできる
間違っても、margin: 0 auto;で中央揃えをしてはいけない
この手法は融通が効かなくて めんどくさい
とりあえず個別のclass属性をつけた<div>で要素をグルーピングしておくと、スタイリングが楽になる
style属性はあまり使うべきではない
CSSで書いたスタイル
CSSを書いているとそのうち必要になる開発者ツールの使い方
/villagepump/Chromeのデベロッパーツールを使ってCSSのデバッグをする