コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

CSS リファレンス

A

accent-color – ユーザーインターフェースコントロールのアクセントカラーを指定します。

Note: accent-colorはCSSの新しいプロパティです。

align-content – フレキシブルコンテナ内の行の配置を指定します。

.container {
    align-content: center;
}

align-items – フレキシブルコンテナ内のアイテムの配置を指定します。

.container {
    align-items: flex-start;
}

align-self – 選択したアイテムの配置をフレキシブルコンテナ内で指定します。

.item {
    align-self: baseline;
}

all – unicode-bidiとdirectionを除くすべてのプロパティをリセットします。

* {
    all: unset;
}

animation – 全てのanimation-*プロパティのショートハンドです。

.box {
    animation: slidein 3s ease-in-out 1s infinite alternate;
}

animation-delay – アニメーションの開始を遅らせる時間を指定します。

.box {
    animation-delay: 2s;
}

animation-direction – アニメーションの再生方向を指定します（前進、後退、交互に）。

.box {
    animation-direction: alternate;
}

animation-duration – アニメーションが1サイクル完了するのにかかる時間を指定します。

.box {
    animation-duration: 5s;
}

animation-fill-mode – アニメーションが再生されていないときの要素のスタイルを指定します（開始前、終了後、またはその両方）。

.box {
    animation-fill-mode: backwards;
}

animation-iteration-count – アニメーションが再生される回数を指定します。

.box {
    animation-iteration-count: infinite;
}

animation-name – @keyframesアニメーションの名前を指定します。

.box {
    animation-name: slidein;
}

animation-play-state – アニメーションが実行中か一時停止中かを指定します。

.box {
    animation-play-state: paused;
}

animation-timing-function – アニメーションの速度曲線を指定します。

.box {
    animation-timing-function: ease-in-out;
}

aspect-ratio – 要素の優先アスペクト比を指定します。

.box {
    aspect-ratio: 16 / 9;
}

B

backdrop-filter – 要素の背景にフィルター効果を追加します。

.element {
    backdrop-filter: blur(10px);
}

backface-visibility – 要素の裏面の表示/非表示を制御します。

.element {
    backface-visibility: hidden;
}

background – 要素の背景を設定します（ショートハンド）。

.element {
    background: #ffffff url('background.png') no-repeat center center;
}

background-attachment – 背景画像のスクロール方法を指定します。

.element {
    background-attachment: fixed;
}

background-blend-mode – 背景画像と要素の背景のブレンドモードを指定します。

.element {
    background-blend-mode: multiply;
}

background-clip – 背景の描画範囲を制限します。

.element {
    background-clip: padding-box;
}

background-color – 要素の背景色を設定します。

.element {
    background-color: #f0f0f0;
}

background-image – 要素の背景に画像を設定します。

.element {
    background-image: url('image.jpg');
}

background-origin – 背景の描画を開始する位置を指定します。

.element {
    background-origin: content-box;
}

background-position – 背景画像の位置を指定します。

.element {
    background-position: top right;
}

background-repeat – 背景画像の繰り返し方法を指定します。

.element {
    background-repeat: no-repeat;
}

background-size – 背景画像のサイズを指定します。

.element {
    background-size: cover;
}

block-size – ブロックレベル要素の高さまたは幅を指定します。

.element {
    block-size: 200px;
}

border – 要素の境界線を設定します（ショートハンド）。

.element {
    border: 1px solid #cccccc;
}

C

caret-color – 入力フィールド内のカーソルの色を指定します。

input {
    caret-color: red;
}

clear – 要素の周囲で浮動をクリアする方法を指定します。

.element {
    clear: both;
}

clip-path – 要素の描画範囲をクリップするための形状を指定します。

.element {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);
}

color – 要素のテキストの色を指定します。

.element {
    color: #333333;
}

column-count – 複数の列で要素のコンテンツを表示する際の列数を指定します。

.element {
    column-count: 3;
}

column-gap – 複数の列で要素のコンテンツを表示する際の列間の幅を指定します。

.element {
    column-gap: 20px;
}

content – 伪要素のコンテンツを設定します。

.element::before {
    content: "★";
}

counter-increment – カウンターの値を増加させます。

.element {
    counter-increment: section;
}

counter-reset – カウンターの値をリセットします。

.element {
    counter-reset: section;
}

