CSSプロパティ一覧｜よく使うプロパティを用途別に解説【早見表】

2025.07.15

2026.10.05

CSSには数多くのプロパティがありますが、実際のWeb制作でよく使うものはある程度決まっています。この記事では、よく使うCSSプロパティを「色・背景」「文字」「余白・サイズ」「配置」「Flexbox」「Grid」など用途別に整理し、役割と記述例を一覧にまとめました。

書き方を忘れたときの早見表として、ブックマークしてお使いください。

CSSの書き方の基本

CSSは「どの要素に（セレクタ）」「何を（プロパティ）」「どうするか（値）」の組み合わせで書きます。たとえば p { color: #333; } は、「p要素の文字色を #333 にする」という意味です。プロパティと値は「:」でつなぎ、最後に「;」を付けます。

CSSの基本は「CSSとは？基本構文と使い方をわかりやすく解説」、HTMLへの読み込み方は「外部CSS・内部CSS・インラインCSSの違いと使い分け」で解説しています。

よく使う単位

単位	意味	使いどころ
`px`	画面上の固定の大きさ	枠線の太さ、細かい調整
`%`	親要素に対する割合	幅を親に合わせて伸縮させる
`em`	その要素の文字サイズが基準（1em＝文字1つ分）	文字に合わせた余白や字間
`rem`	ルート（html要素）の文字サイズが基準	サイト全体で揃えたい文字サイズ
`vw` / `vh`	画面の幅・高さの1%	画面いっぱいの高さ（`100vh`）など

色・背景のプロパティ

プロパティ	役割	主な値・記述例
`color`	文字の色	`color: #333;`
`background-color`	背景の色	`background-color: #f5f5f5;`
`background-image`	背景の画像・グラデーション	`background-image: url(bg.jpg);` `background-image: linear-gradient(#fff, #ccc);`
`background-size`	背景画像の大きさ	`cover`（全体を覆う）、`contain`（全体を収める）
`background-position`	背景画像の位置	`background-position: center;`
`background-repeat`	背景画像の繰り返し	`no-repeat`（繰り返さない）
`opacity`	要素全体の透明度（0〜1）	`opacity: 0.5;`

色は #ff0000 のようなカラーコードのほか、rgb(255 0 0)、透明度付きの rgb(0 0 0 / 50%)、red のような色名でも指定できます。背景だけを半透明にしたいときは、opacity ではなく透明度付きの色を使います（opacity は文字や子要素まで透明になるため）。

文字・テキストのプロパティ

プロパティ	役割	主な値・記述例
`font-size`	文字の大きさ	`font-size: 16px;`、`1.2rem`
`font-weight`	文字の太さ	`bold`、`400`（標準）〜`700`（太字）
`font-family`	フォントの種類	`font-family: "Noto Sans JP", sans-serif;`
`font-style`	斜体にする	`italic`
`line-height`	行の高さ（行間）	`line-height: 1.8;`（単位なしで文字サイズの倍率）
`letter-spacing`	文字と文字の間隔	`letter-spacing: 0.05em;`
`text-align`	行内での文字の揃え	`left`、`center`、`right`
`text-decoration`	下線・取り消し線	`underline`、`line-through`、`none`（リンクの下線を消す）
`text-transform`	英字の大文字・小文字の変換	`uppercase`（すべて大文字）
`text-indent`	1行目の字下げ	`text-indent: 1em;`
`white-space`	改行・空白の扱い	`nowrap`（改行させない）
`overflow-wrap`	長い単語やURLの折り返し	`overflow-wrap: anywhere;`
`text-overflow`	はみ出した文字を「…」にする	`ellipsis`（`overflow: hidden`・`white-space: nowrap` と組み合わせる）
`vertical-align`	インライン要素・表のセルの縦の揃え	`middle`、`top`

余白・サイズのプロパティ

プロパティ	役割	主な値・記述例
`margin`	要素の外側の余白	`margin: 20px;`、`margin: 0 auto;`（幅を指定したブロックを中央寄せ）
`padding`	要素の内側の余白	`padding: 10px 20px;`（上下・左右）
`width` / `height`	幅・高さ	`width: 300px;`、`width: 100%;`
`max-width` / `min-width`	幅の上限・下限	`max-width: 1200px;`
`min-height`	高さの下限	`min-height: 100vh;`（画面いっぱい）
`box-sizing`	幅に余白と枠線を含めるか	`border-box`（含める。指定した幅のまま収まる）
`aspect-ratio`	縦横比	`aspect-ratio: 16 / 9;`

margin と padding は、値の数で指定する方向が変わります。1つなら上下左右、2つなら「上下・左右」、4つなら「上・右・下・左」の時計回りです。margin-top のように方向を付けると、1方向だけを指定できます。

枠線・角丸・影のプロパティ

プロパティ	役割	主な値・記述例
`border`	枠線（太さ・種類・色）	`border: 1px solid #ccc;`
`border-radius`	角の丸み	`border-radius: 8px;`、`50%`（正方形を円に）
`outline`	レイアウトに影響しない外側の線	`outline: 2px solid #3498db;`（フォーカス表示など）
`box-shadow`	要素の影	`box-shadow: 0 2px 8px rgb(0 0 0 / 15%);`
`text-shadow`	文字の影	`text-shadow: 1px 1px 2px #000;`

表示・配置のプロパティ

プロパティ	役割	主な値・記述例
`display`	表示の形式	`block`、`inline`、`inline-block`、`flex`、`grid`、`none`（非表示）
`position`	配置の基準	`relative`、`absolute`、`fixed`（画面に固定）、`sticky`（スクロールで追従）
`top` / `right` / `bottom` / `left`	位置（`position` と組み合わせる）	`top: 0; left: 0;`
`z-index`	重なりの順番（大きいほど手前）	`z-index: 10;`
`overflow`	はみ出した部分の扱い	`hidden`（隠す）、`auto`（必要ならスクロール）
`visibility`	見えなくする（場所は残る）	`hidden`
`float`	左右に寄せて回り込ませる	`left`、`right`（レイアウトには現在 Flexbox・Grid が主流）

display: none は要素が消えて場所も詰まりますが、visibility: hidden は見えなくなるだけで場所は残ります。position: absolute は、position: relative などを指定した一番近い祖先要素を基準に配置されます。

Flexboxのプロパティ一覧

Flexbox（フレックスボックス）は、要素を横並びや縦並びにして、揃え方や間隔を調整するためのレイアウト方法です。親要素（フレックスコンテナ）に指定するものと、子要素（フレックスアイテム）に指定するものがあります。

親要素に指定するプロパティ

プロパティ	役割	主な値・記述例
`display: flex`	Flexboxを使う	`display: flex;`
`flex-direction`	並べる方向	`row`（横・初期値）、`column`（縦）
`flex-wrap`	折り返すか	`wrap`（折り返す）、`nowrap`（初期値）
`justify-content`	並べる方向の揃え	`flex-start`、`center`、`space-between`（両端揃え）
`align-items`	並べる方向と直角の揃え	`stretch`（初期値）、`center`、`flex-start`
`align-content`	複数行になったときの行の揃え	`flex-start`、`space-between`
`gap`	子要素どうしの間隔	`gap: 16px;`

子要素に指定するプロパティ

プロパティ	役割	主な値・記述例
`flex`	伸び縮みの指定をまとめて書く	`flex: 1;`（余った幅を均等に分ける）
`flex-grow`	余った幅をどれだけ受け取るか	`flex-grow: 1;`
`flex-shrink`	幅が足りないときにどれだけ縮むか	`flex-shrink: 0;`（縮ませない）
`flex-basis`	基本の幅	`flex-basis: 200px;`
`order`	並び順	`order: -1;`（先頭へ）
`align-self`	その要素だけ揃え方を変える	`align-self: flex-end;`

図解付きの詳しい使い方は「フレックスボックス（Flexbox）完全ガイド【図解付き】」で解説しています。

Gridのプロパティ一覧

CSS Grid（グリッド）は、行と列を使って要素を2次元に配置するレイアウト方法です。カードの一覧や、ヘッダー・サイドバー・本文のようなページ全体の枠組みを作るのに向いています。

プロパティ	役割	主な値・記述例
`display: grid`	Gridを使う（親要素）	`display: grid;`
`grid-template-columns`	列の数と幅（親要素）	`grid-template-columns: repeat(3, 1fr);`（3等分）
`grid-template-rows`	行の高さ（親要素）	`grid-template-rows: auto 1fr auto;`
`gap`	行・列の間隔（親要素）	`gap: 20px;`
`place-items`	セル内の縦横の揃えをまとめて指定（親要素）	`place-items: center;`
`grid-template-areas`	エリアに名前を付けて配置を決める（親要素）	`"header header" "side main"`
`grid-column` / `grid-row`	どの列・行にまたがるか（子要素）	`grid-column: 1 / 3;`（1〜2列目）
`grid-area`	名前を付けたエリアに配置（子要素）	`grid-area: main;`

詳しくは「CSS Grid入門：2次元レイアウトを直感的に作る方法」をご覧ください。

動き（トランジション・アニメーション）のプロパティ

プロパティ	役割	主な値・記述例
`transition`	値が変わるときに滑らかに変化させる	`transition: background-color 0.3s;`
`transform`	移動・回転・拡大縮小	`translateY(-4px)`、`rotate(45deg)`、`scale(1.1)`
`animation`	@keyframes で決めた動きを再生	`animation: fade 1s ease infinite;`

transition と animation の違いは「CSSトランジション vs アニメーション：違いと使い分け」で解説しています。

その他のよく使うプロパティ

プロパティ	役割	主な値・記述例
`cursor`	マウスカーソルの形	`cursor: pointer;`（指の形）
`list-style`	リストの先頭の記号	`list-style: none;`（記号を消す）
`object-fit`	画像を枠に合わせる方法	`object-fit: cover;`（比率を保って枠を埋める）
`filter`	ぼかし・白黒などの効果	`filter: blur(4px);`、`grayscale(100%)`
`pointer-events`	クリックなどを受け付けるか	`pointer-events: none;`（クリックを無効に）
`content`	疑似要素（::before・::after）の中身	`content: "";`