• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Web Technology

      Web technology reference for developers

  • Guides
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. 開発者向けのウェブ技術
  2. CSS: カスケーディングスタイルシート
  3. フィルター効果
    • English (US)
    • Deutsch
    • Français
    • 한국어

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

この記事では

  • リファレンス
  • 仕様書
  • ブラウザーの互換性
  1. CSS
  2. Tutorials
  3. CSS の基本
  4. CSS first steps
    1. CSS first steps overview
    2. CSS とは何か
    3. CSS 入門
    4. CSS の構造
    5. CSS はどう働くか
    6. Assessment: Styling a biography page
  5. CSS building blocks
    1. CSS building blocks overview
    2. CSS セレクター
    3. 要素型、クラス、ID セレクター
    4. 属性セレクター
    5. 擬似クラスと擬似要素
    6. 結合子
    7. カスケード、詳細度、継承
    8. カスケードレイヤー
    9. ボックスモデル
    10. 背景と境界線
    11. テキストの様々な方向の扱い
    12. 要素のはみ出し（オーバーフロー）
    13. CSS の値と単位
    14. CSS によるサイズ設定
    15. 画像、メディア、フォーム要素
    16. 表のスタイル設定
    17. CSS のデバッグ
    18. CSS の整理
    19. Assessment: Fundamental CSS comprehension
    20. Assessment: Creating fancy letterheaded paper
    21. Assessment: A cool-looking box
  6. Styling text
    1. Styling text overview
    2. 基本的なテキストとフォントのスタイル設定
    3. リストの装飾
    4. リンクのスタイル設定
    5. ウェブフォント
    6. Assessment: Typesetting a community school homepage
  7. CSS layout
    1. CSS layout overview
    2. CSS レイアウト入門
    3. 通常フロー
    4. フレックスボックス
    5. グリッド
    6. 浮動ボックス
    7. 位置指定
    8. 段組みレイアウト
    9. レスポンシブデザイン
    10. メディアクエリーの初心者向けガイド
    11. 過去のレイアウト方法
    12. 古いブラウザーの対応
    13. Assessment: Fundamental layout comprehension
  8. CSS リファレンス
  9. Modules
    1. CSS アンカー位置指定
    2. CSS アニメーション
    3. CSS 背景と境界
    4. CSS 基本ユーザーインターフェイス
    5. CSS ボックス配置
    6. CSS ボックスモデル
    7. CSS ボックスサイズ指定
    8. CSS カスケードと継承
    9. CSS 色調整
    10. CSS 色
    11. CSS 合成と混合
    12. CSS 条件付き規則
    13. CSS 拘束
    14. CSS カウンタースタイル
    15. カスケード変数のための CSS カスタムプロパティ
    16. CSS 表示方法
    17. フィルター効果
    18. CSS フレックスボックスレイアウト
    19. CSS フォント読み込み
    20. CSS フォント
    21. CSS 断片化
    22. CSS 生成コンテンツ
    23. CSS グリッドレイアウト
    24. CSS 画像
    25. CSS インラインレイアウト
    26. CSS リスト
    27. CSS 論理的プロパティと値
    28. CSS マスク
    29. メディアクエリー
    30. CSS モーションパス
    31. CSS 段組みレイアウト
    32. CSS 名前空間
    33. CSS 入れ子
    34. CSS オーバーフロー
    35. CSS オーバースクロール動作
    36. CSS ページメディア
    37. CSS 位置指定レイアウト
    38. CSS プロパティと値 API
    39. CSS 擬似要素
    40. CSS ルビレイアウト
    41. CSS スコープ
    42. CSS スクロールスナップ
    43. CSS スクロール駆動アニメーション
    44. CSS スクロールバースタイル設定
    45. CSS セレクター
    46. CSS shadow parts
    47. CSS シェイプ
    48. CSS 構文
    49. CSS 表
    50. CSS テキスト
    51. CSS テキスト装飾
    52. CSS 座標変換
    53. CSS トランジション
    54. CSS ビュー遷移
    55. CSS 書字方向
    56. CSSOM View
  10. Properties
    1. -moz-*
      1. -moz-float-edge 非標準 非推奨;
      2. -moz-force-broken-image-icon 非標準 非推奨;
      3. -moz-image-region 非標準
      4. -moz-orient 非標準
      5. -moz-user-focus 非標準 非推奨;
      6. -moz-user-input 非標準 非推奨;
    2. -webkit-*
      1. -webkit-border-before 非標準
      2. -webkit-box-reflect 非標準
      3. -webkit-line-clamp
      4. -webkit-mask-box-image 非標準
      5. -webkit-mask-composite 非標準
      6. -webkit-mask-position-x 非標準
      7. -webkit-mask-position-y 非標準
      8. -webkit-mask-repeat-x 非標準
      9. -webkit-mask-repeat-y 非標準
      10. -webkit-tap-highlight-color 非標準
      11. -webkit-text-fill-color
      12. -webkit-text-security 非標準
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout 非標準
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
    5. all
    6. anchor-name Experimental
    7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Experimental
      11. animation-range-end Experimental
      12. animation-range-start Experimental
      13. animation-timeline Experimental
      14. animation-timing-function
    8. appearance
    9. aspect-ratio
    10. backdrop-filter
    11. backface-visibility
    12. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    13. block-size
    14. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    15. bottom
    16. box-*
      1. box-align 非標準 非推奨;
      2. box-decoration-break
      3. box-direction 非標準 非推奨;
      4. box-flex 非標準 非推奨;
      5. box-flex-group 非標準 非推奨;
      6. box-lines 非標準 非推奨;
      7. box-ordinal-group 非標準 非推奨;
      8. box-orient 非標準 非推奨;
      9. box-pack 非標準 非推奨;
      10. box-shadow
      11. box-sizing
    17. break-*
      1. break-after
      2. break-before
      3. break-inside
    18. caption-side
    19. caret-color
    20. clear
    21. clip-*
      1. clip 非推奨;
      2. clip-path
      3. clip-rule
    22. color-*
      1. color
      2. color-interpolation
      3. color-interpolation-filters
      4. color-scheme
    23. column-*
      1. column-count
      2. column-fill
      3. column-gap (grid-column-gap)
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    24. columns
    25. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    26. container-*
      1. container
      2. container-name
      3. container-type
    27. content
    28. content-visibility
    29. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    30. cursor
    31. cx
    32. cy
    33. d
    34. direction
    35. display
    36. dominant-baseline
    37. empty-cells
    38. field-sizing Experimental
    39. fill-*
      1. fill
      2. fill-opacity
      3. fill-rule
    40. filter
    41. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    42. float
    43. flood-color
    44. flood-opacity
    45. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth 非標準
      11. font-stretch
      12. font-style
      13. font-synthesis
      14. font-synthesis-position
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    46. forced-color-adjust
    47. gap (grid-gap)
    48. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    49. hanging-punctuation
    50. height
    51. hyphenate-character
    52. hyphenate-limit-chars
    53. hyphens
    54. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution Experimental
    55. initial-letter
    56. inline-size
    57. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    58. interpolate-size Experimental
    59. isolation
    60. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    61. left
    62. letter-spacing
    63. lighting-color
    64. line-*
      1. line-break
      2. line-height
      3. line-height-step Experimental
    65. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    66. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim Experimental
    67. marker-*
      1. marker
      2. marker-end
      3. marker-mid
      4. marker-start
    68. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    69. math-*
      1. math-depth
      2. math-shift Experimental
      3. math-style
    70. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    71. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    72. mix-blend-mode
    73. object-fit
    74. object-position
    75. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    76. opacity
    77. order
    78. orphans
    79. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    80. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    81. overlay Experimental
    82. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    83. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    84. page-*
      1. page
      2. page-break-after
      3. page-break-before
      4. page-break-inside
    85. paint-order
    86. perspective
    87. perspective-origin
    88. place-*
      1. place-content
      2. place-items
      3. place-self
    89. pointer-events
    90. position-*
      1. position
      2. position-anchor Experimental
      3. position-area
      4. position-try Experimental
      5. position-try-fallbacks Experimental
      6. position-try-order Experimental
      7. position-visibility Experimental
    91. print-color-adjust
    92. quotes
    93. r
    94. resize
    95. right
    96. rotate
    97. row-gap (grid-row-gap)
    98. ruby-align
    99. ruby-position
    100. rx
    101. ry
    102. scale
    103. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. scroll-timeline Experimental
      28. scroll-timeline-axis Experimental
      29. scroll-timeline-name Experimental
    104. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    105. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    106. stop-color
    107. stop-opacity
    108. stroke-*
      1. stroke
      2. stroke-dasharray
      3. stroke-dashoffset
      4. stroke-linecap
      5. stroke-linejoin
      6. stroke-miterlimit
      7. stroke-opacity
      8. stroke-width
    109. tab-size
    110. table-layout
    111. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-combine-upright
      5. text-decoration
      6. text-decoration-color
      7. text-decoration-line
      8. text-decoration-skip Experimental
      9. text-decoration-skip-ink
      10. text-decoration-style
      11. text-decoration-thickness
      12. text-emphasis
      13. text-emphasis-color
      14. text-emphasis-position
      15. text-emphasis-style
      16. text-indent
      17. text-justify
      18. text-orientation
      19. text-overflow
      20. text-rendering
      21. text-shadow
      22. text-size-adjust Experimental
      23. text-spacing-trim Experimental
      24. text-transform
      25. text-underline-offset
      26. text-underline-position
      27. text-wrap
      28. text-wrap-mode
      29. text-wrap-style
    112. timeline-scope Experimental
    113. top
    114. touch-action
    115. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    116. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    117. translate
    118. unicode-bidi
    119. user-modify 非標準 非推奨;
    120. user-select
    121. vector-effect
    122. vertical-align
    123. view-*
      1. view-timeline Experimental
      2. view-timeline-axis Experimental
      3. view-timeline-inset Experimental
      4. view-timeline-name Experimental
      5. view-transition-name
    124. visibility
    125. white-space
    126. white-space-collapse
    127. widows
    128. width
    129. will-change
    130. word-break
    131. word-spacing
    132. writing-mode
    133. x
    134. y
    135. z-index
    136. zoom
  11. Selectors
    1. & 入れ子セレクター
    2. 属性セレクター
    3. クラスセレクター
    4. ID セレクター
    5. 要素型セレクター
    6. 全称セレクター
  12. Combinators
    1. 子結合子
    2. 列結合子 Experimental
    3. 子孫結合子
    4. Namespace separator
    5. 次兄弟結合子
    6. セレクターリスト
    7. 後続兄弟結合子
  13. Pseudo-classes
    1. :-moz-broken 非標準 非推奨;
    2. :-moz-drag-over 非標準
    3. :-moz-first-node Experimental 非標準
    4. :-moz-handler-blocked 非標準
    5. :-moz-handler-crashed 非標準
    6. :-moz-handler-disabled 非標準
    7. :-moz-last-node Experimental 非標準
    8. :-moz-loading 非標準
    9. :-moz-locale-dir(ltr) 非標準
    10. :-moz-locale-dir(rtl) 非標準
    11. :-moz-only-whitespace 非標準
    12. :-moz-submit-invalid 非標準
    13. :-moz-suppressed 非標準
    14. :-moz-user-disabled 非標準
    15. :-moz-window-inactive 非標準
    16. :active
    17. :any-link
    18. :autofill
    19. :blank Experimental
    20. :buffering
    21. :checked
    22. :current
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has()
    38. :host
    39. :host-context()
    40. :host()
    41. :hover
    42. :in-range
    43. :indeterminate
    44. :invalid
    45. :is()
    46. :lang()
    47. :last-child
    48. :last-of-type
    49. :left
    50. :link
    51. :local-link
    52. :modal
    53. :muted
    54. :not()
    55. :nth-child()
    56. :nth-last-child()
    57. :nth-last-of-type()
    58. :nth-of-type()
    59. :only-child
    60. :only-of-type
    61. :optional
    62. :out-of-range
    63. :past
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking
    76. :stalled
    77. :state()
    78. :target
    79. :target-within Experimental
    80. :user-invalid (:-moz-ui-invalid)
    81. :user-valid (:-moz-ui-valid)
    82. :valid
    83. :visited
    84. :volume-locked
    85. :where()
  14. Pseudo-elements
    1. ::-moz-color-swatch 非標準
    2. ::-moz-focus-inner Experimental 非標準
    3. ::-moz-list-bullet Experimental 非標準
    4. ::-moz-list-number Experimental 非標準
    5. ::-moz-meter-bar 非標準
    6. ::-moz-progress-bar Experimental 非標準
    7. ::-moz-range-progress 非標準
    8. ::-moz-range-thumb 非標準
    9. ::-moz-range-track 非標準
    10. ::-webkit-inner-spin-button 非標準
    11. ::-webkit-meter-bar 非標準 非推奨;
    12. ::-webkit-meter-even-less-good-value 非標準
    13. ::-webkit-meter-inner-element 非標準
    14. ::-webkit-meter-optimum-value 非標準
    15. ::-webkit-meter-suboptimum-value 非標準
    16. ::-webkit-progress-bar 非標準
    17. ::-webkit-progress-inner-element 非標準
    18. ::-webkit-progress-value 非標準
    19. ::-webkit-scrollbar 非標準
    20. ::-webkit-search-cancel-button 非標準
    21. ::-webkit-search-results-button 非標準
    22. ::-webkit-slider-runnable-track Experimental
    23. ::-webkit-slider-thumb Experimental
    24. ::after (:after)
    25. ::backdrop
    26. ::before (:before)
    27. ::cue
    28. ::file-selector-button
    29. ::first-letter
    30. ::first-line (:first-line)
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
  15. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document 非標準 非推奨;
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try Experimental
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition Experimental
  16. Functions
    1. -moz-image-rect 非標準 非推奨;
    2. abs()
    3. acos()
    4. anchor-size() Experimental
    5. anchor() Experimental
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. calc-size() Experimental
    11. calc()
    12. clamp()
    13. cos()
    14. counter()
    15. counters()
    16. cross-fade()
    17. element() Experimental
    18. env()
    19. exp()
    20. fit-content()
    21. hypot()
    22. log()
    23. max()
    24. min()
    25. minmax()
    26. mod()
    27. pow()
    28. ray()
    29. rem()
    30. repeat()
    31. round()
    32. sign()
    33. sin()
    34. sqrt()
    35. symbols()
    36. tan()
    37. url()
    38. var()
  17. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency-percentage>
    25. <frequency>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue-interpolation-method>
    30. <hue>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length-percentage>
    35. <length>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area>
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> 非推奨;
    47. <string>
    48. <system-color>
    49. <time-percentage>
    50. <time>
    51. <transform-function>
    52. <url>
  18. Guides
  19. Animations
    1. CSS アニメーションの使用
  20. Backgrounds and Borders
    1. 複数の背景画像の利用
    2. Resizing background images
  21. Box alignment
    1. Box alignment in block layout
    2. フレックスボックスでのボックス配置
    3. グリッドレイアウトでのボックス配置
    4. 段組みレイアウトでのボックス配置
  22. Box model
    1. CSS 基本ボックスモデル入門
    2. マージンの相殺の習得
  23. Colors
    1. Applying_color_to_HTML_elements
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Accessibility_Understanding_colors_and_luminance"
    6. Accessibility: Color contrast
  24. Columns
    1. 段組みの基本概念
    2. 段のスタイル付け
    3. 段抜きと段の均衡
    4. 段組みでのはみ出しの扱い
    5. 段組みにおける内容物の分割の扱い
  25. Conditional rules
    1. 機能クエリーの使用
  26. Containment
    1. CSS 拘束の使用
    2. CSS コンテナークエリー
    3. コンテナーのサイズおよびスタイルクエリーの使用
  27. CSSOM view
    1. 座標系
  28. Flexbox
    1. フレックスボックスの基本概念
    2. フレックスボックスと他のレイアウト方法の関係
    3. フレックスコンテナー内のアイテムの配置
    4. フレックスアイテムの順序
    5. 主軸方向のフレックスアイテムの比率の制御
    6. フレックスアイテムの折り返しをマスターする
    7. フレックスボックスの典型的な用途
  29. Flow layout
    1. 通常フローでのブロック及びインラインレイアウト
    2. フロー内とフローの外
    3. 整形コンテキストの紹介
    4. フローレイアウトと書字方向
    5. フローレイアウトとオーバーフロー
  30. Fonts
    1. OpenType フォント特性の手引き
    2. 可変フォントガイド
  31. Grid
    1. グリッドレイアウトの基本概念
    2. グリッドレイアウトと他のレイアウト方法との関係
    3. 線に基づく配置を使用したグリッドレイアウト
    4. グリッドテンプレート領域
    5. 名前付きグリッド線を使用したレイアウト
    6. グリッドレイアウトでの自動配置
    7. グリッドレイアウトのボックス配置
    8. グリッド、論理的な値、書字方向
    9. グリッドレイアウトとアクセシビリティ
    10. CSS グリッドレイアウトとプログレッシブエンハンスメント
    11. グリッドを使用したよくあるレイアウトの実現
    12. サブグリッド
    13. メイソンリーレイアウト Experimental
  32. Images
    1. CSS グラデーションの使用
  33. Lists and counters
    1. CSS カウンターの使用
    2. 一貫性のあるリストのインデント
  34. Logical properties
    1. 論理的プロパティと値の基本概念
    2. 浮動と位置指定の論理的プロパティ
    3. マージン、境界、パディングの論理的プロパティ
    4. 寸法の論理的プロパティ
  35. Math functions
    1. Using CSS math functions
  36. Media queries
    1. メディアクエリーの使用
    2. アクセシビリティのためのメディアクエリーの使用
    3. プログラムによるメディアクエリーの評価
    4. 印刷
  37. Nesting style rules
    1. CSS 入れ子の使用
    2. CSS 入れ子アットルール
    3. CSS 入れ子と詳細度
  38. Positioning
    1. CSS の z-index を理解する
  39. Scroll snap
    1. CSS スクロールスナップの基本概念
  40. Shapes
    1. CSS シェイプの概要
    2. ボックス値からのシェイプ
    3. 基本シェイプ
    4. 画像からのシェイプの作成
  41. Text
    1. テキストの分割と折り返し
  42. Transforms
    1. CSS 座標変換の使用
  43. Transitions
    1. CSS トランジションの使用
  44. CSS レイアウト料理帳
    1. レシピ: メディアオブジェクト
    2. 欄レイアウト
    3. 要素を中央に配置
    4. 張りつくフッター
    5. ナビゲーションの分割
    6. パンくずナビゲーション
    7. バッジ付きリストグループ
    8. ページ付け
    9. カード
    10. グリッドラッパー
  46. Tools
    1. 色選択ツール
    2. ボックスの影作成ツール
    3. 境界画像作成ツール
    4. 境界角丸作成ツール

この記事では

  • リファレンス
  • 仕様書
  • ブラウザーの互換性

フィルター効果

フィルター効果 (Filter Effects) は CSS のモジュールの一つで、要素が文書内に表示される前の処理方法を定義します。

リファレンス

プロパティ

  • backdrop-filter
  • filter

データ型

  • <filter-function>

仕様書

Specification
Filter Effects Module Level 2
Filter Effects Module Level 1

ブラウザーの互換性

backdrop-filter プロパティ

filter プロパティ

Help improve MDN

Learn how to contribute.

This page was last modified on 2023年11月8日 by MDN contributors.

View this page on GitHub • Report a problem with this content
MDN logo

Your blueprint for a better internet.

  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

  • About
  • Blog
  • Careers
  • Advertise with us

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
Mozilla logo
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under a Creative Commons license.