cursor – マウスポインターが要素上に置かれた際のカーソルの形状を指定します。

.element {
    cursor: pointer;
}

custom-properties – カスタムプロパティを定義します。

:root {
    --main-color: #336699;
}
.element {
    color: var(--main-color);
}

D

display – 要素の表示方法を指定します。

.element {
    display: flex;
    display: grid;
}

filter – 要素に対してフィルタ効果を適用します。

.element {
    filter: grayscale(50%);
}

flex – 要素の伸縮性を指定します。

.container {
    display: flex;
}
.item {
    flex: 1 1 auto;
}

flex-basis – flexアイテムの初期サイズを指定します。

.item {
    flex-basis: 200px;
}

flex-direction – flexコンテナ内のアイテムの配置方向を指定します。

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-flow – flex-directionとflex-wrapのショートハンドです。

.container {
    display: flex;
    flex-flow: row wrap;
}

flex-grow – flexアイテムが余白をどの程度取得するかを指定します。

.item {
    flex-grow: 1;
}

flex-shrink – flexアイテムが必要以上に縮小されるかどうかを指定します。

.item {
    flex-shrink: 0;
}

flex-wrap – flexアイテムの折り返し方法を指定します。

.container {
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

float – 要素の浮動を指定します。

.element {
    float: left;
}

E

empty-cells – 空のセルの表示に関する規則を指定します。

table {
    empty-cells: show;
}

filter – 要素に対してフィルタ効果を適用します。

.element {
    filter: grayscale(50%);
}

flex – 要素の伸縮性を指定します。

.container {
    display: flex;
}
.item {
    flex: 1 1 auto;
}

flex-basis – flexアイテムの初期サイズを指定します。

.item {
    flex-basis: 200px;
}

flex-direction – flexコンテナ内のアイテムの配置方向を指定します。

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-flow – flex-directionとflex-wrapのショートハンドです。

.container {
    display: flex;
    flex-flow: row wrap;
}

flex-grow – flexアイテムが余白をどの程度取得するかを指定します。

.item {
    flex-grow: 1;
}

flex-shrink – flexアイテムが必要以上に縮小されるかどうかを指定します。

.item {
    flex-shrink: 0;
}

flex-wrap – flexアイテムの折り返し方法を指定します。

.container {
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

F

float – 要素の浮動を指定します。

.element {
    float: left | right | none;
}

font – フォントの関連するプロパティをまとめて指定します。

.element {
    font: italic small-caps bold 16px/3 cursive;
}

font-family – フォントのファミリー名を指定します。

.element {
    font-family: Arial, sans-serif;
}

font-size – フォントのサイズを指定します。

.element {
    font-size: 1.2em;
}

font-style – フォントのスタイルを指定します。

.element {
    font-style: italic;
}

font-variant – フォントのバリアントを指定します。

.element {
    font-variant: small-caps;
}

font-weight – フォントのウェイト（太さ）を指定します。

.element {
    font-weight: bold;
}

G

grid – グリッドレイアウトの関連するプロパティをまとめて指定します。

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
}

grid-area – グリッドアイテムの位置とスパンを指定します。

.item {
    grid-area: 2 / 1 / 3 / 3;
}

grid-auto-columns – 自動生成されるグリッド列のサイズを指定します。

.container {
    grid-auto-columns: 100px;
}

grid-auto-rows – 自動生成されるグリッド行のサイズを指定します。

.container {
    grid-auto-rows: 50px;
}

grid-column – グリッドアイテムの開始と終了の列を指定します。

.item {
    grid-column: 1 / span 2;
}

grid-row – グリッドアイテムの開始と終了の行を指定します。

.item {
    grid-row: 2 / 4;
}

grid-template – グリッドの行と列の定義を指定します。

.container {
    display: grid;
    grid-template: 100px / repeat(3, 1fr);
}

H

hanging-punctuation – 行ボックスの外側に句読点を配置するかどうかを指定します。

.text {
    hanging-punctuation: first;
}

height – 要素の高さを設定します。

.box {
    height: 200px;
}

hyphens – テキストのレイアウトを改善するために単語を分割する方法を指定します。

.text {
    hyphens: auto;
}

hypenate-character – ハイフネーションの前に置かれる文字を設定します。

.text {
    hyphenate-character: "\2010";
}

I

initial-letter – 要素の最初の文字を大きく表示します。

.text {
    initial-letter: 3;
}

inherit – 要素が親要素からプロパティの値を継承することを指定します。

.child {
    inherit: inherit;
}

inline-size – 要素のブロック軸のサイズを指定します。

.box {
    inline-size: 300px;
}

isolation – 要素のレイヤー化を制御し、バックグラウンドや境界のブレンディングを設定します。

.element {
    isolation: isolate;
}

J

justify-content – コンテナ内のアイテムの水平方向の配置方法を指定します。

.container {
    display: flex;
    justify-content: space-between;
}

justify-items – グリッドコンテナ内のアイテムの水平方向の配置方法を指定します。

.container {
    display: grid;
    justify-items: center;
}

justify-self – グリッドアイテムの水平方向の配置方法を指定します。

.item {
    justify-self: end;
}

K

@keyframesは、アニメーションのコードを指定します。

/* アニメーションの定義 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* 要素にアニメーションを適用 */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

@keyframesルールは、アニメーションの開始（from）と終了（to）のスタイルを定義します。この例では、要素が赤から黄色に変化するアニメーションが4秒間繰り返されます。

L

left – 要素の左位置を指定します。

.element {
    position: absolute;
    left: 50px;
}

letter-spacing – テキスト内の文字間のスペースを増減させます。

.text {
    letter-spacing: 2px;
}

line-break – 行の改行方法を指定します。

.text {
    line-break: strict;
}

line-height – 行の高さを設定します。

.text {
    line-height: 1.5;
}

list-style – リストのすべてのプロパティを1つの宣言で設定します。

ul {
    list-style: circle inside url('bullet.png');
}

list-style-image – リストアイテムのマーカーとして画像を指定します。

ul {
    list-style-image: url('marker.png');
}

list-style-position – リストアイテムのマーカーの位置を指定します。

ul {
    list-style-position: inside;
}

list-style-type – リストアイテムのマーカーのタイプを指定します。

ul {
    list-style-type: square;
}

M

margin – 要素のマージンを一括で指定します。

.element {
    margin: 10px;
}

margin-block – ブロック方向のマージンを指定します。

.element {
    margin-block: 20px;
}

margin-block-end – ブロック方向の末端のマージンを指定します。

.element {
    margin-block-end: 10px;
}

margin-block-start – ブロック方向の始端のマージンを指定します。

.element {
    margin-block-start: 5px;
}

margin-bottom – 要素の下部のマージンを指定します。

.element {
    margin-bottom: 15px;
}

margin-inline – インライン方向のマージンを指定します。

.element {
    margin-inline: 20px;
}

margin-inline-end – インライン方向の末端のマージンを指定します。

.element {
    margin-inline-end: 10px;
}

margin-inline-start – インライン方向の始端のマージンを指定します。

.element {
    margin-inline-start: 5px;
}

margin-left – 要素の左側のマージンを指定します。

.element {
    margin-left: 15px;
}

margin-right – 要素の右側のマージンを指定します。

.element {
    margin-right: 15px;
}

margin-top – 要素の上部のマージンを指定します。

.element {
    margin-top: 15px;
}

mask – 要素の一部を画像でマスクまたはクリッピングして非表示にします。

.element {
    mask: url('mask-image.svg');
}

mask-clip – マスク領域を指定します。

.element {
    mask-clip: padding-box;
}

mask-composite – 現在のマスクレイヤーに対して下のマスクレイヤーとのコンポジット操作を表します。

.element {
    mask-composite: add;
}

mask-image – 要素のマスクレイヤーとして使用する画像を指定します。

.element {
    mask-image: url('mask-image.png');
}

mask-mode – マスクレイヤー画像を輝度マスクまたはアルファマスクとして扱うかどうかを指定します。

.element {
    mask-mode: luminance;
}

mask-origin – マスクレイヤー画像の原点位置（マスクの位置領域）を指定します。

.element {
    mask-origin: content-box;
}

mask-position – マスクレイヤー画像の開始位置を指定します（マスクの位置領域に対して相対的）。

.element {
    mask-position: center;
}

mask-repeat – マスクレイヤー画像の繰り返し方法を指定します。

.element {
    mask-repeat: no-repeat;
}

mask-size – マスクレイヤー画像のサイズを指定します。

.element {
    mask-size: cover;
}

mask-type – SVGの要素を輝度マスクまたはアルファマスクとして扱うかどうかを指定します。

.element {
    mask-type: alpha;
}

max-height – 要素の最大の高さを指定します。

.element {
    max-height: 300px;
}

max-width – 要素の最大の幅を指定します。

.element {
    max-width: 100%;
}

@media – 異なるメディアタイプ/デバイス/サイズ用のスタイルルールを設定します。

@media screen and (max-width: 600px) {
    .element {
        display: none;
    }
}

max-block-size – ブロック方向の要素の最大サイズを指定します。

.element {
    max-block-size: 400px;
}

max-inline-size – インライン方向の要素の最大サイズを指定します。

.element {
    max-inline-size: 100%;
}

min-block-size – ブロック方向の要素の最小サイズを指定します。

.element {
    min-block-size: 100px;
}

min-inline-size – インライン方向の要素の最小サイズを指定します。

.element {
    min-inline-size: 50%;
}

min-height – 要素の最小の高さを指定します。

.element {
    min-height: 200px;
}

min-width – 要素の最小の幅を指定します。

.element {
    min-width: 320px;
}

mix-blend-mode – 要素のコンテンツが直接親の背景とどのように混合するかを指定します。

.element {
    mix-blend-mode: multiply;
}

O

object-fit – 置換要素の内容が、使用される高さと幅に合わせてボックスにどのように適合するかを指定します。

.element {
    object-fit: cover;
}

object-position – 置換要素をそのボックス内でどの位置に配置するかを指定します。

.element {
    object-position: center;
}

offset – 要素をパスに沿ってアニメートする方法を指定するショートハンドです。

.element {
    offset: path('M 0 0 L 100 100');
}

offset-anchor – 要素のパス上で固定されるポイントを指定します。

.element {
    offset-anchor: center;
}

offset-distance – アニメートされる要素が配置されるパス上の位置を指定します。

.element {
    offset-distance: 50%;
}

offset-path – 要素がアニメートされるパスを指定します。

.element {
    offset-path: path('M 0 0 L 100 100');
}

offset-rotate – 要素がパスに沿ってアニメートされる際の回転を指定します。

.element {
    offset-rotate: auto;
}

opacity – 要素の不透明度レベルを設定します。

.element {
    opacity: 0.8;
}

order – 柔軟なアイテムの順序を、他のアイテムに対して相対的に設定します。

.element {
    order: 2;
}

orphans – ページやカラムの底部に残す必要がある最小行数を設定します。

.element {
    orphans: 2;
}

outline – アウトラインの幅、スタイル、色を一括で指定するショートハンドです。

.element {
    outline: 1px solid #000;
}

outline-color – アウトラインの色を指定します。

.element {
    outline-color: blue;
}

outline-offset – アウトラインのオフセットを指定し、境界線の外側に描画します。

.element {
    outline-offset: 5px;
}

outline-style – アウトラインのスタイルを指定します。

.element {
    outline-style: dotted;
}

outline-width – アウトラインの幅を指定します。

.element {
    outline-width: 2px;
}

overflow – コンテンツが要素のボックスを超えた場合の挙動を指定します。

.element {
    overflow: auto;
}

overflow-anchor – スクロール可能なコンテナ内の表示可能領域に新しいコンテンツがロードされた際に、内容を下押しするかどうかを指定します。

.element {
    overflow-anchor: auto;
}

overflow-wrap – 長い単語がコンテナを超えた場合に、ブラウザが改行できるかどうかを指定します。

.element {
    overflow-wrap: break-word;
}

overflow-x – コンテンツが要素のコンテンツ領域の左/右端を超えるかどうかを指定します。

.element {
    overflow-x: hidden;
}

overflow-y – コンテンツが要素のコンテンツ領域の上部/下部端を超えるかどうかを指定します。

.element {
    overflow-y: scroll;
}

overscroll-behavior – x-およびy-方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior: auto;
}

