この記事の要点

CSS プロパティは 「セレクタ { プロパティ: 値 }」 の形で要素を装飾する基本単位 主要 50 程度: display / position / flex / grid / color / background / font / margin / padding / border / box-sizing / transition / transform / animation / filter / overflow / z-index 他 CSS Variables (custom properties): --main-color: #06c; を var(--main-color) で参照 Logical Properties: margin-block / margin-inline で書字方向対応 (縦書き・RTL) 計算値関数: calc() / min() / max() / clamp() でレスポンシブを宣言的に ベンダープレフィックス (-webkit- / -moz-) は 2026 年現在ほぼ不要、Autoprefixer に任せる

CSS プロパティとは

CSS プロパティ (Property) は、HTML 要素にどのような装飾・レイアウトを適用するかを指定するキー名です。値とセットで property: value; の形で書き、セレクタが指定した要素に適用されます。

/* セレクタ { プロパティ: 値; } */
h1 {
  color: #06c;              /* 文字色 */
  font-size: 2rem;          /* フォントサイズ */
  margin-block: 1em;        /* 上下マージン（Logical） */
  text-align: center;       /* 中央寄せ */
}

CSS Working Group が標準化したプロパティは 2026 年時点で 500 種類超あり、MDN Web Docs の CSS Reference が一次資料です。本記事ではフロントエンド実務で頻出する主要プロパティを領域別にまとめます。

表示モード: display / position

プロパティ	主な値	意味
display	block / inline / inline-block / flex / grid / none / contents	ボックスの表示形式
position	static / relative / absolute / fixed / sticky	配置基準
top / right / bottom / left	px / % / auto	position と組で使用
z-index	整数 / auto	重なり順 (position が static 以外で有効)
visibility	visible / hidden / collapse	非表示でも領域は残る
overflow	visible / hidden / scroll / auto / clip	はみ出し処理

Flexbox

.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse */
  justify-content: space-between;  /* 主軸方向の配置 */
  align-items: center;             /* 交差軸方向の配置 */
  flex-wrap: wrap;
  gap: 1rem;                /* 子要素間の隙間 */
}

.item {
  flex: 1 1 200px;          /* grow shrink basis */
  align-self: flex-start;
}

Grid Layout

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main    main"
    "footer  footer  footer";
  gap: 16px;
}

header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

/* レスポンシブで自動列数 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

ボックスモデル: margin / padding / border

*, *::before, *::after {
  box-sizing: border-box;   /* 既定の content-box は古い設計 */
}

.card {
  margin: 1em auto;         /* 上下 1em、左右 auto (中央寄せ) */
  padding: 16px 24px;       /* 上下 16、左右 24 */
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: 2px dashed transparent;  /* focus 用に予約 */
}

.card:focus-visible {
  outline-color: #06c;
}

色と背景: color / background

:root {
  /* CSS Variables (Custom Properties) */
  --main: #06c;
  --bg: #fafafa;
  --radius: 6px;
}

body {
  color: #222;              /* 文字色 */
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #fff, #f0f0f0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.btn {
  color: white;
  background: var(--main);
  border-radius: var(--radius);
}

