100日後にエンジニアになるキミ - 17日目 - CSS - CSSの基礎4

今日もCSSの続きをやっていきましょう。

前回のはこちら
[100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3](https://qiita.com/otupy/items/3b0d37c47553b20095b5)

CSSのプロパティの続きです。

## ポジション

**bottom**

要素を配置する際に、下からの距離を指定するためのプロパティ

| 値 | 意味 |
|:--|:--|
| 長さ | 「5px」「3em」のように、数値に単位を付けて指定 |
| パーセント値 | 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す |
| auto | 値が自動的に計算（初期値） |

```
bottom: 10px;
bottom: 10%;
bottom: auto;
```


**clip**

ボックスをクリッピングするためのプロパティ

| 値 | 意味 |
|:--|:--|
| auto | クリッピングされません。ボックス全体が表示（初期値） |
| rect(上, 右, 下, 左) | ボックスの左または上からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定 |
| inset(上, 右, 下, 左) | ボックスの四辺からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定 |

```
clip: auto;
clip: rect(30px, 100px, 70px, 25px);
clip: rect(30%, 100%, 70%, 25%);
clip: inset(30px, 0px, 30px, 25px);
clip: inset(30%, 0%, 30%, 25%);
```


**left**

要素を配置する際に、左からの距離を指定するためのプロパティ

| 値 | 意味 |
|:--|:--|
| 長さ | 「5px」「3em」のように、数値に単位を付けて指定 |
| パーセント値 | 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す |
| auto | 値が自動的に計算されます。（初期値） |

```
left: 10px;
left: 10%;
left: auto;
```


**position**

ボックスの配置を相対的にするか絶対的にするかを指定するプロパティ

| 値 | 意味 |
|:--|:--|
| relative | 要素の通常の位置から、top、right、bottom、leftで指定した分だけ相対的に移動 |
| absolute | 要素を、top、right、bottom、leftで指定した座標に絶対的に配置 |
| fixed | 要素をページ内に絶対的に配置この場合、スクロールしても要素の位置が固定されたまま |
| static | 要素を通常どおり配置し、top、right、bottom、leftを適用なし（初期値） |

```
position: relative;
position: absolute;
position: fixed;
position: static;
```


**right**

要素を配置する際に、右からの距離を指定するためのプロパティ

| 値 | 意味 |
|:--|:--|
| 長さ | 「5px」「3em」のように、数値に単位を付けて指定 |
| パーセント値 | 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す |
| auto | 値が自動的に計算されます。（初期値） |

```
right: 10px;
right: 10%;
right: auto;
```


**top**

要素を配置する際に、上からの距離を指定するためのプロパティ

| 値 | 意味 |
|:--|:--|
| 長さ | 「5px」「3em」のように、数値に単位を付けて指定 |
| パーセント値 | 「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す |
| auto | 値が自動的に計算されます。（初期値） |

```
top: 10px;
top: 10%;
top: auto;
```


**z-index**

要素のスタックレベルを指定するプロパティ

| 値 | 意味 |
|:--|:--|
| auto | スタックレベルは「0」（初期値） |
| 整数 | スタックレベルを整数で指定「0」を基準として、値が大きいほど上。|

```
z-index: auto;
z-index: 3;
z-index: 2;
z-index: 1;
z-index: 0;
z-index: -1;
z-index: -2;
z-index: -3;
```


## 画像

**image-resolution**

画像の解像度を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 解像度 | 数値に「dpi」を付けて指定 |
| from-image | 画像形式特有の解像度を指定 |
| snap | 「dpi」または「from-image」で指定した解像度とデバイスの解像度 |

```
image-resolution: 300dpi;
image-resolution: from-image;
image-resolution: 300dpi from-image;
image-resolution: 300dpi snap;
image-resolution: from-image snap;
```


**object-fit**

オブジェクトをボックスにフィットさせる方法を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| fill | オブジェクトはアスペクト比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされます。（初期値） |
| contain | オブジェクトはアスペクト比を保ちながら、全体がコンテンツボックスに収まるようにリサイズ |
| cover | オブジェクトはアスペクト比を保ちながら、コンテンツボックスを完全に覆うようリサイズ |
| none | オブジェクトはリサイズしない |
| scale-down | 「none」か「contain」の小さい方を適用|

```
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
```


**object-position**

ボックス内のオブジェクトの位置を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| パーセント値 | 配置領域の幅または高さの相対位置と、オブジェクトの幅または高さの相対位置を合わせる。|
| 長さ | 「px」や「em」などのサイズで、水平または垂直方向の位置を指定 |
| top | 値が1個または2個の場合は上端を示す。それ以外は相対位置を示す基準としての上端を意味 |
| right | 値が1個または2個の場合は右端を示す。それ以外は相対位置を示す基準としての右端を意味 |
| bottom | 値が1個または2個の場合は下端を示す。それ以外は相対位置を示す基準としての下端を意味 |
| left | 値が1個または2個の場合は左端を示す。それ以外は相対位置を示す基準としての左端を意味 |
| center | 水平位置または垂直位置の数値が指定されない場合は、水平の位置が50%または垂直の位置が50% |

```
object-position: left 10px top 15px;
object-position: right 3em bottom 10px;
object-position: 100% 100%;
```

## マーキー

マーキーはテキストを流れるように動かす方法の指定です。

**marquee-direction**

マーキーのスクロール方向を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| forward | マーキーの向きが水平の場合は「左から右」、垂直の場合は「上から下」に、コンテンツをスクロール（初期値） |
| reverse | マーキーの向きが水平の場合は「右から左」、垂直の場合は「下から上」に、コンテンツをスクロール |

```
marquee-direction: forward;
marquee-direction: reverse;
```


**marquee-play-count**

マーキーの再生回数を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 数値 | マーキーの再生回数を、1以上の整数値で指定 |
| infinite | マーキーを無限に再生し続ける|

```
marquee-play-count: 5;
marquee-play-count: infinite;
```


**marquee-speed**

マーキーのスクロール速度を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| slow | 遅めにスクロール |
| normal | 普通の速度でスクロール（初期値） |
| fast | 速めにスクロール |

```
marquee-speed: slow;
marquee-speed: normal;
marquee-speed: fast;
```


**marquee-style**

マーキーの動き方を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| scroll | コンテンツは、表示領域をスクロール（初期値） |
| slide | コンテンツは、表示領域内でスライドのように停止 |
| alternate | コンテンツは、表示領域内で往来 |

```
marquee-style: scroll;
marquee-style: slide;
marquee-style: alternate;
```

## マルチカラム

**break-after**

段組み表示するときに、特定の要素の後ろでの改段方法を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| auto | ブラウザの設定に従う（初期値） |
| column | 特定の要素の後ろで、常に改段 |
| avoid-column | 特定の要素の後ろで、改段しない |

```
img {
	display: block;
	break-after: column;
}
```


**break-before**

段組み表示するときに、特定の要素の手前での改段方法を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| auto | ブラウザの設定に従う（初期値） |
| column | 特定の要素の手前で、常に改段 |
| avoid-column | 特定の要素の手前で、改段しない |

```
img {
	display: block;
	break-before: column;
}
```


**break-inside**

段組み表示するときに、特定の要素内での改段方法を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| auto | ブラウザの設定に従う（初期値） |
| avoid-column | 特定の要素内で、改段しない |

```
break-inside: auto;
break-inside: avoid-column;
```


**column-count**

段組みの段の数を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| auto | 段の数は自動で算出（初期値） |
| 整数 | 段の数を整数値で指定 |

```
column-count: auto;
column-count: 2;
column-count: 5;
```


**column-fill**

段組み表示の際、各カラムのテキストを均等に分配し、カラムの高さを平均化するプロパティ

| 値 | 意味 |
|:--|:--|
| balance | 各カラムのテキストを均等に分配し、カラムの高さを平均化（初期値） |
| auto | 通常どおり、先頭のカラムから連続してテキストを満たす |

```
column-fill: balance;
column-fill: auto;
```


**column-gap**

column-gapは、段組みの段と段の間隔を指定するプロパティです

| 値 | 意味 |
|:--|:--|
| normal | ブラウザの設定に従います。通常、1emの間隔が空く（初期値） |
| 長さ | 数値に「px」「em」「ex」などの単位をつけて指定 |

```
column-gap: normal;
column-gap: 10px;
column-gap: 1.2em;
```


**column-rule**

段組みの、段と段の間の境界線の「種類、色、太さ」をまとめて指定するプロパティ

| 値 | 意味 |
|:--|:--|
| column-rule-width | 境界線の「太さ」を指定 |
| column-rule-style | 境界線の「種類」を指定 |
| column-rule-color | 境界線の「色」を指定 |
| transparent | 境界線を透明にする |

```
column-rule: 1px solid #000;
column-rule: 1em double black;
column-rule: thin dashed rgb(255,0,0);
column-rule: transparent;
```


**column-rule-color**

段組みの、段と段の間の境界線の「色」を指定するプロパティ
colorと同等

```
column-rule-color: #f00;
column-rule-color: #ff0000;
column-rule-color: rgb(255,0,0);
column-rule-color: rgb(100%,0%,0%);
column-rule-color: rgba(255,0,0,0.5);
column-rule-color: rgba(100%,0%,0%,0.5);
column-rule-color: hsl(0,255%,128%);
column-rule-color: hsla(0,255%,128%,0.5);
column-rule-color: red;
column-rule-color: darkred;
column-rule-color: transparent;
column-rule-color: currentColor;
```


**column-rule-style**

段組みの、段と段の間の境界線の「種類」を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| none | 境界線を引かない。column-rule-colorやcolumn-rule-widthは無視（初期値） |
| hidden | 境界線を表示しません。noneとほぼ同等 |
| dotted | 点線 |
| dashed | 破線 |
| solid | 実線 |
| double | 二重線 |
| groove | 立体的に窪んだ線 |
| ridge | 立体的に隆起した線 |
| inset | ボックス全体が窪んだようにみえる線 |
| outset | ボックス全体が隆起したようにみえる線 |

```
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
```


**column-rule-width**

段組みの、段と段の間の境界線の「太さ」を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 数値 | 罫線の太さを「px」や「em」などで指定 |
| thin | 細い |
| medium | 中くらい（初期値） |
| thick | 太い |

```
column-rule-width: 1px;
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
```


**column-span**

段組み表示の際、特定の要素を複数のカラムにまたがって表示させるプロパティ

| 値 | 意味 |
|:--|:--|
| none | 通常どおり、1つのカラムに収める（初期値） |
| all | 特定の要素は、すべてのカラムにまたがって表示 |

```
h2 {
	column-span: all;
}
```


**column-width**

段組みの段の幅を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| auto | 段の幅は自動で算出（初期値） |
| 長さ | 数値に「px」「em」「ex」などの単位をつけて指定 |

```
column-width: auto;
column-width: 100px;
column-width: 20em;
```


**columns**

段組みの段の幅と、段数をまとめて記述するためのプロパティ

| 値 | 意味 |
|:--|:--|
| column-width | 段の幅を指定 |
| column-count | 段の数を指定 |

```
columns: 3 30em;
columns: 4 200px;
columns: 5 auto;
columns: auto 12em;
columns: auto auto;
```

## 音声

**cue**

cue-beforeとcue-afterをまとめて指定するためのショートハンドプロパティ

| 値 | 意味 |
|:--|:--|
| cue-before | 要素の前の合図音を指定|
| cue-after | 要素の後の合図音を指定 |

```
cue: url("info.mp3");
cue: url("start.mp3") url("end.mp3");
cue: none;
```


**cue-after**

要素の後ろの合図音を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| url | 音声ファイルの場所を指定 |
| デシベル | 数値に「dB」をつけて指定します。指定する場合は、半角スペースで区切って「url」の後ろに置く |
| none | 合図音を指定しない（初期値） |

```
cue-after: url("end.mp3");
cue-after: url("end.mp3") -3dB;
cue-after: url("end.mp3") 6dB;
cue-after: none;
```


**cue-before**

要素の前の合図音を指定するプロパティです

| 値 | 意味 |
|:--|:--|
| url | 音声ファイルの場所を指定 |
| デシベル | 数値に「dB」をつけて指定します。指定する場合は、半角スペースで区切って「url」の後ろに置く |
| none | 合図音を指定しない（初期値） |

```
cue-before: url("start.mp3");
cue-before: url("start.mp3") -3dB;
cue-before: url("start.mp3") 6dB;
cue-before: none;
```


**pause**

pause-beforeとpause-afterをまとめて指定するためのショートハンドプロパティ

| 値 | 意味 |
|:--|:--|
| pause-before | 要素の前で音声を一時停止 |
| pause-after | 要素の後ろで音声を一時停止|

```
pause: 1200ms;
pause: none;
pause: x-weak;
pause: weak;
pause: medium;
pause: strong;
pause: x-strong;
pause: 1200ms 1500ms;
pause: 1200ms none;
pause: weak strong;
```


**pause-after**

要素の後ろで音声を一時停止するプロパティ

| 値 | 意味 |
|:--|:--|
| 時間 | 一時停止の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定 |
| none | 一時停止しない、0msと同じ（初期値） |
| x-weak | かなり弱い区切り |
| weak | やや弱い区切り |
| medium | 中くらいの強さの区切り |
| strong | やや強い区切り |
| x-strong | かなり強い区切り |

```
pause-after: 1200ms;
pause-after: none;
pause-after: x-weak;
pause-after: weak;
pause-after: medium;
pause-after: strong;
pause-after: x-strong;
```


**pause-before**

要素の前で音声を一時停止するプロパティ

| 値 | 意味 |
|:--|:--|
| 時間 | 一時停止の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定 |
| none | 一時停止しない、0msと同じ（初期値） |
| x-weak | かなり弱い区切り |
| weak | やや弱い区切り |
| medium | 中くらいの強さの区切り |
| strong | やや強い区切り |
| x-strong | かなり強い区切り |

```

pause-before: 1200ms;
pause-before: none;
pause-before: x-weak;
pause-before: weak;
pause-before: medium;
pause-before: strong;
pause-before: x-strong;

```


**rest**

rest-beforeとrest-afterをまとめて指定するためのショートハンドプロパティ

| 値 | 意味 |
|:--|:--|
| rest-before | 要素内容を話す前の休符を指定 |
| rest-after | 要素内容を話した後の休符を指定 |

```
rest: 1200ms;
rest: none;
rest: x-weak;
rest: weak;
rest: medium;
rest: strong;
rest: x-strong;
rest: 1200ms 1500ms;
rest: 1200ms none;
rest: weak strong;
```


**rest-after**

要素内容を話した後の休符を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 時間 | 休符の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定 |
| none | 休符を指定しない、0msと同じ。（初期値） |
| x-weak | かなり弱い区切り |
| weak | やや弱い区切り |
| medium | 中くらいの強さの区切り |
| strong | やや強い区切り |
| x-strong | かなり強い区切り |

```
rest-after: 1200ms;
rest-after: none;
rest-after: x-weak;
rest-after: weak;
rest-after: medium;
rest-after: strong;
rest-after: x-strong;
```


**rest-before**

要素内容を話す前の休符を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 時間 | 休符の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定 |
| none | 休符を指定しない、0msと同じ。（初期値） |
| x-weak | かなり弱い区切り |
| weak | やや弱い区切り |
| medium | 中くらいの強さの区切り |
| strong | やや強い区切り |
| x-strong | かなり強い区切り |

```
rest-before: 1200ms;
rest-before: none;
rest-before: x-weak;
rest-before: weak;
rest-before: medium;
rest-before: strong;
rest-before: x-strong;
```

## トランスフォーム

**backface-visibility**

要素の背面の表示/非表示を切り替えるプロパティ

| 値 | 意味 |
|:--|:--|
| visible | 背面を表示（初期値） |
| hidden | 要素ボックスを隠す |

```
backface-visibility: visible;
backface-visibility: hidden;
```


**perspective**

子要素に対して遠近効果を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| none | 遠近効果は適用されない（初期値） |
| 数値 | 奥行きを示す値を、単位なしのピクセル値で指定数値が0以下の場合、遠近効果は適用されない |

```
perspective: none;
perspective: 300;
```


**perspective-origin**

perspectiveでの遠近投影の基点となる位置を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 長さ | 要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定 |
| パーセント値 | 要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定|
| left | 要素ボックスの左端を示す |
| center | 要素ボックスの幅の中心または高さの中心を示す |
| right | 要素ボックスの右端を示す |
| top | 要素ボックスの上端を示す |
| bottom | 要素ボックスの下端を示す |

```
perspective-origin: left;
perspective-origin: left top;
perspective-origin: left 30%;
perspective-origin: right bottom;
perspective-origin: center top;
perspective-origin: 20% 10%;
perspective-origin: 50px 30px;
```


**transform**

要素を変形させるプロパティ

| 2D変形関数 |
|:--|
| matrix(X軸方向への拡大縮小率, Y軸方向への傾斜角度, X軸方向への傾斜角度, Y軸方向への拡大縮小率, X軸方向への移動距離, Y軸方向への移動距離) |
| translate(X軸方向への移動距離, Y軸方向への移動距離) |
| translateX(X軸方向への移動距離) |
| translateY(Y軸方向への移動距離) |
| scale(X軸方向への拡大縮小率, Y軸方向への拡大縮小率) |
| scaleX(X軸方向への拡大縮小率) |
| scaleY(Y軸方向への拡大縮小率) |
| rotate(角度) |
| skewX(X軸方向への傾斜角度) |
| skewY(Y軸方向への傾斜角度) |

| 3D変形関数 |
|:--|
| matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値) |
| translate3d(X軸方向への移動距離, Y軸方向への移動距離, Z軸方向への移動距離) |
| translateZ(Z軸方向への移動距離) |
| scale3d(X軸方向への拡大縮小率, Y軸方向への拡大縮小率, Z軸方向への拡大縮小率) |
| scaleZ(Z軸方向への拡大縮小率) |
| rotate3d(X軸の方向ベクトル数値, Y軸の方向ベクトル数値, Z軸の方向ベクトル数値, 回転の角度) |
| rotateX(角度) |
| rotateY(角度) |
| rotateZ(角度) |
| perspective(ピクセル値) |