overscroll-behavior-block – ブロック方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-block: contain;
}

overscroll-behavior-inline – インライン方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-inline: auto;
}

overscroll-behavior-x – x-方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-x: none;
}

overscroll-behavior-y – y-方向でスクロールチェーンまたはオーバースクロールアフィンダンスを持つかどうかを指定します。

.element {
    overscroll-behavior-y: auto;
}

P

padding – 全てのpadding-*プロパティのショートハンドです。

.element {
    padding: 10px;
}

padding-block – ブロック方向のパディングを指定します。

.element {
    padding-block: 20px;
}

padding-block-end – ブロック方向の末尾のパディングを指定します。

.element {
    padding-block-end: 10px;
}

padding-block-start – ブロック方向の開始のパディングを指定します。

.element {
    padding-block-start: 15px;
}

padding-bottom – 要素の下部のパディングを指定します。

.element {
    padding-bottom: 15px;
}

padding-inline – インライン方向のパディングを指定します。

.element {
    padding-inline: 20px;
}

padding-inline-end – インライン方向の末尾のパディングを指定します。

.element {
    padding-inline-end: 10px;
}

padding-inline-start – インライン方向の開始のパディングを指定します。

.element {
    padding-inline-start: 15px;
}

padding-left – 要素の左側のパディングを指定します。

