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 | テキストの選択可否を指定する |
| animation | CSSアニメーションをまとめて指定し、動きを加える |
| backface-visibility | 3D変換を行う際に裏面が表示されるかを制御する |
| 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 | 画像を親要素に収まるようにトリミング |
| perspective | 3D空間の奥行きを設定 |
| 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 | カーソルの色指定 |
| clear | float指定要素の回り込みを防ぐ |
| 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 | 特定形状のマージン調整 |
| field-sizing | フォーム要素のサイズ調整 |
| lh,rlh | line-height、ルートのline-height |
| word-spacing | 要素の中の単語間のスペース |
| picture | 条件に応じて最適な画像を表示する要素の中の単語間のスペース※HTMLタグ |