CSSの書き方と表示を調べる

CSSプロパティ・疑似クラス一覧

CSSプロパティ、疑似クラス、値、関数、@規則、セレクター、単位を一覧・部分一致検索できます。各項目の意味と使い方をHTML・CSSコードと表示結果で確認でき、初心者向けCSS図鑑から制作中のCSSリファレンス、チートシート代わりまで利用できます。

辞典から探す ↓Labトップへ運営者サイトへ ↗

741プロパティ

55@規則

161関数

63単位

1,702総項目

CSS辞典の使い方

CSSは「対象・項目・値」の3つで読みます

たとえば .button { color: red; } は、「ボタンの文字色を赤にする」という意味です。

セレクター

.button は「どの要素へ適用するか」を選びます。

プロパティ

color は「何を変えるか」を指定します。

値

red は「どのように変えるか」を指定します。

単位・関数・@規則

10px、calc()、@media など、数値の基準、計算、条件を補います。

値の選び方: 実際に使える書き方を用途別に示します。仕様書の記号は、必要な場合だけ折りたたみを開いて確認できます。
初期値: プロパティで値を指定しなかったときの値です。
継承: 親要素の値が子要素にも伝わるかを示します。
このCSSを書く場所: 親と子のどちらへ書くか、FlexboxやGridなど別の設定が必要かを具体例で示します。
パーセントの基準: 100%が何の大きさを表すかを示します。「該当なし」は、その項目では値に%を使わないという意味です。
動きの補間: transitionやanimationで途中の値を作り、滑らかに変えられるかを示します。
学習目安: 「基本」は最初に覚えたい項目、「一般」は通常の制作で必要に応じて調べる項目、「応用」は複雑な値や仕組み、「仕様確認」は策定中・実験的・旧名など、利用前の確認が必要な項目です。
現在の扱い: 「現行」は現在の仕様で使用できます。「策定中」「実験的」は仕様とブラウザー対応を確認し、「旧名」「非推奨」は新しいCSSで避けます。

迷ったら、まずプロパティから探してください。プロパティは変更する項目、値は変更内容、セレクターは適用先です。疑似クラスでは、:hoverや:focus-visibleなど、要素が特定の状態・条件に一致したときの選び方と表示を比較できます。

検索とコピー

名前や変えたい見た目から探す

「文字色」「中央揃え」「余白」、プロパティ名の一部、:hoverのような疑似クラスから検索できます。詳細は「役割」→「表示を比較」→「HTMLとCSS」→「値と注意点」の順です。キーボードの / でも検索欄へ移動できます。

カテゴリー現在の扱い並び順

— 件

データを準備しています

2026年7月23日時点のCSS Working Group公式仕様とMDNのブラウザー対応データを基準にしています。画面では「新しい制作で使用可」を「現行」、「仕様策定中」を「策定中」、「旧名称（互換用）」を「旧名」と表示します。対応ブラウザーの「Chrome・Edge・Firefox・Safari」は、各項目の詳細リンクから実際のバージョンも確認してください。