.element {
    padding-left: 10px;
}

padding-right – 要素の右側のパディングを指定します。

.element {
    padding-right: 10px;
}

padding-top – 要素の上部のパディングを指定します。

.element {
    padding-top: 15px;
}

page-break-after – 要素の後ろでページブレークを挿入するかどうかを指定します。

.element {
    page-break-after: always;
}

page-break-before – 要素の前でページブレークを挿入するかどうかを指定します。

.element {
    page-break-before: avoid;
}

page-break-inside – 要素内でページブレークを挿入するかどうかを指定します。

.element {
    page-break-inside: auto;
}

paint-order – SVG要素やテキストの描画順序を指定します。

.element {
    paint-order: stroke fill markers;
}

perspective – 3D位置合わせされた要素に透視効果を与えます。

.element {
    perspective: 1000px;
}

perspective-origin – ユーザーが3D位置合わせされた要素を見ている位置を定義します。

.element {
    perspective-origin: center;
}

place-content – フレックスボックスやグリッドレイアウトのためのalign-contentおよびjustify-contentプロパティの値を指定します。

.element {
    place-content: center space-between;
}

place-items – グリッドレイアウトのためのalign-itemsおよびjustify-itemsプロパティの値を指定します。

.element {
    place-items: center stretch;
}

place-self – グリッドレイアウトのためのalign-selfおよびjustify-selfプロパティの値を指定します。