/* 新しい色空間 */
.modern {
  color: oklch(70% 0.15 200);   /* OKLCH (CSS Color 4) */
  background: color-mix(in oklch, #06c 40%, white);
}

フォント関連

プロパティ	主な値
font-family	system-ui, sans-serif / "Noto Sans JP", sans-serif
font-size	16px / 1rem / clamp(1rem, 2vw, 1.5rem)
font-weight	normal / bold / 100〜900
line-height	1.6 / 1.5em
letter-spacing	0.05em 等
text-align	left / center / justify
text-decoration	underline dotted #06c 等
text-transform	uppercase / capitalize
white-space	nowrap / pre-wrap

アニメーション: transition / transform / animation

.btn {
  background: #06c;
  transition: background 0.2s ease, transform 0.2s;
}
.btn:hover {
  background: #048;
  transform: translateY(-2px) scale(1.02);
}

/* @keyframes でカスタムアニメ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal {
  animation: fadeIn 0.3s ease-out;
}

/* 3D 変形 */
.card {
  transform: perspective(800px) rotateY(15deg);
  transform-origin: center;
}

/* フィルター */
.dim { filter: brightness(0.7) blur(2px); }
.gray { filter: grayscale(100%); }
.backdrop { backdrop-filter: blur(8px); }

CSS Variables (カスタムプロパティ)

Sass 等のプリプロセッサ変数と違い、ブラウザ実行時に評価され、JavaScript からも読み書きできるのが強みです。

:root {
  --primary: #06c;
  --primary-dark: #048;
  --space: 8px;
}

.card {
  padding: calc(var(--space) * 2);
  border: 1px solid var(--primary);
}

/* メディアクエリで上書き */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #4fa3ff;
  }
}

/* JS から動的変更 */
/* document.documentElement.style.setProperty('--primary', '#f00'); */

Logical Properties (論理プロパティ)

縦書き・RTL (アラビア語等) を一発で対応できる現代仕様。margin-left ではなく margin-inline-start を使います。

従来 (Physical)	Logical 等価
margin-top / margin-bottom	margin-block-start / margin-block-end / margin-block
margin-left / margin-right	margin-inline-start / margin-inline-end / margin-inline
padding-left	padding-inline-start
border-top	border-block-start
width / height	inline-size / block-size

計算値関数: calc / min / max / clamp

/* calc(): 異なる単位の演算 */
.sidebar { width: calc(100% - 240px); }

/* min(): 最小値を選択 */
.container { width: min(1200px, 100%); }

/* max(): 最大値を選択 */
.text { font-size: max(14px, 1rem); }

/* clamp(min, preferred, max): 最小〜最大に収める */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
/* → ビューポート幅で変動するが 1.5rem〜3rem の範囲内 */

/* 入れ子も可能 */
.box {
  padding: clamp(8px, calc(1rem + 1vw), 32px);
}

ベンダープレフィックスの今

かつて -webkit-transform / -moz-transition / -ms-flex 等のプレフィックスが必要でしたが、2026 年現在の主要ブラウザ (Chrome / Edge / Firefox / Safari) はほぼ標準プロパティでカバー。残るのは -webkit-line-clamp、-webkit-backdrop-filter (Safari) など一部のみ。

/* 必要な数少ない例 */
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);  /* Safari */
}

ビルドツールに Autoprefixer (PostCSS) を組み込めば、Browserslist 設定に応じて自動付与されるので、手書きは不要です。

頻出 50 プロパティ チートシート

カテゴリ	プロパティ
表示	display, visibility, opacity, overflow, z-index, position
配置	top, right, bottom, left, inset, float, clear
Flexbox	flex, flex-direction, justify-content, align-items, gap, order
Grid	grid-template-columns, grid-template-rows, grid-area, grid-gap
ボックス	width, height, margin, padding, border, box-sizing, box-shadow
背景	background-color, background-image, background-size, background-position
フォント	font-family, font-size, font-weight, line-height, letter-spacing
テキスト	color, text-align, text-decoration, text-transform, white-space, word-break
変形	transform, transform-origin, perspective, filter, backdrop-filter
動き	transition, animation, animation-delay, animation-iteration-count
カーソル	cursor, pointer-events, user-select
その他	content, list-style, table-layout, resize, scroll-behavior

FAQ

Q: ショートハンドと個別指定、どちらを使うべき？
A: 既存値を一部だけ変えたいときは個別指定、新規宣言なら短く済むショートハンド。background: red; は他の background-* も初期化するので注意。

Q: !important はいつ使う？
A: 原則使わない。サードパーティ CSS を上書きする最終手段に限定。詳細度設計で解決するのが先。

Q: モダンな機能の対応状況を確認したい
A: caniuse.com でブラウザ別シェアと対応状況を確認できます。