HTML/CSS基礎⑤

セレクタの得点について

セレクタは加点方式で、詳細度によって優先順位が決まります
カンマ区切りのセレクタは加点されません
※は全称セレクタで、最初の行によく見られます
style 属性は1000点と最も高く、直接HTMLに記述されます
セレクタの種類と得点は以下の通りです

全称セレクタ (*): 0点
要素名 (例: h1, p, div): 1点
擬似要素 (例: :after): 1点
擬似クラス (例: :hover): 10点
class (例: .main-text): 10点
id (例: #header): 100点
style属性: 1000点
!important: 最優先

Chrome検証ツールについて

Chromeの検証ツール（デベロッパーツール）は、ウェブページの構造やスタイルを確認・編集するために使用されます
ボックスモデルは、コンテンツ、パディング、ボーダー、マージンの4つの領域から構成されます
box-sizingプロパティは、ボックスのサイズ計算方法を制御し、border-boxを使用すると、widthとheightにパディングとボーダーが含まれます
calc()関数を使う事で値の計算が出来ます
borderプロパティは、上下左右のボーダーを個別に、または一括で指定できます
paddingプロパティは、ボックスの内側の余白を指定し、上下左右個別に指定、もしくは一括で指定できます

(border-top: 10px; 上

border-bottom: 30px; 下

border-left: 左のボーダー一括指定;　左

border-right: 右のボーダー一括指定;　右)

padding: 20px; 上下左右20px

padding: 10px;　10px 20px; 上下10px 左右20px

padding: 10px 20px 30px 上10 左右20　下30

padding: 10px 20px 30px 40px 上10 右20 下30 左40

marginプロパティは、ボックスの外側の余白を指定し、負の値も使用できます
マージンの相殺：上下のボックスのマージンが接する場合、大きい方のマージンが適用されます
マージンでの中央配置：widthを指定し、左右のmarginをautoに設定します
マージンでの右端配置:widthを指定し、左のmarginをautoに設定します
background-colorプロパティは、背景色を指定し、コンテンツ、パディング、ボーダー領域に適用されます
background-imageプロパティは、背景画像を指定し、url()でパスを指定します
background-attachmentプロパティは、背景画像のスクロール設定 (fixed, scroll) を行います
background-repeatプロパティは、背景画像の繰り返し方法 (repeat, repeat-x, repeat-y, no-repeat) を指定します
backgroundプロパティは、背景に関するプロパティを一括で指定しますが、複雑なため推奨されません
background-sizeプロパティは、背景画像のサイズ (auto, contain, cover, 幅・高さ, パーセンテージ) を指定します
background-positionプロパティは、背景画像の表示開始位置 (top, bottom, left, right, center, %, px) を指定します