```
/* 2D変形 */
transform: translate(100px, 50px) rotate(45deg);
transform: skewX(15deg) skewY(15deg);

/* 3D変形 */
transform: translate3d(100px, 50px, 20px) rotateX(45deg);
transform: perspective(200) rotateY(25deg);
```


**transform-origin**

要素を変形させる際の基準点を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 長さ | 要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定|
| パーセント値 | 要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定|
| left | 要素ボックスの左端を示3個目には指定できない |
| center | 要素ボックスの幅の中心または高さの中心を示3個目には指定できない |
| right | 要素ボックスの右端を示3個目には指定できない|
| top | 要素ボックスの上端を示3個目には指定できない |
| bottom | 要素ボックスの下端を示3個目には指定できない |

```
transform-origin: left;
transform-origin: left top;
transform-origin: left 30%;
transform-origin: left top 20px;
transform-origin: right bottom 10px;
transform-origin: center top 0;
transform-origin: 20% 10% 5px;
transform-origin: 50px 30px 5px;
```


**transform-style**

3D変形が指定されている要素内での、子要素の表示方法を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| flat | すべての子要素は、3D変形した親要素の2D平面内へ平面化されて表示（初期値） |
| preserve-3d | 子要素には、自信に指定された3D空間内の配置が適用 |

