【CSS3】CSSでよく使われる全てのプロパティ一覧・早見表[ジャンル別]
このページではCSS3で使われているプロパティを可能な限りすべてピックアップし、一覧・早見表にしました。
随時更新。古くなったもの、非推奨とされているものは掲載されません。またお使いのWebブラウザの種類やCSSファイルによっては、見え方が異なる場合や正常に動作しない可能性があります。
目次
CSSのプロパティ一覧・早見表
レイアウト
| プロパティ | 説明 | 備考・サンプル |
|---|
| padding | 要素と境界の内側の余白 | |
| padding-top | 要素の上側の内部余白 | |
| padding-left | 要素の左側の内部余白 | |
| padding-right | 要素の右側の内部余白 | |
| padding-bottom | 要素の下側の内部余白 | |
| margin | 要素と境界の外側の余白 | |
| margin-top | 要素の上側の外部余白 | |
| margin-left | 要素の左側の外部余白 | |
| margin-right | 要素の右側の外部余白 | |
| margin-bottom | 要素の下側の外部余白 | |
| position | 要素の配置や位置を指定 | |
| top | 上方向に移動 | |
| left | 左方向に移動 | |
| right | 右方向に移動 | |
| bottom | 下方向に移動 | |
| float | 要素を左右方向に浮動 | |
| clear | floatで指定した浮動をクリア | |
| layout-grid | グリッドレイアウトを適用 | |
サイズ
| プロパティ | 説明 | 備考・サンプル |
|---|
| width | 要素の幅を指定 | |
| max-width | 要素の最大幅を指定 | |
| min-width | 要素の最小幅を指定 | |
| height | 要素の高さを指定 | |
| min-height | 要素の最大の高さを指定 | |
| max-height | 要素の最小の高さを指定 | |
| object-fit | コンテナ要素内のサイズ調整 | |
| object-position | コンテナ内表示位置の指定 | |
表示
| プロパティ | 説明 | 備考・サンプル |
|---|
| display | 要素の表示方法を指定 | |
| zoom | 要素の拡大縮小率を指定 | |
| cursor | 要素上のカーソルの形状 | |
| z-index | 要素の重なり順序の制御 | |
| visibility | 要素の可視性を制御 | |
| clip-path | 要素の表示領域をクリッピング | |
| overflow | 表示領域外の表示制御 | |
| overflow-x | X軸表示領域外の表示制御 | |
| overflow-y | Y軸表示領域外の表示制御 | |
| overflow-wrap | 文字列の改行の制御 | |
| transform | 要素の位置や形状を変更 | |
| transform-style | 2D/3D変換の適用方法 | |
| transform-origin | 変形の基準点を指定 | |
| perspective | 3D変換時の奥行を指定 | |
| perspective-origin | 3D変換時の視点の位置を指定 | |
| backface-visibility | 3D変換時の要素の背面の指定 | |
| color | 要素の色を指定 | |
| opacity | 要素の(不)透明度を指定 | |
フォント
| プロパティ | 説明 | 備考・サンプル |
|---|
| font | フォント関連プロパティ一括指定 | |
| font-family | フォントの種類を指定 | |
| font-size | フォントの大きさを指定 | |
| font-size-adjust | フォントの代替選択指定 | |
| font-weight | フォントの太さを指定 | |
| font-style | フォントスタイル(字体)を指定 | |
| font-stretch | フォントの幅を指定 | |
| font-variant | フォントのバリエーション指定 | |
| font-kerning | 文字間の字詰めを制御 | |
| font-synthesis | フォントスタイルの合成方法 | |
| ruby-align | ルビの揃え方を指定 | |
| ruby-merge | ルビの統合方法指定 | |
| ruby-position | ルビの表示位置を指定 | |
| ruby-overhang | ルビ以外の配置位置指定 | |
| ruby-span | ルビの適用領域を指定 | |
テキスト
| プロパティ | 説明 | 備考・サンプル |
|---|
| text-align | テキストの水平配置 | |
| text-justify | テキストの配置指定(両端) | |
| text-indent | 最初の行の字下げ指定 | |
| text-emphasis | テキストの強調スタイルを指定 | |
| text-transform | テキストの表示を変更、変換 | |
| text-decoration | テキストの装飾を制御 | |
| text-underline-position | テキストの下線位置の制御 | |
| word-spacing | 単語間の間隔を制御 | |
| letter-spacing | 文字間の間隔を制御 | |
| direction | テキストの表示方向を制御 | |
| hyphens | 単語の改行や分割の制御 | |
| unicode-bidi | 各言語の表示方向を制御 | |
| writing-mode | テキストの配置方法を指定 | |
| vertical-align | インライン要素の垂直配置制御 | |
| white-space | 空白文字の制御 | |
| quotes | 引用符スタイルの指定 | |
ボーダー
| プロパティ | 説明 | 備考・サンプル |
|---|
| border | 要素の周囲の境界線を指定 | |
| border-top | 上側ボーダーの指定 | |
| border-left | 左側ボーダーの指定 | |
| border-right | 右側ボーダーの指定 | |
| border-bottom | 下側ボーダーの指定 | |
| border-style | ボーダーのスタイルを指定 | |
| border-color | ボーダーの色を指定 | |
| border-width | ボーダーの幅を指定 | |
| border-radius | 要素の角を丸める | |
| border-image | ボーダーの背景画像を指定 | |
| border-image-source | ボーダー画像のソース指定 | |
| outline | アクション時の要素の輪郭線 | |
| outline-style | アウトラインのスタイルを指定 | |
| outline-color | アウトラインの色を指定 | |
| outline-width | アウトラインの幅を指定 | |
背景
| プロパティ | 説明 | 備考・サンプル |
|---|
| background | 要素の背景を指定 | |
| background-color | 背景色を指定 | |
| background-image | 背景画像を指定(ソース) | |
| background-repeat | 背景画像の繰り返し方法 | |
| background-position | 背景画像の位置 | |
| background-attachment | 背景画像のスクロール動作 | |
| background-blend-mode | 背景画像と背景色のブレンド | |
カラム
| プロパティ | 説明 | 備考・サンプル |
|---|
| columns | コンテンツを複数の列に分割 | |
| column-gap | カラム間の間隔を指定 | |
| column-fill | カラム間の列の満たし方を指定 | |
| column-rule | 列と列の間の垂直線の指定 | |
| column-span | カラム間の列跨ぎを指定 | |
| column-width | カラムの幅を指定 | |
リスト
| プロパティ | 説明 | 備考・サンプル |
|---|
| list-style | リストアイテムのスタイル指定 | |
| list-style-type | マーカーの種類を指定 | |
| list-style-image | マーカーに画像を指定 | |
| list-style-position | マーカーの位置を指定 | |
テーブル
| プロパティ | 説明 | 備考・サンプル |
|---|
| table-layout | テーブルのレイアウトを指定 | |
| caption-side | 表のタイトルの位置を指定 | |
| empty-cells | 空のセルの境界線の制御 | |
| border-spacing | テーブル内の境界線の間隔 | |
| border-collapse | テーブル内の境界線結合方法 | |
カウンター
| プロパティ | 説明 | 備考・サンプル |
|---|
| counter-reset | カウンターのリセット制御 | |
| counter-increment | カウンターの増加値を制御 | |
エフェクト
| プロパティ | 説明 | 備考・サンプル |
|---|
| filter | 要素にビジュアル効果付与 | |
| blur() | ぼかし効果 | |
| sepia() | セピア効果 | |
| invert() | 色を反転 | |
| opacity() | 不透明度を変更 | |
| saturate() | 彩度を変更 | |
| contrast() | コントラストを変更 | |
| grayscale() | 白黒に変更 | |
| brightness() | 明るさを変更 | |
| hue-rotate() | 色相を回転 | |
アニメーション
| プロパティ | 説明 | 備考・サンプル |
|---|
| animation | 要素にアニメーションを適用 | |
| animation-name | アニメーション名を指定 | |
| animation-delay | アニメーションの遅延開始時間 | |
| animation-duration | アニメーションの実行時間 | |
| animation-direction | アニメーションの再生方向 | |
| animation-fill-mode | 開始/終了時のスタイル制御 | |
| animation-play-state | アニメーションの再生状態 | |
| animation-iteration-count | アニメーションの反復回数 | |
| animation-timing-function | タイミング関数の指定 | |
| transition | 要素の変化の制御 | |
| transition-delay | トランジションの遅延開始時間 | |
| transition-duration | トランジションの時間設定 | |
| transition-property | トランジションのプロパティ | |
| transition-timing-function | タイミング関数の指定 | |
フレキシブルレイアウト
| プロパティ | 説明 | 備考・サンプル |
|---|
| flex | フレックスアイテムの伸縮度 | |
| flex-flow | フレックスコンテナの制御 | |
| flex-grow | フレックスの伸長係数指定 | |
| flex-wrap | 領域外のアイテムの制御 | |
| flex-basis | フレックスアイテムの基本寸法 | |
| flex-shrink | フレックスの縮小係数指定 | |
| align-self | デフォルト配置の上書き | |
| align-items | アイテムを垂直方向に配置 | |
| align-content | 複数行を垂直方向に配置 | |
| justify-content | アイテムを水平方向に配置 | |
| order | フレックスアイテムの並べ替え | |
セレクタ(疑ス)
| プロパティ | 説明 | 備考・サンプル |
|---|
| :hover | マウスに浮かんだ状態 | |
| :focus | フォーカス(選択)された状態 | |
| :target | 指定されている状態 | |
| :active | クリックがされた状態 | |
| :checked | チェックされた状態 | |
| :visited | リンクが訪問された状態 | |
| :link | リンクが未訪問の状態 | |
| :any-link | 全てのリンクに適用 | |
| :enabled | 有効な状態 | |
| :disabled | 無効な状態 | |
| :lang | 要素の言語属性 | |
| :selection | 選択範囲中のテキスト | |
| :fullscreen | 全画面にあるすべての要素 | |
| :first-child | 要素の最初の子要素(first-last) | |
| :first-letter | 要素の最初の文字 | |
| :first-line | 要素の最初の行 | |
| :empty | 子を持たない要素 | |
| :before | 要素の直前 | |
| :after | 要素の直後 | |
| :has | 引数の値と一致する要素 | |
| :is | 引数の要素と一致する要素 | |
| :not | 引数の要素と一致しない要素 | |
| content | 疑似要素での追加要素を指定 | |
ルール
| プロパティ | 説明 | 備考・サンプル |
|---|
| @page | 印刷ページの指定 | |
| @media | デバイスごとの指定 | |
| @import | CSSファイルのインポート | |
| @charset | 文字セットを指定 | |
| @keyframes | アニメーションの定義 | |
| @font-face | カスタムフォントの使用 | |
プリント
| プロパティ | 説明 | 備考・サンプル |
|---|
| crop | トリムボックスの制御 | |
| bleed | トリムボックス外の制御 | |
| marks | マーク関連の制御 | |
| orphans | ページの行数指定 | |
| page-break-inside | 要素内での改ページの制御 | |
| page-break-before | 要素の前の改ページの制御 | |
| page-break-after | 要素の後の改ページの制御 | |
