⚫︎CSSの記述
・セレクタの得点について
セレクタには優先順位があり、点数計算をして高得点のものが採用される。
同じ得点の場合は後ろに書いてあるものが採用される。
点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがあるため、意図したスタイルにならない時は点数を確認する。

⚫︎検証ツールの活用
検証したい画面で右クリック（ダブルクリック）するとHTML、CSSの記述が出てくる。
ここでは記載の変更が可能だが、あくまで検証（シミュレーション）であり、例えば色を変えても本当にサイトの色が変わるわけではない。
なおそのシミュレーションはWebブラウザに元々備わっている機能である。

【検証ツールの使い方】
これまではコードエディターで記述したものをWebページに反映させていたため、記載したものがどう反映されるかは、書いて→更新を繰り返していた。
検証ツールを使うことで、記述とその見え方を同時に確認し、細かくし調整することができ、最終的に検証ツールに書き込んだコードをコピペするだけでOK。

＜応用＞
・GoogleChromeに関しては、検証ツール上で大元のファイルのどの部分がどこに反映されているのかを表示してくれるため、追記修正等が容易にできる。
・GoogleChromeの検証ツール上では、CSSのプロパティにチェックボックスがついているため、付け外しすることで記述を消すことなくそのタグの作用を確認することができる。
・大元のファイルでスペルミスやプロパティの間違い、値の間違い、単位忘れをしたとしても、検証ツール上で「⚠️（注意）」が表示されて教えてくれるため、どこで間違ってしまったのか細かく見返す必要がない。

★HTMLやCSSは全部を覚える必要はない。（何度も言うが）
概要や目的、使い方考え方を理解し、検証ツールを使ったりプロパティなどを自身で調べたりするスキルを身に付け、やりながら覚えて動かせることが重要。

⚫︎CSSのプロパティについて
プロパティはおおよそ以下に振り分けられる。

＜バックグランド系プロパティ＞
・background-color プロパティ（背景色）
・background-attachment プロパティ（背景画像の位置）
・background-image プロパティ（背景画像のファイル）
・background-repeat プロパティ（背景画像の繰り返し）
・background プロパティ（背景の一括指定）
・background-size プロパティ（背景画像のサイズ）
・background-position プロパティ（背景画像の表示開始位置）

＜テキスト系プロパティ＞
・color プロパティ（文字の色）
・opacityプロパティ（透明度）
・text-align プロパティ（文字の配置）
・text-decoration-color プロパティ（文字飾りの色）
・text-decoration-style プロパティ（文字飾りの線種）
・text-decoration-thickness プロパティ（文字飾りの線の太さ）
・text-decoration プロパティ（文字の飾りの一括指定）
・text-shadow プロパティ（文字の影）

＜フォント系プロパティ＞
・font-family プロパティ（フォントの種類）
・font-size プロパティ（フォントのサイズ）
・font-weight プロパティ（フォントの太さ）
・font-style プロパティ（フォントのスタイル）
・line-height プロパティ（行の高さ）
・font プロパティ（フォント一括指定）
・white-space プロパティ（空白・改行の表示方法）
・word-wrap プロパティ（単語の途中での改行方法）
・word-break プロパティ（テキストや単語の改行方法）
・tab-size プロパティ（タブ文字の表示幅指定）

＜リスト系プロパティ＞
・list-style-type プロパティ（リストマーカーの種類）
・list-style-image プロパティ（リストマーカーの画像）
・list-style-position プロパティ（リストマーカーの位置）
・list-style プロパティ（リストマーカーの一括指定）

＜レイアウト系プロパティ＞
・width プロパティ（内容の幅）
・max-width プロパティ（幅の最大値）
・min-width プロパティ（幅の最小値）
・height プロパティ（内容の高さ）
・max-height プロパティ（高さの最大値）
・min-heightプロパティ（高さの最小値）
・float プロパティ（回り込み）
・clear プロパティ（回り込みを解除）
・display プロパティ（要素の表示方法）
・overflow プロパティ（ボックスからあふれた内容の処理方法）

＜パディング系プロパティ＞
・padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
・padding プロパティ（パディング一括指定）

＜マージン系プロパティ＞
・margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
・margin プロパティ（マージン一括措定）
・マージンの相殺
・マイナスマージン
・ボックスの中央配置
・ボックスの右端配置

※マージンとパディング
・マージン（margin）：外側につく余白
・パディング（padding）：内側につく余白

※併せて覚えたい
・box-sizing：要素の幅・高さにpaddingとborderを含めるかどうかを指定するプロパティ。
指定できる値には以下の種類がある。

値	指定内容
border-box	paddingとborderを、要素のwidthとheightに含む。 例）widthを指定しても、paddingがあるとそれを超えて表示できないため、指定より表示領域が小さくなる。
content-box(初期値)	paddingとborderを、要素のwidthとheightに含まない。 例）widthの外側からpaddingが始まるため、相互に関係しない。
inherit	親要素の指定を引き継ぐ

参考：https://zero-plus.io/media/box-sizing/

★一括指定＝ショートハンドについて
・CSSの表記はプロパティ+値であるが、「一つのプロパティにつき一つの値」ではない。
text-decorationやfont、上記のmarginとpaddingなどは、一括で値を記載することができる。
これをショートハンドと言う。
　例）margin: 10px 8px 6px 4px; /* 上 右 下 左 /
　　　margin: 10px 20px 8px; / 上 左右 下 /
　　　margin: 10px 20px; / 上下 左右 /
　　　margin: 20px; / 四方向共通 */
時計回りに基本指定される。
上下・左右でまとめる場合は先に来るほうに合わせる。
参考：https://taneppa.net/shorthand/

・上下、もしくは左右の幅について、中央配置をしたい場合は、
値で一つづつ調整するのではなく「auto」を記載することで自動的に配置調整を行なってくれる。
　例）margin: 0 auto;　→上下0（開けない）、左右を中央配置にする。

⚫︎今日の講義まとめページ

【おまけ】
CSSだけで色々なことができる！
以下を反映させると…

body {
    background: linear-gradient(-45deg, #931c76, #114baf, #0edc41, #e2ae55) fixed;
    background-size: 800% 800%;
    animation: GradietionAnimation 6s ease infinite;
}

@keyframes GradietionAnimation {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

以下のようなデザインが付けられる！！

楽しい。