```
transform-style: flat;
transform-style: preserve-3d;
```

## トランジション

**transition**

遷移関連プロパティをまとめて指定するショートハンドプロパティ

| 値 | 意味 |
|:--|:--|
| transition-property | 遷移させるプロパティを指定 |
| transition-duration | 変化にかける時間を指定 |
| transition-timing-function | 変化中の速度に緩急をつける |
| transition-delay | 遷移の開始を遅らせる |

```
transition: color 10s linear 5s;
transition: background-color 20s ease-in 8s;
transition: color 10s linear 5s, background-color 20s ease-in 8s;
```


**transition-delay**

遷移の開始を遅らせるプロパティ

| 値 | 意味 |
|:--|:--|
| 時間を示す値 | 「10s」や「15ms」のように、数値に単位を付けて指定、単位は、秒「s」、ミリ秒「ms」 |

```
transition-delay: 5s;
transition-delay: 300ms;
transition-delay: 5s, 10s;
transition-delay: 300ms, 120ms;
transition-delay: 5s, 10s, 15s;
transition-delay: 300ms, 120ms, 200ms;
```


**transition-duration**

変化にかける時間を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 時間を示す値 | 「10s」や「15ms」のように、数値に単位を付けて指定、単位は、秒「s」、ミリ秒「ms」  |

