CSS一覧

詳細はMDNで確認ください

※随時更新

プロパティ名説明
colorテキストの色を指定します
background背景色や背景画像を指定します
font-sizeテキストのサイズを設定します
font-weightテキストの太さを指定します
line-height行の高さを指定します
text-alignテキストの配置を指定します
margin外側の余白を設定します
padding内側の余白を設定します
border枠線を設定します
display表示方法（ブロック、インラインなど）を指定します
width要素の幅を指定します
height要素の高さを指定します
position要素の位置を指定します（relative, absoluteなど）
top, right, bottom, left位置指定を行います
overflowコンテンツがあふれた際の処理を指定します
z-index要素の重なり順を指定します
opacity透明度を指定します
cursorマウスカーソルの表示を指定します
box-shadowボックスに影をつけます
text-shadowテキストに影をつけます
flexフレックスボックスの要素を配置します
gridグリッドレイアウトの要素を配置します
align-itemsフレックスやグリッド内の配置を指定します
justify-contentフレックスやグリッドの要素配置を指定します
transitionプロパティの変化にアニメーションをつけます
transform要素の変形（拡大、回転など）を行います
clip-path要素を特定の形状にクリップし、形状を変える（丸や多角形など）
object-fit画像やメディア要素をコンテナにフィットさせる
object-position画像やメディア要素の位置を指定する
aspect-ratio幅と高さの比率を指定し、レスポンシブデザインに役立つ
scroll-snap-typeスクロール位置を自動的に合わせ、スムーズなスクロール体験を提供
scroll-behaviorスクロールのアニメーション効果を設定（スムーズにするなど）
filter画像や要素にぼかしや色の変更を加える
backdrop-filter背景にフィルター効果をかける（ぼかしなど）
mix-blend-mode要素を重ね合わせる際の合成モードを指定（multiplyやscreenなど）
appearanceボタンやフォーム要素のデフォルトのスタイルを除去する
caret-colorテキスト入力時のカーソルの色を変更する
writing-modeテキストの書き方向を指定（縦書きなどに）
white-spaceテキストの改行や空白の扱いを指定
pointer-events要素がクリックやホバーなどの対象になるかを制御する
user-selectテキストの選択可否を指定する
animationCSSアニメーションをまとめて指定し、動きを加える
backface-visibility3D変換を行う際に裏面が表示されるかを制御する
will-changeレンダリング前に要素の変更を予測し、パフォーマンスを最適化※MDN注意有り
mask-image要素にマスクをかけて形を変えたり、部分的に隠す
overflow-x, overflow-y水平方向や垂直方向のオーバーフローを個別に制御する
all全てのプロパティをリセットする
animation-delayアニメーションの開始までの待機時間を指定
animation-directionアニメーションの再生方向を指定（normal, reverseなど）
animation-durationアニメーションの実行時間を指定
animation-iteration-countアニメーションの繰り返し回数を指定
animation-timing-functionアニメーションの速度変化のタイミングを設定
background-attachment背景画像のスクロールや固定の指定
background-blend-mode背景画像や色の合成モードを設定
background-clip背景の描画範囲を制限（padding-boxなど）
background-origin背景画像の開始位置を指定（border-boxなど）
background-position背景画像の位置を細かく指定
background-repeat背景画像の繰り返しを制御
border-collapseテーブルの枠線の重なりを制御
border-imageボーダーに画像を使用する
border-radius要素の角を丸くする
border-spacingテーブルセルの間隔を設定
box-sizing要素の幅と高さにパディングやボーダーを含めるかを指定
caption-sideテーブルキャプションの配置（上や下）を指定
column-countカラムレイアウトでカラム数を指定
column-gapカラム間の隙間を設定
column-ruleカラム間の線を設定
column-spanカラムレイアウトでカラムを跨がせる
column-widthカラムレイアウトでのカラムの幅を指定
content::beforeや::afterで内容を挿入
counter-incrementカウンターの増加方法を指定
counter-resetカウンターの初期化
empty-cellsテーブルの空セルの表示/非表示
flex-basisフレックスアイテムの基準サイズを設定
flex-directionフレックスアイテムの方向を指定（横、縦）
flex-growフレックスアイテムの成長率を指定
flex-shrinkフレックスアイテムの縮小率を指定
font-family使用するフォントファミリーを指定
font-kerningフォントのカーニング（文字間の調整）を指定
font-stretchフォントの幅を広げたり縮めたりする
font-styleフォントのスタイルを指定（italicなど）
font-variantフォントのバリアントを指定（小型大文字など）
gapグリッドやフレックスレイアウトで要素間の隙間を設定
grid-areaグリッド要素の配置エリアを指定
grid-auto-flowグリッド内での要素の流れを指定
grid-template-columnsグリッドのカラム構成を定義
grid-template-rowsグリッドの行構成を定義
justify-itemsグリッド要素の配置方法を設定
justify-self個々のグリッドアイテムの配置を指定
letter-spacing文字間の間隔を指定
list-styleリストのスタイル（記号や位置など）を指定
min-height要素の最小高さを指定
min-width要素の最小幅を指定
max-height要素の最大高さを指定
max-width要素の最大幅を指定
object-fit: cover画像を親要素に収まるようにトリミング
perspective3D空間の奥行きを設定
text-decorationテキストの装飾（下線や取り消し線など）を指定
text-overflowテキストのオーバーフロー時の処理を指定（省略記号など）
transform-origin変形の基点を指定
transition-delayトランジション開始までの待機時間を指定
align-contentフレックスやグリッドレイアウトの全体の配置を指定
align-selfフレックスやグリッド内で個別のアイテムの配置
background-image背景に画像を設定
background-position-x背景画像のX軸方向位置
background-position-y背景画像のY軸方向位置
background-size背景画像のサイズ（cover、containなど）
block-size縦書きや異なる書字方向に対応するサイズ設定
border-bottomボーダーの下側を指定
border-bottom-color下側ボーダーの色を指定
border-bottom-left-radiusボーダーの左下角を丸める
border-bottom-right-radiusボーダーの右下角を丸める
border-collapseテーブルのボーダーを統合
border-left左側のボーダー指定
border-left-color左側ボーダーの色指定
border-left-style左側ボーダーのスタイル
border-left-width左側ボーダーの太さを指定
border-right右側ボーダーの指定
border-right-color右側ボーダーの色指定
border-spacingテーブルセル間の間隔を指定
border-styleボーダーのスタイル（solid, dashedなど）
border-top上側ボーダーの設定
border-top-color上側ボーダーの色指定
border-top-left-radius上側左角のボーダーを丸める
border-top-right-radius上側右角のボーダーを丸める
border-widthボーダーの幅を設定
box-decoration-breakボックスの装飾設定を管理
box-shadow要素の影指定
break-after改行後に表示する要素を指定
break-before改行前に表示する要素を指定
break-inside改行するタイミングを管理
caret-colorカーソルの色指定
clearfloat指定要素の回り込みを防ぐ
clip要素のクリッピングを指定
color-schemeダークモードやライトモードで適用する色を指定
column-fillカラムの埋め方
column-rule-colorカラム間のルールの色
column-rule-styleカラム間のルールのスタイル
column-rule-widthカラム間のルールの太さ
column-span要素を複数カラムにまたがらせる
content-visibility要素が表示されるまでの描画をスキップ
cursorカーソルの形状を指定
directionテキスト方向の指定（rtl、ltr）
flex-wrapフレックスアイテムの折り返しを指定
float要素の浮かせ方（left, rightなど）
font-feature-settings特定のフォント機能を有効化
font-language-overrideフォントの言語仕様を調整
font-optical-sizingフォントの視覚的なサイズを調整
font-smoothフォントのアンチエイリアシング
font-variation-settings可変フォントの設定を細かく調整
gapグリッドやフレックスでの間隔
grid-auto-columnsグリッドで自動的に追加される列サイズ
grid-auto-rowsグリッドで自動的に追加される行サイズ
grid-columnグリッドでの列の指定
grid-column-endグリッドの列の終了位置
grid-column-gapグリッド列間のギャップ
grid-column-startグリッドの列の開始位置
grid-gapグリッド内のギャップ指定
grid-rowグリッドの行の指定
grid-row-endグリッドの行の終了位置
grid-row-gapグリッド行間のギャップ
grid-row-startグリッドの行の開始位置
grid-template-areasグリッドのエリア定義
height要素の高さを指定
hyphens自動ハイフン分割の設定
isolation子要素と親要素の重なりを隔離
justify-content配置方向を指定
justify-itemsアイテムを水平方向に配置
letter-spacing文字間隔の指定
line-break行分割の方法
line-height行間の指定
list-style-imageリストの箇条書きアイコンの画像を指定
list-style-position箇条書きの位置
margin-block縦方向のマージン指定
mask-clipマスクの適用範囲を指定
mask-composite複数マスクの組み合わせ設定
mask-image要素の形状を指定
mask-originマスクの描画範囲を指定
max-block-size縦方向での最大サイズ
mix-blend-mode色の重ね合わせ
object-fit要素のトリミング
opacity要素の不透明度
orderフレックスアイテムの順序指定
outline要素のアウトライン設定
outline-offsetアウトラインの内側距離
overflow-anchorスクロール位置がずれるのを防止
overflow-x水平方向のオーバーフロー制御
overflow-y垂直方向のオーバーフロー制御
padding-blockブロック方向のパディング
place-content全体的な配置設定
scroll-marginスクロールのマージン設定
shape-margin特定形状のマージン調整
feild-sizingフォーム要素のサイズ調整
lh,rlhline-height、ルートのline-height
word-spacing要素の中の単語間のスペース
picture条件に応じて最適な画像を表示する要素の中の単語間のスペース※HTMLタグ