◆ブラウザのデベロッパーツール

・ショートカット	ctrl+shift+C

◆VScodeショートカット

・ctrl + X		行の切り取り
・Ctrl + Shift + k	行の削除
・ctrl + C		行のコピー
・Shift + alr + ↓	カーソル行を下にコピー
・alt + ↓		カーソル行を下に移動
・Ctrl + Enter		下に行追加
・Ctrl + [		インデント追加
・Ctrl + ↓		行をスクロール
・Ctrl + L		行を選択

◆CSSファイルの設定方法（HTML）

１．CSSファイルの拡張子を「.css」にする。
２．<link rel="stylesheet" href="CSSファイル">

◆セレクタ

・空白（Space）を入れない。
・英数字とハイフンとアンダースコアで記述。
・１文字目は必ず英字。
・複数のclass名を付ける場合、半角Spaceを空ける。
	<p class="blue small text_size">

・基本形		セレクタ { プロパティ : 値 ; }
・複数セレクタ		セレクタ, セレクタ { }
・子孫セレクタ		セレクタ (半角Space)セレクタ { }
・特定のクラス名がつけられた要素　　要素名.クラス名（←半角Space無し）
・直下の子要素のみ		　　セレクタ>セレクタ>セレクタ { }
・同階層の直後に隣接のみ	　　セレクタ + セレクタ { }
・同階層の直後以降の全て	　　セレクタ ～ セレクタ { }
・属性セレクタ		セレクタ [属性名] { }
			セレクタ [属性名="値"] { }
・属性（複数指定されている属性値の内、特定の属性値を含む要素）		セレクタ [属性名~="値"] { }
・属性セレクタ（「-(ハイフン)」前の値が指定の属性値をもつ要素）		セレクタ [属性名|="値"] { }
・属性（一部が一致）		セレクタ [属性名*="値"] { }
・属性（'始め'が一致）		セレクタ [属性名^="値"] { }
・属性（'最後'が一致）		セレクタ [属性名$="値"] { }
・全ての要素			* { }
・セレクタの中の全要素		セレクタ* { }	
・△以外のセレクタに適用　	セレクタ : not ( △ ) { }
	li:not(:last-child)	{ }　最後を除くli

◆疑似要素（::）

・要素と横並びは「display: inline-block;」、縦並び（改行）は「display: block;」指定。
・contentに画像指定すると画像の幅と高さは変更不可。
・画像の幅を変更するには、displayをblockかinline-
	blockにして、「background-image」に指定。

　::first-letter	要素の位置文字目を指定。
　::first-line		要素の位置行目を指定。
　::before		要素の直前にコンテンツを追加。
			「"」または「'」でcontentを指定。
　::after		要素の直後にコンテンツを追加。
			画像も可能。
			p.example::after {
			content: url( "../image/artis-logo.jpg");}
　::selection		選択した文書の一部に適用。
　::marker		<li>の箇条書き記号ボックスを選択。
　::placeholder		<input>や<textarea>のプレイス
			ホルダー文字列を選択。

◆疑似クラス（:）

:checked	ラジオボタンで選択されている要素。
:invalid	無効な内容を持つ要素。
:required	必須項目の要素。

:any-link	要素が :link または :visited のいずれか。
:link		まだ訪問していないリンク。
:visited	訪問したことのあるリンク。
:target		URL のフラグメントに一致するidを持つ固有の要素（ターゲット要素）。

:first-child		同階層の一番最初の要素。
:last-child		同階層の一番最後の要素。
:only-child	要素に兄弟がいない場合に適用。
:nth-child(n)	同階層のn番目。nは0からスタート。
　　odd			奇数。
　　even		偶数。
　　:nth-child(7)	7番目。
　　:nth-child(n+7)	7、8、9番目・・・。
　　:nth-child(3n+4)	4，7、10、13番目・・・。
　　:nth-child(-n+3)	最初の 3 つの要素。
　　:nth-child(n+8):nth-child(-n+15)	 8～15 。
　　:first-of-type	最初の特定の型に一致する要素。
　　:last-of-type	最後の特定の型に一致する要素。
　　:nth-of-type(n)	指定された型のn番目の要素。
　　:empty		子がない要素。　

:hover		ポインターが当たっている要素。
:focus		フォーム入力欄などが有効な要素。
:activ		ユーザー操作でアクティブな要素。

:not()		指定セレクターに一致しない要素。
:is()		列挙セレクターの何れか一つに該当の要素。
		　　{:is(ol, ul, menu:link) :is(ol, ul) {color: #000; }
:where()	列挙セレクターのうちの何れかに当てはまるすべての要素。

◆強制制御

・子孫引継ぎ	プロパティ: inherit; 
・スタイル	値の後ろに「!important」

◆ベンダープレフィックス

・-ms-		IE向け。
・-moz-		FireFox向け。
・-webkit-	Safari向け。

◆メディアクエリ

・@media メディアタイプ and (条件１) and (条件２) { セレクタとスタイル }
・@media (min-width: 768px) { body {font-size: 16px; } }

・screen	一般的なディスプレイ型デバイス
・print		印刷物
・all		全てのメディア（初期値）

・max-width : ○px	ビューポートの幅が○px以下
・max-height : ○px	ビューポートの高さが○px以下
・max-device-width : ○px	画面の幅が○px以下
・max-device-height : ○px	画面の高さが○px以下
・orientation : portrait	デバイスが縦向き
・orientation : landscape	デバイスが縦向き
・resolution : ○		デバイスの解像度が○

・スタイルを切り替える画面幅の境界線。
・画面幅
　　・スマートフォン	320-480px(横向き480px以上)
　　・タブレット	768px以上
　　・パソコン		1200px以上
・よく使われるブレークポイント
　　・480, 600, 768, 1200px 
　　・576, 992, 1024px

◆数学関数

・「+」と「-」の前後には半角スペースが必要。
・calc()の入れ子では、内部関数は単純な()式。
	width: calc( 100% / calc(100px * 2) );　⇒　width: calc( 100% / (100px * 2) );
・calc()の実装例（ルートに基づいたサイズ指定）
	・font-size: calc(100vw / 30);
	・ font-size: calc(16px + 0.20vw);
	・width: calc(100% - 300px);	
	・ height: calc(100vh - 60px);

・値をカンマで区切って最も小さい値を適用。
・最大値の定義。最小値は定義されない。
・widthとmax-widthを同時に指定できる。
	 width: min(70%, 800px);	

・値をカンマで区切り、最も大さい値を適用。
・最小値の定義。最大値は定義されない。
・widthとmin-widthを同時に指定できる。			
	width: max(70%, 800px);	
・余白へ適用
	margin: 0 max(5px,1vw) max(5px,1vw) 0;

・最小値、推奨値、最大値を指定でき、min()とmax()を組み合わせた動き。
・最小値と最大値間の値を流動的に処理する為、推奨値は固定値ではなく相対値（vw や %）を使用する。
・clamp(10px,15px,20px)では、15pxが適用。	
	font-size: clamp(10px,1vw,20px);
	width: clamp(400px, 50vw, 600px);

◆カスタムプロパティ（変数）

・書式		セレクタ { --名前: 値; }
	:root { --grey: #333; }

・書式		プロパティ: var(--名前); 
	color: var(--grey);

◆種類

・static	・初期値。
・relative	・現在の位置を基準に相対位置を指定。
		・ボックス中心寄せ時の親要素。
・absolute	・親要素を基準に絶対的な位置を指定。
		・ボックス中心寄せ時の子要素。
・fixed		・画面の定位置に固定する。
・sticky	・スクロールに合わせて追従させる。
		・top, bottom, left, rightの一つ以上が必須。
		・アイテムはコンテナ内でのみフロート。	
		・親要素の終了位置で固定が解除される。
		・「overflow: hidden;」ではstickyが無効

◆stycky

・要素を固定して、スクロールに合わせて追従させる。
・top, bottom, left, rightのどれか一つ以上の指定が必要。
・position: sticky;を指定するとその親要素が自動的にスティッキーコンテナとなる。
・スティッキーアイテムはスティッキーコンテナ内でしかフロートすることが出来ない。									・「position: stiky;」を設定した要素の親要素の終了位置で固定が解除される。
・スティッキーコンテナの中にスティッキーアイテムが複数ある場合、スクロール位置時点でフロートしているアイテムが、
　それ以前のアイテムに覆いかぶさるようにフロートしていく。
・スティッキーアイテムを一つずつ持ったスティッキーコンテナが複数ある場合、それぞれのコンテナ内でフロートして他のアイテムに覆いかぶさることはない。
・「overflow: hidden;」で使用する場合、「position: sticky;」が効かない。（position: sticky;とoverflow: hidden;は共存できない。）
・position: sticky;の子要素は、スクロール可能な親要素に張り付く（親を軸に固定される）状態となるが、overflow:hidden;を使うと親要素が
　スクロールされい対象となり、くっついている子要素は自分の今いる位置が正しいと判断し、固定されない状態になる。
・overflow: hidden;を使うのではなく、contain: paint;を使う。

◆top, bottom, left, right

・上下左右の具体的な位置を指定。

◆inset

・top, right, bottom, leftを一括指定。
・絶対配置で天地中央に要素を配置する場合にコードを簡潔にまとめることができる。
　　inset:10px 　　　　　　　上下左右に適用。　
　　inset:10px 5px　　　　　 上下・左右に適用。
　　inset:10px 5px 7px　　　 上・左右・下に適用。
　　inset:10px 5px 7px 3px 　上・右・下・左に適用。

◆ヘッダーの固定表示（fixed）

・header { position: fixed; 	
	　　width: 100%; 
	　　z-index: 1; }

◆モーダルウィンドウ（absolute・inset）

・header { position: fixed;
　　　　　inset: 0;
　　　　　margin: auto;
　　　　　width:80%;
  　　　　height:80%;
	　z-index: 1; }