```
transition-duration: 5s;
transition-duration: 300ms;
transition-duration: 5s, 10s;
transition-duration: 300ms, 120ms;
transition-duration: 5s, 10s, 15s;
transition-duration: 300ms, 120ms, 200ms;
```


**transition-property**

遷移させるプロパティを指定するプロパティ

| 値 | 意味 |
|:--|:--|
| all | 遷移可能な全てのプロパティを遷移対象として指定（初期値） |
| none | 遷移させるプロパティを指定しない |
| プロパティ名 | 遷移させるプロパティ名を指定カンマで区切って複数のプロパティ名を指定 |

```
transition-property: all;
transition-property: none;
transition-property: color;
transition-property: background-color;
transition-property: color, background-color;
transition-property: color, background-color, margin;
transition-property: color, background-color, margin, width;
```


**transition-timing-function**

変化中の速度に緩急をつけるプロパティ

| 値 | 意味 |
|:--|:--|
| ease | 遷移の始めは緩やかに、徐々に加速し、最後にスッと減速cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じ（初期値） |
| linear | 遷移の始めから終わりまで一定の速度で変化cubic-bezier(0, 0, 1.0, 1.0)と同じ|
| ease-in | 始めは緩やかに、終わりにかけて加速し続けるcubic-bezier(0.42, 0, 1.0, 1.0)と同じ |
| ease-out | 始めから最大速度で、最後は緩やかに終わります。cubic-bezier(0, 0, 0.58, 1.0)と同じ |
| ease-in-out | 始めは緩やかに、途中で加速し、最後また緩やかに終わる|
| step-start | 始めから終了状態に一気に変化し、以後変化しないsteps(1, start)と同じ |
| step-end | 始めは変化せず、最後に終了状態に一気に変化steps(1, end)と同じです。 |
| steps(ステップ数, startかend) | プロパティの時間的変化を、複数の段階に分けて行う。1個目には、ステップ数を0以上の整数で指定2個目には、startかendを指定2個目を省略した場合は、endが適用される |
| cubic-bezier(P1のX座標, P1のY座標, P2のX座標, P2のY座標) | ベジェ曲線を描くためのP1、P2の座標を、0.0～1.0の範囲の4つの数値で指定 |

