CSS
CSSはグローバルスコープ
読み込んだCSSファイル全てが同じスコープで管理される
CSSは右から左に読み込まれる
擬似クラス
セレクタに付加するキーワードのこと
選択される要素の特定の状態のスタイルを指定するもの
margin-block-start
CSS のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられる
object-fit:cover
トリミングしてくれる
変数を設定することで、複数箇所で同じスタイルを設定して管理を楽にする(スタイルの変更がある時に変数の中身を変えるだけでスタイルを当てたところ全てに変更を効かせることができる)
意味的な識別もしやすくなる
ex.
code:css
:root {
--main-bg-color: brown;
}
//:root(擬似クラス)をCSSファイルに書くと、<html>要素に対してCSSをつけることができる
//:rootに指定したものはh1,h2,pなど、どこからでも使用できる
.h1 {
background-color: var(--main-bg-color);
}
cssはhtmlのタグに直接つけない
code:css;
p {
xxxxx
}
//↑ダメな例
正しいレイアウトには正しいHTML構造が必要
大枠のブロックを設計する上で大事なことは、まず大きな要素を抽出する
Flexbox
GRITレイアウト