.element {
    place-self: end start;
}

pointer-events – 要素がポインタイベントに反応するかどうかを定義します。

.element {
    pointer-events: auto;
}

Q

quotes – 埋め込まれた引用の引用符のタイプを設定します。

blockquote {
    quotes: "「" "」" "『" "』";
}

R

resize – ユーザーが要素をリサイズできるかどうか（および方法）を定義します。

.resizable {
    resize: both;
}

right – 要素の右側の位置を指定します。

.positioned-element {
    position: absolute;
    right: 10px;
}

rotate – 要素の回転を指定します。

.rotated-element {
    transform: rotate(45deg);
}

row-gap – グリッド行間の間隔を指定します。

.grid-container {
    display: grid;
    grid-row-gap: 20px;
}

S

scale – 要素のサイズを拡大または縮小して指定します。

.scaled-element {
    transform: scale(1.5);
}

scroll-behavior – スクロール可能なボックス内でスクロール位置を滑らかにアニメーション化するかどうかを指定します。

html {
    scroll-behavior: smooth;
}

scroll-margin – スナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin: 20px;
}

scroll-margin-block – ブロック方向でスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-block: 10px;
}

scroll-margin-block-end – ブロック方向のスナップ位置とコンテナ間のエンドマージンを指定します。

.snap-container {
    scroll-margin-block-end: 5px;
}

scroll-margin-block-start – ブロック方向のスナップ位置とコンテナ間のスタートマージンを指定します。

.snap-container {
    scroll-margin-block-start: 5px;
}

scroll-margin-bottom – 下部のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-bottom: 10px;
}

scroll-margin-inline – インライン方向でスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-inline: 10px;
}

scroll-margin-inline-end – インライン方向のスナップ位置とコンテナ間のエンドマージンを指定します。

.snap-container {
    scroll-margin-inline-end: 5px;
}

scroll-margin-inline-start – インライン方向のスナップ位置とコンテナ間のスタートマージンを指定します。