```
transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: step-start;
transition-timing-function: step-end;
transition-timing-function: steps(1, end);
transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);
```

## アニメーション

**animation**

アニメーション関連プロパティをまとめて指定するショートハンドプロパティ

| 値 | 意味 |
|:--|:--|
| animation-name | 適用するアニメーションの名前を指定 |
| animation-duration | アニメーション1回分の再生時間を指定 |
| animation-timing-function | アニメーションの速度に緩急をつける|
| animation-delay | アニメーションの開始を遅らせる |
| animation-iteration-count | アニメーションの再生回数を指定 |
| animation-direction | アニメーションを逆方向に再生させる |

```
animation: anime1 10s linear 3s 2 normal;
animation: anime1 10s linear 3s 2 normal, anime2 15s ease-in 4s 5 reverse;
```


**animation-delay**

、アニメーションの開始を遅らせるためのプロパティ

| 値 | 意味 |
|:--|:--|
| 時間を示す値 | 「10s」や「15ms」のように、数値に単位を付けて指定、単位は秒「s」ミリ秒「ms」 |

```
animation-delay: 5s;
animation-delay: 300ms;
animation-delay: 5s, 10s;
animation-delay: 300ms, 120ms;
animation-delay: 5s, 10s, 15s;
animation-delay: 300ms, 120ms, 200ms;
```


