〇書式

・border: 太さ 種類 色; 
・border-radius:  数値と単位;
・楕円	border-radius: 横の半径 / 縦の半径;	
			（↑上 右 下 左の順に指定）
	{ border-radius: 10px 20px 30px 40px / 5px 10px 50px 100px; }

〇outline・outline-offset

・書式		outline : px 種類 色;
・outlineはborderのさらに外側の輪郭に線を引く。
・「outline-offset」はoutlineの内側に余白を設定。
・borderとoutlineの違い
	a．outlineは要素の幅に影響を与えない
	b．outlineは上下左右の指定はできない

〇border-collapse

・<table>で隣り合ったテーブルセルの間隔を指定。
・separate	初期値。ボーダーラインを離して表示。
・callapse	ボーダーラインを重ね合わせて表示。

〇三角形

・幅広のborderを作り、要素の幅と高さを「0」指定。
・表示したい三角形以外の色を「transparent（透明）」に指定。

〇translate（移動）

　・translate()		X軸とY軸への移動を一括指定。
　・translateX()	X軸への移動。負の値で右方向。
　・translateY()	Y軸への移動。負の値で上方向。
　・translateZ()	Z軸(奥行き)。perspectiveが必要。
　・translate3d()	X軸、Y軸、Z軸を一括設定。
		transform: translateX(-40px);

〇rotete（回転）

　・rotate(deg)		Z軸(中心を基点)に回転。
　・rotateX(deg)	X軸(上下)に回転。
　・rotateY(deg)	Y軸(左右)に回転。
　・rotate3d(deg)	X軸、Y軸、Z軸を一括で設定。

〇scale（伸縮）

　・scale()	X軸とY軸を一括指定。カンマで区切る。
			transform: scale(1.5);
			transform: scale(1.5, 2.6);
　・scaleX()	X軸の拡大縮小。左右均等。負で縮小。
　・scaleY()	Y軸の拡大縮小。上下均等。負で縮小。
　・scale3d()	X軸、Y軸、Z軸の拡大縮小を一括設定。
		親にtransform-styleとperspective必要。

〇skew（傾斜）

　・skew(deg)	X軸とY軸への傾斜を一括指定。
			transform: skew(10deg, 10deg);
　・skewX(deg)	X軸(横方向)に傾斜をつける
　・skewY(deg)	Y軸(縦方向)に傾斜をつける。

〇動きの起点を指定（transform-origin）

　・transform-originは、動きの基点を変更する。
　・値		px、％、top、bottom、left、rightなど。
　・書式	transform-origin: X軸の基点, Y軸の基点, Z軸

〇3Dの動きを再現（transform-style）

　・CSSで3Dを再現するために必要なプロパティ。
　・親要素にtransform-styleを指定することで、子要素を平面もしくは、3Dで表示することが可能となる。
　・値	　flat		初期値。平面。
	　preserve-3d	

〇遠近感を指定（perspective）

　・transformプロパティで前後の空間の使用に必要。
　・perspectiveは、現在の視点から要素に対して、どの程度の距離で示すかを指定する。
　・値が大きくなれば遠くなり、小さくなれば近くなる。
  	　transform: perspective(200px) rotate3d(1,1,1,45deg);

〇3Dの視点を指定（perspective-origin）

　・どこから要素の動きを見るかを指定する。
　・親要素に設定。
　・値	px、％、top、bottom、left、rightなど。

〇値の組み合わせ（複数指定）

　・値を半角スペースで区切って併記する。
　　　　　transform: translateX(100px) rotate(360deg);

〇overflow

　・visible	・初期値。はみ出た部分が表示。
	　	・white-spaceで「nowrap」を指定すると、横にはみ出る。
　・hidden　	・要素からはみ出た部分が非表示。
		・スクロールでの表示も不可。
　・scroll	・はみ出た部分が隠れてスクロール可能。
		・横スクロールするには、overflow:scrollとwhite-space:nowrapを指定。
　・auto	・ブラウザの規定（基本的にスクロール）。
　・overflow-x	横にはみ出た部分の扱いを指定。
　・overflow-y	縦にはみ出た部分の扱いを指定。
		overflow-y: scroll;　/*縦方向はスクロール可*/
		overflow-x: hidden;　/*横方向はスクロール不可*/

〇white-space（はみ出た部分の折り返し）

　・nomal	・初期値。右端で自動で行が折り返す。
		・改行やSpaceは1つの空白文字になる。
　・nowrap	・自動的に改行しない。横にはみ出る。
		・改行やSpaceは1つの空白文字になる。
　・pre-line	・右端で自動で行が折り返す。
		・改行にみ表示に反映される。
　・pre		・自動的に改行しない。
		・空白も改行も表示に反映される。
　・pre-wrap	・右端で自動で行が折り返す。
		・空白も改行も表示に反映される。

〇三点リーダー（text-overflow: ellipsis）

