メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
デザイン・CSS
/
CSSプロパティ辞典
▧
CSSプロパティ辞典
design/css-property-reference
テキスト、ボックス、レイアウト、背景、変形など主要CSSプロパティを絞り込み検索できます。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
CSSプロパティ辞典では、テキスト、ボックス、レイアウト、背景、変形など主要CSSプロパティを絞り込み検索できます。
関連する観点として CSSプロパティ、CSS辞典、css properties を確認し、結果をコピーして別の作業に使えます。
絞り込み
結果
--- テキスト --- color font-size font-weight font-family text-align text-decoration text-transform letter-spacing line-height word-spacing text-overflow white-space word-break --- ボックス --- width height margin padding border border-radius box-sizing box-shadow overflow display --- レイアウト --- position top right bottom left z-index float clear flex flex-direction justify-content align-items grid grid-template-columns gap --- 背景 --- background background-color background-image background-size background-position background-repeat background-attachment --- 変形/動き --- transform translate rotate scale transition transition-duration animation @keyframes opacity visibility --- その他 --- cursor pointer-events user-select filter backdrop-filter clip-path object-fit aspect-ratio container-type scroll-snap-type will-change
コピー
使い方
絞り込み欄を空のままにして、カテゴリ別のプロパティ群を眺めます。
grid、background、scroll など調べたい語を入力します。
結果欄では一致した単語だけが空白区切りで表示されます。
セレクタ構文を調べたい場合は、CSSセレクタ参照の行単位検索と使い分けます。
入力例・出力例
INPUT
絞り込み: grid
OUTPUT
grid grid-template-columns
実装と同じく空白分割した単語の部分一致で検算しました。
INPUT
絞り込み: radius
OUTPUT
border-radius
カテゴリ見出しではなくプロパティ語が返ります。
よくある利用シーン
レイアウト周りのCSSプロパティ名を思い出しながらコードレビューするとき。
backgroundやscrollなど接頭語が同じプロパティ候補をまとめて確認したいとき。
セレクタではなく宣言側のプロパティ語だけを教材用に抜き出すとき。
結果確認のポイント
生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
CSSプロパティ、CSS辞典、css propertiesの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
CSSプロパティ辞典の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
このリファレンスではどのようなプロパティカテゴリを調べられますか?
テキスト、ボックス、レイアウト、背景、変形/動き、その他の見出しで主要なCSSプロパティ名を表示します。初期値・適用対象・継承可否の詳細表はなく、絞り込み欄でプロパティ名の文字列一致だけを探す簡易リストです。
CSS プロパティの継承とはどういう意味ですか?
継承とは、親要素に設定した CSS が明示指定のない子孫要素にも自動的に適用されることです。color や font-size・line-height は継承されます。一方 margin・padding・border・background は継承されません。inherit を値として指定すると継承を強制でき、initial で仕様の初期値に戻せます。
ショートハンドプロパティと個別プロパティの優先順位はどうなりますか?
後に記述されたルールが優先されます(カスケード順)。font: bold 16px/1.5 sans-serif; のようなショートハンドを先に書き、後から font-size: 18px; で個別に上書きすることが可能です。ただしショートハンドは指定しなかったサブプロパティを初期値にリセットするため、想定外の上書きに注意が必要です。
関連ツール
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。
Material Elevation
Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。
accent-colorが効く要素
CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。
CSS角度単位
CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。
animation-direction
CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。
animation-fill-mode
CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。