**animation-direction**

アニメーションを逆方向に再生させるプロパティ

| 値 | 意味 |
|:--|:--|
| normal | アニメーションの繰り返し再生は、すべて通常方向に再生される（初期値） |
| reverse | アニメーションの繰り返し再生は、すべて逆方向に再生される |
| alternate | アニメーションの繰り返し再生は、奇数カウントで通常方向に再生され、偶数カウントで逆方向に再生される |
| alternate-reverse | アニメーションの繰り返し再生は、奇数カウントで逆方向に再生され、偶数カウントで通常方向に再生される |

```
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
```


**animation-duration**

アニメーション1回分の再生時間を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 時間を示す値 | 「10s」や「15ms」のように、数値に単位を付けて指定、単位は秒「s」ミリ秒「ms」 |

```
animation-duration: 5s;
animation-duration: 300ms;
animation-duration: 5s, 10s;
animation-duration: 300ms, 120ms;
animation-duration: 5s, 10s, 15s;
animation-duration: 300ms, 120ms, 200ms;
```


**animation-iteration-count**

アニメーションの再生回数を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| infinite | アニメーションを無限に繰り返す |
| 数値 | 再生回数を指定 |

```
animation-iteration-count: infinite;
animation-iteration-count: 2;
animation-iteration-count: 2, 5;
animation-iteration-count: 2, 5, 10;
```