　・テキストが１行の場合のみ有効。
　・「overflow: hidden;」と「 whiteSpace: nowrap;」と「textOverflow: ellipsis;」を同時に指定。

〇文字色（color）

〇文字の太さ（font-weight）

　・bold	・太字。700と同じ。
　・nomal	・普通。400と同じ。
　・lighter	・太さを今より一段階細くする。
　・bolder	・太さを今より一段階太くする。

〇文字のスタイル（font-style）　

　・italic	斜体。
　・nomal	普通。

〇文字のサイズ（font-size）

　・px		・縦のピクセルの大きさで指定。
		・ブラウザの規定値は「16px」。
		・メインの文章は15px〜18pxが推奨。
　・em		・親要素の文字の高さを「1」とした倍率。
		・親にpx指定がない場合「1em=16px」。
		・bodyやhtml要素でfont-sizeを62.5%にすると「1em=10px」となる。
　・rem		・htmlタグに指定されたサイズを基準。
		・デフォルトの場合は「1rem=16px」。
　・%		・親要素の文字の大きさを100とした倍率。
　・キーワード	・7段階。xx-small～medium～xx-large、smaller、largerで指定。

〇文字の行間（line-height）

　・nomal	ブラウザの初期値。
　・px		px数で指定。
　・em		親要素の文字の高さの相対値。
　・%		親要素の文字の高さの相対値。
　・単位無し	文字の高さを「1」とした場合の倍率。
	・「1.6」の場合、「0.6」文字分だけ行間が空く。
	・読みやすい行間は「1.5〜2.0」の間。

〇文字の間隔（letter-spacing）

　・nomal	ブラウザの初期値。ほぼ「0」となる。
　・px		px数で指定。
　・em		親要素の文字の高さの相対値。
	・「0.1em＝文字の高さの1/10」の字間。
	・読みやすい字間は「指定なし、0.05〜0.1em」。

〇インデント/字下げ（text-indent）

　・単位付き数字	初期値「0」。マイナスも指定可能。
　・％			親要素のwidthに対するパーセント。
　・eatch-line		単位付き数字と併用。
　・hanging		単位付き数字と併用。インデントされる行が逆転（１行目以外がインデント）。
		text-indent: 1em each-line; 
		text-indent: 1em hanging; 
　◆ぶら下がりインデント(2行目以降1字下げ)
		text-indent: -1em;
		padding-left: 1em;

〇文字の右端揃え（text-arlign: justify）

　・「text-arlign: justify」で右端列がブロックに揃う。
　・和文でtext-arlign: justifyを指定する際の指定方法。
		.justify{  text-align: justify;
　			  　word-break: break-all; 
			  　text-justify: inter-ideograph;
			　　text-justify: inter-character;
			  　word-wrap: break-word;
			  　overflow-wrap: break-word; }

〇縦書き横書きと行ブロックの方向（writing-mode）

　・horizontal-tb	初期値。横書き、上から下。
　・vertical-rl		縦書き、右から左。
　・vertical-lr		縦書き、左から右。
　・日本語の縦書きでは、vertical-rl を指定。

〇縦書のテキストの向きの調整（text-orientation）

　・mixed	ラテン文字など横書き標準は右向き、漢字など縦書き標準の文字は上向きに表示。
　・upright	すべての文字を上向きに表示。
　・sideways	すべての文字を右向きに表示。

〇大文字/小文字（text-transform）

　・none		初期値。変換しない。
　・capitalize		各単語の先頭文字を大文字に変換。
　・uppercase		全ての文字を大文字に変換。
　・lowercase		全ての文字を小文字に変換。

〇装飾（text-decoration）

　・アンダーラインや、aタグの下線を消す際に使用。
　　　・none		線無し
　　　・underline	下線
　　　・overline	上線
　　　・line-through	打ち消し線
　　　・underline double	下線・二重線
　　　・underline wavy	下線・波線
　　　・underline red	下線・赤色
		{text-decoration: underline wavy red 3px;}
　・text-decoration-style	線の種類の指定
　・text-decoration-color	線の色の指定
　・text-decoration-thickness	線の太さ

〇書体（font-family）

　・bodyタグに対してCSSでフォントを指定する。
　・複数のフォント名を半角カンマで区切って並べる。
　・フォント名にスペースや数字が含まれるものは「''」または「”"」で囲む。
　・値の最後に総称フォントを書く。
	　{ font-family : フォント名１,フォント名2,.....,serif ;}
