この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。

バージョン:5

ページ更新者:guest

更新日時:2026-06-11 07:07:02

タイトル: プロパティ

SEOタイトル: CSS プロパティ完全リファレンス（主要50 + Variables / Logical / calc()）

この記事の要点

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 でブラウザ別シェアと対応状況を確認できます。

IT総合Wiki

過去バージョン

タイトル: プロパティ

SEOタイトル: CSS プロパティ完全リファレンス（主要50 + Variables / Logical / calc()）

CSS プロパティとは

表示モード: display / position

Flexbox

Grid Layout

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

色と背景: color / background

フォント関連

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

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

Logical Properties (論理プロパティ)

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

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

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

FAQ

IT総合Wiki

過去バージョン

タイトル: プロパティ SEOタイトル: CSS プロパティ完全リファレンス（主要50 + Variables / Logical / calc()）

CSS プロパティとは

表示モード: display / position

Flexbox

Grid Layout

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

色と背景: color / background

フォント関連

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

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

Logical Properties (論理プロパティ)

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

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

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

FAQ

タイトル: プロパティ

SEOタイトル: CSS プロパティ完全リファレンス（主要50 + Variables / Logical / calc()）

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