**animation-name**

適用するアニメーションの名前を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| none | アニメーションは適用されない（初期値） |
| アニメーション名 | @keyframesで設定したアニメーションIDを指定カンマで区切って複数のアニメーションIDを指定可能 |

```
animation-name: none;
animation-name: anime1;
animation-name: anime1, anime2;
```

**animation-timing-function**

アニメーションの速度に緩急をつけるプロパティ

| 値 | 意味 |
|:--|:--|
| ease | 遷移の始めは緩やかに、徐々に加速し、最後にスッと減速cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じです。（初期値） |
| linear | 遷移の始めから終わりまで一定の速度で変化cubic-bezier(0, 0, 1.0, 1.0)と同じです。 |
| ease-in | 始めは緩やかに、終わりにかけて加速し続けます。cubic-bezier(0.42, 0, 1.0, 1.0)と同じです。 |
| ease-out | 始めから最大速度で、最後は緩やかに終わります。cubic-bezier(0, 0, 0.58, 1.0)と同じです。 |
| ease-in-out | 始めは緩やかに、途中で加速し、最後また緩やかに終わります。cubic-bezier(0.42, 0, 0.58, 1.0)と同じです。 |
| step-start | 始めから終了状態に一気に変化し、以後変化しません。steps(1, start)と同じです。 |
| step-end | 始めは変化せず、最後に終了状態に一気に変化steps(1, end)と同じです。 |
| steps(ステップ数, startかend) | プロパティの時間的変化を、複数の段階に分けて行います。1個目には、ステップ数を0以上の整数で指定2個目には、startかendを指定2個目を省略した場合は、endが適用されます。 |
| cubic-bezier(P1のX座標, P1のY座標, P2のX座標, P2のY座標) | ベジェ曲線を描くためのP1、P2の座標を、0.0～1.0の範囲の4つの数値で指定 |