　・フォントファミリー名（正式な固有名称）
　　　・MSゴシック：Microsoft Gothic。WindowsOS。
　　　・MS Pゴシック：Windows 8以降に導入。
　　　・メイリオ：Meiryo。マイクロソフトの日本語用。
　　　・Meiryo UI：ひらがなとカタカナの横幅が狭く、メイリオより多くの文字が記載可能。
　　　・游ゴシック：直線的でシンプルな文字形状。
　　　・ヒラギノ角ゴシッグ：デザイン業界で高評価。
・総称フォント（フォントの大きなカテゴリー）
　　　・OSやブラウザ毎にデフォルトのフォントが適用。
　　　・総称フォント名は引用符では囲わない。引用符で囲うと、ブラウザがフォントファミリー名として
	認識して正しく機能しない場合がある。
　　　・総称フォントには、sans-serif（ゴシック体）か、serif（明朝体）のいずれかを指定しておく。

〇概要

　・拡張子は「.scss」。
　・HTMLで直接読み込めない。
　・「.scss」ファイルをコンパイルして「.css」ファイルに変換してから読み込ませる。
　・コンパイルはV.S.Codeの拡張機能「Wathc Sass」が便利。

〇入れ子（ネスト）構造

　・記述量が減り、HTML構造も見えやすくなる。
　・クラス名を変更したい場合、Sassを使用している場合、圧のクラス名のみを変更すればいい。
	.header {
		（スタイル指定）
		nav {
			（スタイル指定）
		}
		ul {
			（スタイル指定）
			li {
				（スタイル）
			}
		}
	}

〇「＆」で親セレクタを参照　

　・「＆（アンパサンド）」を使用すると、ネストしている親セレクタを参照できる。
　・ホバーや疑似要素などを使用したい場合、Sassでは「＆」を使用する。
	a {
		color: #333;
		&:hovor {
			text-decoration: underline;
		}
	}

〇メディアクエリの使用

　・Sassでメディアクエリの指定をしたい場合は、ネスト内に記述する。
　・一つの要素に対するすべてのスタイルを一か所にまとめることが出るため、コードのメンテナンスが容易。
	.test{
		（スタイル記述）
		@media screen and (max-width: 1024px) {
			（スタイル記述）
		}
	}

〇変数の使用（$変数名: 値;）

　・Sassで変数名の指定		$変数名: 値;
　・Sassで変数名の呼び出し	$変数名
	$main-color: blue;
	.test {
		background-color: $main-color;
	}
　・上記のコンパイル結果
	.test {
		background-color: blue;
	}

〇定義したCSSスタイルの定義（@mixin）・呼び出し（@include）

　・@mixin	CSSスタイルを定義する
			@mixin 任意の名前 {
				（スタイルの定義）
			}
　・@include	CSSスタイルを呼び出す
			セレクタ {
				@include 任意の名前;
				（追加したいスタイル）
			}

〇条件分岐（@if）

　・@if 条件 {
	（スタイル）
　　}
　　@ else {
	（スタイル）
　　}
		$sample: 0;
		.box {
			@if sample == 0 {
				background-color: blue;
			}
		}

〇２点間の繰り返し処理（@for）

　・指定した開始値から終了地の間の繰り返し処理を行う。
　・2種類の書き方がある。
	・through	終了値を含める
		@for $変数名 from 開始値 through 終了値 {
			（スタイル）
		}
	・to	終了値を含ない
		@for $変数名 from 開始値 to 終了値 {
			（スタイル）
		}
　・文字列として変数を使いたい場合は「#{$変数名}」と記述する。
		@for $i from 1 through 4 {
			.mt#{$i * 20} {
				margin-top: 20px * $i;
			}
		}
　・上のコンパイル結果
		.mt20 {
			margin-top: 20px;
		}
		.mt40 {
			margin-top: 40px;
		}
		.mt60 {
			margin-top: 60px;
		}
		.mt80 {
			margin-top: 80px;
		}

〇条件指定の繰り返し（@while）

　・条件を定義し、その条件を満たしている間は繰り返し処理を行う。
		@while 繰り返し条件 {
			（スタイル）
		}
　・例
		$i: 0;
		@for $i < 4 {
			$i: $i + 1; 
			.mt#{$i * 20} {
				margin-top: 20px * $i;
			}
		}
　・上のコンパイル結果
		.mt20 {
			margin-top: 20px;
		}
		.mt40 {
			margin-top: 40px;
		}
		.mt60 {
			margin-top: 60px;
		}
		.mt80 {
			margin-top: 80px;
		}

〇リスト数だけ繰り返す（@each）

　・あらかじめ指定しておいたリストの数だけ繰り返し処理を行うことができる。
		$変数名①: リスト1, リスト2, リスタオ3, ・・・;　　　←リストの定義
		@each $変数名② in $変数名① {			
			（スタイル）
		}
　・例
		$animals: cat, lion, tiger;
		@each $animal in $animals {			
			.#{animal} {
				background-image: url("/img/#{$animal}.png");
			}
　・上のコンパイル結果
		.cat {
			background-image: url("/img/cat.png");
		}
		.lion {
			background-image: url("/img/cat.png");
		}
		.tiger {
			background-image: url("/img/tiger.png");
		}