.snap-container {
    scroll-margin-inline-start: 5px;
}

scroll-margin-left – 左側のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-left: 10px;
}

scroll-margin-right – 右側のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-right: 10px;
}

scroll-margin-top – 上部のスナップ位置とコンテナ間のマージンを指定します。

.snap-container {
    scroll-margin-top: 10px;
}

scroll-padding – コンテナから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding: 20px;
}

scroll-padding-block – ブロック方向でコンテナから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-block: 10px;
}

scroll-padding-block-end – ブロック方向でコンテナのエンドから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-block-end: 5px;
}

scroll-padding-block-start – ブロック方向でコンテナのスタートから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-block-start: 5px;
}

scroll-padding-bottom – コンテナの下部から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-bottom: 10px;
}

scroll-padding-inline – インライン方向でコンテナから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-inline: 10px;
}

scroll-padding-inline-end – インライン方向でコンテナのエンドから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-inline-end: 5px;
}

scroll-padding-inline-start – インライン方向でコンテナのスタートから子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-inline-start: 5px;
}

scroll-padding-left – コンテナの左側から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-left: 10px;
}

scroll-padding-right – コンテナの右側から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-right: 10px;
}

scroll-padding-top – コンテナの上部から子要素のスナップ位置までの距離を指定します。

.snap-container {
    scroll-padding-top: 10px;
}

scroll-snap-align – ユーザーがスクロールを停止したときに要素を配置する方法を指定します。

.snap-element {
    scroll-snap-align: start;
}

scroll-snap-stop – トラックパッドやタッチスクリーンでの高速なスワイプ後のスクロール動作を指定します。

.scroll-container {
    scroll-snap-stop: always;
}

scroll-snap-type – スクロール時のスナップ動作を指定します。

.snap-container {
    scroll-snap-type: mandatory;
}

scrollbar-color – 要素のスクロールバーの色を指定します。

.scrollable-element {
    scrollbar-color: #999999 #cccccc;
}

>text-underline-position – 下線テキスト装飾の位置を指定します。

.underlined-text {
    text-underline-position: under right;
}

top – 要素の上位置を指定します。

.top-positioned {
    top: 50px;
}

transform – 要素に2Dまたは3D変換を適用します。

.transformed-element {
    transform: rotate(30deg);
}

transform-origin – 変形された要素の位置を変更します。

.transformed-element {
    transform-origin: top left;
}

transform-style – ネストされた要素が3D空間でレンダリングされる方法を指定します。

.transformed-element {
    transform-style: preserve-3d;
}

transition – すべての遷移-* プロパティのショートハンドです。

.transitioned-element {
    transition: width 1s ease-in-out;
}

transition-delay – 遷移効果が開始するタイミングを指定します。

.transitioned-element {
    transition-delay: 0.5s;
}

transition-duration – 遷移効果の完了にかかる時間を指定します。

.transitioned-element {
    transition-duration: 2s;
}

transition-property – 遷移効果が適用されるCSSプロパティの名前を指定します。

.transitioned-element {
    transition-property: width, height;
}

transition-timing-function – 遷移効果の速度曲線を指定します。

.transitioned-element {
    transition-timing-function: ease-in-out;
}

translate – 要素の位置を指定します。

.translated-element {
    transform: translate(50px, 100px);
}

U

unicode-bidi – 同じドキュメント内で複数の言語をサポートするためにテキストが上書きされるかどうかを設定または返します。

.bidi-text {
    unicode-bidi: embed;
    direction: rtl;
}

user-select – 要素のテキストを選択できるかどうかを指定します。

.selectable-text {
    user-select: none;
}

V

vertical-align – 要素の垂直方向の配置を設定します。

.aligned-element {
    vertical-align: middle;
}

visibility – 要素が表示されるかどうかを指定します。

.hidden-element {
    visibility: hidden;
}

W

white-space – 要素内の空白の扱い方を指定します。

.whitespace-element {
    white-space: nowrap;
}

widows – ページまたは列の上部に残す必要のある最小行数を設定します。

.widow-elements {
    widows: 2;
}

width – 要素の幅を設定します。

.width-element {
    width: 300px;
}

Z

z-index – 位置指定された要素のスタック順序を設定します。

.z-indexed-element {
    z-index: 100;
}