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

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

前回のはこちら
100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

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