あなたのCSS、”迷わず・すぐ使える”最強リスト。
Webデザインやサイト制作で「このプロパティ何だっけ？」と立ち止まること、ありませんか？
CSSには数百ものプロパティがあり、初心者もプロも”一瞬で思い出せる一覧表”が手元にあると心強いもの。
このページでは、現場で本当に使う代表的なCSSプロパティを厳選して一覧化。
「背景色を変えたい」「ボックスに影を付けたい」「FlexboxやGridの書き方は？」
——そんな”いま必要な疑問”に秒速で答える、保存版のチートシートです！
見やすい表形式だから、初心者の学習用にも、プロの実務用リファレンスにも最適。
この一覧を使いこなして、デザイン作業の時短＆クオリティアップを実現しましょう。
使い方アドバイス
気になるプロパティや使い方は、ページ内検索（Ctrl+F）やコピペでサクッと活用しましょう。
※ちょっと表作るのに時間かかっていました( ´艸｀)
↓早速、CSSプロパティ一覧（代表的なもの）をチェック！
CSSプロパティ一覧（頻出CSSのみ）
| プロパティ名 | 日本語名 | 用途・概要 | 代表的な値例 |
|---|---|---|---|
| color | 文字色 | 文字の色を指定 | #333、red、rgb(0,0,0) |
| background | 背景一括設定 | 背景色・画像・繰返しなどのまとめ設定 | #fff url(bg.jpg) no-repeat |
| background-color | 背景色 | 要素の背景色を指定 | #fafafa、transparent |
| background-image | 背景画像 | 要素の背景画像を指定 | url(“img.jpg”)、none |
| background-size | 背景画像のサイズ | 背景画像の大きさを指定 | cover、contain、100px |
| background-repeat | 背景画像の繰り返し | 背景画像の繰返し方法 | repeat、no-repeat |
| background-position | 背景画像の位置 | 背景画像の表示位置 | center、top left、50% 50% |
| width | 幅 | 要素の横幅を指定 | 100px、50%、auto |
| height | 高さ | 要素の高さを指定 | 200px、auto |
| min-width | 最小幅 | 最小の幅を指定 | 300px、0 |
| max-width | 最大幅 | 最大の幅を指定 | 100%、800px |
| min-height | 最小高さ | 最小の高さを指定 | 50px |
| max-height | 最大高さ | 最大の高さを指定 | 500px、100% |
| margin | 外側余白 | 外側（上下左右）の余白をまとめて指定 | 10px、0 auto |
| margin-top | 上余白 | 上側の外余白を指定 | 20px |
| margin-right | 右余白 | 右側の外余白を指定 | 10px |
| margin-bottom | 下余白 | 下側の外余白を指定 | 30px |
| margin-left | 左余白 | 左側の外余白を指定 | 5px |
| padding | 内側余白 | 内側（上下左右）の余白をまとめて指定 | 8px、10px 20px |
| padding-top | 上内余白 | 上側の内余白を指定 | 5px |
| padding-right | 右内余白 | 右側の内余白を指定 | 10px |
| padding-bottom | 下内余白 | 下側の内余白を指定 | 8px |
| padding-left | 左内余白 | 左側の内余白を指定 | 15px |
| border | 枠線一括指定 | 枠線の太さ・種類・色をまとめて指定 | 1px solid #000 |
| border-width | 枠線の太さ | 枠線の太さを指定 | 2px、thin、medium |
| border-style | 枠線の種類 | 枠線の線種を指定 | solid、dashed、none |
| border-color | 枠線の色 | 枠線の色を指定 | #333、red |
| border-radius | 角丸 | 角の丸みの度合いを指定 | 10px、50% |
| border-top | 上枠線一括 | 上枠線をまとめて指定 | 2px dotted #555 |
| border-right | 右枠線一括 | 右枠線をまとめて指定 | 1px solid #f00 |
| border-bottom | 下枠線一括 | 下枠線をまとめて指定 | 1px dashed #999 |
| border-left | 左枠線一括 | 左枠線をまとめて指定 | 2px solid #000 |
| box-shadow | ボックスの影 | 要素に影を付与 | 2px 2px 8px #333 |
| opacity | 透明度 | 要素の不透明度を指定 | 0.5、1 |
| font-size | 文字サイズ | 文字の大きさを指定 | 16px、1.5em、large |
| font-family | フォント | フォントの種類を指定 | “游ゴシック”,Arial,sans-serif |
| font-weight | 太さ | 文字の太さを指定 | bold、400、normal |
| font-style | 斜体 | 文字の斜体スタイルを指定 | italic、normal |
| font-variant | 小型大文字化 | 小型大文字表示など | small-caps、normal |
| text-align | 文字揃え | テキストの横方向揃え | left、center、right |
| text-decoration | 装飾線 | 下線や取り消し線など | underline、line-through、none |
| text-transform | 大文字・小文字変換 | テキストの大文字・小文字変換 | uppercase、lowercase、capitalize |
| letter-spacing | 文字間隔 | 文字間のスペースを指定 | 2px、0.1em |
| line-height | 行間 | 行の高さを指定 | 1.6、24px |
| word-spacing | 単語間隔 | 単語間のスペースを指定 | 4px |
| white-space | 空白・改行処理 | 空白や改行の表示方法 | nowrap、pre、normal |
| word-break | 単語の折り返し | 単語の改行ルール | break-all、keep-all |
| overflow | はみ出し処理 | 要素からはみ出した部分の処理 | visible、hidden、scroll |
| overflow-x | 横方向はみ出し処理 | 横方向のはみ出し部分の処理 | auto、scroll、hidden |
| overflow-y | 縦方向はみ出し処理 | 縦方向のはみ出し部分の処理 | auto、scroll、hidden |
| display | 表示方法 | 要素の表示方法を指定 | block、inline、flex、none |
| position | 配置方法 | 要素の配置方法を指定 | static、relative、absolute、fixed |
| top | 上からの距離 | 要素の上端位置を指定（position併用時） | 10px、5% |
| right | 右からの距離 | 要素の右端位置を指定 | 0、10px |
| bottom | 下からの距離 | 要素の下端位置を指定 | 0、20px |
| left | 左からの距離 | 要素の左端位置を指定 | 100px、10% |
| z-index | 重なり順 | 要素の重なり順を指定 | 1、9999 |
| float | 回り込み | 左右に回り込む設定 | left、right、none |
| clear | 回り込み解除 | 回り込みを解除 | both、left、right |
| visibility | 表示・非表示 | 要素の表示/非表示 | visible、hidden、collapse |
| cursor | カーソル | マウスカーソルの形状 | pointer、default、move |
| pointer-events | ポインターイベント制御 | クリックやホバーなどの可否 | none、auto |
| transition | トランジション | 変化にアニメーション効果を追加 | all 0.3s ease |
| transition-property | トランジション対象 | アニメ効果を付けるプロパティ名 | opacity、transform |
| transition-duration | トランジション時間 | アニメ効果の時間 | 0.5s、1s |
| transition-delay | トランジション遅延 | アニメ開始の遅延時間 | 0.2s |
| transition-timing-function | トランジション進行 | 進行カーブ | ease、linear、ease-in-out |
| animation | アニメーション一括指定 | アニメーションの一括設定 | fadein 1s infinite |
| animation-name | アニメーション名 | 使用する@keyframes名 | slidein |
| animation-duration | アニメ時間 | アニメーションの実行時間 | 2s、500ms |
| animation-delay | アニメ開始遅延 | 開始を遅らせる時間 | 1s |
| animation-timing-function | アニメ進行 | 進行カーブ | linear、ease-in |
| animation-iteration-count | 繰り返し回数 | 何回アニメーションを繰り返す | 1、infinite |
| animation-direction | 再生方向 | 正順・逆再生・交互再生 | alternate、reverse |
| animation-fill-mode | 停止時の状態 | アニメ終了後の状態 | forwards、backwards |
| transform | 変形 | 回転や拡大縮小などの2D/3D変形 | rotate(45deg)、scale(1.2) |
| transform-origin | 変形の基準点 | 変形の基準になる点を指定 | center、left top、50% 50% |
| perspective | 3D遠近感 | 3D変形時の遠近感 | 800px |
| backface-visibility | 裏面表示 | 3Dで裏面を表示するか | visible、hidden |
| flex | フレックスアイテム設定 | flexboxレイアウトのflexアイテム設定 | 1、0 1 auto |
| flex-direction | 並び方向 | 子要素の並び方向指定（flexbox用） | row、column |
| flex-wrap | 折返し | 子要素の折り返し制御 | wrap、nowrap |
| justify-content | 主軸方向揃え | 子要素の主軸方向の揃え方 | center、space-between |
| align-items | 交差軸方向揃え | 子要素の交差軸方向の揃え方 | center、flex-start |
| align-content | 行ごとの揃え | 複数行（ラップ時）の揃え方 | flex-start、space-around |
| order | 並び順 | flexアイテムの表示順 | 1、2、-1 |
| align-self | 個別縦揃え | flex/gridのアイテム個別縦揃え | center、flex-end |
| grid-template-columns | 列定義 | グリッド列のサイズと数の定義 | 1fr 2fr、repeat(3, 1fr) |
| grid-template-rows | 行定義 | グリッド行のサイズと数の定義 | 100px 1fr |
| grid-column-gap | 列間の隙間 | グリッド列の隙間（gap推奨） | 16px |
| grid-row-gap | 行間の隙間 | グリッド行の隙間（gap推奨） | 8px |
| grid-column | 列位置指定 | アイテムの開始・終了カラム | 2 / span 3 |
| grid-row | 行位置指定 | アイテムの開始・終了行 | 1 / 3 |
| gap | アイテム間の隙間 | flex/gridの隙間設定 | 24px |
| object-fit | メディアサイズ | 画像や動画のリサイズ方式 | cover、contain |
| object-position | メディア位置 | 画像や動画の表示位置 | center、top left |
| filter | フィルター効果 | 画像や要素にぼかし・色補正などを適用 | blur(5px)、grayscale(0.7) |
| backdrop-filter | 背景フィルター | 背景にフィルター効果をかける（半透明のガラス風等） | blur(8px)、brightness(1.2) |
| box-sizing | ボックスサイズ方式 | 幅・高さの基準指定（padding/borderを含むか等） | border-box、content-box |
| resize | リサイズ制御 | 要素サイズをユーザーが変更できるか | none、both、vertical |
| user-select | 選択可否 | テキストの選択可否 | none、auto、text |
| outline | アウトライン | フォーカス時の外枠（枠線とは別） | 1px solid #00f |
| outline-offset | オフセット | アウトラインのずれ幅 | 4px |
| clip-path | クリッピング | 要素の表示領域をクリップ（切り抜き） | circle(50%)、polygon() |
| caret-color | キャレット色 | 入力時のカーソル（縦棒）の色 | #f00 |