```
animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(1, end);
animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);
```

## フレキシブルボックス

**align-items**

フレキシブルボックス内でのボックスの揃え方を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| flex-start | ボックスの先頭をフレックスボックスの斜め軸に沿った先頭位置に揃える |
| flex-end | ボックスの末尾をフレックスボックスの斜め軸に沿った末尾位置に揃える |
| center | ボックスをフレックスボックスの斜め軸に沿って中央で揃える |
| baseline | ボックスを基準となるフレックスボックスの斜め軸のベースラインに揃えて配置 |
| stretch | ボックスをフレックスボックスの斜め軸に沿って自動的に揃える（初期値） |

```
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
```


**flex-direction**

フレキシブルボックス内のボックスの配置方法を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| row | 各ボックスをコンテンツの書字方向と流れに沿って、インライン要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置（初期値） |
| row-reverse | rowと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置 |
| column | 各ボックスをコンテンツの書字方向と流れに沿って、ブロックレベル要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置 |
| column-reverse | columnと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置 |

```
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
```


**flex-flow**

flex-directionとflex-wrapの値を、まとめて指定するためのショートハンドプロパティ

| 値 | 意味 |
|:--|:--|
| flex-direction | フレキシブルボックス内のボックスの配置方法を指定 |
| flex-wrap | フレキシブルボックスをマルチラインに |

```
flex-flow: row wrap;
flex-flow: column wrap;
flex-flow: row wrap-reverse;
flex-flow: column wrap-reverse;
```


**flex-wrap**

フレキシブルボックスをマルチラインにするプロパティ

| 値 | 意味 |
|:--|:--|
| nowrap | 通常どおり、フレキシブルボックスをシングルラインに（初期値） |
| wrap | フレキシブルボックスをマルチラインにコンテンツの書字方向に沿ってフレキシブルボックスの開始側から末尾側へと斜めにボックスの配置軸が設定 |
| wrap-reverse | wrapと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きの斜めにボックスの配置軸が設定 |

```
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
```


**justify-content**

フレキシブルボックス内でのボックスの詰め方を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| flex-start | 内部のボックスを、フレキシブルボックスの先頭に詰めて配置（初期値） |
| flex-end | 内部のボックスを、フレキシブルボックスの末尾に詰めて配置 |
| center | 内部のボックスを、フレキシブルボックスの中央に詰めて配置 |
| space-between | 内部のボックスを、フレキシブルボックス全体へ均等に配置先頭と末尾は詰めて配置 |
| space-around | 内部のボックスを、フレキシブルボックス全体へ均等に配置先頭と末尾にはスペースが入る |

```
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
```


**order**

フレキシブルボックス内のボックスの配置順序を指定するプロパティ

| 値 | 意味 |
|:--|:--|
| 整数 | ボックスを配置する順番を整数で指定初期値は「0」 |

```
order: 1;
order: 2;
order: 3;
```




## まとめ

CSSで指定できることは幅が広く
試しながら覚えるしかないです。

よく使うものは必ず覚えておきましょう。


君がエンジニアになるまであと83日

## 作者の情報
乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython