From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/--_star_/index.html | 105 + files/ja/web/css/-moz-binding/index.html | 68 + .../web/css/-moz-border-bottom-colors/index.html | 95 + .../ja/web/css/-moz-border-left-colors/index.html | 94 + .../ja/web/css/-moz-border-right-colors/index.html | 98 + files/ja/web/css/-moz-border-top-colors/index.html | 96 + files/ja/web/css/-moz-box-ordinal-group/index.html | 65 + .../ja/web/css/-moz-context-properties/index.html | 101 + files/ja/web/css/-moz-float-edge/index.html | 90 + .../css/-moz-force-broken-image-icon/index.html | 67 + files/ja/web/css/-moz-orient/index.html | 81 + .../css/-moz-outline-radius-bottomleft/index.html | 76 + .../css/-moz-outline-radius-bottomright/index.html | 76 + .../web/css/-moz-outline-radius-topleft/index.html | 74 + .../css/-moz-outline-radius-topright/index.html | 76 + files/ja/web/css/-moz-outline-radius/index.html | 105 + files/ja/web/css/-moz-stack-sizing/index.html | 57 + files/ja/web/css/-moz-user-input/index.html | 73 + files/ja/web/css/-ms-accelerator/index.html | 76 + files/ja/web/css/-ms-block-progression/index.html | 51 + .../web/css/-ms-content-zoom-chaining/index.html | 48 + .../web/css/-ms-content-zoom-limit-max/index.html | 48 + .../web/css/-ms-content-zoom-limit-min/index.html | 47 + files/ja/web/css/-ms-content-zoom-limit/index.html | 48 + files/ja/web/css/-ms-content-zoom-snap/index.html | 48 + files/ja/web/css/-ms-content-zooming/index.html | 49 + files/ja/web/css/-ms-high-contrast/index.html | 94 + .../ja/web/css/-ms-scrollbar-face-color/index.html | 93 + .../css/-ms-scrollbar-highlight-color/index.html | 95 + files/ja/web/css/-ms-wrap-margin/index.html | 42 + files/ja/web/css/-webkit-line-clamp/index.html | 101 + .../web/css/-webkit-overflow-scrolling/index.html | 89 + .../web/css/-webkit-print-color-adjust/index.html | 64 + .../web/css/-webkit-tap-highlight-color/index.html | 40 + .../ja/web/css/-webkit-text-fill-color/index.html | 98 + .../web/css/-webkit-text-stroke-color/index.html | 110 + .../web/css/-webkit-text-stroke-width/index.html | 121 + files/ja/web/css/-webkit-touch-callout/index.html | 63 + files/ja/web/css/@charset/index.html | 79 + .../css/@counter-style/additive-symbols/index.html | 87 + files/ja/web/css/@counter-style/index.html | 171 ++ files/ja/web/css/@counter-style/prefix/index.html | 96 + files/ja/web/css/@document/index.html | 89 + .../ja/web/css/@font-face/font-display/index.html | 116 + files/ja/web/css/@font-face/font-family/index.html | 89 + .../ja/web/css/@font-face/font-stretch/index.html | 187 ++ files/ja/web/css/@font-face/font-style/index.html | 123 + .../@font-face/font-variation-settings/index.html | 89 + files/ja/web/css/@font-face/font-weight/index.html | 179 ++ files/ja/web/css/@font-face/index.html | 197 ++ files/ja/web/css/@font-face/src/index.html | 110 + .../ja/web/css/@font-face/unicode-range/index.html | 118 + files/ja/web/css/@font-feature-values/index.html | 97 + files/ja/web/css/@import/index.html | 100 + files/ja/web/css/@keyframes/index.html | 145 + .../css/@media/-moz-device-pixel-ratio/index.html | 58 + .../css/@media/-moz-mac-graphite-theme/index.html | 35 + .../web/css/@media/-moz-maemo-classic/index.html | 30 + files/ja/web/css/@media/-moz-os-version/index.html | 35 + .../index.html | 46 + .../web/css/@media/-moz-windows-classic/index.html | 35 + .../web/css/@media/-moz-windows-theme/index.html | 46 + .../@media/-webkit-device-pixel-ratio/index.html | 120 + .../web/css/@media/-webkit-transform-2d/index.html | 40 + .../web/css/@media/-webkit-transform-3d/index.html | 75 + .../web/css/@media/-webkit-transition/index.html | 61 + files/ja/web/css/@media/any-hover/index.html | 74 + files/ja/web/css/@media/any-pointer/index.html | 107 + files/ja/web/css/@media/aspect-ratio/index.html | 126 + files/ja/web/css/@media/color-gamut/index.html | 70 + files/ja/web/css/@media/color-index/index.html | 86 + files/ja/web/css/@media/color/index.html | 93 + .../web/css/@media/device-aspect-ratio/index.html | 62 + files/ja/web/css/@media/device-height/index.html | 55 + files/ja/web/css/@media/device-width/index.html | 55 + files/ja/web/css/@media/display-mode/index.html | 88 + files/ja/web/css/@media/grid/index.html | 91 + files/ja/web/css/@media/height/index.html | 82 + files/ja/web/css/@media/hover/index.html | 68 + files/ja/web/css/@media/index.html | 157 + files/ja/web/css/@media/index/index.html | 12 + files/ja/web/css/@media/inverted-colors/index.html | 81 + files/ja/web/css/@media/monochrome/index.html | 81 + files/ja/web/css/@media/orientation/index.html | 96 + files/ja/web/css/@media/overflow-block/index.html | 73 + files/ja/web/css/@media/overflow-inline/index.html | 75 + files/ja/web/css/@media/pointer/index.html | 103 + .../web/css/@media/prefers-color-scheme/index.html | 108 + .../ja/web/css/@media/prefers-contrast/index.html | 95 + .../css/@media/prefers-reduced-motion/index.html | 133 + files/ja/web/css/@media/resolution/index.html | 85 + files/ja/web/css/@media/scan/index.html | 88 + files/ja/web/css/@media/scripting/index.html | 91 + files/ja/web/css/@media/shape/index.html | 94 + .../ja/web/css/@media/update-frequency/index.html | 81 + files/ja/web/css/@media/width/index.html | 82 + files/ja/web/css/@namespace/index.html | 80 + files/ja/web/css/@page/bleed/index.html | 81 + files/ja/web/css/@page/index.html | 110 + files/ja/web/css/@page/marks/index.html | 86 + files/ja/web/css/@page/size/index.html | 139 + files/ja/web/css/@supports/index.html | 201 ++ files/ja/web/css/@viewport/height/index.html | 85 + files/ja/web/css/@viewport/index.html | 132 + files/ja/web/css/@viewport/max-height/index.html | 76 + files/ja/web/css/@viewport/max-zoom/index.html | 88 + files/ja/web/css/@viewport/min-zoom/index.html | 70 + files/ja/web/css/@viewport/viewport-fit/index.html | 77 + files/ja/web/css/@viewport/zoom/index.html | 90 + files/ja/web/css/_colon_-moz-alt-text/index.html | 19 + files/ja/web/css/_colon_-moz-broken/index.html | 58 + files/ja/web/css/_colon_-moz-drag-over/index.html | 41 + files/ja/web/css/_colon_-moz-first-node/index.html | 47 + files/ja/web/css/_colon_-moz-focusring/index.html | 71 + .../_colon_-moz-full-screen-ancestor/index.html | 39 + files/ja/web/css/_colon_-moz-last-node/index.html | 47 + .../ja/web/css/_colon_-moz-list-bullet/index.html | 41 + files/ja/web/css/_colon_-moz-loading/index.html | 41 + .../web/css/_colon_-moz-locale-dir(ltr)/index.html | 47 + .../web/css/_colon_-moz-locale-dir(rtl)/index.html | 50 + .../web/css/_colon_-moz-only-whitespace/index.html | 77 + .../ja/web/css/_colon_-moz-placeholder/index.html | 58 + .../web/css/_colon_-moz-submit-invalid/index.html | 40 + .../ja/web/css/_colon_-webkit-autofill/index.html | 34 + files/ja/web/css/_colon_active/index.html | 130 + files/ja/web/css/_colon_any-link/index.html | 77 + files/ja/web/css/_colon_blank/index.html | 78 + files/ja/web/css/_colon_checked/index.html | 215 ++ files/ja/web/css/_colon_default/index.html | 111 + files/ja/web/css/_colon_defined/index.html | 125 + files/ja/web/css/_colon_dir/index.html | 112 + files/ja/web/css/_colon_disabled/index.html | 130 + files/ja/web/css/_colon_empty/index.html | 116 + files/ja/web/css/_colon_enabled/index.html | 101 + files/ja/web/css/_colon_first-child/index.html | 135 + files/ja/web/css/_colon_first-of-type/index.html | 115 + files/ja/web/css/_colon_first/index.html | 102 + files/ja/web/css/_colon_focus-visible/index.html | 138 + files/ja/web/css/_colon_focus-within/index.html | 98 + files/ja/web/css/_colon_focus/index.html | 119 + files/ja/web/css/_colon_fullscreen/index.html | 97 + files/ja/web/css/_colon_has/index.html | 61 + files/ja/web/css/_colon_host-context()/index.html | 112 + files/ja/web/css/_colon_host/index.html | 103 + files/ja/web/css/_colon_hover/index.html | 105 + files/ja/web/css/_colon_in-range/index.html | 116 + files/ja/web/css/_colon_indeterminate/index.html | 142 + files/ja/web/css/_colon_invalid/index.html | 154 + files/ja/web/css/_colon_is/index.html | 265 ++ files/ja/web/css/_colon_lang/index.html | 104 + files/ja/web/css/_colon_last-child/index.html | 129 + files/ja/web/css/_colon_last-of-type/index.html | 113 + files/ja/web/css/_colon_left/index.html | 77 + files/ja/web/css/_colon_link/index.html | 105 + files/ja/web/css/_colon_not/index.html | 133 + files/ja/web/css/_colon_nth-child/index.html | 204 ++ files/ja/web/css/_colon_nth-last-child/index.html | 196 ++ .../ja/web/css/_colon_nth-last-of-type/index.html | 97 + files/ja/web/css/_colon_nth-of-type/index.html | 113 + files/ja/web/css/_colon_only-child/index.html | 141 + files/ja/web/css/_colon_only-of-type/index.html | 98 + files/ja/web/css/_colon_optional/index.html | 124 + files/ja/web/css/_colon_out-of-range/index.html | 117 + .../ja/web/css/_colon_placeholder-shown/index.html | 200 ++ files/ja/web/css/_colon_read-only/index.html | 121 + files/ja/web/css/_colon_read-write/index.html | 121 + files/ja/web/css/_colon_required/index.html | 128 + files/ja/web/css/_colon_right/index.html | 77 + files/ja/web/css/_colon_root/index.html | 65 + files/ja/web/css/_colon_scope/index.html | 125 + files/ja/web/css/_colon_target/index.html | 216 ++ files/ja/web/css/_colon_valid/index.html | 130 + files/ja/web/css/_colon_visited/index.html | 120 + files/ja/web/css/_colon_where/index.html | 134 + .../css/_doublecolon_-moz-color-swatch/index.html | 65 + .../css/_doublecolon_-moz-progress-bar/index.html | 60 + .../css/_doublecolon_-moz-range-track/index.html | 74 + .../ja/web/css/_doublecolon_-ms-browse/index.html | 112 + .../ja/web/css/_doublecolon_-ms-expand/index.html | 92 + files/ja/web/css/_doublecolon_-ms-fill/index.html | 112 + files/ja/web/css/_doublecolon_-ms-value/index.html | 103 + .../_doublecolon_-webkit-progress-value/index.html | 66 + .../index.html | 47 + .../_doublecolon_-webkit-slider-thumb/index.html | 44 + files/ja/web/css/_doublecolon_after/index.html | 177 ++ files/ja/web/css/_doublecolon_backdrop/index.html | 82 + files/ja/web/css/_doublecolon_before/index.html | 231 ++ files/ja/web/css/_doublecolon_cue/index.html | 93 + .../web/css/_doublecolon_first-letter/index.html | 166 + .../ja/web/css/_doublecolon_first-line/index.html | 121 + .../web/css/_doublecolon_grammar-error/index.html | 87 + files/ja/web/css/_doublecolon_marker/index.html | 102 + files/ja/web/css/_doublecolon_part/index.html | 128 + .../ja/web/css/_doublecolon_placeholder/index.html | 153 + files/ja/web/css/_doublecolon_selection/index.html | 133 + files/ja/web/css/_doublecolon_slotted/index.html | 113 + .../web/css/_doublecolon_spelling-error/index.html | 72 + files/ja/web/css/actual_value/index.html | 49 + .../web/css/adjacent_sibling_combinator/index.html | 85 + files/ja/web/css/align-content/index.html | 297 ++ files/ja/web/css/align-items/index.html | 286 ++ files/ja/web/css/align-self/index.html | 176 ++ files/ja/web/css/all/index.html | 169 + files/ja/web/css/alpha-value/index.html | 64 + .../ja/web/css/alternative_style_sheets/index.html | 102 + files/ja/web/css/angle-percentage/index.html | 62 + files/ja/web/css/angle/index.html | 94 + files/ja/web/css/animation-delay/index.html | 90 + files/ja/web/css/animation-direction/index.html | 98 + files/ja/web/css/animation-duration/index.html | 91 + files/ja/web/css/animation-fill-mode/index.html | 187 ++ .../web/css/animation-iteration-count/index.html | 91 + files/ja/web/css/animation-name/index.html | 93 + files/ja/web/css/animation-play-state/index.html | 90 + .../web/css/animation-timing-function/index.html | 275 ++ files/ja/web/css/animation/index.html | 358 +++ files/ja/web/css/appearance/index.html | 2673 ++++++++++++++++ files/ja/web/css/at-rule/index.html | 85 + files/ja/web/css/attr()/index.html | 257 ++ files/ja/web/css/attribute_selectors/index.html | 236 ++ files/ja/web/css/aural/index.html | 41 + files/ja/web/css/auto/index.html | 28 + files/ja/web/css/backdrop-filter/index.html | 147 + files/ja/web/css/backface-visibility/index.html | 215 ++ files/ja/web/css/background-attachment/index.html | 153 + files/ja/web/css/background-blend-mode/index.html | 114 + files/ja/web/css/background-clip/index.html | 137 + files/ja/web/css/background-color/index.html | 156 + files/ja/web/css/background-image/index.html | 169 + files/ja/web/css/background-origin/index.html | 112 + files/ja/web/css/background-position-x/index.html | 106 + files/ja/web/css/background-position-y/index.html | 107 + files/ja/web/css/background-position/index.html | 231 ++ files/ja/web/css/background-repeat/index.html | 234 ++ files/ja/web/css/background-size/index.html | 196 ++ files/ja/web/css/background/index.html | 174 ++ files/ja/web/css/basic-shape/index.html | 175 ++ files/ja/web/css/blend-mode/index.html | 403 +++ files/ja/web/css/block-size/index.html | 107 + files/ja/web/css/border-block-color/index.html | 94 + files/ja/web/css/border-block-end-color/index.html | 102 + files/ja/web/css/border-block-end-style/index.html | 104 + files/ja/web/css/border-block-end-width/index.html | 103 + files/ja/web/css/border-block-end/index.html | 110 + .../ja/web/css/border-block-start-color/index.html | 102 + .../ja/web/css/border-block-start-style/index.html | 105 + .../ja/web/css/border-block-start-width/index.html | 103 + files/ja/web/css/border-block-start/index.html | 111 + files/ja/web/css/border-block-style/index.html | 96 + files/ja/web/css/border-block-width/index.html | 95 + files/ja/web/css/border-block/index.html | 102 + files/ja/web/css/border-bottom-color/index.html | 117 + .../web/css/border-bottom-left-radius/index.html | 195 ++ .../web/css/border-bottom-right-radius/index.html | 189 ++ files/ja/web/css/border-bottom-style/index.html | 139 + files/ja/web/css/border-bottom-width/index.html | 148 + files/ja/web/css/border-bottom/index.html | 139 + files/ja/web/css/border-collapse/index.html | 144 + files/ja/web/css/border-color/index.html | 196 ++ files/ja/web/css/border-end-end-radius/index.html | 113 + .../ja/web/css/border-end-start-radius/index.html | 113 + files/ja/web/css/border-image-outset/index.html | 114 + files/ja/web/css/border-image-repeat/index.html | 126 + files/ja/web/css/border-image-slice/index.html | 115 + files/ja/web/css/border-image-source/index.html | 93 + files/ja/web/css/border-image-width/index.html | 129 + files/ja/web/css/border-image/index.html | 171 ++ files/ja/web/css/border-inline-color/index.html | 94 + .../ja/web/css/border-inline-end-color/index.html | 102 + .../ja/web/css/border-inline-end-style/index.html | 104 + .../ja/web/css/border-inline-end-width/index.html | 103 + files/ja/web/css/border-inline-end/index.html | 111 + .../web/css/border-inline-start-color/index.html | 102 + .../web/css/border-inline-start-style/index.html | 104 + .../web/css/border-inline-start-width/index.html | 103 + files/ja/web/css/border-inline-start/index.html | 111 + files/ja/web/css/border-inline-style/index.html | 96 + files/ja/web/css/border-inline-width/index.html | 96 + files/ja/web/css/border-inline/index.html | 100 + files/ja/web/css/border-left-color/index.html | 119 + files/ja/web/css/border-left-style/index.html | 137 + files/ja/web/css/border-left-width/index.html | 148 + files/ja/web/css/border-left/index.html | 139 + files/ja/web/css/border-radius/index.html | 217 ++ files/ja/web/css/border-right-color/index.html | 117 + files/ja/web/css/border-right-style/index.html | 137 + files/ja/web/css/border-right-width/index.html | 148 + files/ja/web/css/border-right/index.html | 139 + files/ja/web/css/border-spacing/index.html | 131 + .../ja/web/css/border-start-end-radius/index.html | 113 + .../web/css/border-start-start-radius/index.html | 113 + files/ja/web/css/border-style/index.html | 246 ++ files/ja/web/css/border-top-color/index.html | 117 + files/ja/web/css/border-top-left-radius/index.html | 170 + .../ja/web/css/border-top-right-radius/index.html | 172 ++ files/ja/web/css/border-top-style/index.html | 139 + files/ja/web/css/border-top-width/index.html | 148 + files/ja/web/css/border-top/index.html | 139 + files/ja/web/css/border-width/index.html | 183 ++ files/ja/web/css/border/index.html | 153 + files/ja/web/css/bottom/index.html | 153 + files/ja/web/css/box-align/index.html | 146 + files/ja/web/css/box-decoration-break/index.html | 155 + files/ja/web/css/box-direction/index.html | 99 + files/ja/web/css/box-flex-group/index.html | 78 + files/ja/web/css/box-flex/index.html | 114 + files/ja/web/css/box-lines/index.html | 78 + files/ja/web/css/box-ordinal-group/index.html | 80 + files/ja/web/css/box-orient/index.html | 110 + files/ja/web/css/box-pack/index.html | 144 + files/ja/web/css/box-shadow/index.html | 192 ++ files/ja/web/css/box-sizing/index.html | 137 + files/ja/web/css/break-after/index.html | 259 ++ files/ja/web/css/break-before/index.html | 193 ++ files/ja/web/css/break-inside/index.html | 207 ++ files/ja/web/css/calc()/index.html | 167 + files/ja/web/css/caption-side/index.html | 140 + files/ja/web/css/caret-color/index.html | 124 + files/ja/web/css/cascade/index.html | 211 ++ files/ja/web/css/child_combinator/index.html | 93 + files/ja/web/css/clamp()/index.html | 123 + files/ja/web/css/class_selectors/index.html | 107 + files/ja/web/css/clear/index.html | 237 ++ files/ja/web/css/clip-path/index.html | 623 ++++ files/ja/web/css/clip/index.html | 132 + files/ja/web/css/color-adjust/index.html | 125 + files/ja/web/css/color/index.html | 160 + files/ja/web/css/color_value/index.html | 1539 ++++++++++ files/ja/web/css/column-count/index.html | 100 + files/ja/web/css/column-fill/index.html | 110 + files/ja/web/css/column-gap/index.html | 209 ++ files/ja/web/css/column-rule-color/index.html | 103 + files/ja/web/css/column-rule-style/index.html | 99 + files/ja/web/css/column-rule-width/index.html | 99 + files/ja/web/css/column-rule/index.html | 130 + files/ja/web/css/column-span/index.html | 117 + files/ja/web/css/column-width/index.html | 110 + files/ja/web/css/column_combinator/index.html | 99 + files/ja/web/css/columns/index.html | 103 + files/ja/web/css/comments/index.html | 54 + files/ja/web/css/common_css_questions/index.html | 231 ++ .../ja/web/css/compositing_and_blending/index.html | 78 + files/ja/web/css/computed_value/index.html | 59 + files/ja/web/css/conic-gradient()/index.html | 269 ++ files/ja/web/css/contain/index.html | 210 ++ files/ja/web/css/containing_block/index.html | 269 ++ files/ja/web/css/content/index.html | 297 ++ files/ja/web/css/counter()/index.html | 140 + files/ja/web/css/counter-increment/index.html | 120 + files/ja/web/css/counter-reset/index.html | 115 + files/ja/web/css/counter-set/index.html | 109 + files/ja/web/css/counters()/index.html | 183 ++ files/ja/web/css/cross-fade()/index.html | 153 + .../ja/web/css/css_animated_properties/index.html | 21 + .../detecting_css_animation_support/index.html | 99 + files/ja/web/css/css_animations/index.html | 85 + files/ja/web/css/css_animations/tips/index.html | 156 + .../css_animations/using_css_animations/index.html | 376 +++ .../border-image_generator/index.html | 2629 ++++++++++++++++ .../border-radius_generator/index.html | 1602 ++++++++++ .../using_css_multiple_backgrounds/index.html | 73 + .../web/css/css_backgrounds_and_borders/index.html | 112 + .../scaling_background_images/index.html | 143 + .../using_multiple_backgrounds/index.html | 62 + .../ja/web/css/css_basic_user_interface/index.html | 74 + .../index.html | 119 + .../index.html | 80 + .../box_alignment_in_flexbox/index.html | 119 + .../index.html | 51 + files/ja/web/css/css_box_alignment/index.html | 253 ++ files/ja/web/css/css_box_model/index.html | 114 + .../introduction_to_the_css_box_model/index.html | 79 + .../mastering_margin_collapsing/index.html | 89 + files/ja/web/css/css_charsets/index.html | 53 + files/ja/web/css/css_color/index.html | 117 + .../css/css_colors/color_picker_tool/index.html | 3241 ++++++++++++++++++++ .../basic_concepts_of_multicol/index.html | 94 + .../handling_content_breaks_in_multicol/index.html | 74 + .../handling_overflow_in_multicol/index.html | 44 + files/ja/web/css/css_columns/index.html | 100 + .../css/css_columns/spanning_columns/index.html | 65 + .../web/css/css_columns/styling_columns/index.html | 52 + .../using_multi-column_layouts/index.html | 243 ++ files/ja/web/css/css_conditional_rules/index.html | 79 + files/ja/web/css/css_containment/index.html | 122 + files/ja/web/css/css_counter_styles/index.html | 97 + files/ja/web/css/css_device_adaptation/index.html | 52 + files/ja/web/css/css_display/index.html | 115 + .../aligning_items_in_a_flex_container/index.html | 223 ++ .../backwards_compatibility_of_flexbox/index.html | 123 + .../basic_concepts_of_flexbox/index.html | 237 ++ .../index.html | 204 ++ .../ja/web/css/css_flexible_box_layout/index.html | 118 + .../mastering_wrapping_of_flex_items/index.html | 92 + .../css/css_flexible_box_layout/mixins/index.html | 368 +++ .../ordering_flex_items/index.html | 144 + .../index.html | 137 + .../typical_use_cases_of_flexbox/index.html | 142 + .../index.html | 190 ++ .../index.html | 128 + .../flow_layout_and_overflow/index.html | 73 + .../flow_layout_and_writing_modes/index.html | 93 + .../in_flow_and_out_of_flow/index.html | 64 + files/ja/web/css/css_flow_layout/index.html | 51 + .../intro_to_formatting_contexts/index.html | 100 + files/ja/web/css/css_fonts/index.html | 141 + .../css/css_fonts/opentype_fonts_guide/index.html | 235 ++ .../css/css_fonts/variable_fonts_guide/index.html | 262 ++ files/ja/web/css/css_fragmentation/index.html | 47 + files/ja/web/css/css_functions/index.html | 255 ++ files/ja/web/css/css_generated_content/index.html | 62 + .../auto-placement_in_css_grid_layout/index.html | 613 ++++ .../basic_concepts_of_grid_layout/index.html | 734 +++++ .../box_alignment_in_css_grid_layout/index.html | 713 +++++ files/ja/web/css/css_grid_layout/index.html | 271 ++ .../layout_using_named_grid_lines/index.html | 495 +++ .../relationship_of_grid_layout/index.html | 633 ++++ .../ja/web/css/css_grid_layout/subgrid/index.html | 120 + .../implementing_image_sprites_in_css/index.html | 56 + files/ja/web/css/css_images/index.html | 106 + .../css/css_images/using_css_gradients/index.html | 750 +++++ files/ja/web/css/css_lists_and_counters/index.html | 59 + .../using_css_counters/index.html | 147 + .../basic_concepts/index.html | 77 + .../floating_and_positioning/index.html | 139 + files/ja/web/css/css_logical_properties/index.html | 178 ++ .../margins_borders_padding/index.html | 298 ++ .../css/css_logical_properties/sizing/index.html | 93 + files/ja/web/css/css_masking/index.html | 77 + files/ja/web/css/css_miscellaneous/index.html | 37 + files/ja/web/css/css_motion_path/index.html | 86 + files/ja/web/css/css_namespaces/index.html | 55 + files/ja/web/css/css_overflow/index.html | 87 + files/ja/web/css/css_pages/index.html | 75 + files/ja/web/css/css_positioning/index.html | 61 + .../adding_z-index/index.html | 164 + .../understanding_z_index/index.html | 49 + .../stacking_and_float/index.html | 148 + .../stacking_context_example_1/index.html | 138 + .../stacking_context_example_2/index.html | 143 + .../stacking_context_example_3/index.html | 191 ++ .../stacking_without_z-index/index.html | 127 + .../the_stacking_context/index.html | 241 ++ .../ja/web/css/css_properties_reference/index.html | 312 ++ files/ja/web/css/css_ruby/index.html | 61 + .../css/css_scroll_snap/browser_compat/index.html | 47 + files/ja/web/css/css_scroll_snap/index.html | 75 + files/ja/web/css/css_scroll_snap_points/index.html | 61 + files/ja/web/css/css_scrollbars/index.html | 98 + files/ja/web/css/css_selectors/index.html | 132 + .../index.html | 68 + .../ja/web/css/css_shapes/basic_shapes/index.html | 143 + .../web/css/css_shapes/from_box_values/index.html | 80 + files/ja/web/css/css_shapes/index.html | 100 + .../css_shapes/overview_of_css_shapes/index.html | 125 + .../css/css_shapes/shapes_from_images/index.html | 62 + files/ja/web/css/css_table/index.html | 47 + files/ja/web/css/css_text/index.html | 70 + files/ja/web/css/css_text_decoration/index.html | 126 + files/ja/web/css/css_transforms/index.html | 72 + .../css_transforms/using_css_transforms/index.html | 89 + files/ja/web/css/css_transitions/index.html | 61 + .../using_css_transitions/index.html | 1072 +++++++ files/ja/web/css/css_types/index.html | 171 ++ files/ja/web/css/css_values_and_units/index.html | 499 +++ files/ja/web/css/css_variables/index.html | 40 + files/ja/web/css/css_writing_modes/index.html | 58 + files/ja/web/css/cssom_view/index.html | 61 + files/ja/web/css/cursor/index.html | 331 ++ files/ja/web/css/custom-ident/index.html | 134 + files/ja/web/css/descendant_combinator/index.html | 109 + files/ja/web/css/dimension/index.html | 82 + files/ja/web/css/direction/index.html | 99 + files/ja/web/css/display-box/index.html | 127 + files/ja/web/css/display-inside/index.html | 122 + files/ja/web/css/display-internal/index.html | 131 + files/ja/web/css/display-legacy/index.html | 122 + files/ja/web/css/display-listitem/index.html | 65 + files/ja/web/css/display-outside/index.html | 93 + files/ja/web/css/display/index.html | 341 ++ files/ja/web/css/easing-function/index.html | 345 +++ files/ja/web/css/element()/index.html | 103 + files/ja/web/css/empty-cells/index.html | 121 + files/ja/web/css/env()/index.html | 138 + files/ja/web/css/filter-function/blur()/index.html | 69 + .../css/filter-function/brightness()/index.html | 70 + .../web/css/filter-function/contrast()/index.html | 69 + .../css/filter-function/drop-shadow()/index.html | 65 + .../web/css/filter-function/grayscale()/index.html | 42 + .../css/filter-function/hue-rotate()/index.html | 70 + files/ja/web/css/filter-function/index.html | 65 + .../ja/web/css/filter-function/invert()/index.html | 67 + .../web/css/filter-function/opacity()/index.html | 72 + .../web/css/filter-function/saturate()/index.html | 67 + .../ja/web/css/filter-function/sepia()/index.html | 67 + files/ja/web/css/filter/index.html | 1140 +++++++ files/ja/web/css/filter_effects/index.html | 69 + files/ja/web/css/fit-content/index.html | 119 + files/ja/web/css/flex-basis/index.html | 214 ++ files/ja/web/css/flex-direction/index.html | 158 + files/ja/web/css/flex-flow/index.html | 92 + files/ja/web/css/flex-grow/index.html | 136 + files/ja/web/css/flex-shrink/index.html | 128 + files/ja/web/css/flex-wrap/index.html | 158 + files/ja/web/css/flex/index.html | 294 ++ files/ja/web/css/flex_value/index.html | 59 + files/ja/web/css/float/index.html | 229 ++ files/ja/web/css/font-family/index.html | 243 ++ files/ja/web/css/font-feature-settings/index.html | 119 + files/ja/web/css/font-kerning/index.html | 120 + files/ja/web/css/font-language-override/index.html | 109 + files/ja/web/css/font-optical-sizing/index.html | 98 + files/ja/web/css/font-size-adjust/index.html | 124 + files/ja/web/css/font-size/index.html | 228 ++ files/ja/web/css/font-stretch/index.html | 263 ++ files/ja/web/css/font-style/index.html | 227 ++ files/ja/web/css/font-synthesis/index.html | 111 + .../ja/web/css/font-variant-alternates/index.html | 128 + files/ja/web/css/font-variant-caps/index.html | 138 + .../ja/web/css/font-variant-east-asian/index.html | 186 ++ files/ja/web/css/font-variant-ligatures/index.html | 217 ++ files/ja/web/css/font-variant-numeric/index.html | 137 + files/ja/web/css/font-variant-position/index.html | 108 + files/ja/web/css/font-variant/index.html | 139 + .../ja/web/css/font-variation-settings/index.html | 155 + files/ja/web/css/font-weight/index.html | 396 +++ files/ja/web/css/font/index.html | 376 +++ files/ja/web/css/frequency-percentage/index.html | 95 + files/ja/web/css/frequency/index.html | 76 + files/ja/web/css/gap/index.html | 223 ++ .../web/css/general_sibling_combinator/index.html | 86 + files/ja/web/css/gradient/index.html | 186 ++ files/ja/web/css/grid-column-start/index.html | 240 ++ files/ja/web/css/grid-column/index.html | 191 ++ files/ja/web/css/grid-row/index.html | 208 ++ files/ja/web/css/grid-template-areas/index.html | 185 ++ files/ja/web/css/grid-template-columns/index.html | 217 ++ files/ja/web/css/grid-template/index.html | 209 ++ files/ja/web/css/grid/index.html | 199 ++ files/ja/web/css/hanging-punctuation/index.html | 124 + files/ja/web/css/height/index.html | 167 + files/ja/web/css/hyphens/index.html | 156 + files/ja/web/css/id_selectors/index.html | 85 + files/ja/web/css/ident/index.html | 79 + files/ja/web/css/image-orientation/index.html | 131 + files/ja/web/css/image-rendering/index.html | 129 + files/ja/web/css/image-set()/index.html | 87 + files/ja/web/css/image/index.html | 176 ++ files/ja/web/css/ime-mode/index.html | 102 + files/ja/web/css/index.html | 122 + files/ja/web/css/index/index.html | 10 + files/ja/web/css/inherit/index.html | 87 + files/ja/web/css/inheritance/index.html | 74 + files/ja/web/css/initial-letter-align/index.html | 121 + files/ja/web/css/initial-letter/index.html | 113 + files/ja/web/css/initial/index.html | 81 + files/ja/web/css/initial_value/index.html | 52 + files/ja/web/css/inline-size/index.html | 106 + files/ja/web/css/inset-block-end/index.html | 108 + files/ja/web/css/inset-block-start/index.html | 109 + files/ja/web/css/inset-block/index.html | 119 + files/ja/web/css/inset-inline-end/index.html | 112 + files/ja/web/css/inset-inline-start/index.html | 110 + files/ja/web/css/inset-inline/index.html | 119 + files/ja/web/css/inset/index.html | 115 + files/ja/web/css/integer/index.html | 95 + files/ja/web/css/isolation/index.html | 114 + files/ja/web/css/justify-content/index.html | 215 ++ files/ja/web/css/justify-items/index.html | 232 ++ files/ja/web/css/justify-self/index.html | 164 + .../breadcrumb_navigation/index.html | 56 + files/ja/web/css/layout_cookbook/card/index.html | 86 + .../layout_cookbook/center_an_element/index.html | 59 + .../css/layout_cookbook/column_layouts/index.html | 132 + .../cookbook_template/index.html | 66 + .../layout_cookbook/contribute_a_recipe/index.html | 106 + .../css/layout_cookbook/grid_wrapper/index.html | 90 + files/ja/web/css/layout_cookbook/index.html | 86 + .../list_group_with_badges/index.html | 60 + .../css/layout_cookbook/media_objects/index.html | 89 + .../web/css/layout_cookbook/pagination/index.html | 85 + .../layout_cookbook/split_navigation/index.html | 55 + .../css/layout_cookbook/sticky_footers/index.html | 77 + files/ja/web/css/layout_mode/index.html | 32 + files/ja/web/css/left/index.html | 228 ++ files/ja/web/css/length-percentage/index.html | 61 + files/ja/web/css/length/index.html | 266 ++ files/ja/web/css/letter-spacing/index.html | 135 + files/ja/web/css/line-break/index.html | 116 + files/ja/web/css/line-height-step/index.html | 90 + files/ja/web/css/line-height/index.html | 181 ++ files/ja/web/css/linear-gradient()/index.html | 218 ++ files/ja/web/css/list-style-image/index.html | 115 + files/ja/web/css/list-style-position/index.html | 134 + files/ja/web/css/list-style-type/index.html | 612 ++++ files/ja/web/css/list-style/index.html | 160 + .../list_of_proprietary_css_features/index.html | 168 + files/ja/web/css/margin-block-end/index.html | 110 + files/ja/web/css/margin-block-start/index.html | 110 + files/ja/web/css/margin-block/index.html | 108 + files/ja/web/css/margin-bottom/index.html | 148 + files/ja/web/css/margin-inline-end/index.html | 109 + files/ja/web/css/margin-inline-start/index.html | 106 + files/ja/web/css/margin-inline/index.html | 107 + files/ja/web/css/margin-left/index.html | 171 ++ files/ja/web/css/margin-right/index.html | 168 + files/ja/web/css/margin-top/index.html | 108 + files/ja/web/css/margin/index.html | 181 ++ files/ja/web/css/mask-border-repeat/index.html | 80 + files/ja/web/css/mask-border-source/index.html | 73 + files/ja/web/css/mask-border-width/index.html | 92 + files/ja/web/css/mask-clip/index.html | 152 + files/ja/web/css/mask-composite/index.html | 122 + files/ja/web/css/mask-image/index.html | 96 + files/ja/web/css/mask-mode/index.html | 121 + files/ja/web/css/mask-origin/index.html | 143 + files/ja/web/css/mask-position/index.html | 129 + files/ja/web/css/mask-repeat/index.html | 194 ++ files/ja/web/css/mask-type/index.html | 186 ++ files/ja/web/css/max()/index.html | 137 + files/ja/web/css/max-block-size/index.html | 193 ++ files/ja/web/css/max-height/index.html | 122 + files/ja/web/css/max-inline-size/index.html | 113 + files/ja/web/css/max-width/index.html | 142 + files/ja/web/css/media/index.html | 5 + files/ja/web/css/media/visual/index.html | 16 + files/ja/web/css/media_queries/index.html | 103 + .../media_queries/testing_media_queries/index.html | 91 + .../media_queries/using_media_queries/index.html | 385 +++ .../index.html | 94 + files/ja/web/css/microsoft_extensions/index.html | 120 + files/ja/web/css/min()/index.html | 139 + files/ja/web/css/min-block-size/index.html | 107 + files/ja/web/css/min-height/index.html | 120 + files/ja/web/css/min-inline-size/index.html | 108 + files/ja/web/css/min-width/index.html | 117 + files/ja/web/css/minmax()/index.html | 217 ++ files/ja/web/css/mix-blend-mode/index.html | 655 ++++ files/ja/web/css/mozilla_extensions/index.html | 678 ++++ files/ja/web/css/none/index.html | 31 + files/ja/web/css/normal/index.html | 36 + files/ja/web/css/number/index.html | 92 + files/ja/web/css/object-fit/index.html | 169 + files/ja/web/css/object-position/index.html | 119 + files/ja/web/css/offset-distance/index.html | 103 + files/ja/web/css/offset-path/index.html | 190 ++ files/ja/web/css/offset-position/index.html | 113 + files/ja/web/css/offset-rotate/index.html | 128 + files/ja/web/css/offset/index.html | 122 + files/ja/web/css/opacity/index.html | 154 + files/ja/web/css/order/index.html | 113 + files/ja/web/css/orphans/index.html | 115 + files/ja/web/css/other_resources/index.html | 27 + files/ja/web/css/outline-color/index.html | 138 + files/ja/web/css/outline-offset/index.html | 87 + files/ja/web/css/outline-style/index.html | 243 ++ files/ja/web/css/outline-width/index.html | 141 + files/ja/web/css/outline/index.html | 145 + .../guide_to_scroll_anchoring/index.html | 96 + files/ja/web/css/overflow-anchor/index.html | 89 + files/ja/web/css/overflow-block/index.html | 145 + files/ja/web/css/overflow-inline/index.html | 141 + files/ja/web/css/overflow-wrap/index.html | 146 + files/ja/web/css/overflow-x/index.html | 141 + files/ja/web/css/overflow-y/index.html | 146 + files/ja/web/css/overflow/index.html | 168 + .../web/css/overscroll-behavior-block/index.html | 142 + .../web/css/overscroll-behavior-inline/index.html | 142 + files/ja/web/css/overscroll-behavior-x/index.html | 101 + files/ja/web/css/overscroll-behavior-y/index.html | 95 + files/ja/web/css/overscroll-behavior/index.html | 113 + files/ja/web/css/padding-block-end/index.html | 117 + files/ja/web/css/padding-block-start/index.html | 115 + files/ja/web/css/padding-block/index.html | 114 + files/ja/web/css/padding-bottom/index.html | 112 + files/ja/web/css/padding-inline-end/index.html | 115 + files/ja/web/css/padding-inline-start/index.html | 115 + files/ja/web/css/padding-inline/index.html | 114 + files/ja/web/css/padding-left/index.html | 110 + files/ja/web/css/padding-right/index.html | 110 + files/ja/web/css/padding-top/index.html | 112 + files/ja/web/css/padding/index.html | 169 + files/ja/web/css/page-break-after/index.html | 147 + files/ja/web/css/page-break-before/index.html | 148 + files/ja/web/css/page-break-inside/index.html | 160 + files/ja/web/css/paged_media/index.html | 22 + files/ja/web/css/paint()/index.html | 114 + files/ja/web/css/paint-order/index.html | 107 + files/ja/web/css/percentage/index.html | 96 + files/ja/web/css/perspective-origin/index.html | 395 +++ files/ja/web/css/perspective/index.html | 261 ++ files/ja/web/css/place-content/index.html | 254 ++ files/ja/web/css/place-items/index.html | 279 ++ files/ja/web/css/place-self/index.html | 128 + files/ja/web/css/pointer-events/index.html | 164 + files/ja/web/css/position/index.html | 347 +++ files/ja/web/css/position_value/index.html | 138 + .../index.html | 75 + files/ja/web/css/pseudo-classes/index.html | 167 + files/ja/web/css/pseudo-elements/index.html | 125 + files/ja/web/css/quotes/index.html | 141 + files/ja/web/css/radial-gradient()/index.html | 174 ++ files/ja/web/css/ratio/index.html | 97 + files/ja/web/css/reference/index.html | 192 ++ files/ja/web/css/repeat()/index.html | 157 + .../web/css/repeating-linear-gradient()/index.html | 166 + .../web/css/repeating-radial-gradient()/index.html | 186 ++ files/ja/web/css/replaced_element/index.html | 66 + files/ja/web/css/resize/index.html | 158 + files/ja/web/css/resolution/index.html | 101 + files/ja/web/css/resolved_value/index.html | 39 + files/ja/web/css/right/index.html | 143 + files/ja/web/css/rotate/index.html | 122 + files/ja/web/css/row-gap/index.html | 168 + files/ja/web/css/ruby-align/index.html | 152 + files/ja/web/css/ruby-position/index.html | 117 + files/ja/web/css/scale/index.html | 134 + .../web/css/scaling_background_images/index.html | 102 + files/ja/web/css/scroll-behavior/index.html | 133 + files/ja/web/css/scroll-margin-bottom/index.html | 70 + .../ja/web/css/scroll-margin-inline-end/index.html | 68 + .../web/css/scroll-margin-inline-start/index.html | 70 + files/ja/web/css/scroll-margin-inline/index.html | 68 + files/ja/web/css/scroll-margin-left/index.html | 71 + files/ja/web/css/scroll-margin-right/index.html | 69 + files/ja/web/css/scroll-margin-top/index.html | 70 + files/ja/web/css/scroll-margin/index.html | 64 + .../ja/web/css/scroll-padding-block-end/index.html | 78 + .../web/css/scroll-padding-block-start/index.html | 76 + files/ja/web/css/scroll-padding-block/index.html | 74 + files/ja/web/css/scroll-padding-bottom/index.html | 76 + .../web/css/scroll-padding-inline-end/index.html | 75 + .../web/css/scroll-padding-inline-start/index.html | 75 + files/ja/web/css/scroll-padding-inline/index.html | 78 + files/ja/web/css/scroll-padding-left/index.html | 75 + files/ja/web/css/scroll-padding-right/index.html | 74 + files/ja/web/css/scroll-padding-top/index.html | 74 + files/ja/web/css/scroll-padding/index.html | 88 + files/ja/web/css/scroll-snap-align/index.html | 76 + files/ja/web/css/scroll-snap-coordinate/index.html | 156 + .../ja/web/css/scroll-snap-destination/index.html | 148 + files/ja/web/css/scroll-snap-stop/index.html | 226 ++ files/ja/web/css/scroll-snap-type/index.html | 246 ++ files/ja/web/css/scrollbar-color/index.html | 123 + files/ja/web/css/scrollbar-width/index.html | 130 + files/ja/web/css/selector_list/index.html | 101 + files/ja/web/css/shape-image-threshold/index.html | 133 + files/ja/web/css/shape-margin/index.html | 125 + files/ja/web/css/shape/index.html | 81 + files/ja/web/css/shorthand_properties/index.html | 166 + files/ja/web/css/specificity/index.html | 348 +++ files/ja/web/css/specified_value/index.html | 79 + files/ja/web/css/string/index.html | 94 + files/ja/web/css/syntax/index.html | 83 + files/ja/web/css/tab-size/index.html | 96 + files/ja/web/css/table-layout/index.html | 106 + files/ja/web/css/text-align-last/index.html | 106 + files/ja/web/css/text-align/index.html | 231 ++ files/ja/web/css/text-combine-upright/index.html | 115 + files/ja/web/css/text-decoration-color/index.html | 118 + files/ja/web/css/text-decoration-line/index.html | 109 + .../ja/web/css/text-decoration-skip-ink/index.html | 118 + files/ja/web/css/text-decoration-skip/index.html | 110 + files/ja/web/css/text-decoration-style/index.html | 115 + files/ja/web/css/text-decoration/index.html | 139 + files/ja/web/css/text-emphasis-color/index.html | 101 + files/ja/web/css/text-emphasis-position/index.html | 144 + files/ja/web/css/text-emphasis-style/index.html | 110 + files/ja/web/css/text-emphasis/index.html | 140 + files/ja/web/css/text-indent/index.html | 137 + files/ja/web/css/text-justify/index.html | 118 + files/ja/web/css/text-orientation/index.html | 107 + files/ja/web/css/text-overflow/index.html | 319 ++ files/ja/web/css/text-rendering/index.html | 130 + files/ja/web/css/text-shadow/index.html | 152 + files/ja/web/css/text-size-adjust/index.html | 86 + files/ja/web/css/text-transform/index.html | 373 +++ files/ja/web/css/text-underline-offset/index.html | 104 + files/ja/web/css/time-percentage/index.html | 56 + files/ja/web/css/time/index.html | 92 + files/ja/web/css/tools/index.html | 30 + files/ja/web/css/top/index.html | 136 + files/ja/web/css/touch-action/index.html | 165 + files/ja/web/css/transform-box/index.html | 90 + files/ja/web/css/transform-function/index.html | 293 ++ .../web/css/transform-function/matrix()/index.html | 113 + .../css/transform-function/matrix3d()/index.html | 240 ++ .../transform-function/perspective()/index.html | 158 + .../web/css/transform-function/rotate()/index.html | 153 + .../css/transform-function/rotate3d()/index.html | 153 + .../css/transform-function/rotatex()/index.html | 114 + .../css/transform-function/rotatey()/index.html | 114 + .../css/transform-function/rotatez()/index.html | 114 + .../web/css/transform-function/scale()/index.html | 158 + .../web/css/transform-function/scalex()/index.html | 116 + .../web/css/transform-function/scaley()/index.html | 93 + .../web/css/transform-function/skew()/index.html | 154 + .../web/css/transform-function/skewx()/index.html | 113 + .../web/css/transform-function/skewy()/index.html | 109 + .../css/transform-function/translate()/index.html | 153 + .../transform-function/translate3d()/index.html | 141 + .../css/transform-function/translatex/index.html | 119 + .../css/transform-function/translatey()/index.html | 114 + .../css/transform-function/translatez()/index.html | 122 + files/ja/web/css/transform-origin/index.html | 478 +++ files/ja/web/css/transform-style/index.html | 176 ++ files/ja/web/css/transform/index.html | 152 + files/ja/web/css/transition-delay/index.html | 357 +++ files/ja/web/css/transition-duration/index.html | 349 +++ files/ja/web/css/transition-property/index.html | 103 + .../web/css/transition-timing-function/index.html | 286 ++ files/ja/web/css/transition/index.html | 108 + files/ja/web/css/translate/index.html | 121 + files/ja/web/css/type_selectors/index.html | 85 + files/ja/web/css/unicode-bidi/index.html | 117 + files/ja/web/css/universal_selectors/index.html | 106 + files/ja/web/css/unset/index.html | 130 + files/ja/web/css/url()/index.html | 179 ++ files/ja/web/css/url/index.html | 97 + files/ja/web/css/used_value/index.html | 130 + files/ja/web/css/user-modify/index.html | 89 + files/ja/web/css/user-select/index.html | 153 + .../web/css/using_css_custom_properties/index.html | 288 ++ .../ja/web/css/value_definition_syntax/index.html | 440 +++ files/ja/web/css/var()/index.html | 103 + files/ja/web/css/vertical-align/index.html | 254 ++ files/ja/web/css/viewport_concepts/index.html | 160 + files/ja/web/css/visibility/index.html | 177 ++ .../ja/web/css/visual_formatting_model/index.html | 150 + files/ja/web/css/webkit_extensions/index.html | 614 ++++ files/ja/web/css/white-space/index.html | 248 ++ files/ja/web/css/widows/index.html | 119 + files/ja/web/css/width/index.html | 209 ++ files/ja/web/css/will-change/index.html | 143 + files/ja/web/css/word-break/index.html | 148 + files/ja/web/css/word-spacing/index.html | 127 + files/ja/web/css/writing-mode/index.html | 225 ++ files/ja/web/css/z-index/index.html | 139 + files/ja/web/css/zoom/index.html | 142 + 839 files changed, 124146 insertions(+) create mode 100644 files/ja/web/css/--_star_/index.html create mode 100644 files/ja/web/css/-moz-binding/index.html create mode 100644 files/ja/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/ja/web/css/-moz-border-left-colors/index.html create mode 100644 files/ja/web/css/-moz-border-right-colors/index.html create mode 100644 files/ja/web/css/-moz-border-top-colors/index.html create mode 100644 files/ja/web/css/-moz-box-ordinal-group/index.html create mode 100644 files/ja/web/css/-moz-context-properties/index.html create mode 100644 files/ja/web/css/-moz-float-edge/index.html create mode 100644 files/ja/web/css/-moz-force-broken-image-icon/index.html create mode 100644 files/ja/web/css/-moz-orient/index.html create mode 100644 files/ja/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/ja/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/ja/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/ja/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/ja/web/css/-moz-outline-radius/index.html create mode 100644 files/ja/web/css/-moz-stack-sizing/index.html create mode 100644 files/ja/web/css/-moz-user-input/index.html create mode 100644 files/ja/web/css/-ms-accelerator/index.html create mode 100644 files/ja/web/css/-ms-block-progression/index.html create mode 100644 files/ja/web/css/-ms-content-zoom-chaining/index.html create mode 100644 files/ja/web/css/-ms-content-zoom-limit-max/index.html create mode 100644 files/ja/web/css/-ms-content-zoom-limit-min/index.html create mode 100644 files/ja/web/css/-ms-content-zoom-limit/index.html create mode 100644 files/ja/web/css/-ms-content-zoom-snap/index.html create mode 100644 files/ja/web/css/-ms-content-zooming/index.html create mode 100644 files/ja/web/css/-ms-high-contrast/index.html create mode 100644 files/ja/web/css/-ms-scrollbar-face-color/index.html create mode 100644 files/ja/web/css/-ms-scrollbar-highlight-color/index.html create mode 100644 files/ja/web/css/-ms-wrap-margin/index.html create mode 100644 files/ja/web/css/-webkit-line-clamp/index.html create mode 100644 files/ja/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/ja/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/ja/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/ja/web/css/-webkit-text-fill-color/index.html create mode 100644 files/ja/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/ja/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/ja/web/css/-webkit-touch-callout/index.html create mode 100644 files/ja/web/css/@charset/index.html create mode 100644 files/ja/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/ja/web/css/@counter-style/index.html create mode 100644 files/ja/web/css/@counter-style/prefix/index.html create mode 100644 files/ja/web/css/@document/index.html create mode 100644 files/ja/web/css/@font-face/font-display/index.html create mode 100644 files/ja/web/css/@font-face/font-family/index.html create mode 100644 files/ja/web/css/@font-face/font-stretch/index.html create mode 100644 files/ja/web/css/@font-face/font-style/index.html create mode 100644 files/ja/web/css/@font-face/font-variation-settings/index.html create mode 100644 files/ja/web/css/@font-face/font-weight/index.html create mode 100644 files/ja/web/css/@font-face/index.html create mode 100644 files/ja/web/css/@font-face/src/index.html create mode 100644 files/ja/web/css/@font-face/unicode-range/index.html create mode 100644 files/ja/web/css/@font-feature-values/index.html create mode 100644 files/ja/web/css/@import/index.html create mode 100644 files/ja/web/css/@keyframes/index.html create mode 100644 files/ja/web/css/@media/-moz-device-pixel-ratio/index.html create mode 100644 files/ja/web/css/@media/-moz-mac-graphite-theme/index.html create mode 100644 files/ja/web/css/@media/-moz-maemo-classic/index.html create mode 100644 files/ja/web/css/@media/-moz-os-version/index.html create mode 100644 files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html create mode 100644 files/ja/web/css/@media/-moz-windows-classic/index.html create mode 100644 files/ja/web/css/@media/-moz-windows-theme/index.html create mode 100644 files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html create mode 100644 files/ja/web/css/@media/-webkit-transform-2d/index.html create mode 100644 files/ja/web/css/@media/-webkit-transform-3d/index.html create mode 100644 files/ja/web/css/@media/-webkit-transition/index.html create mode 100644 files/ja/web/css/@media/any-hover/index.html create mode 100644 files/ja/web/css/@media/any-pointer/index.html create mode 100644 files/ja/web/css/@media/aspect-ratio/index.html create mode 100644 files/ja/web/css/@media/color-gamut/index.html create mode 100644 files/ja/web/css/@media/color-index/index.html create mode 100644 files/ja/web/css/@media/color/index.html create mode 100644 files/ja/web/css/@media/device-aspect-ratio/index.html create mode 100644 files/ja/web/css/@media/device-height/index.html create mode 100644 files/ja/web/css/@media/device-width/index.html create mode 100644 files/ja/web/css/@media/display-mode/index.html create mode 100644 files/ja/web/css/@media/grid/index.html create mode 100644 files/ja/web/css/@media/height/index.html create mode 100644 files/ja/web/css/@media/hover/index.html create mode 100644 files/ja/web/css/@media/index.html create mode 100644 files/ja/web/css/@media/index/index.html create mode 100644 files/ja/web/css/@media/inverted-colors/index.html create mode 100644 files/ja/web/css/@media/monochrome/index.html create mode 100644 files/ja/web/css/@media/orientation/index.html create mode 100644 files/ja/web/css/@media/overflow-block/index.html create mode 100644 files/ja/web/css/@media/overflow-inline/index.html create mode 100644 files/ja/web/css/@media/pointer/index.html create mode 100644 files/ja/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/ja/web/css/@media/prefers-contrast/index.html create mode 100644 files/ja/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/ja/web/css/@media/resolution/index.html create mode 100644 files/ja/web/css/@media/scan/index.html create mode 100644 files/ja/web/css/@media/scripting/index.html create mode 100644 files/ja/web/css/@media/shape/index.html create mode 100644 files/ja/web/css/@media/update-frequency/index.html create mode 100644 files/ja/web/css/@media/width/index.html create mode 100644 files/ja/web/css/@namespace/index.html create mode 100644 files/ja/web/css/@page/bleed/index.html create mode 100644 files/ja/web/css/@page/index.html create mode 100644 files/ja/web/css/@page/marks/index.html create mode 100644 files/ja/web/css/@page/size/index.html create mode 100644 files/ja/web/css/@supports/index.html create mode 100644 files/ja/web/css/@viewport/height/index.html create mode 100644 files/ja/web/css/@viewport/index.html create mode 100644 files/ja/web/css/@viewport/max-height/index.html create mode 100644 files/ja/web/css/@viewport/max-zoom/index.html create mode 100644 files/ja/web/css/@viewport/min-zoom/index.html create mode 100644 files/ja/web/css/@viewport/viewport-fit/index.html create mode 100644 files/ja/web/css/@viewport/zoom/index.html create mode 100644 files/ja/web/css/_colon_-moz-alt-text/index.html create mode 100644 files/ja/web/css/_colon_-moz-broken/index.html create mode 100644 files/ja/web/css/_colon_-moz-drag-over/index.html create mode 100644 files/ja/web/css/_colon_-moz-first-node/index.html create mode 100644 files/ja/web/css/_colon_-moz-focusring/index.html create mode 100644 files/ja/web/css/_colon_-moz-full-screen-ancestor/index.html create mode 100644 files/ja/web/css/_colon_-moz-last-node/index.html create mode 100644 files/ja/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/ja/web/css/_colon_-moz-loading/index.html create mode 100644 files/ja/web/css/_colon_-moz-locale-dir(ltr)/index.html create mode 100644 files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html create mode 100644 files/ja/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/ja/web/css/_colon_-moz-placeholder/index.html create mode 100644 files/ja/web/css/_colon_-moz-submit-invalid/index.html create mode 100644 files/ja/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/ja/web/css/_colon_active/index.html create mode 100644 files/ja/web/css/_colon_any-link/index.html create mode 100644 files/ja/web/css/_colon_blank/index.html create mode 100644 files/ja/web/css/_colon_checked/index.html create mode 100644 files/ja/web/css/_colon_default/index.html create mode 100644 files/ja/web/css/_colon_defined/index.html create mode 100644 files/ja/web/css/_colon_dir/index.html create mode 100644 files/ja/web/css/_colon_disabled/index.html create mode 100644 files/ja/web/css/_colon_empty/index.html create mode 100644 files/ja/web/css/_colon_enabled/index.html create mode 100644 files/ja/web/css/_colon_first-child/index.html create mode 100644 files/ja/web/css/_colon_first-of-type/index.html create mode 100644 files/ja/web/css/_colon_first/index.html create mode 100644 files/ja/web/css/_colon_focus-visible/index.html create mode 100644 files/ja/web/css/_colon_focus-within/index.html create mode 100644 files/ja/web/css/_colon_focus/index.html create mode 100644 files/ja/web/css/_colon_fullscreen/index.html create mode 100644 files/ja/web/css/_colon_has/index.html create mode 100644 files/ja/web/css/_colon_host-context()/index.html create mode 100644 files/ja/web/css/_colon_host/index.html create mode 100644 files/ja/web/css/_colon_hover/index.html create mode 100644 files/ja/web/css/_colon_in-range/index.html create mode 100644 files/ja/web/css/_colon_indeterminate/index.html create mode 100644 files/ja/web/css/_colon_invalid/index.html create mode 100644 files/ja/web/css/_colon_is/index.html create mode 100644 files/ja/web/css/_colon_lang/index.html create mode 100644 files/ja/web/css/_colon_last-child/index.html create mode 100644 files/ja/web/css/_colon_last-of-type/index.html create mode 100644 files/ja/web/css/_colon_left/index.html create mode 100644 files/ja/web/css/_colon_link/index.html create mode 100644 files/ja/web/css/_colon_not/index.html create mode 100644 files/ja/web/css/_colon_nth-child/index.html create mode 100644 files/ja/web/css/_colon_nth-last-child/index.html create mode 100644 files/ja/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/ja/web/css/_colon_nth-of-type/index.html create mode 100644 files/ja/web/css/_colon_only-child/index.html create mode 100644 files/ja/web/css/_colon_only-of-type/index.html create mode 100644 files/ja/web/css/_colon_optional/index.html create mode 100644 files/ja/web/css/_colon_out-of-range/index.html create mode 100644 files/ja/web/css/_colon_placeholder-shown/index.html create mode 100644 files/ja/web/css/_colon_read-only/index.html create mode 100644 files/ja/web/css/_colon_read-write/index.html create mode 100644 files/ja/web/css/_colon_required/index.html create mode 100644 files/ja/web/css/_colon_right/index.html create mode 100644 files/ja/web/css/_colon_root/index.html create mode 100644 files/ja/web/css/_colon_scope/index.html create mode 100644 files/ja/web/css/_colon_target/index.html create mode 100644 files/ja/web/css/_colon_valid/index.html create mode 100644 files/ja/web/css/_colon_visited/index.html create mode 100644 files/ja/web/css/_colon_where/index.html create mode 100644 files/ja/web/css/_doublecolon_-moz-color-swatch/index.html create mode 100644 files/ja/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/ja/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/ja/web/css/_doublecolon_-ms-browse/index.html create mode 100644 files/ja/web/css/_doublecolon_-ms-expand/index.html create mode 100644 files/ja/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/ja/web/css/_doublecolon_-ms-value/index.html create mode 100644 files/ja/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/ja/web/css/_doublecolon_after/index.html create mode 100644 files/ja/web/css/_doublecolon_backdrop/index.html create mode 100644 files/ja/web/css/_doublecolon_before/index.html create mode 100644 files/ja/web/css/_doublecolon_cue/index.html create mode 100644 files/ja/web/css/_doublecolon_first-letter/index.html create mode 100644 files/ja/web/css/_doublecolon_first-line/index.html create mode 100644 files/ja/web/css/_doublecolon_grammar-error/index.html create mode 100644 files/ja/web/css/_doublecolon_marker/index.html create mode 100644 files/ja/web/css/_doublecolon_part/index.html create mode 100644 files/ja/web/css/_doublecolon_placeholder/index.html create mode 100644 files/ja/web/css/_doublecolon_selection/index.html create mode 100644 files/ja/web/css/_doublecolon_slotted/index.html create mode 100644 files/ja/web/css/_doublecolon_spelling-error/index.html create mode 100644 files/ja/web/css/actual_value/index.html create mode 100644 files/ja/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/ja/web/css/align-content/index.html create mode 100644 files/ja/web/css/align-items/index.html create mode 100644 files/ja/web/css/align-self/index.html create mode 100644 files/ja/web/css/all/index.html create mode 100644 files/ja/web/css/alpha-value/index.html create mode 100644 files/ja/web/css/alternative_style_sheets/index.html create mode 100644 files/ja/web/css/angle-percentage/index.html create mode 100644 files/ja/web/css/angle/index.html create mode 100644 files/ja/web/css/animation-delay/index.html create mode 100644 files/ja/web/css/animation-direction/index.html create mode 100644 files/ja/web/css/animation-duration/index.html create mode 100644 files/ja/web/css/animation-fill-mode/index.html create mode 100644 files/ja/web/css/animation-iteration-count/index.html create mode 100644 files/ja/web/css/animation-name/index.html create mode 100644 files/ja/web/css/animation-play-state/index.html create mode 100644 files/ja/web/css/animation-timing-function/index.html create mode 100644 files/ja/web/css/animation/index.html create mode 100644 files/ja/web/css/appearance/index.html create mode 100644 files/ja/web/css/at-rule/index.html create mode 100644 files/ja/web/css/attr()/index.html create mode 100644 files/ja/web/css/attribute_selectors/index.html create mode 100644 files/ja/web/css/aural/index.html create mode 100644 files/ja/web/css/auto/index.html create mode 100644 files/ja/web/css/backdrop-filter/index.html create mode 100644 files/ja/web/css/backface-visibility/index.html create mode 100644 files/ja/web/css/background-attachment/index.html create mode 100644 files/ja/web/css/background-blend-mode/index.html create mode 100644 files/ja/web/css/background-clip/index.html create mode 100644 files/ja/web/css/background-color/index.html create mode 100644 files/ja/web/css/background-image/index.html create mode 100644 files/ja/web/css/background-origin/index.html create mode 100644 files/ja/web/css/background-position-x/index.html create mode 100644 files/ja/web/css/background-position-y/index.html create mode 100644 files/ja/web/css/background-position/index.html create mode 100644 files/ja/web/css/background-repeat/index.html create mode 100644 files/ja/web/css/background-size/index.html create mode 100644 files/ja/web/css/background/index.html create mode 100644 files/ja/web/css/basic-shape/index.html create mode 100644 files/ja/web/css/blend-mode/index.html create mode 100644 files/ja/web/css/block-size/index.html create mode 100644 files/ja/web/css/border-block-color/index.html create mode 100644 files/ja/web/css/border-block-end-color/index.html create mode 100644 files/ja/web/css/border-block-end-style/index.html create mode 100644 files/ja/web/css/border-block-end-width/index.html create mode 100644 files/ja/web/css/border-block-end/index.html create mode 100644 files/ja/web/css/border-block-start-color/index.html create mode 100644 files/ja/web/css/border-block-start-style/index.html create mode 100644 files/ja/web/css/border-block-start-width/index.html create mode 100644 files/ja/web/css/border-block-start/index.html create mode 100644 files/ja/web/css/border-block-style/index.html create mode 100644 files/ja/web/css/border-block-width/index.html create mode 100644 files/ja/web/css/border-block/index.html create mode 100644 files/ja/web/css/border-bottom-color/index.html create mode 100644 files/ja/web/css/border-bottom-left-radius/index.html create mode 100644 files/ja/web/css/border-bottom-right-radius/index.html create mode 100644 files/ja/web/css/border-bottom-style/index.html create mode 100644 files/ja/web/css/border-bottom-width/index.html create mode 100644 files/ja/web/css/border-bottom/index.html create mode 100644 files/ja/web/css/border-collapse/index.html create mode 100644 files/ja/web/css/border-color/index.html create mode 100644 files/ja/web/css/border-end-end-radius/index.html create mode 100644 files/ja/web/css/border-end-start-radius/index.html create mode 100644 files/ja/web/css/border-image-outset/index.html create mode 100644 files/ja/web/css/border-image-repeat/index.html create mode 100644 files/ja/web/css/border-image-slice/index.html create mode 100644 files/ja/web/css/border-image-source/index.html create mode 100644 files/ja/web/css/border-image-width/index.html create mode 100644 files/ja/web/css/border-image/index.html create mode 100644 files/ja/web/css/border-inline-color/index.html create mode 100644 files/ja/web/css/border-inline-end-color/index.html create mode 100644 files/ja/web/css/border-inline-end-style/index.html create mode 100644 files/ja/web/css/border-inline-end-width/index.html create mode 100644 files/ja/web/css/border-inline-end/index.html create mode 100644 files/ja/web/css/border-inline-start-color/index.html create mode 100644 files/ja/web/css/border-inline-start-style/index.html create mode 100644 files/ja/web/css/border-inline-start-width/index.html create mode 100644 files/ja/web/css/border-inline-start/index.html create mode 100644 files/ja/web/css/border-inline-style/index.html create mode 100644 files/ja/web/css/border-inline-width/index.html create mode 100644 files/ja/web/css/border-inline/index.html create mode 100644 files/ja/web/css/border-left-color/index.html create mode 100644 files/ja/web/css/border-left-style/index.html create mode 100644 files/ja/web/css/border-left-width/index.html create mode 100644 files/ja/web/css/border-left/index.html create mode 100644 files/ja/web/css/border-radius/index.html create mode 100644 files/ja/web/css/border-right-color/index.html create mode 100644 files/ja/web/css/border-right-style/index.html create mode 100644 files/ja/web/css/border-right-width/index.html create mode 100644 files/ja/web/css/border-right/index.html create mode 100644 files/ja/web/css/border-spacing/index.html create mode 100644 files/ja/web/css/border-start-end-radius/index.html create mode 100644 files/ja/web/css/border-start-start-radius/index.html create mode 100644 files/ja/web/css/border-style/index.html create mode 100644 files/ja/web/css/border-top-color/index.html create mode 100644 files/ja/web/css/border-top-left-radius/index.html create mode 100644 files/ja/web/css/border-top-right-radius/index.html create mode 100644 files/ja/web/css/border-top-style/index.html create mode 100644 files/ja/web/css/border-top-width/index.html create mode 100644 files/ja/web/css/border-top/index.html create mode 100644 files/ja/web/css/border-width/index.html create mode 100644 files/ja/web/css/border/index.html create mode 100644 files/ja/web/css/bottom/index.html create mode 100644 files/ja/web/css/box-align/index.html create mode 100644 files/ja/web/css/box-decoration-break/index.html create mode 100644 files/ja/web/css/box-direction/index.html create mode 100644 files/ja/web/css/box-flex-group/index.html create mode 100644 files/ja/web/css/box-flex/index.html create mode 100644 files/ja/web/css/box-lines/index.html create mode 100644 files/ja/web/css/box-ordinal-group/index.html create mode 100644 files/ja/web/css/box-orient/index.html create mode 100644 files/ja/web/css/box-pack/index.html create mode 100644 files/ja/web/css/box-shadow/index.html create mode 100644 files/ja/web/css/box-sizing/index.html create mode 100644 files/ja/web/css/break-after/index.html create mode 100644 files/ja/web/css/break-before/index.html create mode 100644 files/ja/web/css/break-inside/index.html create mode 100644 files/ja/web/css/calc()/index.html create mode 100644 files/ja/web/css/caption-side/index.html create mode 100644 files/ja/web/css/caret-color/index.html create mode 100644 files/ja/web/css/cascade/index.html create mode 100644 files/ja/web/css/child_combinator/index.html create mode 100644 files/ja/web/css/clamp()/index.html create mode 100644 files/ja/web/css/class_selectors/index.html create mode 100644 files/ja/web/css/clear/index.html create mode 100644 files/ja/web/css/clip-path/index.html create mode 100644 files/ja/web/css/clip/index.html create mode 100644 files/ja/web/css/color-adjust/index.html create mode 100644 files/ja/web/css/color/index.html create mode 100644 files/ja/web/css/color_value/index.html create mode 100644 files/ja/web/css/column-count/index.html create mode 100644 files/ja/web/css/column-fill/index.html create mode 100644 files/ja/web/css/column-gap/index.html create mode 100644 files/ja/web/css/column-rule-color/index.html create mode 100644 files/ja/web/css/column-rule-style/index.html create mode 100644 files/ja/web/css/column-rule-width/index.html create mode 100644 files/ja/web/css/column-rule/index.html create mode 100644 files/ja/web/css/column-span/index.html create mode 100644 files/ja/web/css/column-width/index.html create mode 100644 files/ja/web/css/column_combinator/index.html create mode 100644 files/ja/web/css/columns/index.html create mode 100644 files/ja/web/css/comments/index.html create mode 100644 files/ja/web/css/common_css_questions/index.html create mode 100644 files/ja/web/css/compositing_and_blending/index.html create mode 100644 files/ja/web/css/computed_value/index.html create mode 100644 files/ja/web/css/conic-gradient()/index.html create mode 100644 files/ja/web/css/contain/index.html create mode 100644 files/ja/web/css/containing_block/index.html create mode 100644 files/ja/web/css/content/index.html create mode 100644 files/ja/web/css/counter()/index.html create mode 100644 files/ja/web/css/counter-increment/index.html create mode 100644 files/ja/web/css/counter-reset/index.html create mode 100644 files/ja/web/css/counter-set/index.html create mode 100644 files/ja/web/css/counters()/index.html create mode 100644 files/ja/web/css/cross-fade()/index.html create mode 100644 files/ja/web/css/css_animated_properties/index.html create mode 100644 files/ja/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/ja/web/css/css_animations/index.html create mode 100644 files/ja/web/css/css_animations/tips/index.html create mode 100644 files/ja/web/css/css_animations/using_css_animations/index.html create mode 100644 files/ja/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/ja/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/ja/web/css/css_basic_user_interface/index.html create mode 100644 files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html create mode 100644 files/ja/web/css/css_box_alignment/index.html create mode 100644 files/ja/web/css/css_box_model/index.html create mode 100644 files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/ja/web/css/css_charsets/index.html create mode 100644 files/ja/web/css/css_color/index.html create mode 100644 files/ja/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html create mode 100644 files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html create mode 100644 files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html create mode 100644 files/ja/web/css/css_columns/index.html create mode 100644 files/ja/web/css/css_columns/spanning_columns/index.html create mode 100644 files/ja/web/css/css_columns/styling_columns/index.html create mode 100644 files/ja/web/css/css_columns/using_multi-column_layouts/index.html create mode 100644 files/ja/web/css/css_conditional_rules/index.html create mode 100644 files/ja/web/css/css_containment/index.html create mode 100644 files/ja/web/css/css_counter_styles/index.html create mode 100644 files/ja/web/css/css_device_adaptation/index.html create mode 100644 files/ja/web/css/css_display/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/mixins/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html create mode 100644 files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html create mode 100644 files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html create mode 100644 files/ja/web/css/css_flow_layout/index.html create mode 100644 files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html create mode 100644 files/ja/web/css/css_fonts/index.html create mode 100644 files/ja/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/ja/web/css/css_fonts/variable_fonts_guide/index.html create mode 100644 files/ja/web/css/css_fragmentation/index.html create mode 100644 files/ja/web/css/css_functions/index.html create mode 100644 files/ja/web/css/css_generated_content/index.html create mode 100644 files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html create mode 100644 files/ja/web/css/css_grid_layout/index.html create mode 100644 files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html create mode 100644 files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/ja/web/css/css_grid_layout/subgrid/index.html create mode 100644 files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/ja/web/css/css_images/index.html create mode 100644 files/ja/web/css/css_images/using_css_gradients/index.html create mode 100644 files/ja/web/css/css_lists_and_counters/index.html create mode 100644 files/ja/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/ja/web/css/css_logical_properties/basic_concepts/index.html create mode 100644 files/ja/web/css/css_logical_properties/floating_and_positioning/index.html create mode 100644 files/ja/web/css/css_logical_properties/index.html create mode 100644 files/ja/web/css/css_logical_properties/margins_borders_padding/index.html create mode 100644 files/ja/web/css/css_logical_properties/sizing/index.html create mode 100644 files/ja/web/css/css_masking/index.html create mode 100644 files/ja/web/css/css_miscellaneous/index.html create mode 100644 files/ja/web/css/css_motion_path/index.html create mode 100644 files/ja/web/css/css_namespaces/index.html create mode 100644 files/ja/web/css/css_overflow/index.html create mode 100644 files/ja/web/css/css_pages/index.html create mode 100644 files/ja/web/css/css_positioning/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html create mode 100644 files/ja/web/css/css_properties_reference/index.html create mode 100644 files/ja/web/css/css_ruby/index.html create mode 100644 files/ja/web/css/css_scroll_snap/browser_compat/index.html create mode 100644 files/ja/web/css/css_scroll_snap/index.html create mode 100644 files/ja/web/css/css_scroll_snap_points/index.html create mode 100644 files/ja/web/css/css_scrollbars/index.html create mode 100644 files/ja/web/css/css_selectors/index.html create mode 100644 files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/ja/web/css/css_shapes/basic_shapes/index.html create mode 100644 files/ja/web/css/css_shapes/from_box_values/index.html create mode 100644 files/ja/web/css/css_shapes/index.html create mode 100644 files/ja/web/css/css_shapes/overview_of_css_shapes/index.html create mode 100644 files/ja/web/css/css_shapes/shapes_from_images/index.html create mode 100644 files/ja/web/css/css_table/index.html create mode 100644 files/ja/web/css/css_text/index.html create mode 100644 files/ja/web/css/css_text_decoration/index.html create mode 100644 files/ja/web/css/css_transforms/index.html create mode 100644 files/ja/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/ja/web/css/css_transitions/index.html create mode 100644 files/ja/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/ja/web/css/css_types/index.html create mode 100644 files/ja/web/css/css_values_and_units/index.html create mode 100644 files/ja/web/css/css_variables/index.html create mode 100644 files/ja/web/css/css_writing_modes/index.html create mode 100644 files/ja/web/css/cssom_view/index.html create mode 100644 files/ja/web/css/cursor/index.html create mode 100644 files/ja/web/css/custom-ident/index.html create mode 100644 files/ja/web/css/descendant_combinator/index.html create mode 100644 files/ja/web/css/dimension/index.html create mode 100644 files/ja/web/css/direction/index.html create mode 100644 files/ja/web/css/display-box/index.html create mode 100644 files/ja/web/css/display-inside/index.html create mode 100644 files/ja/web/css/display-internal/index.html create mode 100644 files/ja/web/css/display-legacy/index.html create mode 100644 files/ja/web/css/display-listitem/index.html create mode 100644 files/ja/web/css/display-outside/index.html create mode 100644 files/ja/web/css/display/index.html create mode 100644 files/ja/web/css/easing-function/index.html create mode 100644 files/ja/web/css/element()/index.html create mode 100644 files/ja/web/css/empty-cells/index.html create mode 100644 files/ja/web/css/env()/index.html create mode 100644 files/ja/web/css/filter-function/blur()/index.html create mode 100644 files/ja/web/css/filter-function/brightness()/index.html create mode 100644 files/ja/web/css/filter-function/contrast()/index.html create mode 100644 files/ja/web/css/filter-function/drop-shadow()/index.html create mode 100644 files/ja/web/css/filter-function/grayscale()/index.html create mode 100644 files/ja/web/css/filter-function/hue-rotate()/index.html create mode 100644 files/ja/web/css/filter-function/index.html create mode 100644 files/ja/web/css/filter-function/invert()/index.html create mode 100644 files/ja/web/css/filter-function/opacity()/index.html create mode 100644 files/ja/web/css/filter-function/saturate()/index.html create mode 100644 files/ja/web/css/filter-function/sepia()/index.html create mode 100644 files/ja/web/css/filter/index.html create mode 100644 files/ja/web/css/filter_effects/index.html create mode 100644 files/ja/web/css/fit-content/index.html create mode 100644 files/ja/web/css/flex-basis/index.html create mode 100644 files/ja/web/css/flex-direction/index.html create mode 100644 files/ja/web/css/flex-flow/index.html create mode 100644 files/ja/web/css/flex-grow/index.html create mode 100644 files/ja/web/css/flex-shrink/index.html create mode 100644 files/ja/web/css/flex-wrap/index.html create mode 100644 files/ja/web/css/flex/index.html create mode 100644 files/ja/web/css/flex_value/index.html create mode 100644 files/ja/web/css/float/index.html create mode 100644 files/ja/web/css/font-family/index.html create mode 100644 files/ja/web/css/font-feature-settings/index.html create mode 100644 files/ja/web/css/font-kerning/index.html create mode 100644 files/ja/web/css/font-language-override/index.html create mode 100644 files/ja/web/css/font-optical-sizing/index.html create mode 100644 files/ja/web/css/font-size-adjust/index.html create mode 100644 files/ja/web/css/font-size/index.html create mode 100644 files/ja/web/css/font-stretch/index.html create mode 100644 files/ja/web/css/font-style/index.html create mode 100644 files/ja/web/css/font-synthesis/index.html create mode 100644 files/ja/web/css/font-variant-alternates/index.html create mode 100644 files/ja/web/css/font-variant-caps/index.html create mode 100644 files/ja/web/css/font-variant-east-asian/index.html create mode 100644 files/ja/web/css/font-variant-ligatures/index.html create mode 100644 files/ja/web/css/font-variant-numeric/index.html create mode 100644 files/ja/web/css/font-variant-position/index.html create mode 100644 files/ja/web/css/font-variant/index.html create mode 100644 files/ja/web/css/font-variation-settings/index.html create mode 100644 files/ja/web/css/font-weight/index.html create mode 100644 files/ja/web/css/font/index.html create mode 100644 files/ja/web/css/frequency-percentage/index.html create mode 100644 files/ja/web/css/frequency/index.html create mode 100644 files/ja/web/css/gap/index.html create mode 100644 files/ja/web/css/general_sibling_combinator/index.html create mode 100644 files/ja/web/css/gradient/index.html create mode 100644 files/ja/web/css/grid-column-start/index.html create mode 100644 files/ja/web/css/grid-column/index.html create mode 100644 files/ja/web/css/grid-row/index.html create mode 100644 files/ja/web/css/grid-template-areas/index.html create mode 100644 files/ja/web/css/grid-template-columns/index.html create mode 100644 files/ja/web/css/grid-template/index.html create mode 100644 files/ja/web/css/grid/index.html create mode 100644 files/ja/web/css/hanging-punctuation/index.html create mode 100644 files/ja/web/css/height/index.html create mode 100644 files/ja/web/css/hyphens/index.html create mode 100644 files/ja/web/css/id_selectors/index.html create mode 100644 files/ja/web/css/ident/index.html create mode 100644 files/ja/web/css/image-orientation/index.html create mode 100644 files/ja/web/css/image-rendering/index.html create mode 100644 files/ja/web/css/image-set()/index.html create mode 100644 files/ja/web/css/image/index.html create mode 100644 files/ja/web/css/ime-mode/index.html create mode 100644 files/ja/web/css/index.html create mode 100644 files/ja/web/css/index/index.html create mode 100644 files/ja/web/css/inherit/index.html create mode 100644 files/ja/web/css/inheritance/index.html create mode 100644 files/ja/web/css/initial-letter-align/index.html create mode 100644 files/ja/web/css/initial-letter/index.html create mode 100644 files/ja/web/css/initial/index.html create mode 100644 files/ja/web/css/initial_value/index.html create mode 100644 files/ja/web/css/inline-size/index.html create mode 100644 files/ja/web/css/inset-block-end/index.html create mode 100644 files/ja/web/css/inset-block-start/index.html create mode 100644 files/ja/web/css/inset-block/index.html create mode 100644 files/ja/web/css/inset-inline-end/index.html create mode 100644 files/ja/web/css/inset-inline-start/index.html create mode 100644 files/ja/web/css/inset-inline/index.html create mode 100644 files/ja/web/css/inset/index.html create mode 100644 files/ja/web/css/integer/index.html create mode 100644 files/ja/web/css/isolation/index.html create mode 100644 files/ja/web/css/justify-content/index.html create mode 100644 files/ja/web/css/justify-items/index.html create mode 100644 files/ja/web/css/justify-self/index.html create mode 100644 files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/ja/web/css/layout_cookbook/card/index.html create mode 100644 files/ja/web/css/layout_cookbook/center_an_element/index.html create mode 100644 files/ja/web/css/layout_cookbook/column_layouts/index.html create mode 100644 files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html create mode 100644 files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html create mode 100644 files/ja/web/css/layout_cookbook/grid_wrapper/index.html create mode 100644 files/ja/web/css/layout_cookbook/index.html create mode 100644 files/ja/web/css/layout_cookbook/list_group_with_badges/index.html create mode 100644 files/ja/web/css/layout_cookbook/media_objects/index.html create mode 100644 files/ja/web/css/layout_cookbook/pagination/index.html create mode 100644 files/ja/web/css/layout_cookbook/split_navigation/index.html create mode 100644 files/ja/web/css/layout_cookbook/sticky_footers/index.html create mode 100644 files/ja/web/css/layout_mode/index.html create mode 100644 files/ja/web/css/left/index.html create mode 100644 files/ja/web/css/length-percentage/index.html create mode 100644 files/ja/web/css/length/index.html create mode 100644 files/ja/web/css/letter-spacing/index.html create mode 100644 files/ja/web/css/line-break/index.html create mode 100644 files/ja/web/css/line-height-step/index.html create mode 100644 files/ja/web/css/line-height/index.html create mode 100644 files/ja/web/css/linear-gradient()/index.html create mode 100644 files/ja/web/css/list-style-image/index.html create mode 100644 files/ja/web/css/list-style-position/index.html create mode 100644 files/ja/web/css/list-style-type/index.html create mode 100644 files/ja/web/css/list-style/index.html create mode 100644 files/ja/web/css/list_of_proprietary_css_features/index.html create mode 100644 files/ja/web/css/margin-block-end/index.html create mode 100644 files/ja/web/css/margin-block-start/index.html create mode 100644 files/ja/web/css/margin-block/index.html create mode 100644 files/ja/web/css/margin-bottom/index.html create mode 100644 files/ja/web/css/margin-inline-end/index.html create mode 100644 files/ja/web/css/margin-inline-start/index.html create mode 100644 files/ja/web/css/margin-inline/index.html create mode 100644 files/ja/web/css/margin-left/index.html create mode 100644 files/ja/web/css/margin-right/index.html create mode 100644 files/ja/web/css/margin-top/index.html create mode 100644 files/ja/web/css/margin/index.html create mode 100644 files/ja/web/css/mask-border-repeat/index.html create mode 100644 files/ja/web/css/mask-border-source/index.html create mode 100644 files/ja/web/css/mask-border-width/index.html create mode 100644 files/ja/web/css/mask-clip/index.html create mode 100644 files/ja/web/css/mask-composite/index.html create mode 100644 files/ja/web/css/mask-image/index.html create mode 100644 files/ja/web/css/mask-mode/index.html create mode 100644 files/ja/web/css/mask-origin/index.html create mode 100644 files/ja/web/css/mask-position/index.html create mode 100644 files/ja/web/css/mask-repeat/index.html create mode 100644 files/ja/web/css/mask-type/index.html create mode 100644 files/ja/web/css/max()/index.html create mode 100644 files/ja/web/css/max-block-size/index.html create mode 100644 files/ja/web/css/max-height/index.html create mode 100644 files/ja/web/css/max-inline-size/index.html create mode 100644 files/ja/web/css/max-width/index.html create mode 100644 files/ja/web/css/media/index.html create mode 100644 files/ja/web/css/media/visual/index.html create mode 100644 files/ja/web/css/media_queries/index.html create mode 100644 files/ja/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/ja/web/css/media_queries/using_media_queries/index.html create mode 100644 files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html create mode 100644 files/ja/web/css/microsoft_extensions/index.html create mode 100644 files/ja/web/css/min()/index.html create mode 100644 files/ja/web/css/min-block-size/index.html create mode 100644 files/ja/web/css/min-height/index.html create mode 100644 files/ja/web/css/min-inline-size/index.html create mode 100644 files/ja/web/css/min-width/index.html create mode 100644 files/ja/web/css/minmax()/index.html create mode 100644 files/ja/web/css/mix-blend-mode/index.html create mode 100644 files/ja/web/css/mozilla_extensions/index.html create mode 100644 files/ja/web/css/none/index.html create mode 100644 files/ja/web/css/normal/index.html create mode 100644 files/ja/web/css/number/index.html create mode 100644 files/ja/web/css/object-fit/index.html create mode 100644 files/ja/web/css/object-position/index.html create mode 100644 files/ja/web/css/offset-distance/index.html create mode 100644 files/ja/web/css/offset-path/index.html create mode 100644 files/ja/web/css/offset-position/index.html create mode 100644 files/ja/web/css/offset-rotate/index.html create mode 100644 files/ja/web/css/offset/index.html create mode 100644 files/ja/web/css/opacity/index.html create mode 100644 files/ja/web/css/order/index.html create mode 100644 files/ja/web/css/orphans/index.html create mode 100644 files/ja/web/css/other_resources/index.html create mode 100644 files/ja/web/css/outline-color/index.html create mode 100644 files/ja/web/css/outline-offset/index.html create mode 100644 files/ja/web/css/outline-style/index.html create mode 100644 files/ja/web/css/outline-width/index.html create mode 100644 files/ja/web/css/outline/index.html create mode 100644 files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html create mode 100644 files/ja/web/css/overflow-anchor/index.html create mode 100644 files/ja/web/css/overflow-block/index.html create mode 100644 files/ja/web/css/overflow-inline/index.html create mode 100644 files/ja/web/css/overflow-wrap/index.html create mode 100644 files/ja/web/css/overflow-x/index.html create mode 100644 files/ja/web/css/overflow-y/index.html create mode 100644 files/ja/web/css/overflow/index.html create mode 100644 files/ja/web/css/overscroll-behavior-block/index.html create mode 100644 files/ja/web/css/overscroll-behavior-inline/index.html create mode 100644 files/ja/web/css/overscroll-behavior-x/index.html create mode 100644 files/ja/web/css/overscroll-behavior-y/index.html create mode 100644 files/ja/web/css/overscroll-behavior/index.html create mode 100644 files/ja/web/css/padding-block-end/index.html create mode 100644 files/ja/web/css/padding-block-start/index.html create mode 100644 files/ja/web/css/padding-block/index.html create mode 100644 files/ja/web/css/padding-bottom/index.html create mode 100644 files/ja/web/css/padding-inline-end/index.html create mode 100644 files/ja/web/css/padding-inline-start/index.html create mode 100644 files/ja/web/css/padding-inline/index.html create mode 100644 files/ja/web/css/padding-left/index.html create mode 100644 files/ja/web/css/padding-right/index.html create mode 100644 files/ja/web/css/padding-top/index.html create mode 100644 files/ja/web/css/padding/index.html create mode 100644 files/ja/web/css/page-break-after/index.html create mode 100644 files/ja/web/css/page-break-before/index.html create mode 100644 files/ja/web/css/page-break-inside/index.html create mode 100644 files/ja/web/css/paged_media/index.html create mode 100644 files/ja/web/css/paint()/index.html create mode 100644 files/ja/web/css/paint-order/index.html create mode 100644 files/ja/web/css/percentage/index.html create mode 100644 files/ja/web/css/perspective-origin/index.html create mode 100644 files/ja/web/css/perspective/index.html create mode 100644 files/ja/web/css/place-content/index.html create mode 100644 files/ja/web/css/place-items/index.html create mode 100644 files/ja/web/css/place-self/index.html create mode 100644 files/ja/web/css/pointer-events/index.html create mode 100644 files/ja/web/css/position/index.html create mode 100644 files/ja/web/css/position_value/index.html create mode 100644 files/ja/web/css/privacy_and_the__colon_visited_selector/index.html create mode 100644 files/ja/web/css/pseudo-classes/index.html create mode 100644 files/ja/web/css/pseudo-elements/index.html create mode 100644 files/ja/web/css/quotes/index.html create mode 100644 files/ja/web/css/radial-gradient()/index.html create mode 100644 files/ja/web/css/ratio/index.html create mode 100644 files/ja/web/css/reference/index.html create mode 100644 files/ja/web/css/repeat()/index.html create mode 100644 files/ja/web/css/repeating-linear-gradient()/index.html create mode 100644 files/ja/web/css/repeating-radial-gradient()/index.html create mode 100644 files/ja/web/css/replaced_element/index.html create mode 100644 files/ja/web/css/resize/index.html create mode 100644 files/ja/web/css/resolution/index.html create mode 100644 files/ja/web/css/resolved_value/index.html create mode 100644 files/ja/web/css/right/index.html create mode 100644 files/ja/web/css/rotate/index.html create mode 100644 files/ja/web/css/row-gap/index.html create mode 100644 files/ja/web/css/ruby-align/index.html create mode 100644 files/ja/web/css/ruby-position/index.html create mode 100644 files/ja/web/css/scale/index.html create mode 100644 files/ja/web/css/scaling_background_images/index.html create mode 100644 files/ja/web/css/scroll-behavior/index.html create mode 100644 files/ja/web/css/scroll-margin-bottom/index.html create mode 100644 files/ja/web/css/scroll-margin-inline-end/index.html create mode 100644 files/ja/web/css/scroll-margin-inline-start/index.html create mode 100644 files/ja/web/css/scroll-margin-inline/index.html create mode 100644 files/ja/web/css/scroll-margin-left/index.html create mode 100644 files/ja/web/css/scroll-margin-right/index.html create mode 100644 files/ja/web/css/scroll-margin-top/index.html create mode 100644 files/ja/web/css/scroll-margin/index.html create mode 100644 files/ja/web/css/scroll-padding-block-end/index.html create mode 100644 files/ja/web/css/scroll-padding-block-start/index.html create mode 100644 files/ja/web/css/scroll-padding-block/index.html create mode 100644 files/ja/web/css/scroll-padding-bottom/index.html create mode 100644 files/ja/web/css/scroll-padding-inline-end/index.html create mode 100644 files/ja/web/css/scroll-padding-inline-start/index.html create mode 100644 files/ja/web/css/scroll-padding-inline/index.html create mode 100644 files/ja/web/css/scroll-padding-left/index.html create mode 100644 files/ja/web/css/scroll-padding-right/index.html create mode 100644 files/ja/web/css/scroll-padding-top/index.html create mode 100644 files/ja/web/css/scroll-padding/index.html create mode 100644 files/ja/web/css/scroll-snap-align/index.html create mode 100644 files/ja/web/css/scroll-snap-coordinate/index.html create mode 100644 files/ja/web/css/scroll-snap-destination/index.html create mode 100644 files/ja/web/css/scroll-snap-stop/index.html create mode 100644 files/ja/web/css/scroll-snap-type/index.html create mode 100644 files/ja/web/css/scrollbar-color/index.html create mode 100644 files/ja/web/css/scrollbar-width/index.html create mode 100644 files/ja/web/css/selector_list/index.html create mode 100644 files/ja/web/css/shape-image-threshold/index.html create mode 100644 files/ja/web/css/shape-margin/index.html create mode 100644 files/ja/web/css/shape/index.html create mode 100644 files/ja/web/css/shorthand_properties/index.html create mode 100644 files/ja/web/css/specificity/index.html create mode 100644 files/ja/web/css/specified_value/index.html create mode 100644 files/ja/web/css/string/index.html create mode 100644 files/ja/web/css/syntax/index.html create mode 100644 files/ja/web/css/tab-size/index.html create mode 100644 files/ja/web/css/table-layout/index.html create mode 100644 files/ja/web/css/text-align-last/index.html create mode 100644 files/ja/web/css/text-align/index.html create mode 100644 files/ja/web/css/text-combine-upright/index.html create mode 100644 files/ja/web/css/text-decoration-color/index.html create mode 100644 files/ja/web/css/text-decoration-line/index.html create mode 100644 files/ja/web/css/text-decoration-skip-ink/index.html create mode 100644 files/ja/web/css/text-decoration-skip/index.html create mode 100644 files/ja/web/css/text-decoration-style/index.html create mode 100644 files/ja/web/css/text-decoration/index.html create mode 100644 files/ja/web/css/text-emphasis-color/index.html create mode 100644 files/ja/web/css/text-emphasis-position/index.html create mode 100644 files/ja/web/css/text-emphasis-style/index.html create mode 100644 files/ja/web/css/text-emphasis/index.html create mode 100644 files/ja/web/css/text-indent/index.html create mode 100644 files/ja/web/css/text-justify/index.html create mode 100644 files/ja/web/css/text-orientation/index.html create mode 100644 files/ja/web/css/text-overflow/index.html create mode 100644 files/ja/web/css/text-rendering/index.html create mode 100644 files/ja/web/css/text-shadow/index.html create mode 100644 files/ja/web/css/text-size-adjust/index.html create mode 100644 files/ja/web/css/text-transform/index.html create mode 100644 files/ja/web/css/text-underline-offset/index.html create mode 100644 files/ja/web/css/time-percentage/index.html create mode 100644 files/ja/web/css/time/index.html create mode 100644 files/ja/web/css/tools/index.html create mode 100644 files/ja/web/css/top/index.html create mode 100644 files/ja/web/css/touch-action/index.html create mode 100644 files/ja/web/css/transform-box/index.html create mode 100644 files/ja/web/css/transform-function/index.html create mode 100644 files/ja/web/css/transform-function/matrix()/index.html create mode 100644 files/ja/web/css/transform-function/matrix3d()/index.html create mode 100644 files/ja/web/css/transform-function/perspective()/index.html create mode 100644 files/ja/web/css/transform-function/rotate()/index.html create mode 100644 files/ja/web/css/transform-function/rotate3d()/index.html create mode 100644 files/ja/web/css/transform-function/rotatex()/index.html create mode 100644 files/ja/web/css/transform-function/rotatey()/index.html create mode 100644 files/ja/web/css/transform-function/rotatez()/index.html create mode 100644 files/ja/web/css/transform-function/scale()/index.html create mode 100644 files/ja/web/css/transform-function/scalex()/index.html create mode 100644 files/ja/web/css/transform-function/scaley()/index.html create mode 100644 files/ja/web/css/transform-function/skew()/index.html create mode 100644 files/ja/web/css/transform-function/skewx()/index.html create mode 100644 files/ja/web/css/transform-function/skewy()/index.html create mode 100644 files/ja/web/css/transform-function/translate()/index.html create mode 100644 files/ja/web/css/transform-function/translate3d()/index.html create mode 100644 files/ja/web/css/transform-function/translatex/index.html create mode 100644 files/ja/web/css/transform-function/translatey()/index.html create mode 100644 files/ja/web/css/transform-function/translatez()/index.html create mode 100644 files/ja/web/css/transform-origin/index.html create mode 100644 files/ja/web/css/transform-style/index.html create mode 100644 files/ja/web/css/transform/index.html create mode 100644 files/ja/web/css/transition-delay/index.html create mode 100644 files/ja/web/css/transition-duration/index.html create mode 100644 files/ja/web/css/transition-property/index.html create mode 100644 files/ja/web/css/transition-timing-function/index.html create mode 100644 files/ja/web/css/transition/index.html create mode 100644 files/ja/web/css/translate/index.html create mode 100644 files/ja/web/css/type_selectors/index.html create mode 100644 files/ja/web/css/unicode-bidi/index.html create mode 100644 files/ja/web/css/universal_selectors/index.html create mode 100644 files/ja/web/css/unset/index.html create mode 100644 files/ja/web/css/url()/index.html create mode 100644 files/ja/web/css/url/index.html create mode 100644 files/ja/web/css/used_value/index.html create mode 100644 files/ja/web/css/user-modify/index.html create mode 100644 files/ja/web/css/user-select/index.html create mode 100644 files/ja/web/css/using_css_custom_properties/index.html create mode 100644 files/ja/web/css/value_definition_syntax/index.html create mode 100644 files/ja/web/css/var()/index.html create mode 100644 files/ja/web/css/vertical-align/index.html create mode 100644 files/ja/web/css/viewport_concepts/index.html create mode 100644 files/ja/web/css/visibility/index.html create mode 100644 files/ja/web/css/visual_formatting_model/index.html create mode 100644 files/ja/web/css/webkit_extensions/index.html create mode 100644 files/ja/web/css/white-space/index.html create mode 100644 files/ja/web/css/widows/index.html create mode 100644 files/ja/web/css/width/index.html create mode 100644 files/ja/web/css/will-change/index.html create mode 100644 files/ja/web/css/word-break/index.html create mode 100644 files/ja/web/css/word-spacing/index.html create mode 100644 files/ja/web/css/writing-mode/index.html create mode 100644 files/ja/web/css/z-index/index.html create mode 100644 files/ja/web/css/zoom/index.html (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html new file mode 100644 index 0000000000..0061706fe3 --- /dev/null +++ b/files/ja/web/css/--_star_/index.html @@ -0,0 +1,105 @@ +--- +title: 'カスタムプロパティ (--*): CSS 変数' +slug: Web/CSS/--* +tags: + - CSS + - CSS カスタムプロパティ + - Reference +translation_of: Web/CSS/--* +--- +
{{CSSRef}}
+ +

--example-name のように、頭に -- 接頭辞がつけられたプロパティはカスタムプロパティを表し、 {{cssxref("var")}} 関数を使用して他の宣言の中で使用することができる値を持ちます。

+ +

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

+ +

{{CSSInfo}}

+ +

構文

+ +
--somekeyword: left;
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+
+ +
+
<declaration-value>
+
シーケンスが許可されていないトークンを含んでいない限り、この値は 1 つ以上のトークンのシーケンスに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
+<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
+<div id="container">
+  <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
+</div>
+ +

CSS

+ +
:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #48ff32;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 500, 130)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.custom-property")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-binding/index.html b/files/ja/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..d79650ead6 --- /dev/null +++ b/files/ja/web/css/-moz-binding/index.html @@ -0,0 +1,68 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - CSS プロパティ + - 'CSS:Mozilla 拡張' + - Mozilla 拡張 + - Reference + - XBL + - XUL + - リファレンス + - 標準外 + - 非推奨 +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(57)}}
+ +

CSS の -moz-binding プロパティは、 Mozilla ベースのアプリケーションで XBL を DOM 要素に結び付けるために使用します。

+ +

{{cssinfo}}

+ +

構文

+ +
/* <url> 値 */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* グローバル値 */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

値

+ +
+
{{cssxref("<url>")}}
+
(フラグメント識別子を含む) XBL バインドのための URI
+
none
+
要素に XBL バインドを適用しない事を示すキーワード
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.-moz-binding")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-border-bottom-colors/index.html b/files/ja/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..9dce6086e2 --- /dev/null +++ b/files/ja/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,95 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - CSS Property + - CSS プロパティ + - 'CSS:Mozilla 拡張' + - Mozilla 拡張 + - Obsolete + - Reference + - 'recipe:css-property' + - 廃止 +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}
+ +

Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-border-bottom-colors プロパティは下辺の境界に色のリストを設定します。

+ +
/* 単一の <color> 値 */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* 複数の <color> 値 */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。

+ +

{{cssinfo}}

+ +

以下の場合は適用されません。

+ +
    +
  1. {{Cssxref("border-style")}} が dashed または dotted である場合
    2. +
  2. 表で border-collapse: collapse の場合
    3. +
+ +

構文

+ +

値

+ +

ホワイトスペースで区切られた色の値のリストを受け付けます。

+ +
+
<color>
+
境界の下辺におけるピクセルの線の色を指定します。 transparent も有効です。利用可能な単位は {{cssxref("<color>")}} 値を参照してください。
+
none
+
既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

仕様書

+ +

このプロパティはどの仕様書でも定義されていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-border-bottom-colors")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-border-left-colors/index.html b/files/ja/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..2ca80dbb53 --- /dev/null +++ b/files/ja/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,94 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - CSS プロパティ + - Mozilla 拡張 + - Non-standard + - Obsolete + - Reference + - 廃止 + - 標準外 +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +
{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}
+ +

Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-border-left-colors プロパティは左辺の境界に色のリストを設定します。

+ +
/* 単一の <color> 値 */
+-moz-border-left-colors: #f0f0f0;
+
+/* 複数の <color> 値 */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+
+ +

要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。

+ +

{{cssinfo}}

+ +

以下の場合は適用されません。

+ +
    +
  1. {{Cssxref("border-style")}} が dashed または dotted である場合
    2. +
  2. 表で border-collapse: collapse の場合
    3. +
+ +

構文

+ +

値

+ +

ホワイトスペースで区切られた色の値のリストを受け付けます。

+ +
+
<color>
+
境界の左辺におけるピクセルの線の色を指定します。 transparent も有効です。利用可能な単位は {{cssxref("<color>")}} 値を参照してください。
+
none
+
既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

仕様書

+ +

このプロパティはどの仕様書でも定義されていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-border-left-colors")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-border-right-colors/index.html b/files/ja/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..b14493e123 --- /dev/null +++ b/files/ja/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,98 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - CSS Property + - CSS プロパティ + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - Non-standard + - Obsolete + - Reference + - 'recipe:css-property' + - 廃止 + - 標準外 +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +
{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}
+ +

Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-border-right-colors プロパティは右辺の境界に色のリストを設定します。

+ +
/* Single <color> value */
+/* 単一の <color> 値 */
+-moz-border-right-colors: #f0f0f0;
+
+/* 複数の <color> 値 */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+
+ +

要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。

+ +

{{cssinfo}}

+ +

以下の場合は適用されません。

+ +
    +
  1. {{Cssxref("border-style")}} が dashed または dotted である場合
    2. +
  2. 表で border-collapse: collapse の場合
    3. +
+ +

構文

+ +

値

+ +

ホワイトスペースで区切られた色の値のリストを受け付けます。

+ +
+
<color>
+
境界の右辺におけるピクセルの線の色を指定します。 transparent も有効です。利用可能な単位は {{cssxref("<color>")}} 値を参照してください。
+
none
+
既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

仕様書

+ +

このプロパティはどの仕様書でも定義されていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-border-right-colors")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-border-top-colors/index.html b/files/ja/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..f19fbbc462 --- /dev/null +++ b/files/ja/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,96 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - CSS Property + - CSS プロパティ + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - Non-standard + - Obsolete + - Reference + - 'recipe:css-property' + - 標準外 +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +
{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}
+ +

Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-border-top-colors プロパティは上辺の境界に色のリストを設定します。

+ +
/* 単一の <color> 値 */
+-moz-border-top-colors: #f0f0f0;
+
+/* 複数の <color> 値 */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+
+ +

要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。

+ +

{{cssinfo}}

+ +

以下の場合は適用されません。

+ +
    +
  1. {{Cssxref("border-style")}} が dashed または dotted である場合
    2. +
  2. 表で border-collapse: collapse の場合
    3. +
+ +

構文

+ +

値

+ +

ホワイトスペースで区切られた色の値のリストを受け付けます。

+ +
+
<color>
+
境界の上辺におけるピクセルの線の色を指定します。 transparent も有効です。利用可能な単位は {{cssxref("<color>")}} 値を参照してください。
+
none
+
既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

仕様書

+ +

このプロパティはどの仕様書でも定義されていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-border-top-colors")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-box-ordinal-group/index.html b/files/ja/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..ac4851b66d --- /dev/null +++ b/files/ja/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,65 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Mozilla 拡張 + - Non-standard + - Reference + - フレックスボックス +translation_of: Web/CSS/box-ordinal-group +--- +

{{CSSRef}}{{warning("これは CSS フレックスボックスレイアウトモジュールの初期の草稿にあったプロパティであり、その後の草稿で置き換えられました。")}}

+ +

このプロパティの代わりに何を使用するべきかについての詳細情報は フレックスボックスをご覧ください。

+ +

概要

+ +

要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。

+ +

値

+ +

値はゼロより大きい整数でなければなりません。このプロパティの既定値は1です。

+ +

例

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/ja/web/css/-moz-context-properties/index.html b/files/ja/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..3ab18e2434 --- /dev/null +++ b/files/ja/web/css/-moz-context-properties/index.html @@ -0,0 +1,101 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +tags: + - '-moz-context-properties' + - CSS + - CSS Property + - 'CSS:Mozilla Extensions' + - Experimental + - Needs Privileges + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/-moz-context-properties +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-moz-context-properties プロパティは Firefox の特権モードで使用することができ、子に SVG 画像を持つ要素の指定されたプロパティの値を共有します。

+ +

ウェブページで (例えば {{htmlelement("img")}} 要素または背景画像として) SVG 画像を参照する場合、 SVG 画像は埋め込み要素 (そのコンテキスト) と協調して、画像が埋め込み要素に設定されたプロパティ値を採用することがあります。これを行うにためは、埋め込み要素は -moz-context-properties プロパティの値として画像に使用可能にするプロパティの一覧を示す必要があります。 context-fill 値などを使用して、これらのプロパティを使用するように画像に意思表示する必要があります。

+ +

構文

+ +
/* キーワード値 */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* グローバル値 */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+
+ +

値

+ +
+
fill
+
画像に設定された fill の値を埋め込まれた SVG に伝えます。
+
stroke
+
画像に設定された stroke の値を埋め込まれた SVG に伝えます。
+
fill-opacity
+
画像に設定された fill-opacity の値を埋め込まれた SVG に伝えます。
+
stroke-opacity
+
画像に設定された stoke-opacity の値を埋め込まれた SVG に伝えます。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

SVG 画像への塗りつぶしとストロークの公開

+ +

この例では、 <img> 要素を使用して埋め込まれた簡単な SVG を使用します。

+ +

以下のように、最初に埋め込み SVG に伝えたい値のプロパティを -moz-context-properties プロパティで埋め込む要素に指定する必要があります。

+ +
.img1 {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+  fill: lime;
+  stroke: purple;
+}
+ +

これを行うと、次のように SVG 画像は {{cssxref("fill")}} および {{cssxref("stroke")}} の値を使用することができるようになります。

+ +
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                       <rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+ +

ここで、画像の src に単純な SVG 画像を含む data URI を設定しました。内部の <rect> は、 <img> 要素の {{cssxref("fill")}} および {{cssxref("stroke")}} から fill および stroke の値を取り、これらの値の context-fill/context-stroke キーワードに設定して、 fill には SVG が最上位ウィンドウに単独で読み込まれた場合 (コンテンツの値を提供するコンテキストの要素がない場合) に使われる代替色 (red) を設定します。なお、色が SVG に直接設定され、コンテキストの色も設定された場合、コンテキストの色は直接設定された色を上書きします。

+ +
+

注: Github に動作するサンプルがあります。

+
+ +

仕様書

+ +

どの標準にも含まれていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-context-properties")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-float-edge/index.html b/files/ja/web/css/-moz-float-edge/index.html new file mode 100644 index 0000000000..c21d0d6965 --- /dev/null +++ b/files/ja/web/css/-moz-float-edge/index.html @@ -0,0 +1,90 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - CSS Property + - 'CSS:Mozilla Extensions' + - Layout + - NeedsCompatTable + - Non-standard + - 'recipe:css-property' +translation_of: Web/CSS/-moz-float-edge +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

非標準の -moz-float-edge CSS プロパティは要素の高さと幅のプロパティが margin 、border 、padding の厚さを含んでいるのかを指定します。

+ +
/* Keyword values */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Global values */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+
+ +

構文

+ +

値

+ +
+
border-box
+
高さと幅のプロパティがコンテンツ、padding および border を含むが、margin は含まない。
+
content-box
+
高さと幅のプロパティがコンテンツを含むが、padding 、border および margin は含まない。
+
margin-box
+
高さと幅のプロパティがコンテンツ、padding 、 border および margin を含む。
+
padding-box
+
高さと幅のプロパティがコンテンツと padding を含むが、border および margin は含まない。
+
+ +

形式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div class="box"> 
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div>
+ +

CSS

+ +
.box {
+  display: block;
+  height: 5px;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ +

このプロパティはどの CSS 標準でも定義されていません。

+ +

ブラウザの対応

+ + + +

{{Compat("css.properties.-moz-float-edge")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-force-broken-image-icon/index.html b/files/ja/web/css/-moz-force-broken-image-icon/index.html new file mode 100644 index 0000000000..4a52d9fbfa --- /dev/null +++ b/files/ja/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,67 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - NeedsCompatTable + - Non-standard + - Reference +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Mozillaの拡張CSSプロパティである -moz-force-broken-image-icon は、画像が壊れているときに表示されるイメージアイコンを、たとえ alt 属性を持っていたとしても、強制的に表示させるために使用されます。

+ +

{{cssinfo}}

+ +

構文

+ +

Values

+ +
+
{{cssxref("<integer>")}}
+
プロパティの値に 1 を指定した場合、その画像が {{HTMLElement("img", "alt", "#attr-alt")}} 属性を持っていたとしても、壊れたイメージアイコンが表示されます。0 を指定した場合、通常通り alt 属性のみが表示されます。
+
+ +
注: プロパティの値に 1 を指定した場合もなお、 alt 属性は壊れたイメージアイコンの隣に同時に表示されます。
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<img src='/broken/image/link.png' alt='Broken image link'>
+ +

CSS

+ +
img {
+  -moz-force-broken-image-icon: 1;
+  height: 100px;
+  width: 100px;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Example','125','125','/files/4619/broken%20image%20link.png') }}

+ +
注: -moz-force-broken-image-icon の値に 1 を指定した場合、その画像にwidthとheightを明示的に指定しない限り、壊れたイメージアイコンは表示されず、 alt 属性も非表示になります。
+ +

注記

+ + + +

仕様

+ +

どの仕様にも記載されていません。

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-orient/index.html b/files/ja/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..ddd5011f73 --- /dev/null +++ b/files/ja/web/css/-moz-orient/index.html @@ -0,0 +1,81 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +tags: + - CSS + - CSS プロパティ + - Mozilla 拡張 + - Non-standard + - Reference +translation_of: Web/CSS/-moz-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の -moz-orient プロパティは、適用される要素の向きを指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

-moz-orient プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +
+
inline
+
要素をテキストの軸と同じ方向に描画します。横書きモードでは水平方向に、縦書きモードでは垂直方向に描画します。
+
block
+
要素をテキストの軸と直交するように描画します。横書きモードでは垂直方向に、縦書きモードでは水平方向に描画します。
+
horizontal
+
要素が水平方向に描画される
+
vertical
+
要素が垂直方向に描画される
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p>
+  The following progress meter
+  is horizontal (the default):
+</p>
+<progress max="100" value="75"></progress>
+
+<p>
+ The following progress meter
+ is vertical:
+</p>
+<progress class="vert" max="100" value="75"></progress>
+ +

CSS

+ +
.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples","200","360")}}

+ +

仕様書

+ +

W3C に提出され、最初の反応は肯定的でしたが、このプロパティはまだ仕様書には含まれていません。今のところ、 Mozilla 独自の拡張 (つまり、 -moz-orient) です。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.-moz-orient")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-outline-radius-bottomleft/index.html b/files/ja/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..1e839df23f --- /dev/null +++ b/files/ja/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,76 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - CSS Property + - NeedsCompatTable + - NeedsContent + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Mozilla アプリケーションにおいて、 -moz-outline-radius-bottomleft は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左下の角を丸くするために使用することができます。

+ +

構文

+ +

-moz-outline-radius-bottomleft の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+ +

値

+ +
+
<length>
+
要素の下端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
+
<percentage>
+
要素の左下隅の丸めを定義する円の半径で、ボーダーボックスの下辺と左辺のパーセント値で指定します。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

アウトラインを丸める

+ +

これは Firefox 専用のプロパティなので、この例では Firefox 以外のブラウザーで表示している場合は、期待した効果が表示されません。

+ +

HTML

+ +
<p>Look at this paragraph's bottom-left corner.</p>
+ +

CSS

+ +
p {
+  margin: 10px;
+  border: solid cyan;
+  outline: dotted green;
+  -moz-outline-radius-bottomleft: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample("Rounding_a_outline")}}

+ +

仕様書

+ +

標準の一部ではありません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-outline-radius-bottomleft")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-outline-radius-bottomright/index.html b/files/ja/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..684044c104 --- /dev/null +++ b/files/ja/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,76 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - CSS Property + - NeedsCompatTable + - NeedsContent + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Mozilla アプリケーションにおいて、 -moz-outline-radius-bottomright は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の右下の角を丸くするために使用することができます。

+ +

構文

+ +

-moz-outline-radius-bottomright の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+ +

値

+ +
+
<length>
+
要素の下端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
+
<percentage>
+
要素の右下隅の丸めを定義する円の半径で、ボーダーボックスの下辺と右辺のパーセント値で指定します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<p>Look at this paragraph's bottom-right corner.</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomright: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +
+

注: 上記の例は、 Firefox 以外のブラウザーで表示させると、期待通りの効果が表示されません。

+
+ +

仕様書

+ +

標準の一部ではありません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-outline-radius-bottomright")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-outline-radius-topleft/index.html b/files/ja/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..7d7af0faa2 --- /dev/null +++ b/files/ja/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,74 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - CSS Property + - NeedsCompatTable + - NeedsContent + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Mozilla アプリケーションにおいて、 -moz-outline-radius-topleft は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左上の角を丸くするために使用することができます。

+ +

構文

+ +

-moz-outline-radius-topleft の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+ +

値

+ +
+
<length>
+
要素の上端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
+
<percentage>
+
要素の左上隅の丸めを定義する円の半径で、ボーダーボックスの上辺と左辺のパーセント値で指定します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

下記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。

+ +

HTML

+ +
<p>段落の左上の角を見てください。</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ +

標準の一部ではありません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-outline-radius-topleft")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-outline-radius-topright/index.html b/files/ja/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..7337f768c8 --- /dev/null +++ b/files/ja/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,76 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - CSS Property + - NeedsCompatTable + - NeedsContent + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/-moz-outline-radius-topright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Mozilla アプリケーションにおいて、 -moz-outline-radius-topright は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の⇀上の角を丸くするために使用することができます。

+ +

構文

+ +

-moz-outline-radius-topright の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+ +

値

+ +
+
<length>
+
要素の上端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
+
<percentage>
+
要素の右上隅の丸めを定義する円の半径で、ボーダーボックスの上辺と右辺のパーセント値で指定します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<p>段落の右上の角を見てください。</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topright: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +
+

上記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。

+
+ +

仕様書

+ +

標準の一部ではありません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-outline-radius-topright")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-moz-outline-radius/index.html b/files/ja/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..57fc74d787 --- /dev/null +++ b/files/ja/web/css/-moz-outline-radius/index.html @@ -0,0 +1,105 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - '-moz-outline-radius' + - '-moz-outline-radius-bottomleft' + - '-moz-outline-radius-bottomright' + - '-moz-outline-radius-topleft' + - '-moz-outline-radius-topright' + - CSS + - CSS プロパティ + - Mozilla 拡張 + - Non-standard + - Reference +translation_of: Web/CSS/-moz-outline-radius +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-outline-radius プロパティは、要素の輪郭線 ({{cssxref("outline")}}) の角を丸くするために使用することができます。

+ +
/* 1つの値 */
+-moz-outline-radius: 25px;
+
+/* 2つの値 */
+-moz-outline-radius: 25px 1em;
+
+/* 3つの値 */
+-moz-outline-radius: 25px 1em 12%;
+
+/* 4つの値 */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* グローバル値 */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+
+ +

このプロパティは、一括指定であり、4つのプロパティ {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}}, {{cssxref("-moz-outline-radius-bottomleft")}} を設定します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
楕円形の輪郭線や <percentage> の値は、 {{cssxref("border-radius")}} で説明されている構文に従います。
+ +

1～4つの <outline-radius> 値で、次のうちの一つを表します。

+ +
+
{{cssxref("<length>")}}
+
取りうる値については {{cssxref("<length>")}} をご覧ください。
+
{{cssxref("<percentage>")}}
+
{{cssxref("<percentage>")}}。詳しくは {{cssxref("border-radius")}} を参照してください。
+
+ + + +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p>This element has a rounded outline!</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius: 12% 1em 25px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

注: 上記の例は、 Firefox 以外のブラウザーで表示させると、期待通りの効果が表示されません。

+ +

メモ

+ + + +

仕様書

+ +

このプロパティはどの CSS 標準で定義されていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-moz-outline-radius")}}

diff --git a/files/ja/web/css/-moz-stack-sizing/index.html b/files/ja/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..ba09f8271f --- /dev/null +++ b/files/ja/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - CSS Property + - NeedsCompatTable + - Non-standard + - Reference + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.1")}}
+ +

-moz-stack-sizing は拡張された CSS プロパティです。通常、{{XULElem("stack")}} はすべての子要素が完全に表示できるように自身のサイズを変更します。例えば、スタックの子要素を右側に離すように移動するとスタックは幅を広げ、子要素は表示され続けます。

+ +
/* キーワード値 */
+-moz-stack-sizing: auto;
+-moz-stack-sizing: ignore;
+
+/* グローバル値 */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+
+ +

スタックが子要素を収容しようと自動的にリサイズをしないようにするには、子要素の-moz-stack-sizing に無視する (ignore) を設定します。プロパティはスタック自身でなく、スタックの子要素に設定します。これにより特定の子要素を他の要素と区別して無視できます。

+ +

メモ: Gecko の以前のバージョンではスタック要素に非常に大きい負の下と右のマージンを、サイズを無視したくない子要素に同じように非常に大きな下と右のマージンを設定することで問題を回避することができました。(この問題はスタックの上や左に移動する子要素には影響を与えません。)

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
stretch-to-fit
+
子要素がスタックのサイズに影響する。
+
ignore
+
スタックはサイズを計算する時に、この子要素を考慮しない。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+
+ +

関連情報

+ +

{{bug("346189")}}

diff --git a/files/ja/web/css/-moz-user-input/index.html b/files/ja/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..76816cb4e3 --- /dev/null +++ b/files/ja/web/css/-moz-user-input/index.html @@ -0,0 +1,73 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - CSS Property + - Deprecated + - Mozilla 拡張 + - Non-standard + - Reference +translation_of: Web/CSS/-moz-user-input +--- +
{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(60)}}
+ +

Mozilla アプリケーションでは、 -moz-user-input はある要素がユーザの入力を受け付けるかどうかを決定します。

+ +
/* キーワード値 */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* グローバル値 */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+
+ +

{{HTMLElement("textarea")}} のようなユーザーからの入力を通常受け付ける要素では -moz-user-input の初期値は enabled です。

+ +
+

メモ: -moz-user-input は、 CSS 3 {{cssxref("user-input")}} プロパティの先行実装案の一つでしたが、これはまだ (実装を要求する) 勧告候補に達していません。類似のプロパティ user-focus が CSS3 UI 仕様の前身であった初期の草稿 で提案されましたが、ワーキンググループによって却下されました。

+
+ +

{{CSSInfo}}

+ +

構文

+ +

値

+ +
+
none
+
要素はユーザーからの入力に反応せず {{CSSxRef(":active")}} にならない。
+
enabled
+
要素はユーザーからの入力を受け付ける。テキストボックスではこれが標準の動作。この値は Firefox 60 以降は対応していませんので注意してください ({{bug(1405087)}})。
+
disabled
+
要素はユーザーからの入力を受け付けない。しかし、これは {{XULAttr("disabled")}} を true にするのとは等しくなく、要素は普通に (無効にならずに) 描画される。この値は Firefox 60 以降でサポートしませんので注意してください ({{bug(1405087)}})。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +
input.example {
+  /* ユーザーはテキストの選択はできますが変更はできません。 */
+  -moz-user-input: disabled;
+}
+
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.-moz-user-input")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-ms-accelerator/index.html b/files/ja/web/css/-ms-accelerator/index.html new file mode 100644 index 0000000000..a057272e2e --- /dev/null +++ b/files/ja/web/css/-ms-accelerator/index.html @@ -0,0 +1,76 @@ +--- +title: '-ms-accelerator' +slug: Web/CSS/-ms-accelerator +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - リファレンス +translation_of: Archive/Web/CSS/-ms-accelerator +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

CSS の -ms-accelerator プロパティは、オブジェクトがキーボードショートカットを表しているかどうかを示す文字列を設定したり受け取ったりする Microsoft 拡張です。

+ +

{{cssinfo}}

+ +

構文

+ +
/* オブジェクトはキーボードショートカットではない (既定値) */
+-ms-accelerator: false
+/* オブジェクトはキーボードショートカットである */
+-ms-accelerator: true
+
+ +

値

+ +
+
false
+
+

オブジェクトはキーボードショートカットではありません。

+
+
true
+
+

オブジェクトはキーボードショートカットです。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

この例は {{HTMLElement("u")}} 要素で -ms-accelerator 属性を使用して、 {{HTMLElement("label")}} 要素内の "N" がキーボードショートカットであると指定しています。ユーザーの画面のプロパティでオプション「Alt キーを押すまでキーボードショートカットを隠す」が有効になっていると、 "N" はユーザーが Alt キーを押すまで下線が引かれません。 Alt + N が押されると、 {{htmlattrxref("accessKey","input")}} 属性の値を "N" に定義した {{HTMLElement("input")}} 要素がフォーカスを受け取ります。

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Accelerator</title>
+  </head>
+  <body>
+    <label for="oName"><u style="-ms-accelerator: true; accelerator: true">N</u>ame: </label>
+    <input type="text"
+      id="oName"
+      size="25"
+      accesskey="N"
+      value="Your name here" />
+  </body>
+</html>
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

このプロパティは Windows 2000 以降で対応しています。ユーザーがメニュー項目やコントロールのナビゲーションのインジケーターを Alt キーが押されるまで隠すことができます。

+ +

アクセスキーは、オブジェクトを選択するためのキーボードショートカットとして使われる単一の文字です。ユーザーは Alt キーを押し、押しながらオブジェクトへ入力フォーカスを移動する文字を押すと、オブジェクトに関連付けられた既定のイベントを呼び出します。

+ +

Internet Explorer 8 (IE8) では、 -ms-accelerator 属性は CSS の拡張機能であり、 IE8 標準モードで accelerator の別名として使用することができます。

diff --git a/files/ja/web/css/-ms-block-progression/index.html b/files/ja/web/css/-ms-block-progression/index.html new file mode 100644 index 0000000000..ba8a3cd37b --- /dev/null +++ b/files/ja/web/css/-ms-block-progression/index.html @@ -0,0 +1,51 @@ +--- +title: '-ms-block-progression' +slug: Web/CSS/-ms-block-progression +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - Reference + - block-progression +translation_of: Archive/Web/CSS/-ms-block-progression +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

CSS の -ms-block-progression プロパティは、ブロックの進行とレイアウト方向を指定するための Microsoft 拡張です。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
tb
+
既定値。上から下へのブロックの流れです。レイアウトは水平です。
+
rl
+
右から左へのブロックの流れです。レイアウトは垂直です。
+
bt
+
下から上へのブロックの流れです。レイアウトは水平です。
+
rl
+
左から右へのブロックの流れです。レイアウトは垂直です。
+
+ +

形式文法

+ +
  {{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

垂直のレイアウトでは、文字の行が時計方向に90°回転します。画像は回転しませんが、表は回転します。垂直方向のボックスレイアウトは反対の水平方向のレイアウトになります。 width, height, top, bottom, right, left はテキストと一緒に回転しません。

+ +

一度に同時に一つのブロックの進行のみが有効です。これらの値は組み合わせることができません。

+ +

このプロパティは CSS3 テキストレイアウトモジュールの block-progression プロパティに基づいています。

diff --git a/files/ja/web/css/-ms-content-zoom-chaining/index.html b/files/ja/web/css/-ms-content-zoom-chaining/index.html new file mode 100644 index 0000000000..1b1220ec7b --- /dev/null +++ b/files/ja/web/css/-ms-content-zoom-chaining/index.html @@ -0,0 +1,48 @@ +--- +title: '-ms-content-zoom-chaining' +slug: Web/CSS/-ms-content-zoom-chaining +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - Reference + - 'recipe:css-property' + - リファレンス +translation_of: Archive/Web/CSS/-ms-content-zoom-chaining +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

-ms-content-zoom-chaining は CSS の Microsoft 拡張プロパティで、ユーザーがページの操作中にズームの限界に当たった時に起こるズームの振る舞いを指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
初期値です。ユーザーがページの操作中にズームの限界に当たった時に、跳ね返る効果が表示されます。
+
chained
+
ユーザーがページの操作中にズームの限界に当たった時に、直近のズーム可能な親要素がズームし始めます。跳ね返る効果は表示されません。
+
+ +

形式文法

+ +
  {{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

このプロパティはズームできない要素には効果がありません。ズーム可能な要素については、 {{CSSXref("-ms-content-zooming")}} をご覧ください。

+ +

Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。

+ +

このプロパティは Windows 8 以降でのみ対応しています。

diff --git a/files/ja/web/css/-ms-content-zoom-limit-max/index.html b/files/ja/web/css/-ms-content-zoom-limit-max/index.html new file mode 100644 index 0000000000..964f6c4085 --- /dev/null +++ b/files/ja/web/css/-ms-content-zoom-limit-max/index.html @@ -0,0 +1,48 @@ +--- +title: '-ms-content-zoom-limit-max' +slug: Web/CSS/-ms-content-zoom-limit-max +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - Reference + - 'recipe:css-property' + - リファレンス +translation_of: Archive/Web/CSS/-ms-content-zoom-limit-max +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

-ms-content-zoom-limit-max は CSS の Microsoft 拡張プロパティで、選択された要素の最大ズーム率を指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
{{cssxref("percentage")}}
+
+

最大ズーム率です。

+
+
+ +

形式文法

+ +
  {{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

このプロパティは、 msContentZoomFactor プロパティの値と同様にタッチによるズームを制限を設定します。このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。

+ +

Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。

+ +

このプロパティは Windows 8 以降でのみ対応しています。

diff --git a/files/ja/web/css/-ms-content-zoom-limit-min/index.html b/files/ja/web/css/-ms-content-zoom-limit-min/index.html new file mode 100644 index 0000000000..080290a948 --- /dev/null +++ b/files/ja/web/css/-ms-content-zoom-limit-min/index.html @@ -0,0 +1,47 @@ +--- +title: '-ms-content-zoom-limit-min' +slug: Web/CSS/-ms-content-zoom-limit-min +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Archive/Web/CSS/-ms-content-zoom-limit-min +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

-ms-content-zoom-limit-min は CSS の Microsoft 拡張プロパティで、最小ズーム率を指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
{{cssxref("percentage")}}
+
+

最小ズーム率です。

+
+
+ +

形式文法

+ +
  {{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

このプロパティは、 msContentZoomFactor プロパティの値と同様にタッチによるズームを制限を設定します。このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。

+ +

Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。

+ +

このプロパティは Windows 8 以降でのみ対応しています。

diff --git a/files/ja/web/css/-ms-content-zoom-limit/index.html b/files/ja/web/css/-ms-content-zoom-limit/index.html new file mode 100644 index 0000000000..25a3b8c8d4 --- /dev/null +++ b/files/ja/web/css/-ms-content-zoom-limit/index.html @@ -0,0 +1,48 @@ +--- +title: '-ms-content-zoom-limit' +slug: Web/CSS/-ms-content-zoom-limit +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - リファレンス +translation_of: Archive/Web/CSS/-ms-content-zoom-limit +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

CSS の -ms-content-zoom-limit 一括指定プロパティは、 {{CSSXref("-ms-content-zoom-limit-min")}} 及び {{CSSXref("-ms-content-zoom-limit-max")}} プロパティのための値を指定する Microsoft 拡張です。

+ +

{{cssinfo}}

+ +

構文

+ +

-ms-content-zoom-limit 一括指定プロパティは、以下のコンテンツズーム制限の値の1つ又は両方を、この順序で、空白で区切って指定します。

+ +

値

+ +
+
-ms-content-zoom-limit-min
+
{{CSSXref("-ms-content-zoom-limit-min")}} プロパティの値です。
+
-ms-content-zoom-limit-max
+
{{CSSXref("-ms-content-zoom-limit-max")}} プロパティの値です。
+
+ +

形式文法

+ +
  {{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。

+ +

Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。

+ +

このプロパティは Windows 8 以降でのみ対応しています。

diff --git a/files/ja/web/css/-ms-content-zoom-snap/index.html b/files/ja/web/css/-ms-content-zoom-snap/index.html new file mode 100644 index 0000000000..edbc58c33a --- /dev/null +++ b/files/ja/web/css/-ms-content-zoom-snap/index.html @@ -0,0 +1,48 @@ +--- +title: '-ms-content-zoom-snap' +slug: Web/CSS/-ms-content-zoom-snap +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - リファレンス +translation_of: Archive/Web/CSS/-ms-content-zoom-snap +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

CSS の -ms-content-zoom-snap 一括指定プロパティは、 {{CSSXref("-ms-content-zoom-snap-type")}} 及び {{CSSXref("-ms-content-zoom-snap-points")}} プロパティのための値を指定する Microsoft 拡張です。

+ +

{{cssinfo}}

+ +

構文

+ +

-ms-content-zoom-snap 一括指定プロパティは、以下のコンテンツズーム合わせの値の1つ又は両方を、この順序で、空白で区切って指定します。

+ +

値

+ +
+
-ms-content-zoom-snap-type
+
{{CSSXref("-ms-content-zoom-snap-type")}} プロパティの値です。
+
-ms-content-zoom-snap-points
+
{{CSSXref("-ms-content-zoom-snap-points")}} プロパティの値です。
+
+ +

形式文法

+ +
  {{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。

+ +

Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。

+ +

このプロパティは Windows 8 以降でのみ対応しています。

diff --git a/files/ja/web/css/-ms-content-zooming/index.html b/files/ja/web/css/-ms-content-zooming/index.html new file mode 100644 index 0000000000..4dab069127 --- /dev/null +++ b/files/ja/web/css/-ms-content-zooming/index.html @@ -0,0 +1,49 @@ +--- +title: '-ms-content-zooming' +slug: Web/CSS/-ms-content-zooming +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Archive/Web/CSS/-ms-content-zooming +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

-ms-content-zooming は CSS の Microsoft 拡張プロパティで、ズームを有効にするかどうかを指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
最上位の要素を除くすべての要素の初期値です。要素はズームできません。
+
zoom
+
最上位の要素の初期値です。要素はズーム可能です。
+
+ +

形式文法

+ +
  {{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

このプロパティは、 X 軸と Y 軸の両方であふれが許可されていないと効果がありません。

+ +

既定では、ズームが可能な要素はユーザーがピンチズームによってズームすることができます。最上位の要素はズームが有効であれば、ダブルタップでもズームすることができます。

+ +

Windows 8.1 以降では、このプロパティはタッチパッド操作でも対応しています。

+ +

このプロパティは Windows 8 以降でのみ対応しています。

diff --git a/files/ja/web/css/-ms-high-contrast/index.html b/files/ja/web/css/-ms-high-contrast/index.html new file mode 100644 index 0000000000..f98c01bc68 --- /dev/null +++ b/files/ja/web/css/-ms-high-contrast/index.html @@ -0,0 +1,94 @@ +--- +title: '-ms-high-contrast' +slug: Web/CSS/-ms-high-contrast +tags: + - '@media' + - CSS + - Microsoft 拡張 + - Reference + - メディア特性 + - 標準外 +translation_of: Web/CSS/@media/-ms-high-contrast +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の -ms-high-contrast メディア特性は Microsoft 拡張で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。

+ +

高コントラストモードとは、前景色と背景色をユーザーが指定したテーマに動的に置き換えることで、コンテンツを可能な限り見やすくすることを優先した表示モードです。ウェブコンテンツの場合、テーマカラーはコンテンツタイプに対応付けられます。

+ +

このメディア特性はビットマップメディア型に適用されます。 min/max 接頭辞は受け付けません。

+ +

構文

+ +

-ms-high-contrast メディア特性は以下の値のうちの一つで指定します。

+ +

値

+ +
+
none {{Deprecated_Inline}}
+
...
+ Microsoft Edge 18 で対応がなくなりました。
+
active
+
+

配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。

+
+
black-on-white
+
+

配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。

+
+
white-on-black
+
+

配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。

+
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。

+ +
@media screen and (-ms-high-contrast: active) {
+  /* すべての高コントラストの整形規則 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+ +

アクセシビリティの考慮事項

+ +

テーマ

+ +

高コントラストモードのテーマカラーは、非推奨となったの CSS2 システムカラーの限られたサブセットに由来しています。利用可能な色のキーワードは以下の通りです。

+ + + +

高コントラストモードのテーマは動的なので、他の CSS カラー値の代わりにこれらのカラーキーワードを使用してください。これにより、コンテンツが常に認識できるようになります。

+ +

コンテンツ

+ +

可能な限り、 CSS2 システムカラーのキーワードを使用してコンテンツを変更するよりも、 HTML マークアップを更新することをお勧めします。これは、コンテンツをより予測しやすくするのに役立ちます。

+ +

仕様書

+ +

何れかの仕様書の一部ではありません。

+ +

注釈

+ +

Microsoft Edge 18 で、 -ms-high-contrast: none は対応がなくなりました。 Microsoft Edge バージョン18以降では、代わりに forced-colors メディア特性が使用される予定ですが、 forced-colors メディア特性の仕様は現在も作業中です。

+ +

-ms-high-contrast メディア特性は、 {{CSSxRef("-ms-high-contrast-adjust")}} プロパティと共に動作します。

+ +

-ms-high-contrast メディア特性は Windows 8 で導入されました。

diff --git a/files/ja/web/css/-ms-scrollbar-face-color/index.html b/files/ja/web/css/-ms-scrollbar-face-color/index.html new file mode 100644 index 0000000000..ceac159737 --- /dev/null +++ b/files/ja/web/css/-ms-scrollbar-face-color/index.html @@ -0,0 +1,93 @@ +--- +title: '-ms-scrollbar-face-color' +slug: Web/CSS/-ms-scrollbar-face-color +tags: + - CSS + - CSS プロパティ + - 'CSS:Microsoft 拡張' + - Deprecated + - Microsoft 拡張 + - Non-standard + - Reference + - 標準外 + - 非推奨 +translation_of: Archive/Web/CSS/-ms-scrollbar-face-color +--- +
{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
+ +

CSS の -ms-scrollbar-face-color プロパティは Microsoft 拡張で、スクロールバーのスクロールボックスおよびスクロール矢印の色を指定します。

+ +

{{CSSInfo}}

+ +

構文

+ +

値

+ +
+
{{CSSxRef("<color>")}}
+
+

スクロールボックスおよびスクロール矢印の色です。

+
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

この例では、 -ms-scrollbar-face-color および {{cssxref("-ms-scrollbar-arrow-color")}} を使用して、青いスクロールボックスと矢印を持ったスクロールバー、および緑のスクロールボックスおよび矢印を持ったスクロールバーを表示します。

+ +
div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+
+ +
<body>
+  <div class="blueScrollBox">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+  <div class="greenScrollBox">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+</body>
+
+ +

{{EmbedLiveSample("Examples")}}

+ +

結果はこの画像の通りです。

+ +

Image for -ms-scrollbar-face-color example

+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-ms-scrollbar-face-color")}}

+ +

注釈

+ +

Windows Internet Explorer 8+ 以降で対応しています。 -ms-scrollbar-face-color 属性は CSS への拡張で、 IE8 標準モードでは scrollbar-face-color の別名として使用することができます。

+ +

スクロールボックスとは、スクロールバー内の矩形のボックスで、上下または左右に移動することで、画面上のコンテンツの位置を変更することができます。スクロール矢印とは、スクロールバーの端に位置し、矢印が描かれた矩形のボタンで、画面上のコンテンツを上下または左右に少しだけ動かすためのものです。

+ +

このプロパティはスクロールバーを表示する要素に適用されます。 CSS は {{CSSxRef("overflow")}} プロパティによってすべてのオブジェクトでスクロールが有効になります。

diff --git a/files/ja/web/css/-ms-scrollbar-highlight-color/index.html b/files/ja/web/css/-ms-scrollbar-highlight-color/index.html new file mode 100644 index 0000000000..eb03886c66 --- /dev/null +++ b/files/ja/web/css/-ms-scrollbar-highlight-color/index.html @@ -0,0 +1,95 @@ +--- +title: '-ms-scrollbar-highlight-color' +slug: Web/CSS/-ms-scrollbar-highlight-color +tags: + - CSS + - CSS プロパティ + - Microsoft 拡張 + - Non-standard + - Obsolete + - Reference + - 廃止 + - 標準外 +translation_of: Archive/Web/CSS/-ms-scrollbar-highlight-color +--- +
{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header}}
+ +

CSS の -ms-scrollbar-highlight-color プロパティは Microsoft 拡張で、スクロールバーのスライダートレイ、スクロールボックスの上辺と左辺、スクロール矢印の色を指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
{{cssxref("<color>")}}
+
+

スクロールバーのスライダートレイ、スクロールボックスの上辺と左辺、スクロール矢印の色です。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

この例では、 -ms-scrollbar-highlight-color, {{CSSXref("-ms-scrollbar-face-color")}}, {{CSSXref("-ms-scrollbar-arrow-color")}} を使用して、異なる色のスクロールバーを持った二つの {{HTMLElement("div")}} オブジェクトを生成します。

+ +
div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}
+ +
<body>
+  <div class="blueScroll">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+  <div class="redScroll">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+</body>
+ +

結果はこの画像の通りです。

+ +

Image for -ms-scrollbar-highlight-color example

+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.-ms-scrollbar-highlight-color")}}

+ +

注釈

+ +

Windows Internet Explorer 8+ 以降で対応しています。 -ms-scrollbar-highlight-color 属性は CSS への拡張で、 IE8 標準モードでは scrollbar-highlight-color の別名として使用することができます。

+ +

スクロールボックスとは、スクロールバー内の矩形のボックスで、上下または左右に移動することで、画面上のコンテンツの位置を変更することができます。スクロール矢印とは、スクロールバーの端に位置し、矢印が描かれた矩形のボタンで、画面上のコンテンツを上下または左右に少しだけ動かすためのものです。

+ +

このプロパティはスクロールバーを表示する要素に適用されます。 CSS は {{CSSXref("overflow")}} プロパティによってすべてのオブジェクトでスクロールが有効になります。

diff --git a/files/ja/web/css/-ms-wrap-margin/index.html b/files/ja/web/css/-ms-wrap-margin/index.html new file mode 100644 index 0000000000..af3add1678 --- /dev/null +++ b/files/ja/web/css/-ms-wrap-margin/index.html @@ -0,0 +1,42 @@ +--- +title: '-ms-wrap-margin' +slug: Web/CSS/-ms-wrap-margin +tags: + - CSS + - CSS プロパティ + - 'CSS:Microsoft 拡張' + - Microsoft 拡張 + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Archive/Web/CSS/-ms-wrap-margin +--- +
{{CSSRef}}{{non-standard_header}}
+ +

-ms-wrap-margin は CSS のプロパティで Microsoft 拡張で、他のシェイプからの内部の折り返し形状をずらすマージンを指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
{{cssxref("<length>")}}
+
+

マージンの寸法、負ではない値。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

注釈

+ +

-ms-wrap-margin プロパティで生成されたオフセットは、除外の外側からのオフセットです。このプロパティはあらゆる対応している長さの値を設定できます。

diff --git a/files/ja/web/css/-webkit-line-clamp/index.html b/files/ja/web/css/-webkit-line-clamp/index.html new file mode 100644 index 0000000000..8e52755eff --- /dev/null +++ b/files/ja/web/css/-webkit-line-clamp/index.html @@ -0,0 +1,101 @@ +--- +title: '-webkit-line-clamp' +slug: Web/CSS/-webkit-line-clamp +tags: + - '-webkit-line-clamp' + - CSS + - CSS Property +translation_of: Web/CSS/-webkit-line-clamp +--- +
{{CSSRef}}
+ +

-webkit-line-clamp CSS プロパティは {{Glossary("block container")}} のコンテンツを指定した行数に制限することができます。

+ +

{{cssxref("display")}} プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ {{cssxref("-webkit-box-orient")}} プロパティに vertical が設定されている組み合わせのときのみ使用できます。

+ +

ほとんどの場合、 {{cssxref("overflow")}} に hidden を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。

+ +

アンカー要素に適用したとき、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。

+ +
+

メモ: このプロパティは元々WebKitブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。

+
+ +

文法

+ +
/* Keyword value */
+-webkit-line-clamp: none;
+
+/* <integer> values */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* Global values */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+
+ +
+
none
+
コンテンツの行数を制限しません。
+
{{cssxref("integer")}}
+
コンテンツを制限する行数を指定します。0より大きい値でなければなりません。
+
+ +

例

+ +

HTML

+ +
<p>
+  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
+  An ellipsis will be shown at the point where the text is clamped.
+</p>
+ +

CSS

+ +
p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+ +

Result

+ +

{{EmbedLiveSample("例", "100%", "100")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}Initial definition
+ +

{{cssinfo}}

+ +

ブラウザ互換性

+ + + +

{{Compat("css.properties.-webkit-line-clamp")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-overflow-scrolling/index.html b/files/ja/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..71ce00aefd --- /dev/null +++ b/files/ja/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,89 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - CSS プロパティ + - Reference + - WebKit 拡張 + - リファレンス + - 標準外 +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}} {{Non-standard_header}}
+ +

-webkit-overflow-scrolling は CSS のプロパティは、指定された要素で惰性付き (momentum-based) のスクロールを使用するかどうかを制御します。

+ +

{{cssinfo}}

+ +

値

+ +
+
auto
+
「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。
+
touch
+
惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div class="scroll-touch">
+  <p>
+    This paragraph has momentum scrolling
+  </p>
+</div>
+<div class="scroll-auto">
+  <p>
+    This paragraph does not.
+  </p>
+</div>
+ +

CSS

+ +
div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ +

仕様書では定義されていません。 Apple には Safari CSS Reference に説明があります。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-print-color-adjust/index.html b/files/ja/web/css/-webkit-print-color-adjust/index.html new file mode 100644 index 0000000000..d2a39762fe --- /dev/null +++ b/files/ja/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,64 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - CSS Property + - Layout + - Non-standard + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_Header}}
+ +

-webkit-print-color-adjust CSSプロパティは、プリント時に背景色・背景画像の表示を強制できるようにする、WebKitブラウザ上で使用できる非標準のCSSプロパティです。

+ +
/* キーワード値 */
+-webkit-print-color-adjust: economy;
+-webkit-print-color-adjust: exact;
+
+/* グローバル値 */
+-webkit-print-color-adjust: inherit;
+-webkit-print-color-adjust: initial;
+-webkit-print-color-adjust: unset;
+
+ +

構文

+ +

The -webkit-print-color-adjust 以下のいずれかの値を持ちます。

+ +

値

+ +
+
economy
+
初期値です。背景色・背景画像はユーザーが明示的にブラウザの設定で許可した場合のみプリントされます。
+
exact
+
この値が適用された要素の背景色・背景画像を強制的にプリントします。ユーザーのプリント設定を上書きます。
+
+ +

例

+ +
/* 黒地に白文字でプリントする */
+article {
+  -webkit-print-color-adjust: exact;
+  background: #222;
+  color: #eee;
+}
+ +

仕様書

+ +

Not part of any specification yet, though there is a proposal in the CSSWG wiki to standardize it.

+ +

ブラウザー実装状況

+ + + +

{{Compat("css.properties.-webkit-print-color-adjust")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-tap-highlight-color/index.html b/files/ja/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..dedb683d9d --- /dev/null +++ b/files/ja/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,40 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +tags: + - CSS + - CSS プロパティ + - Reference + - WebKit 拡張 + - 標準外 +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

-webkit-tap-highlight-color は CSS の標準外のプロパティで、リンクがタップされている間に表示される強調色を設定します。強調は、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示します。

+ +
-webkit-tap-highlight-color: red;
+-webkit-tap-highlight-color: transparent; /* 強調をなくす */
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +

A {{Cssxref("color value")}}.

+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ +

何れかの仕様書の一部ではありません。 Apple では Safari Web Content Guide での説明があります。

+ +

ブラウザーの対応

+ +

WebKit/Safari, Blink/Chrome, 一部のバージョンの Internet Explorer と Microsoft Edge が対応しています。

diff --git a/files/ja/web/css/-webkit-text-fill-color/index.html b/files/ja/web/css/-webkit-text-fill-color/index.html new file mode 100644 index 0000000000..bf72c45332 --- /dev/null +++ b/files/ja/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,98 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +translation_of: Web/CSS/-webkit-text-fill-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-text-fill-color はCSSのプロパティで、テキストの文字の色を示します。このプロパティが設定されていない場合、{{cssxref("color")}}プロパティの値が使用されます。

+ +
/* <color> 値 */
+-webkit-text-fill-color: red;
+-webkit-text-fill-color: #000000;
+-webkit-text-fill-color: rgb(100, 200, 0);
+
+/* グローバル値 */
+-webkit-text-fill-color: inherit;
+-webkit-text-fill-color: initial;
+-webkit-text-fill-color: unset;
+
+ +

{{CSSInfo}}

+ +

構文

+ +

値

+ +
+
<color>
+
文字表面の塗りつぶし色。
+
+ +

形式構文

+ +
{{csssyntax}}
+ +

例

+ +

色を変える

+ +

CSS

+ +
p {
+  margin: 0;
+  font-size: 3em;
+  -webkit-text-fill-color: green;
+}
+
+ +

HTML

+ +
<p>This text is green.</p>
+
+ +

結果

+ +

{{EmbedLiveSample("Changing_the_fill_color", "380px", "60px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書備考状態
{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
+ '-webkit-text-fill-color' in that document.		標準外で非公式の文書化初回文章化
+ +

ブラウザの互換性

+ + + +

{{Compat("css.properties.-webkit-text-fill-color")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.html b/files/ja/web/css/-webkit-text-stroke-color/index.html new file mode 100644 index 0000000000..629533528e --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,110 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - WebKit 拡張 + - 標準外 +translation_of: Web/CSS/-webkit-text-stroke-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-text-stroke-color は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の色を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。

+ +
/* <color> 値 */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* グローバル値 */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<color>
+
角の色。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML コンテンツ

+ +
<p>Text with stroke</p>
+<input type="color" value="#ff0000">
+ +

CSS コンテンツ

+ +
p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
+}
+
+ + + +

{{EmbedLiveSample("Example", "500px", "100px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
+ 文書内の '-webkit-text-stroke-color'		標準外で非公式の文書化初回文書化
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-webkit-text-stroke-color")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.html b/files/ja/web/css/-webkit-text-stroke-width/index.html new file mode 100644 index 0000000000..4c76360a01 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,121 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - WebKit + - WebKit 拡張 + - 標準外 +translation_of: Web/CSS/-webkit-text-stroke-width +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-text-stroke-width は CSS のプロパティで、テキストの角の太さを指定します。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+-webkit-text-stroke-width: thin;
+-webkit-text-stroke-width: medium;
+-webkit-text-stroke-width: thick;
+
+/* <length> 値 */
+-webkit-text-stroke-width: 2px;
+-webkit-text-stroke-width: 0.1em;
+-webkit-text-stroke-width: 1mm;
+-webkit-text-stroke-width: 5pt;
+
+/* グローバル値 */
+-webkit-text-stroke-width: inherit;
+-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: unset;
+
+ +

値

+ +
+
<line-width>
+
角の太さ。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS コンテンツ

+ +
p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-color: red;
+}
+
+#thin {
+  -webkit-text-stroke-width: thin;
+}
+
+#medium {
+  -webkit-text-stroke-width: 3px;
+}
+
+#thick {
+  -webkit-text-stroke-width: 1.5mm;
+}
+
+ +

HTML コンテンツ

+ +
<p id="thin">Thin stroke</p>
+<p id="medium">Medium stroke</p>
+<p id="thick">Thick stroke</p>
+
+ +

{{EmbedLiveSample("Example", "450px", "230px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}初回標準化
Safari CSS Reference
+ 文書内の '-webkit-text-stroke-width'		標準外で非公式の文書化初回文書化
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-webkit-text-stroke-width")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/-webkit-touch-callout/index.html b/files/ja/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..b5629e728c --- /dev/null +++ b/files/ja/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,63 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - WebKit 拡張 + - 'recipe:css-property' + - リファレンス + - レイアウト + - 標準外 +translation_of: Web/CSS/-webkit-touch-callout +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の -webkit-touch-callout プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。

+ +

iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。

+ +
/* キーワード値 */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* グローバル値 */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
+ +

構文

+ +

値

+ +
+
default
+
既定のコールアウトが表示されます。
+
none
+
コールアウト表示が無効になります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
.example {
+  -webkit-touch-callout: none;
+}
+
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

Apple は Safari CSS リファレンス に説明を載せています。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.-webkit-touch-callout")}}

diff --git a/files/ja/web/css/@charset/index.html b/files/ja/web/css/@charset/index.html new file mode 100644 index 0000000000..7cf9f35ab1 --- /dev/null +++ b/files/ja/web/css/@charset/index.html @@ -0,0 +1,79 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@charset +--- +
{{CSSRef}}
+ +

CSS の @charset at-規則 は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。入れ子の文 でないとしても、条件付きグループ規則 では使えません。複数の @charset at-規則が定義されると、最初のものだけが使われます。HTML 要素の style 属性や、HTML ページの文字セットが関係している {{HTMLElement("style")}} 要素の中では使えません。

+ +
@charset "utf-8";
+ +

この at-規則は、{{cssxref("content")}} のような CSS プロパティで非 ASCII 文字を使う際に便利です。

+ +

スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザは次の手順を順番に試します (そして 1 つでも結果が得られると止めます):

+ +
    +
  1. ファイル先頭にある Unicode byte-order 文字 (BOM) の値
    2. +
  2. Content-Type: HTTP ヘッダーの charset 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値
    3. +
  3. CSS の @charset at-規則
    4. +
  4. 文書参照で定義されている文字エンコーディングを使用。{{HTMLElement("link")}} 要素の charset 属性です。この方式は HTML5 で廃止されており、使うべきではありません。
    5. +
  5. 文書が UTF-8 だと仮定する
    6. +
+ +

構文

+ +
@charset "UTF-8";
+@charset "iso-8859-15";
+
+ +

ここでは:

+ +
+
charset
+
使う文字エンコーディングを意味する {{cssxref("<string>")}} です。IANA-registry で定義されているウェブセーフな文字エンコーディングの名前でなければなりません。この名前は必ず 1 文字分の空白文字 (U+0020) の後に続き、二重引用符で囲われ、セミコロン記号で終わる必要があります。もし 1 つのエンコーディングに複数の名前が関連付けられている場合には、preferred とマークされているものだけが使われる必要があります。
+
+ +

正式な構文

+ +
{{csssyntax}}
+
+ +

例

+ +
@charset "UTF-8";       /* スタイルシートのエンコーディングを Unicode UTF-8 にします*/
+@charset 'iso-8859-15'; /* 無効です。正しくない引用符が使用されています */
+ @charset "UTF-8";      /* 無効です。at-規則より前に文字（空白）があります */
+@charset UTF-8;         /* 無効です。' か " がなく、文字セットは CSS の {{cssxref("<string>")}} ではありません */
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}{{ Spec2('CSS2.1') }}Initial definition
+ +

ブラウザーの実装状況

+ + + +

{{Compat("css.at-rules.charset")}}

diff --git a/files/ja/web/css/@counter-style/additive-symbols/index.html b/files/ja/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..7bb0386728 --- /dev/null +++ b/files/ja/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,87 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +tags: + - '@counter-style' + - CSS + - CSS カウンタースタイル + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@counter-style/additive-symbols +--- +
{{CSSRef}}
+ +

additive-symbols 記述子で、カウンターの {{cssxref('system')}} 記述子が加算的 (additive) な場合の記号を指定することができます。 additive-symbols 記述子では加算的なタプルを、それぞれ記号と非負数の整数による重みの組で定義します。加算的なシステムは、ローマ数字のような sign-value numbering を構築するために使われます。

+ +
additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+
+ +

system 記述子が cyclic, numeric, alphabetic, symbolic, fixed の場合は、 additive-symbols の代わりに {{cssxref('symbols')}} 記述子を使用してください。

+ +

{{cssinfo}}

+ +

構文

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<ul class="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: V 5, IV 4, I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.counter-style.additive-symbols")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@counter-style/index.html b/files/ja/web/css/@counter-style/index.html new file mode 100644 index 0000000000..a634e3ba0a --- /dev/null +++ b/files/ja/web/css/@counter-style/index.html @@ -0,0 +1,171 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - At-rule + - CSS + - CSS Counter + - CSS カウンター + - Reference + - counter +translation_of: Web/CSS/@counter-style +--- +

{{CSSRef}}

+ +

@counter-style は CSS の @-規則で、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 @counter-style 規則はカウンターの値をどのように文字列表現に変換するかを定義します。

+ +
@counter-style thumbs {
+  system: cyclic;
+  symbols: "\1F44D";
+  suffix: " ";
+}
+
+ul {
+  list-style: thumbs;
+}
+ +

初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、年月が経つにつれて、あらかじめ定義されたセットに他のスタイルが追加され、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 @counter-style @規則は、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。

+ +

構文

+ +

記述子

+ +

各 @counter-style は名前で識別され、記述子のセットを持ちます。

+ +
+
{{cssxref("@counter-style/system", "system")}}
+
カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。
+
+ +
+
{{cssxref("@counter-style/negative", "negative")}}
+
値が負の数の時に、カウンター表現の前又は後に追加する記号を指定します。
+
+ +
+
{{cssxref("@counter-style/prefix", "prefix")}}
+
マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。
+
+ +
+
{{cssxref("@counter-style/suffix", "suffix")}}
+
prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。
+
+ +
+
{{cssxref("@counter-style/range", "range")}}
+
カウンタースタイルが適用される値の範囲を定義します。カウンタースタイルが範囲を外れたカウンター値を表現するために使用されると、カウンタースタイルにはフォールバックスタイルが代用されます。
+
+ +
+
{{cssxref("@counter-style/pad", "pad")}}
+
マーカー表現に最少文字数を適用する必要がある場合に使用されます。例えば、カウンターが 01 から始まって 02、03、04 のように進む場合は、パッド文字が使用されます。指定されたパッド値よりも長い文字数の場合は、マーカーは通常通りに構築されます。
+
+ +
+
{{cssxref("@counter-style/fallback", "fallback")}}
+
指定したシステムでカウンター値の表現を構築できない場合や、カウンター値が指定された範囲の外にあった場合に、代わりに使用されるシステムを指定します。指定されたフォールバックも値の表現に失敗した場合は、フォールバックスタイルのフォールバックがあれば、それが使用されます。フォールバックシステムが記述されていない場合や、フォールバックシステムのチェーンがカウンター値を表現できなかった場合は、最終的に decimal スタイルにフォールバックされます。
+
+ +
+
{{cssxref("@counter-style/symbols", "symbols")}}
+
マーカー表現に使用される記号を指定します。記号は文字列、画像、カスタム識別子を含むことができます。記号がマーカー表現を構築するためにどのように使用されるかは、 system 記述子で指定されたアルゴリズムによります。例えば、 system が fixed に指定されていた場合は、この記述子で N 個の記号が指定されていると、カウンターの最初の N 個の記号を表すために使用されます。記号のセットを使い切ると、リストの残りにはフォールバックスタイルが使用されます。
+
+ 以下の @counter-style 規則では、文字の記号ではなく画像を使用しています。画像の値に記号を使用するのは現在のところ「リスクのある」機能で、実装されているブラウザーはありません。 + 
@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}
+
+
+ +
+
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の加算的タプルに依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。
+
+ +
+
{{cssxref("@counter-style/speak-as", "speak-as")}}
+
読み上げソフトのような音声シンセサイザーで、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

counter-style で記号を設定

+ +
@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}
+ +

上記のカウンタースタイル規則は、このようにリストに適用されます。

+ +
.items {
+  list-style: circled-alpha;
+}
+
+ +

このようなリストを生み出します。

+ +

Ⓐ One
+ Ⓑ Two
+ Ⓒ Three
+ Ⓓ Four
+ Ⓔ FIve
+ ...
+ ...
+ Ⓨ Twenty Five
+ Ⓩ Twenty Six
+ 27 Twenty Seven
+ 28 Twenty Eight
+ 29 Twenty Nine
+ 30 Thirty

+ +

他の例はデモページをご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状況備考
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.counter-style")}}

+ +

Quantum CSS のメモ

+ + + +

関連情報

+ + diff --git a/files/ja/web/css/@counter-style/prefix/index.html b/files/ja/web/css/@counter-style/prefix/index.html new file mode 100644 index 0000000000..b69e7d4fcc --- /dev/null +++ b/files/ja/web/css/@counter-style/prefix/index.html @@ -0,0 +1,96 @@ +--- +title: prefix +slug: Web/CSS/@counter-style/prefix +tags: + - '@counter-style' + - CSS + - CSS カウンタースタイル + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@counter-style/prefix +--- +
{{CSSRef}}
+ +

{{cssxref('@counter-style')}} 規則の prefix 記述子は、マーカーに先立って表示される内容を指定します。指定されていない場合、既定値は "" (空文字列) になります。

+ +

{{cssinfo}}

+ +

構文

+ +
/* <symbol> 値 */
+prefix: "»";
+prefix: "Page ";
+prefix: url(bullet.png);
+
+ +

値

+ +
+
<symbol>
+
マーカーに先立って表示される <symbol> を指定します。 {{cssxref("<string>")}}, {{cssxref("<image>")}}, {{cssxref("<custom-ident>")}} の何れかです。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<ul class="index">
+  <li>The Boy Who Lived</li>
+  <li>The Vanishing Glass</li>
+  <li>The Letters from No One</li>
+  <li>The Keeper of the Keys</li>
+  <li>Diagon Alley</li>
+</ul>
+ +

CSS

+ +
@counter-style chapters {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  prefix: 'Chapter ';
+}
+
+.index {
+  list-style: chapters;
+  padding-left: 15ch;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}}{{Spec2('CSS3 Counter Styles')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.counter-style.prefix")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@document/index.html b/files/ja/web/css/@document/index.html new file mode 100644 index 0000000000..00087b8d9e --- /dev/null +++ b/files/ja/web/css/@document/index.html @@ -0,0 +1,89 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - '@-規則' + - '@document' + - CSS + - Reference +translation_of: Web/CSS/@document +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

@document は CSS の @-規則で、文書の URL に基づいて、その中に含まれるスタイル規則を制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義スタイルシートにも使うことができます。

+ +
@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+
+ +

構文

+ +

@document 規則には 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、規則がその URL に効果を及ぼします。利用可能な関数は次の通りです。

+ + + +

url(), url-prefix(), domain(), media-document() 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 regexp() 関数に与える値は、引用符で囲む必要があります。

+ +

regexp() 関数に与えるエスケープされた値は、 CSS によってさらにエスケープする必要があります。例えば、一つの . (ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現の規則を使ってエスケープし (\. にします)、次に CSS の規則を使ってエスケープしなければなりません (\\. にします)。

+ +
+

メモ: このプロパティの -moz 接頭辞がついたバージョン @-moz-document があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました ({{bug(1035091)}} を参照)。

+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
@document url("http://www.w3.org/"),
+          url-prefix("http://www.w3.org/Style/"),
+          domain("mozilla.org"),
+          media-document("video"),
+          regexp("https:.*") {
+  /* ここの CSS 規則は次の場所に適用されます。
+     - "http://www.w3.org/" のページ
+     - URL が "http://www.w3.org/Style/" で始まるすべてのページ
+     - URL のホストが "mozilla.org" である、
+       または ".mozilla.org" で終わるすべてのページ
+     - スタンドアロンビデオ
+     - URL が "https:" で始まるページ */
+
+  /* 上で挙げたページを見辛くする */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

未対応のブラウザーでの回避策

+ +

@document は今のところ Firefox しか対応していません。もし、Firefox 以外のブラウザーでこのような機能を使用して複製したい場合は、 @An-Error94 によるこのポリフィルを使用してみてください。これは、ユーザースクリプト、 data-* 属性、属性セレクターを組み合わせて使用しています。

+ +

仕様書

+ +

当初は {{SpecName('CSS3 Conditional')}} にありましたが、 @document は Level 4 に 延期されました。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.document")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/font-display/index.html b/files/ja/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..b10d04d028 --- /dev/null +++ b/files/ja/web/css/@font-face/font-display/index.html @@ -0,0 +1,116 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - '@font-face' + - CSS + - CSS フォント + - CSS 記述子 + - font-display + - ウェブフォント + - フォント + - リファレンス +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

font-display 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。

+ +

構文

+ +
/* キーワード値 */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

値

+ +
+
auto
+
フォントの表示戦略はユーザーエージェントが定義します。
+
block
+
フォントに対して短いブロック期の後、永続的にスワップ期を置きます。
+
swap
+
フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。
+
fallback
+
フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。
+
optional
+
フォントに対して非常に短いブロック期の後、スワップ期を置きません。
+
+ +

説明

+ +

フォント表示の過程

+ +

フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。

+ +
+
フォントブロック期
+
フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は 不可視の 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。
+
フォントスワップ期
+
フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。
+
フォント失敗期
+
フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。
+
+ +

定義

+ +

{{cssinfo}}

+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

font-display のフォールバックを指定する

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/font-family/index.html b/files/ja/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..39aa78e3a9 --- /dev/null +++ b/files/ja/web/css/@font-face/font-family/index.html @@ -0,0 +1,89 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - '@font-face' + - At-rule descriptor + - CSS + - CSS Descriptor + - CSS Fonts + - Reference +translation_of: Web/CSS/@font-face/font-family +--- +
{{CSSRef}}
+ +

font-family は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントのフォントファミリーを指定することができます。

+ +

構文

+ +
/* <string> 値 */
+font-family: "font family";
+font-family: 'another font family';
+
+/* <custom-ident> 値 */
+font-family: examplefont;
+
+ +

値

+ +
+
<family-name>
+
フォントファミリーの名前を指定します。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォントファミリー名の設定

+ +
@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.font-family")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/font-stretch/index.html b/files/ja/web/css/@font-face/font-stretch/index.html new file mode 100644 index 0000000000..1704f1d662 --- /dev/null +++ b/files/ja/web/css/@font-face/font-stretch/index.html @@ -0,0 +1,187 @@ +--- +title: font-stretch +slug: Web/CSS/@font-face/font-stretch +tags: + - '@font-face' + - CSS + - Reference + - descripter + - font-stretch + - 記述子 +translation_of: Web/CSS/@font-face/font-stretch +--- +
{{CSSRef}}{{draft}}
+ +

font-stretch は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} 規則で定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。

+ +

ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、font-stretch 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。

+ +

{{cssinfo}}

+ +

構文

+ +
/* 単一の値 */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* 複数値 */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+
+ +

font-weight プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。

+ +

値

+ +
+
normal
+
普通の文字幅。
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
通常より幅狭な字を示します。semi-condenced が regular に比べてわずかに幅が細い程度で、そこから右 (ultra-condenced) に向かうにつれてさらに細くなっていきます。
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
通常より幅広な字を示します。semi-rxpanded がわずかに広い程度で、そこから右 (ultra-expanded) に向かうにつれてさらに広くなっていきます。
+
<percentage>
+
50% から 200% の {{cssxref("<percentage>")}} 値で示します。このプロパティに負の値は許可されていません。
+
+ +

font-stretch の旧バージョンではプロパティは上記の <percentage> 以外の 9 つのキーワードのみを許可していましたが、CSS Fonts Level 4 における構文の拡張により<percentage> も使用できるようになりました。これにより、バリアブルフォントは連続した文字幅のようなものを提供できます。TrueType または OpenType バリアブルフォント (後述) の場合、"wdth" バリエーションを使用してさまざまな幅を実装できます。

+ +

フォントが指定された値と完全に一致するフェイスが提供されない場合、100% 未満の値は幅狭に現像され、100% 以上の値は幅広に現像されます。

+ +

キーワードとパーセント値の対照表

+ +

以下の表はキーワード指定の際の字幅と <percentage> 指定時の幅の違いを示します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワードパーセント値
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +

バリアブル (可変) フォント

+ +

ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル (可変) フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント範囲が役立ちます。

+ +

TrueType または OpenType 可変フォントの場合、"wdth" バリエーションを使用して、さまざまなグリフ幅を実装します。

+ +

以下の例が動作するには、CSS Fonts Level 4 構文をサポートするブラウザーが必要です。この構文では font-weight は 1 から 1000 の任意の数値にできます。

+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。

+ +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}
+ +

アクセシビリティの考慮事項

+ +

特にフォントのコントラストカラー比が低い場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.font-stretch")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/font-style/index.html b/files/ja/web/css/@font-face/font-style/index.html new file mode 100644 index 0000000000..051fe294c0 --- /dev/null +++ b/files/ja/web/css/@font-face/font-style/index.html @@ -0,0 +1,123 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - '@font-face' + - At-rule descriptor + - CSS + - CSS Descriptor + - CSS Fonts + - Reference +translation_of: Web/CSS/@font-face/font-style +--- +
{{CSSRef}}
+ +

font-style は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で指定されたフォントのフォントスタイルを指定することができます。

+ +

特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-style 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。

+ +

構文

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;
+
+ +

値

+ +
+
normal
+
フォントファミリの通常の版を選択します。
+
italic
+
フォントフェイスが通常のフォントのイタリック版であることを指定します。
+
oblique
+
フォントフェイスが通常のフォントを機械的に傾けたものであることを指定します。
+
+ +
+
oblique と角度
+
oblique として分類されたフォントを選択し、テキストの角度を追加で指定します。
+
oblique と角度の範囲
+
oblique として分類されたフォントを選択し、テキストの角度の範囲を追加で指定します。なお、範囲は font-style が oblique であるときにだけ対応しています。 font-style: normal 又は italic の場合は、第二の値は許可されません。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

イタリックフォントスタイルの指定

+ +

例として、 garamond フォントファミリを指定すると、基本の形として、以下の結果が得られます。

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}
+ +

スタイルなしの garamond

+ +

このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。

+ +

人工的に傾けた garamond

+ +

一方で、フォントファミリに真にイタリックである版がある場合、 src 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものではありません。

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  font-style: italic;
+}
+ +

イタリックの garamond

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS4 Fonts')}}角度の値を付けた oblique キーワードを追加
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.font-style")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/font-variation-settings/index.html b/files/ja/web/css/@font-face/font-variation-settings/index.html new file mode 100644 index 0000000000..5c26e1956a --- /dev/null +++ b/files/ja/web/css/@font-face/font-variation-settings/index.html @@ -0,0 +1,89 @@ +--- +title: font-variation-settings +slug: Web/CSS/@font-face/font-variation-settings +tags: + - '@font-face' + - CSS + - CSS Descriptor + - CSS Fonts + - CSS 記述子 + - Reference +translation_of: Web/CSS/@font-face/font-variation-settings +--- +
{{CSSRef}}
+ +

font-variation-settings は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。

+ +

{{cssinfo}}

+ +

構文

+ +
+
/* 既定の設定を使用 */
+font-variation-settings: normal;
+
+/* OpenType 軸名の値を設定 */
+font-variation-settings: "xhgt" 0.7;
+
+ +

値

+ +
+
normal
+
テキストは既定の設定を使用してレイアウトされます。
+
<string> <number>
+
テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("<string>")}} が4つの ASCII 文字で、その後に字句の値を示す {{cssxref("number")}} が続きます。 <string> の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 <number> は小数や負の数を取ることができます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
@font-face {
+  font-family: 'OpenTypeFont';
+  src: url('open_type_font.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-variation-settings: 'wght' 400, 'wdth' 300;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.font-variation-settings")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/font-weight/index.html b/files/ja/web/css/@font-face/font-weight/index.html new file mode 100644 index 0000000000..77106d3ea9 --- /dev/null +++ b/files/ja/web/css/@font-face/font-weight/index.html @@ -0,0 +1,179 @@ +--- +title: font-weight +slug: Web/CSS/@font-face/font-weight +tags: + - '@font-face' + - At-rule descriptor + - CSS + - Reference + - descriptor + - font-weight +translation_of: Web/CSS/@font-face/font-weight +--- +

{{CSSRef}}

+ +

font-weight は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。

+ +

特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-weight 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。

+ +

一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。

+ +

構文

+ +
/* 単一の値 */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* 複数の値 */
+font-weight: normal bold;
+font-weight: 300 500;
+
+ +

font-weight プロパティは、以下に挙げる値のうちの一つを使用して記述します。

+ +

値

+ +
+
normal
+
通常のフォントの太さです。 400 と同じです。
+
bold
+
太字のフォントの太さです。 700 と同じです。
+
<number>
+
1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
+
+ +

font-weight 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。

+ +

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

+ +

良くある太さ名の対応

+ +

100 から 900 の数値は、おおよそ以下の太さ名に対応します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
+ +

可変フォント

+ +

多くのフォントは、一般的な太さ名との対応の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。

+ +

TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。

+ +

アクセシビリティの考慮

+ +

弱視の人は、 font-weight の値が 100 (Thin/Hairline) または 200 (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

@font-face 規則における通常のフォントの太さの設定

+ +

以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。

+ +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-weight: 400;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS3 Fonts')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.font-weight")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/index.html b/files/ja/web/css/@font-face/index.html new file mode 100644 index 0000000000..2a501194d9 --- /dev/null +++ b/files/ja/web/css/@font-face/index.html @@ -0,0 +1,197 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@-規則' + - '@規則' + - CSS + - CSS フォント + - Reference + - フォント + - リファレンス +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +

CSS の @font-face @-規則は、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。 local() 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、{{Glossary("user agent", "ユーザーエージェント")}}がそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 url() 関数を使用して指定されたフォントリソースをダウンロードして使用します。

+ +

@font-face で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。

+ +

url() と local() を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。

+ +

@font-face @-規則は、 CSS の最上位だけでなく、 CSS の条件付き @-規則グループの中でも使用することができます。

+ +
@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

構文

+ +

記述子

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
フォントのダウンロード及び準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。
+
{{cssxref("@font-face/font-family", "font-family")}}
+
font プロパティの font face 値で使われる名前を指定します。
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
{{cssxref("font-stretch")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-stretch: 50% 200%; のように二つの値を受け付けます。
+
{{cssxref("@font-face/font-style", "font-style")}}
+
{{cssxref("font-style")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-style: oblique 20deg 50deg; のように二つの値を受け付けます。
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
{{cssxref("font-weight")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-weight: 100 400; のように二つの値を受け付けます。
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
{{cssxref("font-variant")}} 値です。
+
{{cssxref("font-feature-settings", "font-feature-settings")}}
+
OpenType フォントで高度な印刷機能を制御することができるようにします。
+
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+
変化の特徴を表す4文字の軸名を、種類の値と共に指定することにより、 OpenType 又は TrueType フォントの種類を低レベルで制御できます。
+
{{cssxref("@font-face/src", "src")}}
+
+

フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。

+ +

ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — format() 関数の中に形式を含めることができます。

+ + 
src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("truetype");
+ +

利用可能な形式は、"woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg" です。

+
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
フォントで使用される Unicode コードポイントの範囲です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

この例は単にダウンロードフォントを指定し、ドキュメントの本文全体に適用します。

+ +

動作例を見る

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (二つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

フォントの MIME タイプ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
形式MIME タイプ
TrueTypefont/ttf
OpenTypefont/otf
Web Open File Formatfont/woff
Web Open File Format 2font/woff2
+ +

メモ

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}新しい圧縮アルゴリズムのフォント形式を定義
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}フォント形式の定義
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.font-face")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/src/index.html b/files/ja/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..3e1b90b644 --- /dev/null +++ b/files/ja/web/css/@font-face/src/index.html @@ -0,0 +1,110 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - '@font-face' + - At-rule descriptor + - CSS + - CSS Descriptor + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/@font-face/src +--- +
{{CSSRef}}
+ +

src は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 @font-face 規則を有効にするためには必要です。

+ +

構文

+ +
/* <url> 値 */
+src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */
+src: url(path/to/font.woff);                         /* 相対 URL */
+src: url(path/to/font.woff) format("woff");          /* 明示的な書式 */
+src: url('path/to/font.woff');                       /* 引用符付きの URL */
+src: url(path/to/svgfont.svg#example);               /* フラグメントで識別するフォント */
+
+/* <font-face-name> 値 */
+src: local(font);      /* 引用符なしの名前 */
+src: local(some font); /* 空白が入った名前 */
+src: local("font");    /* 引用符付きの名前 */
+
+/* 複数の項目 */
+src: local(font), url(path/to/font.svg) format("svg"),
+     url(path/to/font.woff) format("woff"),
+     url(path/to/font.otf) format("opentype");
+
+ +

値

+ +
+
<url> [ format( <string># ) ]?
+
{{cssxref("<url>")}} と、続けて任意で format() 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。
+
<font-face-name>
+
local() を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。
+
+ +

解説

+ +

値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。

+ +

CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は @font-face 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 @font-face 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

url() と local() を使用したフォントリソースの指定

+ +
@font-face {
+  font-family: examplefont;
+  src: local(Example Font),
+       url('examplefont.woff') format("woff"),
+       url('examplefont.otf') format("opentype");
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.src")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-face/unicode-range/index.html b/files/ja/web/css/@font-face/unicode-range/index.html new file mode 100644 index 0000000000..691d5e7f17 --- /dev/null +++ b/files/ja/web/css/@font-face/unicode-range/index.html @@ -0,0 +1,118 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - At-rule descriptor + - CSS + - CSS Fonts + - CSS Property + - Experimental + - Layout + - Reference + - Web +translation_of: Web/CSS/@font-face/unicode-range +--- +
{{cssref}}
+ +

unicode-range は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。

+ +

構文

+ +
/* <unicode-range> 値 */
+unicode-range: U+26;               /* 単一の符号位置 */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;        /* 符号位置の範囲 */
+unicode-range: U+4??;              /* ワイルドカードの範囲 */
+unicode-range: U+0025-00FF, U+4??; /* 複数の値 */
+
+ +

値

+ +
+
単一の符号位置
+
単一の Unicode 符号位置。例: U+26.
+
符号位置の範囲
+
Unicode 符号位置の範囲。例えば、 U+0025-00FF は、 U+0025 から U+00FF の範囲内の全文字を含むこと意味します。
+
ワイルドカードの範囲
+
ワイルドカード文字を含む Unicode 符号位置の範囲。 '?' 文字を使用します。例えば、U+4?? は U+400 から U+4FF の範囲の全文字を含むことを意味します。
+
+ +

解説

+ +

この記述子の目的は、ブラウザーが特定のページのテキストコンテンツに必要なフォントリソースをダウンロードするだけで済むように、フォントリソースをセグメント化できるようにすることです。たとえば、ローカライズが多いサイトでは、英語、ギリシャ語、日本語のフォントリソースを個別に提供できます。英語版のページを閲覧しているユーザーには、ギリシャ語と日本語のフォントのフォントリソースをダウンロードする必要はなく、帯域幅を節約できます。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

Using a different font for a single character

+ +

異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの Helvetica を使用し、アンパサンドにはセリフフォントの Times New Roman を使用します。

+ +

CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。

+ +

HTML

+ +
<div>Me & You = Us</div>
+ +

CSS

+ +
@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}
+ +

結果

+ +

{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#unicode-range-desc', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.unicode-range")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@font-feature-values/index.html b/files/ja/web/css/@font-feature-values/index.html new file mode 100644 index 0000000000..18e2d4f558 --- /dev/null +++ b/files/ja/web/css/@font-feature-values/index.html @@ -0,0 +1,97 @@ +--- +title: '@font-feature-values' +slug: Web/CSS/@font-feature-values +tags: + - At-rule + - CSS + - CSS Fonts + - Reference +translation_of: Web/CSS/@font-feature-values +--- +
{{CSSRef}}
+ +

@font-feature-values は CSS のアット規則で、OpenType で有効化された特性が異なるものに対して {{cssxref("font-variant-alternates")}} プロパティで共通の名前を使用することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。

+ +

@font-feature-values アット規則は、CSS の最上位で使用することも、任意の CSS の条件付きグループアット規則の内部で使用することもできます。

+ +

構文

+ +

特性値のブロック

+ +
+
@swash
+
{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "swash()", "#swash()")}} 関数記法に渡される特性名を指定します。文字飾り (swash) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
+
@annotation
+
{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} 関数記法に渡される特性名を指定します。注釈 (annotation) 特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
+
@ornaments
+
{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} 関数記法に渡される特性名を指定します。装飾活字 (ornaments) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
+
@stylistic
+
{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} 関数記法に渡される特性名を指定します。文字様式 (stylistic) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
+
@styleset
+
{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} 関数記法に渡される特性名を指定します。ident1: 2 4 12 1 は、OpenType 値 ss02 および ss04, ss12, ss01 にマッピングされます。99 よりも大きな値は正しいですが、どの OpenType 値にもマッピングされず、無視されます。
+
@character-variant
+
{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} 関数記法に渡される特性名を指定します。異体字 (character-variant) の特性値に定義できる値は 1 個または 2 個です。ident1: 3 は cv03=1 にマッピングされ、ident2: 2 4 は cv02=4 にマッピングされますが、 ident2: 2 4 5 は無効です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

@font-feature-values 規則内での @styleset の使用

+ +
/* "nice-style" を Font One に指定するアット規則 */
+@font-feature-values Font One {
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+/* Font Two における "nice-style" のためのアット規則 */
+@font-feature-values Font Two {
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+/* 1 回の宣言でアット規則を適用 */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.at-rules.font-feature-values")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/@import/index.html b/files/ja/web/css/@import/index.html new file mode 100644 index 0000000000..8ded925276 --- /dev/null +++ b/files/ja/web/css/@import/index.html @@ -0,0 +1,100 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - '@-規則' + - CSS + - CSS カスケードと継承 + - CSS 条件付き規則 + - メディアクエリ + - リファレンス +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

CSS の @import @-規則 は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは入れ子になるステートメントではないので、 @import は条件付き @-規則グループの中で使うことはできません。

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+ +

{{glossary("user agent", "ユーザーエージェント")}}は未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import 規則を指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリで指定します。メディアクエリがないと、インポートは無条件で行われます。メディアに all を指定しても同じ効果になります。

+ +

構文

+ +
@import url;
+@import url list-of-media-queries;
+@import url supports( supports-query );
+@import url supports( supports-query ) list-of-media-queries;
+
+ +

内容は次の通りです。

+ +
+
url
+
インポートするリソースの位置を表す {{CSSxRef("<string>")}} または {{CSSxRef("<url>")}} です。 URL は絶対パス相対パスでも構いません。なお、 Mozilla パッケージでは URL はファイルを指定する必要はありません。パッケージ名やその一部で指定すると、自動的に適切なファイルが選択されます (例 chrome://communicator/skin/)。詳しくはこちらをご覧ください。
+
list-of-media-queries
+
リンクした URL で定義された CSS 規則の適用の条件を示す、メディアクエリのカンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。
+
supports-query
+
{{CSSxRef("@supports", "<supports-condition>", "#Syntax")}} または {{CSSxRef("Syntax", "<declaration>", "#CSS_declarations")}} のどちらかです。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Cascade", "#at-import", 'the @import rule')}}{{Spec2("CSS4 Cascade")}}{{CSSxRef("@supports")}} 構文に対応するよう構文を拡張
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}}
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}単純な メディアタイプ だけでなく、いかなるメディアクエリもサポートするよう構文拡張
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}スタイルシートの URL の記述する {{CSSxRef("<string>")}} のサポートを追加し、
+ @import ルールを CSS 文書の最初に入れることを条件化
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.import")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@keyframes/index.html b/files/ja/web/css/@keyframes/index.html new file mode 100644 index 0000000000..5858a51c9b --- /dev/null +++ b/files/ja/web/css/@keyframes/index.html @@ -0,0 +1,145 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +tags: + - '@-規則' + - CSS + - CSS アニメーション + - Reference + - アニメーション +translation_of: Web/CSS/@keyframes +--- +
{{CSSRef}}
+ +

CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップを CSS トランジションよりも詳細に制御できます。

+ +
@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+ +

JavaScript は、 CSS オブジェクトモデルのインターフェイス {{domxref("CSSKeyframesRule")}} によって @keyframes @-規則にアクセスできます。

+ +

キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 {{ cssxref("animation-name") }} プロパティで指定したものと同じ名前がついた @keyframes 規則を作成します。それぞれの @keyframes 規則は、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。

+ +

キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。

+ +

有効なキーフレームのリスト

+ +

キーフレーム規則にアニメーションの開始と終了の状態 (0%/from と 100%/to) を明示しない場合、ブラウザはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。

+ +

キーフレーム規則にアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。

+ +

重複の解決

+ +

複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 @keyframes 規則がカスケード的に継承されることはないため、アニメーションが複数の規則セットによるキーフレームをもとにして行われることはありません。

+ +

指定されたアニメーションのタイムオフセットが重複している場合は、 @keyframes 規則内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 @keyframes 規則の中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。

+ +

一部のキーフレームでプロパティが指定されていない場合

+ +

一部のキーフレームでしか指定されていないプロパティは、補完されます (ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません)。例えば:

+ +
@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +

この例では、 {{ cssxref("top") }} プロパティは 0%, 30%, 100% のキーフレームでアニメーション指定されています。また、 {{ cssxref("left") }} プロパティは 0%, 68%, 72%, 100% のキーフレームで指定されています。

+ +

キーフレームが複数宣言された場合

+ +

キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、

+ +
@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+
+ +

この例では、 50% のキーフレームで、使用される値は top: 10px と left: 20px です。

+ +

{{ fx_minversion_inline("14") }} カスケード的なキーフレームは Firefox 14 から対応しています。

+ +

キーフレーム内の !important

+ +

キーフレーム内で !important が付けられた宣言は無視されます。

+ +
@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* 無視される */
+  to   { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+         margin-bottom: 100px; }
+  to   { margin-top: 150px !important; /* 無視される */
+         margin-bottom: 50px; }
+}
+
+ +

構文

+ +

値

+ +
+
{{cssxref("custom-ident")}}
+
キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。
+
from
+
アニメーションの始まりである 0% を示します。
+
to
+
アニメーションの終わりである 100% を示します。
+
{{cssxref("<percentage>")}}
+
指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS アニメーションの利用 を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}{{ Spec2('CSS3 Animations') }}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.keyframes")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html new file mode 100644 index 0000000000..0f0a90b57e --- /dev/null +++ b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html @@ -0,0 +1,58 @@ +--- +title: '-moz-device-pixel-ratio' +slug: Web/CSS/@media/-moz-device-pixel-ratio +tags: + - '@media' + - CSS + - Deprecated + - Non-standard + - media feature +translation_of: Web/CSS/@media/-moz-device-pixel-ratio +--- +
{{cssref}} {{Non-standard_header}} {{Deprecated_header}}
+ +

-moz-device-pixel-ratio は Gecko 独自の CSS の Gecko のみのメディア特性で、 CSS ピクセルあたりのデバイスピクセル数に基づいてスタイルを適用することができます。

+ +
+

この特性を使用しないでください。 resolution 特性と dppx の単位を代わりに使用してください。unit instead.

+
+ +
注: このメディア特性は Webkit 及び IE 11 for Windows Phone 8.1 でも -webkit-device-pixel-ratio として実装されています。 min 及び max 接頭辞は、 Gecko では min--moz-device-pixel-ratio 及び max--moz-device-pixel-ratio です。しかし、同じ接頭辞が Webkit では -webkit-min-device-pixel-ratio 及び -webkit-max-device-pixel-ratio として実装されています。
+ +

構文

+ +
+
{{cssxref("<number>")}}
+
CSS ピクセルあたりのデバイスピクセル数。
+
+ +


+ メディア: {{cssxref("Media/Visual")}}
+ min/max 接頭辞の受付: はい

+ +

例

+ +

基本的な互換コード

+ +

-moz-device-pixel-ratio は Firefox のバージョン 16 以前や、 dppx に未対応の WebKit ベースのブラウザーの -webkit-device-pixel-ratio との互換性のために使用されることがあります。

+ +

例:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit ベースのブラウザー */
+       (min--moz-device-pixel-ratio: 2),    /* 古い Firefox ブラウザー (Firefox 16 以前) */
+       (min-resolution: 2dppx),             /* 標準の方法 */
+       (min-resolution: 192dpi)             /* dppx のフォールバック */
+ +
+

Note: resolution 及び dppx に関わる互換性の良い習慣については、 CSSWG の記事を参照してください。

+
+ +

仕様書

+ +

どの仕様書にも含まれていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}

diff --git a/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html b/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html new file mode 100644 index 0000000000..5f41e28efb --- /dev/null +++ b/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-mac-graphite-theme' +slug: Web/CSS/@media/-moz-mac-graphite-theme +tags: + - '-moz-mac-graphite-theme' + - '@media' + - CSS + - Mozilla 拡張 + - Non-standard + - メディア特性 +translation_of: Archive/Web/CSS/@media/-moz-mac-graphite-theme +--- +

{{CSSRef}}{{Non-standard_Header}}

+ +
+

メモ: Firefox 58 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (例えば to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。

+
+ +

CSS の -moz-mac-graphite-theme メディア特性は Gecko 独自のもので、ユーザーが Mac OS X の "Graphite" テーマを有効にしているかどうかでスタイルを適用するために使用することができます。

+ +

構文

+ +
+
{{CSSxRef("<integer>")}}
+
ユーザーが Mac OS X で "Graphite" を使用するよう端末を設定している場合、これは 1 になります。ユーザーが標準の青い表示を使用しているか、 Mac OS X ではない場合、これは 0 になります。
+
+ +

メディア: {{CSSxRef("Media/Visual")}}
+ min/max 接頭辞の受付: いいえ

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/-moz-maemo-classic/index.html b/files/ja/web/css/@media/-moz-maemo-classic/index.html new file mode 100644 index 0000000000..dfecdc64b9 --- /dev/null +++ b/files/ja/web/css/@media/-moz-maemo-classic/index.html @@ -0,0 +1,30 @@ +--- +title: '-moz-maemo-classic' +slug: Web/CSS/@media/-moz-maemo-classic +tags: + - '@media' + - CSS + - Mozilla 拡張 + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-maemo-classic +--- +

{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}

+ +

CSS の -moz-maemo-classic メディア特性は Gecko 独自のもので、ユーザーエージェントが Maemo のオリジナルのテーマを使用しているかどうかでスタイルを適用するために使用することができます。

+ +

構文

+ +
+
{{CSSxRef("<integer>")}}
+
ユーザーエージェントがオリジナルのテーマで Maemo を使用している場合、これは 1 です。もっと新しい Fremantle テーマを使用している場合は、これは 0 です。
+
+ +

メディア: {{CSSxRef("Media/Visual")}}
+ min/max 接頭辞の受付: いいえ

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/-moz-os-version/index.html b/files/ja/web/css/@media/-moz-os-version/index.html new file mode 100644 index 0000000000..10e70bc450 --- /dev/null +++ b/files/ja/web/css/@media/-moz-os-version/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-os-version' +slug: Web/CSS/@media/-moz-os-version +tags: + - '@media' + - CSS + - Mozilla 拡張 + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-os-version +--- +
{{cssref}}{{Non-standard_header}} +
+

メモ: Firefox 58 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。

+
+
+ +

CSS の -moz-os-version メディア特性は Gecko 独自のもので、ユーザーの Microsoft Windows のバージョンによってスタイルを適用するために使用することができます。これはユーザーのオペレーティングシステムのバージョンに応じてアプリケーションのスキンやその他のクロームコードを適用するのに便利です。

+ +

構文

+ +

値

+ +
+
windows-win7
+
ユーザーは Windows 7 オペレーティングシステムを利用しています。
+
windows-win8
+
ユーザーは Windows 8 オペレーティングシステムを利用しています。
+
windows-win10
+
ユーザーは Windows 10 オペレーティングシステムを利用しています。
+
+ +


+ メディア: {{cssxref("Media/Visual")}}
+ min/max 接頭辞の受付: いいえ

diff --git a/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html b/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html new file mode 100644 index 0000000000..81a7c78396 --- /dev/null +++ b/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-windows-accent-color-in-titlebar' +slug: Web/CSS/@media/-moz-windows-accent-color-in-titlebar +tags: + - '@media' + - CSS + - Mozilla 拡張 + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-windows-accent-color-in-titlebar +--- +

{{CSSRef}}{{Non-standard_Header}}

+ +
+

メモ: Firefox 58 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。

+
+ +

CSS の -moz-windows-accent-color-in-titlebar メディア特性は Gecko 独自のもので、 Microsoft Windows のタイトルバーで強調色が有効であるかどうかでスタイルを適用するために使用することができます。

+ +

構文

+ +
+
{{CSSxRef("<integer>")}}
+
最新の Windows のバージョンでは、ウィンドウのタイトルバーで強調色が有効であれば、これは 1 です。それ以外は 0 です。
+
+ +

メディア: {{CSSxRef("Media/Visual")}}
+ min/max 接頭辞の受付: いいえ

+ +

例

+ +
@media (-moz-windows-accent-color-in-titlebar: 1) {
+  h1 {
+    color: -moz-win-accentcolortext;
+  }
+
+  body {
+    background-color: -moz-win-accentcolor;
+  }
+}
+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/-moz-windows-classic/index.html b/files/ja/web/css/@media/-moz-windows-classic/index.html new file mode 100644 index 0000000000..3c8754a33b --- /dev/null +++ b/files/ja/web/css/@media/-moz-windows-classic/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-windows-classic' +slug: Web/CSS/@media/-moz-windows-classic +tags: + - '-moz-windows-classic' + - '@media' + - CSS + - Mozilla 拡張 + - Non-standard + - メディア特性 +translation_of: Archive/Web/CSS/@media/-moz-windows-classic +--- +

{{CSSRef}}{{Non-standard_Header}}

+ +
+

メモ: Firefox 58 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。

+
+ +

構文

+ +
+
{{CSSxRef("<integer>")}}
+
Windows をテーマなしで (uxtheme を使用しない classic モードで) 使用しているユーザーの場合は、 1 になります。そうでなければ 0 になります。
+
+ +

メディア: {{CSSxRef("Media/Visual")}}
+ min/max 接頭辞の受け付け: なし

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/-moz-windows-theme/index.html b/files/ja/web/css/@media/-moz-windows-theme/index.html new file mode 100644 index 0000000000..288987c972 --- /dev/null +++ b/files/ja/web/css/@media/-moz-windows-theme/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-windows-theme' +slug: Web/CSS/@media/-moz-windows-theme +tags: + - '-moz-windows-theme' + - '@media' + - CSS + - Mozilla 拡張 + - Non-standard + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-windows-theme +--- +

{{CSSRef}}{{Non-standard_Header}}

+ +
+

メモ: Firefox 58 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。

+
+ +

CSS の -moz-windows-theme メディア特性は Gecko 独自のもので、ユーザーの Windows のテーマに合わせてアプリケーションのスキンやその他のクロムコードをカスタマイズするのに便利です。

+ +

構文

+ +

-moz-windows-theme 特性は現在使用されている Windwos テーマを示すキーワード値です。

+ +

値

+ + + +

メディア: {{CSSxRef("Media/Visual")}}
+ min/max 接頭辞の受け付け: なし

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html new file mode 100644 index 0000000000..f8a9df9419 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,120 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +tags: + - '@media' + - CSS + - NeedsBrowserCompatibility + - Non-standard + - WebKit + - media feature +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +
{{ CSSRef }} {{ Non-standard_header }}
+ +

CSS の -webkit-device-pixel-ratio 標準外の真偽値メディア特性は、標準のresolutionメディア特性の代替です。

+ +
+

注: このメディア特性は WebKit の機能です。可能であれば、代わりに resolution メディア特性クエリを使用してください。

+
+ +

構文

+ +

-webkit-device-pixel-ratio 特性は {{cssxref("<number>")}} 値で指定されます。これは範囲特性であり、つまり接頭辞が付いた -webkit-min-device-pixel-ratio 及び -webkit-max-device-pixel-ratio の変化形を使用して、それぞれ最低値と最高値をクエリすることもできます。

+ +

値

+ +
+
{{cssxref("<number>")}}
+
CSS の px を表すために使われるデバイスピクセルの数です。この値は <number> であり、構文的に単位を許可しておらず、暗黙の単位は dppx です。
+
+ +

実装

+ +
/* "dppx" の単位が含まれています。 */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* ... は以下のものと同じです。 */
+@media (min-resolution: 2dppx) { ... }
+
+/* 同様に */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* ... は以下のものと同じです。 */
+@media (max-resolution: 2dppx) { ... }
+
+ +

例

+ +

HTML

+ +
<p>This is a test of your device's pixel density.</p>
+
+ +

CSS

+ +
/* 正確な解像度 */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* 最低解像度 */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* 最高解像度 */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}初回の標準化
Safari CSS Reference
+ 'media query extensions' in that document.		標準外の非公式文書初回の文書化
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}

+ +

関連項目

+ + diff --git a/files/ja/web/css/@media/-webkit-transform-2d/index.html b/files/ja/web/css/@media/-webkit-transform-2d/index.html new file mode 100644 index 0000000000..3b4ef6a179 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transform-2d/index.html @@ -0,0 +1,40 @@ +--- +title: '-webkit-transform-2d' +slug: Web/CSS/@media/-webkit-transform-2d +tags: + - '@media' + - CSS + - WebKit 拡張 + - メディア特性 + - リファレンス + - 標準外 +translation_of: Web/CSS/@media/-webkit-transform-2d +--- +
{{ Non-standard_header }}
+ +

CSS の -webkit-transform-2d メディア特性 は Chrome 拡張で、真偽値型であり、ベンダー接頭辞付きの CSS 2D {{cssxref("transform")}} に対応していれば値が true になります。

+ +
+

メモ: このメディア特性は WebKit でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリを代わりに使用してください。

+
+ +

仕様書

+ +

仕様書では定義されていません。 Apple には Safari CSS Reference に説明があります。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.-webkit-transform-2d")}}

+ +

関連情報

+ + + +
{{ CSSRef }}
diff --git a/files/ja/web/css/@media/-webkit-transform-3d/index.html b/files/ja/web/css/@media/-webkit-transform-3d/index.html new file mode 100644 index 0000000000..55d1da5975 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transform-3d/index.html @@ -0,0 +1,75 @@ +--- +title: '-webkit-transform-3d' +slug: Web/CSS/@media/-webkit-transform-3d +tags: + - '@media' + - CSS + - WebKit 拡張 + - メディア特性 + - リファレンス + - 標準外 +translation_of: Web/CSS/@media/-webkit-transform-3d +--- +
{{ Non-standard_header }}
+ +

CSS の -webkit-transform-3d メディア特性 は Chrome 拡張で、真偽値型であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が true になります。

+ +
+

メモ: このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリを代わりに使用してください。

+
+ +

例

+ +
@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}{{Spec2('Compat')}}初回の標準化
Safari CSS Reference
+ 'media query extensions' in that document.		標準外の非公式文書初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.-webkit-transform-3d")}}

+ +

関連情報

+ + + +
{{ CSSRef }}
diff --git a/files/ja/web/css/@media/-webkit-transition/index.html b/files/ja/web/css/@media/-webkit-transition/index.html new file mode 100644 index 0000000000..3c4b7b5dd6 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transition/index.html @@ -0,0 +1,61 @@ +--- +title: '-webkit-transition' +slug: Web/CSS/@media/-webkit-transition +tags: + - '@media' + - Blink + - CSS + - Deprecated + - Non-standard + - Reference + - WebKit + - WebKit 拡張 + - メディア特性 +translation_of: Web/CSS/@media/-webkit-transition +--- +
{{ CSSRef }} {{deprecated_header}} {{ Non-standard_header }}
+ +

CSS の -webkit-transition メディア特性 は Chrome 拡張で、真偽値型であり、閲覧コンテキストが CSS トランジションに対応していれば値が true になります。 WebKit または Blink 以外を使用したブラウザーでは対応していません。

+ +
+

メモ: このメディア特性は使用しないでください。これは仕様化されておらず、広く実装されておらず、すべてのブラウザーから削除されています。代わりに {{cssxref("@supports")}} 特性クエリを使用してください。

+
+ +

例

+ +

代わりに @supports を使用してください

+ +

-webkit-transition メディア特性を使用しないでください。代わりに、 CSS の {{cssxref("@supports")}} @-規則を用いてトランジションの有無を判定してください。

+ +
@supports (transition: initial) {
+  /* トランジションに対応している場合に使われる CSS */
+}
+
+ +

廃止された例

+ +

廃止される以前、次のように -webkit-transition を使用することができました。

+ +
@media (-webkit-transition) {
+  /* トランジションに対応している場合に使われる CSS */
+}
+
+ +

仕様書

+ +

仕様書では定義されていません。 Apple には Safari CSS Reference に説明があります。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.-webkit-transition")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/any-hover/index.html b/files/ja/web/css/@media/any-hover/index.html new file mode 100644 index 0000000000..d7f232b331 --- /dev/null +++ b/files/ja/web/css/@media/any-hover/index.html @@ -0,0 +1,74 @@ +--- +title: any-hover +slug: Web/CSS/@media/any-hover +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/any-hover +--- +
{{cssref}}
+ +

CSS の any-hover メディア特性は、要素の上でホバーすることができる入力メカニズムが何らか利用できるかどうかをテストするために使用することができます。

+ +

構文

+ +

any-hover 特性は、以下の一覧のうち一つのキーワード値で指定します。

+ +
+
none
+
差支えなくホバーができる入力メカニズムがないか、又はポインティング入力メカニズムがない。
+
hover
+
一つ以上の入力メカニズムが、要素の上で差支えなくホバーすることができる。
+
+ +

例

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}{{Spec2('CSS4 Media Queries')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.any-hover")}}

+ +

関連項目

+ + diff --git a/files/ja/web/css/@media/any-pointer/index.html b/files/ja/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..d05842a639 --- /dev/null +++ b/files/ja/web/css/@media/any-pointer/index.html @@ -0,0 +1,107 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/any-pointer +--- +
{{cssref}}
+ +

CSS の any-pointer メディア特性は、ユーザーが (マウスなどの) 何かのポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。

+ +
+

メモ: 第一のポインティングデバイスの正確性を調べたい場合は、代わりに pointer を使用してください。

+
+ +

構文

+ +

any-pointer 特性は、以下の一覧の中から一つのキーワード値で指定します。

+ +
+
none
+
利用できるポインティングデバイスがありません。
+
coarse
+
正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。
+
fine
+
正確性が高いポインティングデバイスが、少なくとも一つ含まれています。
+
+ +
+

メモ: 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 none はポインティングデバイスがない場合のみ一致します。

+
+ +

例

+ +

この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、粗いポインターを持つユーザーには大きなチェックボックスを生成します。

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.any-pointer")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/aspect-ratio/index.html b/files/ja/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..e8e8e36864 --- /dev/null +++ b/files/ja/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,126 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - '@media' + - CSS + - Reference + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/aspect-ratio +--- +
{{cssref}}
+ +

CSS の aspect-ratio メディア特性は、{{glossary("viewport", "ビューポート")}}のアスペクト比を調べるために使用します。

+ +

構文

+ +

aspect-ratio 特性は、ビューポートの幅対高さのアスペクト比を表現する {{cssxref("<ratio>")}} 値で指定します。これは範囲の特性であり、つまり接頭辞の付いた min-aspect-ratio および max-aspect-ratio の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

以下の例は独自のビューポートを生成する {{htmlElement("iframe")}} に含まれています。 <iframe> の大きさを変更して aspect-ratio の変化を確認してください。

+ +

HTML

+ +
<div id='inner'>
+  ビューポートの幅と高さを変更しながら、この要素を見ていてください。
+</div>
+
+ +

CSS

+ +
/* 最小アスペクト比 */
+@media (min-aspect-ratio: 8/5) {
+  div {
+    background: #9af; /* blue */
+  }
+}
+
+/* 最大アスペクト比 */
+@media (max-aspect-ratio: 3/2) {
+  div {
+    background: #9ff;  /* cyan */
+  }
+}
+
+/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */
+@media (aspect-ratio: 1/1) {
+  div {
+    background: #f9a; /* red */
+  }
+}
+
+ + + +

結果

+ +
+

{{ EmbedLiveSample('_Example', '300px', '400px') }}

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}変更なし
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/ja/web/css/@media/color-gamut/index.html b/files/ja/web/css/@media/color-gamut/index.html new file mode 100644 index 0000000000..c052bb4183 --- /dev/null +++ b/files/ja/web/css/@media/color-gamut/index.html @@ -0,0 +1,70 @@ +--- +title: color-gamut +slug: Web/CSS/@media/color-gamut +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/color-gamut +--- +
{{cssref}}
+ +

CSS の color-gamut メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}及び出力機器が対応している色のおよその範囲を調べるために使用することができます。

+ +

構文

+ +

color-gamut 特性は以下の一覧のうち一つのキーワード値で指定します。

+ +
+
srgb
+
出力機器が sRGB 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。
+
p3
+
出力機器が DCI P3 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。
+
rec2020
+
出力機器がおよそ ITU-R 勧告 BT.2020 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。
+
+ +

例

+ +

HTML

+ +
<p>This is a test.</p>
+ +

CSS

+ +
@media (color-gamut: srgb) {
+  p {
+    background: #f4ae8a;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}{{Spec2('CSS4 Media Queries')}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.color-gamut")}}

diff --git a/files/ja/web/css/@media/color-index/index.html b/files/ja/web/css/@media/color-index/index.html new file mode 100644 index 0000000000..baeae1cd1b --- /dev/null +++ b/files/ja/web/css/@media/color-index/index.html @@ -0,0 +1,86 @@ +--- +title: color-index +slug: Web/CSS/@media/color-index +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/color-index +--- +
{{cssref}}
+ +

color-index は CSS のメディア特性で、出力端末の色参照テーブルの項目数を調べるために使用します。

+ +

構文

+ +

color-index 特性は {{cssxref("<integer>")}} 値で指定し、出力端末の色参照テーブルの項目数を表します。 (端末がそのようなテーブルを使用していなければ、値はゼロになります)。これは範囲を持つ特性であり、つまり接頭辞の付いた min-color-index および max-color-index という変化形を使用して、それぞれ最小値と最大値を問い合わせることができます。

+ +

例

+ +

基本的な例

+ +

HTML

+ +
<p>これはテストです。</p>
+
+ +

CSS

+ +
p {
+  color: black;
+}
+
+@media (color-index) {
+  p {
+    color: red;
+  }
+}
+
+@media (min-color-index: 15000) {
+  p {
+    color: #1475ef;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

独自スタイルシート

+ +

この HTML は、256色以上を持つ端末に専用のスタイルシートを適用します。

+ +
<link rel="stylesheet" href="http://foo.bar.com/base.css" />
+<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" />
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS4 Media Queries')}}値に負の数も取れるようになり、これは偽と計算されるようになった。
{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS3 Media Queries')}}初回定義。値に負の数は指定不可。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.color-index")}}

diff --git a/files/ja/web/css/@media/color/index.html b/files/ja/web/css/@media/color/index.html new file mode 100644 index 0000000000..f04c2cde11 --- /dev/null +++ b/files/ja/web/css/@media/color/index.html @@ -0,0 +1,93 @@ +--- +title: color +slug: Web/CSS/@media/color +tags: + - '@media' + - CSS + - Reference + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/color +--- +
{{cssref}}
+ +

CSS の color メディア特性は、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を調べるために使用します。

+ +

構文

+ +

color 特性は {{cssxref("<integer>")}} 値で指定し、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を表します。機器がカラー機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた min-color 及び max-color の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +
+

メモ: それぞれの色成分が異なるビット数で表現される場合は、最も小さい値が使用されます。例えば、ディスプレイが青と赤に5ビット、緑に6ビット使用する場合は、機器は色成分当たり5ビットを使用していると見なされます。機器がインデックス色を使用している場合は、色テーブル内の色成分当たりのビット数の最小値が使用されます。

+
+ +

CSS を使用して HTML に色を適用することについて、詳しくは CSS を使用した HTML 要素への色の適用をご覧ください。

+ +

例

+ +

HTML

+ +
<p>このテキストは白黒機器では黒で、色数が少ない機器では赤で、色数が多い機器では緑っぽく表示されます。</p>
+
+ +

CSS

+ +
p {
+  color: black;
+}
+
+/* Any color device */
+@media (color) {
+  p {
+    color: red;
+  }
+}
+
+/* 色成分当たり8ビット以上の色を持つ機器 */
+@media (min-color: 8) {
+  p {
+    color: #24ba13;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#color', 'color')}}{{Spec2('CSS4 Media Queries')}}The value can now be negative, in which case it computes to false.
{{SpecName('CSS3 Media Queries', '#color', 'color')}}{{Spec2('CSS3 Media Queries')}}Initial definition. The value must be nonnegative.
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.color")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/device-aspect-ratio/index.html b/files/ja/web/css/@media/device-aspect-ratio/index.html new file mode 100644 index 0000000000..4b2f947935 --- /dev/null +++ b/files/ja/web/css/@media/device-aspect-ratio/index.html @@ -0,0 +1,62 @@ +--- +title: device-aspect-ratio +slug: Web/CSS/@media/device-aspect-ratio +tags: + - '@media' + - CSS + - ウェブ + - メディアクエリ + - メディア特性 + - リファレンス + - 非推奨 +translation_of: Web/CSS/@media/device-aspect-ratio +--- +
{{cssref}} {{deprecated_header}}
+ +

CSS の device-aspect-ratio メディア特性は、出力機器の幅対高さのアスペクト比を調べるために使用します。

+ +

構文

+ +

device-aspect-ratio 特性は、 {{cssxref("<ratio>")}} で指定します。これは範囲の特性であり、つまり接頭辞の付いた min-device-aspect-ratio 及び max-device-aspect-ratio の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +
article {
+  padding: 1rem;
+}
+
+@media screen and (min-device-aspect-ratio: 16/9) {
+  article {
+    padding: 1rem 5vw;
+  }
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}メディアクエリレベル４で非推奨になりました。
{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.device-aspect-ratio")}}

diff --git a/files/ja/web/css/@media/device-height/index.html b/files/ja/web/css/@media/device-height/index.html new file mode 100644 index 0000000000..eb44c03918 --- /dev/null +++ b/files/ja/web/css/@media/device-height/index.html @@ -0,0 +1,55 @@ +--- +title: device-height +slug: Web/CSS/@media/device-height +tags: + - '@media' + - CSS + - Deprecated + - Reference + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/device-height +--- +
{{cssref}} {{deprecated_header}}
+ +

CSS の device-height メディア特性は、出力機器の描画面の高さを調べるために使用することができます。

+ +

構文

+ +

device-height 特性は、 {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-device-height 及び max-device-height の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

この HTML は、800ピクセルより短い機器に特別のスタイルシートを適用します。

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" />
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS4 Media Queries')}}メディアクエリレベル４で非推奨になりました。
{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS3 Media Queries')}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.device-height")}}

diff --git a/files/ja/web/css/@media/device-width/index.html b/files/ja/web/css/@media/device-width/index.html new file mode 100644 index 0000000000..5b43b18229 --- /dev/null +++ b/files/ja/web/css/@media/device-width/index.html @@ -0,0 +1,55 @@ +--- +title: device-width +slug: Web/CSS/@media/device-width +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス + - 非推奨 +translation_of: Web/CSS/@media/device-width +--- +
{{cssref}} {{deprecated_header}}
+ +

CSS の device-width メディア特性は、出力機器の描画面の幅を調べるために使用することができます。

+ +

構文

+ +

device-width 特性は、 {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-device-width 及び max-device-width の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

この HTML は、800ピクセルより狭い機器に特別のスタイルシートを適用します。

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" />
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS4 Media Queries')}}メディアクエリレベル４で非推奨になりました。
{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS3 Media Queries')}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.device-width")}}

diff --git a/files/ja/web/css/@media/display-mode/index.html b/files/ja/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..ccbc387df1 --- /dev/null +++ b/files/ja/web/css/@media/display-mode/index.html @@ -0,0 +1,88 @@ +--- +title: display-mode +slug: Web/CSS/@media/display-mode +tags: + - '@media' + - CSS + - display + - display-mode + - ウェブアプリマニフェスト + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/display-mode +--- +
{{cssref}}
+ +

CSS の display-mode メディア特性は、アプリケーションの表示モードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合の使い勝手に一貫性を持たせるために使用することができます。

+ +

この特性は、ウェブアプリマニフェストの display メンバーに対応しています。これは、最上位の閲覧コンテキストと子の閲覧コンテキストの両方に適用されます。このクエリは、ウェブアプリマニフェストの有無にかかわらず適用されます。

+ +

構文

+ +

display-mode 特性は、以下の一覧のうち一つのキーワード値で指定します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表示モード説明表示モードのフォールバック
fullscreen利用可能な表示領域がすべて使用され、ユーザーエージェントの{{Glossary("chrome", "クローム")}}は表示されません。standalone
standaloneアプリケーションはスタンドアロンアプリケーションのような外観や操作感になります。これは、アプリケーションが個別のウィンドウを持ったり、アプリケーションランチャーに独自のアイコンを持ったりすることを含みます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーなどその他の UI を含めることができます。minimal-ui
minimal-uiアプリケーションはスタンドアロンアプリケーションのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザーによって異なります。browser
browserアプリケーションは、ブラウザーとプラットフォームに応じて、従来のブラウザータブまたは新しいウィンドウで開きます。(なし)
+ +

例

+ +
@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.display-mode")}}

diff --git a/files/ja/web/css/@media/grid/index.html b/files/ja/web/css/@media/grid/index.html new file mode 100644 index 0000000000..20264e07d0 --- /dev/null +++ b/files/ja/web/css/@media/grid/index.html @@ -0,0 +1,91 @@ +--- +title: grid +slug: Web/CSS/@media/grid +tags: + - '@media' + - CSS + - grid + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/grid +--- +
{{cssref}}
+ +

CSS の grid メディア特性は、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。

+ +

現在のパソコンやスマートフォンの大部分は、ビットマップベースの画面を持っています。グリッドベースの画面とは、例えばテキストのみの端末や、固定フォントのみで表示する基本的な電話などです。

+ +

構文

+ +

grid 特性は {{cssxref("<mq-boolean>")}} 値 (0 又は 1) として指定し、出力機器がグリッドベースであるかどうかを表します。

+ +

例

+ +

HTML

+ +
<p class="unknown">I don't know if you're using a grid device. :-(</p>
+<p class="bitmap">You are using a bitmap device.</p>
+<p class="grid">You are using a grid device! Neato!</p>
+ +

CSS

+ +
:not(.unknown) {
+  color: lightgray;
+}
+
+@media (grid: 0) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .bitmap {
+    color: red;
+    text-transform: uppercase;
+  }
+}
+
+@media (grid: 1) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .grid {
+    color: black;
+    text-transform: uppercase;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#grid', 'grid')}}{{Spec2('CSS4 Media Queries')}}変更なし。
{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}{{Spec2('CSS3 Media Queries')}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.grid")}}

diff --git a/files/ja/web/css/@media/height/index.html b/files/ja/web/css/@media/height/index.html new file mode 100644 index 0000000000..c9154f7cd7 --- /dev/null +++ b/files/ja/web/css/@media/height/index.html @@ -0,0 +1,82 @@ +--- +title: height +slug: Web/CSS/@media/height +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/height +--- +
{{cssref}}
+ +

CSS の height メディア特性は、{{glossary("viewport", "ビューポート")}}の高さ (又はページ付きメディアのページボックスの高さ) に基づいてスタイルを適用するために使用することができます。

+ +

構文

+ +

height 特性は、ビューポートの高さを表す {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-height 及び max-height の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

HTML

+ +
<div>ビューポートの高さを変更しながら、この要素を見ていてください。</div>
+ +

CSS

+ +
/* 正確な高さ */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小高 */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大高 */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}値に負の数を取ることができるようになり、この場合は false と計算されます。
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}初回定義。値は非負でなければなりませんでした。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.height")}}

diff --git a/files/ja/web/css/@media/hover/index.html b/files/ja/web/css/@media/hover/index.html new file mode 100644 index 0000000000..7c6604d40c --- /dev/null +++ b/files/ja/web/css/@media/hover/index.html @@ -0,0 +1,68 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/hover +--- +
{{cssref}}
+ +

CSS の hover メディア特性は、第一の入力機構が要素の上でホバーすることができるかどうかをテストするために使用することができます。

+ +

構文

+ +

hover 特性は、以下の一覧のうち一つのキーワード値で指定します。

+ +
+
none
+
第一の入力機構が全くホバーができないか、差支えなくホバーをすることができない (例えば、多くのモバイル機器は便利ではないものの、ロングタップのユーザー操作で擬似的にホバーを実現する)、又は第一の入力機構がない。
+
hover
+
第一の入力機構が、要素の上で差支えなくホバーすることができる。
+
+ +

例

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.hover")}}

diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html new file mode 100644 index 0000000000..c513968094 --- /dev/null +++ b/files/ja/web/css/@media/index.html @@ -0,0 +1,157 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@-規則' + - '@media' + - CSS + - Reference + - 条件付き +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +

CSS の @media @-規則は、一つまたは複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。

+ +
+

メモ: JavaScript では、 @media を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。

+
+ +

構文

+ +

@media @-規則は、コードの最上位に配置したり、他の条件付きグループ @-規則の中に入れ子にして配置したりすることができます。

+ +
/* コードの最上位 */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* 他の条件付き＠規則の中にネスト */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

メディアクエリの文法について詳しくは、メディアクエリの利用を参照してください。

+ +

形式文法

+ +
{{csssyntax}}
+ +

メディア特性

+ +

{{page("/ja/docs/Web/CSS/Media_Queries/Using_media_queries","Media features")}}

+ +

例

+ +
@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}
+
+ +

Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。

+ +
@media (height > 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px <= width <= 700px) {
+    body { line-height: 1.4; }
+}
+
+ +

他の例については、メディアクエリの利用をご覧ください。

+ +

アクセシビリティの考慮事項

+ +

サイトの文字の大きさを調整する人のために、メディアクエリで {{cssxref("<length>")}} が必要な時には em を使用してください。

+ +

em および px はどちらも有効な単位ですが、 em はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。

+ +

また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 prefers-reduced-motion はユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します。

+ +

セキュリティ

+ +

メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。

+ +

この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書備考フィードバック
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Level 4 で除外された light-level, inverted-colors およびカスタムメディアクエリを復帰。
+ prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, prefers-color-scheme の各メディア特性を追加。		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}@media 規則の基本的な構文を定義。
{{SpecName('CSS4 Media Queries', '#media', '@media')}} +

メディア特性 scripting, pointer, hover, update, overflow-block, overflow-inline を追加。
+ screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定。
+ 構文をもっと柔軟にし、他の事の間に or キーワードを追加。

+ 		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/index/index.html b/files/ja/web/css/@media/index/index.html new file mode 100644 index 0000000000..b8b8d56198 --- /dev/null +++ b/files/ja/web/css/@media/index/index.html @@ -0,0 +1,12 @@ +--- +title: 索引 +slug: Web/CSS/@media/Index +tags: + - '@media' + - CSS + - 索引 +translation_of: Web/CSS/@media/Index +--- +

{{CSSRef}}

+ +

{{Index("/ja/docs/Web/CSS/@media")}}

diff --git a/files/ja/web/css/@media/inverted-colors/index.html b/files/ja/web/css/@media/inverted-colors/index.html new file mode 100644 index 0000000000..6b5353f258 --- /dev/null +++ b/files/ja/web/css/@media/inverted-colors/index.html @@ -0,0 +1,81 @@ +--- +title: inverted-colors +slug: Web/CSS/@media/inverted-colors +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/inverted-colors +--- +
{{cssref}}
+ +

inverted-colors は CSS のメディア特性で、{{glossary("user agent", "ユーザーエージェント")}}またはその下の OS が色を反転しているかどうかを調べるために使用することができます。

+ +

構文

+ +

inverted-colors 特性は以下の一覧のうち一つのキーワード値で指定します。

+ +
+
none
+
色が通常通り表示されます。
+
inverted
+
表示領域内のすべてのピクセルが反転されています。
+
+ +

例

+ +

HTML

+ +
<p>If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray.</p>
+<p>If the text is gray, your browser doesn't support the `inverted-colors` media feature.</p>
+ +

CSS

+ +
p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS5 Media Queries')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.inverted-colors")}}

diff --git a/files/ja/web/css/@media/monochrome/index.html b/files/ja/web/css/@media/monochrome/index.html new file mode 100644 index 0000000000..82e5a0ece3 --- /dev/null +++ b/files/ja/web/css/@media/monochrome/index.html @@ -0,0 +1,81 @@ +--- +title: monochrome +slug: Web/CSS/@media/monochrome +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/monochrome +--- +
{{cssref}}
+ +

CSS の light-level メディア特性は、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。

+ +

構文

+ +

monochrome 特性は {{cssxref("<integer>")}} 値で指定し、モノクロフレームバッファのピクセルあたりのビット数を表します。機器がモノクロ機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた min-monochrome 及び max-monochrome の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

HTML

+ +
<p class="mono">この機器はモノクロピクセルに対応しています。</p>
+<p class="no-mono">この機器はモノクロピクセルに対応していません。</p>
+ +

CSS

+ +
p {
+  display: none;
+}
+
+/* 任意のモノクロ機器 */
+@media (monochrome) {
+  p.mono {
+    display: block;
+    color: #333;
+  }
+}
+
+/* 任意のモノクロでない機器 */
+@media (monochrome: 0) {
+  p.no-mono {
+    display: block;
+    color: #ee3636;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS4 Media Queries')}}値に負の数が取れるようになり、この場合は false と計算される。
{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS3 Media Queries')}}初回定義。負の値は使用不可。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.monochrome")}}

diff --git a/files/ja/web/css/@media/orientation/index.html b/files/ja/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..3d10aab23a --- /dev/null +++ b/files/ja/web/css/@media/orientation/index.html @@ -0,0 +1,96 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - '@media' + - CSS + - Reference + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/orientation +--- +
{{cssref}}
+ +

orientation は CSS のメディア特性で、{{glossary("viewport", "ビューポート")}} (またはページ付きメディアではページボックス) の向きを調べるために使用することができます。

+ +
+

メモ: この特性は端末の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。

+
+ +

構文

+ +

orientation 特性は以下の一覧のうち一つのキーワード値で指定します。

+ +

キーワード値

+ +
+
portrait
+
ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。
+
landscape
+
ビューポートは横長です。つまり、幅が高さよりも大きい状態です。
+
+ +

例

+ +

HTML

+ +
<div>Box 1</div>
+<div>Box 2</div>
+<div>Box 3</div>
+
+ +

CSS

+ +
body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}変更なし。
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/ja/web/css/@media/overflow-block/index.html b/files/ja/web/css/@media/overflow-block/index.html new file mode 100644 index 0000000000..78205ff244 --- /dev/null +++ b/files/ja/web/css/@media/overflow-block/index.html @@ -0,0 +1,73 @@ +--- +title: overflow-block +slug: Web/CSS/@media/overflow-block +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/overflow-block +--- +
{{cssref}}
+ +

CSS の overflow-block メディア特性は、初期包含ブロックをブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。

+ +

構文

+ +

overflow-block 特性は以下の一覧のうち一つのキーワード値で指定します。

+ +
+
none
+
ブロック軸方向にあふれたコンテンツは表示されません。
+
scroll
+
ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができます。
+
optional-paged
+
ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができますが、ページ区切りを手動で ({{cssxref("break-inside")}} などによって) 入れることができ、その後のコンテンツを次のページに表示させることができます。
+
paged
+
コンテンツは不連続のページに分割されます。１ページをブロック方向にあふれるコンテンツは、次のページに表示されます。
+
+ +

例

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
+
+ +

CSS

+ +
@media (overflow-block: scroll) {
+  p {
+    color: red;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}{{Spec2('CSS4 Media Queries')}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.overflow-block")}}

diff --git a/files/ja/web/css/@media/overflow-inline/index.html b/files/ja/web/css/@media/overflow-inline/index.html new file mode 100644 index 0000000000..2b0a2d67d4 --- /dev/null +++ b/files/ja/web/css/@media/overflow-inline/index.html @@ -0,0 +1,75 @@ +--- +title: overflow-inline +slug: Web/CSS/@media/overflow-inline +tags: + - '@media' + - CSS + - Media Queries + - Reference + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/overflow-inline +--- +
{{cssref}}
+ +

overflow-inline は CSS のメディア特性で、初期包含ブロックをインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。

+ +

構文

+ +

overflow-inline 特性は以下の一覧のうち一つのキーワード値で指定します。

+ +
+
none
+
インライン軸方向にあふれたコンテンツは表示されません。
+
scroll
+
インライン軸方向にあふれたコンテンツは、スクロールすることで見ることができます。
+
+ +

例

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
+
+ +

CSS

+ +
p {
+  white-space: nowrap;
+}
+
+@media (overflow-inline: scroll) {
+  p {
+    color: red;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}{{Spec2('CSS4 Media Queries')}}初回定義。
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.at-rules.media.overflow-inline")}}
diff --git a/files/ja/web/css/@media/pointer/index.html b/files/ja/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..c912376e81 --- /dev/null +++ b/files/ja/web/css/@media/pointer/index.html @@ -0,0 +1,103 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/pointer +--- +
{{cssref}}
+ +

CSS の pointer メディア特性は、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、主要なポインティングデバイスにどれだけの正確性があるかを調べます。

+ +
+

メモ: すべてのポインティングデバイスの正確性を調べたい場合は、代わりに any-pointer を使用してください。

+
+ +

構文

+ +

pointer 特性は、以下の一覧の中から一つのキーワード値で指定します。

+ +
+
none
+
主要な入力メカニズムに、ポインティングデバイスがありません。
+
coarse
+
主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています。
+
fine
+
主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです。
+
+ +

例

+ +

次の例は、主要なポインティングデバイスの正確性によって、チェックボックスの大きさを変更しています。正確性が高い場合は小さく、低い場合は大きくなります。

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.pointer")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.html b/files/ja/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..6a22ffbc04 --- /dev/null +++ b/files/ja/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,108 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme + - ウェブ + - メディア特性 +translation_of: Web/CSS/@media/prefers-color-scheme +--- +
+

privacy.resistFingerprinting を true に設定している場合は、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} の設定は light に上書きされます。
+ あるいは、ユーザーは ui.systemUsesDarkTheme という数値設定を作成して既定の動作を上書きし、 light (値: 0)、 dark (値: 1)、 no-preference (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は light を返します。)

+
+ +

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

+ +

構文

+ +
+
no-preference
+
ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は boolean context では false と評価されます。
+
light
+
ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。
+
dark
+
ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。
+
+ +

例

+ +

以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。

+ +

HTML

+ +
<div class="day">Day (initial)</div>
+<div class="day light-scheme">Day (changes in light scheme)</div>
+<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
+
+<div class="night">Night (initial)</div>
+<div class="night light-scheme">Night (changes in light scheme)</div>
+<div class="night dark-scheme">Night (changes in dark scheme)</div>
+
+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

関連情報

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}
diff --git a/files/ja/web/css/@media/prefers-contrast/index.html b/files/ja/web/css/@media/prefers-contrast/index.html new file mode 100644 index 0000000000..b055d572b4 --- /dev/null +++ b/files/ja/web/css/@media/prefers-contrast/index.html @@ -0,0 +1,95 @@ +--- +title: prefers-contrast +slug: Web/CSS/@media/prefers-contrast +tags: + - CSS + - Reference + - media feature + - メディア特性 +translation_of: Web/CSS/@media/prefers-contrast +--- +
{{CSSRef}}{{SeeCompatTable}}{{draft}}
+ +
+

注:この機能はどのユーザーエージェントも対応しておらず、仕様が変更されることがあります。

+
+ +

prefers-contrast は CSS のメディア特性で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。

+ +

構文

+ +
+
no-preference
+
ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。
+
high
+
ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。
+
low
+
ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。
+
+ +

ユーザー設定

+ +

現在のところ、この機能を実装しているユーザエージェントはありませんが、様々なオペレーティングシステムがこのような設定をサポートしており、このメディアクエリが実装されると、ユーザエージェントはおそらくオペレーティングシステムによって提供される設定に依存することになるでしょう。

+ +

例

+ +
+

注: 現在、この機能を実装しているブラウザはないため、次の例は動作しません。

+
+ +

この例では、既定でいまいましい低いコントラストが与えられています。

+ +

HTML

+ +
<div class="contrast">low contrast box</div>
+
+ +

CSS

+ +
.contrast {
+  color: grey;
+}
+
+@media (prefers-contrast: high) {
+  .contrast {
+    color: black;
+  }
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}{{Spec2('CSS5 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.prefers-contrast")}}

+ +

関連情報

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}

diff --git a/files/ja/web/css/@media/prefers-reduced-motion/index.html b/files/ja/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..b284267a69 --- /dev/null +++ b/files/ja/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,133 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +

prefers-reduced-motion は CSS のメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。

+ +
+

重要: このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。

+
+ +

構文

+ +
+
no-preference
+
システムが把握している設定をユーザーが行っていないことを示します。
+
reduce
+
前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。
+
+ +

ユーザー設定

+ +

Firefox では、 reduce の要求は以下の場合に尊重されます。

+ + + +

例

+ +

この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  animation: pulse 1s linear infinite both;
+}
+
+/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
+@media (prefers-reduced-motion) {
+  .animation {
+    animation-name: dissolve;
+  }
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

関連情報

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}
diff --git a/files/ja/web/css/@media/resolution/index.html b/files/ja/web/css/@media/resolution/index.html new file mode 100644 index 0000000000..b71f0311f8 --- /dev/null +++ b/files/ja/web/css/@media/resolution/index.html @@ -0,0 +1,85 @@ +--- +title: resolution +slug: Web/CSS/@media/resolution +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/resolution +--- +
{{cssref}}
+ +

resolution は CSS のメディア特性で、出力端末のピクセル解像度をテストするために使用することができます。

+ +

構文

+ +

resolution 特性は、出力端末のピクセル解像度を表す {{cssxref("<resolution>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-resolution および max-resolution の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

HTML

+ +
<p>This is a test of your device's pixel density.</p>
+
+ +

CSS

+ +
/* 正確な解像度 */
+@media (resolution: 150dpi) {
+  p {
+    color: red;
+  }
+}
+
+/* 最小解像度 */
+@media (min-resolution: 72dpi) {
+  p {
+    text-decoration: underline;
+  }
+}
+
+/* 最大解像度 */
+@media (max-resolution: 300dpi) {
+  p {
+    background: yellow;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.resolution")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/scan/index.html b/files/ja/web/css/@media/scan/index.html new file mode 100644 index 0000000000..a67c63a5f9 --- /dev/null +++ b/files/ja/web/css/@media/scan/index.html @@ -0,0 +1,88 @@ +--- +title: scan +slug: Web/CSS/@media/scan +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/scan +--- +
{{cssref}}
+ +

scan は CSS のメディア特性は、 (もしあれば) 出力端末で使用されているスキャン方式を調べるために使用することができます。ここで使われるスキャンという言葉は、写真をディジタル化するためのイメージスキャナを指すものではありません。そうではなく、テレビ画面 (またはその他の端末) に画像を描画するプロセスを意味します。

+ +

構文

+ +

scan 特性は以下の一覧のうち一つのキーワード値で指定します。

+ +
+
interlace
+
その端末では奇数の走査線と偶数の走査線を別々に描きます。一部のテレビはインターレスのスキャン方式を採用しています。
+
progressive
+
その端末ではすべての走査線を順番に描きます。コンピューターの画面はすべてプログレッシブのスキャン方式を採用しています。
+
+ +

例

+ +

HTML

+ +
<p>この画面がインターレスで描画されていると、
+   文字列はサンセリフのフォントになります。プログレッシブのスキャン方式では、
+   セリフフォントで見えるでしょう。</p>
+
+ +

CSS

+ +
p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}{{Spec2('CSS4 Media Queries')}}変更なし。
{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}{{Spec2('CSS3 Media Queries')}}初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.scan")}}

diff --git a/files/ja/web/css/@media/scripting/index.html b/files/ja/web/css/@media/scripting/index.html new file mode 100644 index 0000000000..7b967b5148 --- /dev/null +++ b/files/ja/web/css/@media/scripting/index.html @@ -0,0 +1,91 @@ +--- +title: scripting +slug: Web/CSS/@media/scripting +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/scripting +--- +
{{cssref}}
+ +

scripting は CSS のメディア特性で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。

+ +

構文

+ +

scripting 特性は、以下の一覧のうち一つのキーワード値で指定します。

+ +
+
none
+
スクリプトは現在の文書で全く利用できません。
+
initial-only
+
スクリプトはページを読み込んでいる間は利用できますが、その後は利用できません。
+
enabled
+
現在の文書がスクリプトに対応しており、有効です。
+
+ +

例

+ +

HTML

+ +
<p class="script-none">スクリプトは利用できません。 :-(</p>
+<p class="script-initial-only">スクリプトはページを読み込んでいる間だけ有効です。残念。</p>
+<p class="script-enabled">スクリプトは有効です。 :-)</p>
+
+ +

CSS

+ +
p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries', '#scripting', 'scripting')}}{{Spec2('CSS5 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.scripting")}}

diff --git a/files/ja/web/css/@media/shape/index.html b/files/ja/web/css/@media/shape/index.html new file mode 100644 index 0000000000..88a428d1c6 --- /dev/null +++ b/files/ja/web/css/@media/shape/index.html @@ -0,0 +1,94 @@ +--- +title: shape +slug: Web/CSS/@media/shape +tags: + - '@-規則' + - '@media' + - At-rule + - CSS + - Reference + - メディア特性 +translation_of: Web/CSS/@media/shape +--- +
{{CSSRef}} {{ Non-standard_header }}
+ +

shape は CSS のメディア特性で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。

+ +

構文

+ +

shape は識別機能であり、四角い画面を表す rect または丸や楕円の画面を表す round の二つの文字列のうちの一つで指定します。

+ +
+
rect
+
形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。
+
round
+
形状は丸や、卵型、楕円などの円に似た形状であり、独特の丸いデザインが適しています。
+
+ +

例

+ +
+

注: 現在この特性に対応しているブラウザーはありません。

+
+ +

基本的な例

+ +

HTML

+ +
<h1>Hello World!</h1>
+
+ +

CSS

+ +
h1 {
+  text-align: left;
+}
+
+@media (shape: rect) {
+  h1 {
+    text-align: left;
+  }
+}
+
+@media (shape: round) {
+  h1 {
+    text-align: center;
+  }
+}
+
+ +

カスタムスタイルシート

+ +

この HTML は、丸い画面を持つ端末に特殊なスタイルシートを適用します。

+ +
<head>
+    <link rel="stylesheet" href="default.css" />
+    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
+    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
+</head>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
CSS Round Display Level 1草稿初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.shape")}}

diff --git a/files/ja/web/css/@media/update-frequency/index.html b/files/ja/web/css/@media/update-frequency/index.html new file mode 100644 index 0000000000..ac3b99b545 --- /dev/null +++ b/files/ja/web/css/@media/update-frequency/index.html @@ -0,0 +1,81 @@ +--- +title: update +slug: Web/CSS/@media/update-frequency +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/update-frequency +--- +
{{cssref}}
+ +

scripting は CSS のメディア特性で、出力端末がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。

+ +

構文

+ +

update 特性は、以下の一覧のうち一つのキーワード値で指定します。

+ +
+
none
+
いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。
+
slow
+
通常の CSS の規則によってレイアウトを動的に変更することができますが、出力端末はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い端末。
+
fast
+
レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力端末はふつう表示速度が制約されることがなく、 CSS アニメーションのような恒常的な更新を使用することができます。例: コンピューターの画面。
+
+ +

例

+ +

HTML

+ +
<p>このテキストが動いていれば、高速に更新できる端末を使用しています。</p>
+
+ +

CSS

+ +
@keyframes jiggle {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(25px);
+  }
+}
+
+@media (update: fast) {
+  p {
+    animation: 1s jiggle linear alternate infinite;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#update', 'update')}}{{Spec2('CSS4 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.media.update")}}

diff --git a/files/ja/web/css/@media/width/index.html b/files/ja/web/css/@media/width/index.html new file mode 100644 index 0000000000..88f07e05bf --- /dev/null +++ b/files/ja/web/css/@media/width/index.html @@ -0,0 +1,82 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/width +--- +
{{cssref}}
+ +

CSS の width メディア特性は、{{glossary("viewport", "ビューポート")}}の幅 (又はページ付きメディアのページボックスの幅) をテストするために使用することができます。

+ +

構文

+ +

width 特性は、ビューポートの幅を表す {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-width 及び max-width の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

HTML

+ +
<div>ビューポートの幅を変更しながらこの要素を見ていてください。</div>
+ +

CSS

+ +
/* 正確な幅 */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小幅 */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大幅 */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}値に負の数を取ることができるようになり、この場合は false と計算されます。
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}初回定義。値は非負でなければなりませんでした。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.width")}}

diff --git a/files/ja/web/css/@namespace/index.html b/files/ja/web/css/@namespace/index.html new file mode 100644 index 0000000000..8e8fc4643f --- /dev/null +++ b/files/ja/web/css/@namespace/index.html @@ -0,0 +1,80 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - '@-規則' + - CSS + - CSS 名前空間 + - Layout + - Reference + - Web + - ウェブ + - レイアウト +translation_of: Web/CSS/@namespace +--- +
{{CSSRef}}
+ +

@namespace は、CSS スタイルシート で使用する XML 名前空間を定義する @-規則です。定義済みの名前空間は、全称、要素型、属性の各セレクターで、その名前空間内の要素だけを選択するために使用することができます。 @namespace 規則は通常、複数の名前空間を含む文書 (インラインで SVG や MathML を含む HTML5 文書や、複数のボキャブラリが混在する XML 文書など) を扱う際に役立ちます。

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての <a> 要素を選択します。 */
+a {}
+
+/* これはすべての SVG <a> 要素を選択します。 */
+svg|a {}
+
+/* This matches both XHTML and SVG <a> elements */
+*|a {}
+ +

@namespace 規則は、スタイルシート内ですべての @charset および @import 規則より後、また他の @-規則やスタイル宣言より前に配置しなければなりません。

+ +

@namespace は、スタイルシートの既定の名前空間を定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター (属性セレクターは除く。後述の注記を参照) は、既定の名前空間内の要素にのみ適用されます。

+ +

また、 @namespace 規則で名前空間の接頭辞を定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間および要素または属性に一致する場合のみ一致します。

+ +

HTML5 では、既知の外来要素へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に xmlns 属性が存在しなくても XHTML 名前空間 (http://www.w3.org/1999/xhtml) に含まれているかのように動作します。また <svg> および <math> 要素は、適切な名前空間 (http://www.w3.org/2000/svg および http://www.w3.org/1998/Math/MathML) が割り当てられます。

+ +
+

メモ: XML では、属性に直接接頭辞を定義しない限り (例: xlink:href)、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。

+
+ +

構文

+ +
/* 既定の名前空間 */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* 接頭辞つき名前空間 */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.namespace")}}

diff --git a/files/ja/web/css/@page/bleed/index.html b/files/ja/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..83bc2b853c --- /dev/null +++ b/files/ja/web/css/@page/bleed/index.html @@ -0,0 +1,81 @@ +--- +title: bleed +slug: Web/CSS/@page/bleed +tags: + - '@page' + - CSS + - CSS ページ化メディア + - CSS 記述子 + - Experimental + - Reference + - bleed + - ウェブ +translation_of: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の bleed @-規則記述子は、 {{cssxref("@page")}} @-規則で使用し、ページボックスの外にあるページの裁ち落とし領域の大きさを指定します。このプロパティは、 {{cssxref("@page/marks", "marks")}} プロパティを使用して裁ち落とし記号を有効にしている場合のみ効果があります。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+bleed: auto;
+
+/* <length> 値 */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

値

+ +
+
auto
+
{{cssxref("@page/marks", "marks")}} が crop の場合、 6pt に計算します。それ以外の場合はゼロに計算します。
+
{{cssxref("<length>")}}
+
ページボックスの外に裁ち落とし領域を、各方向に、どれだけ広げるかを指定します。値は負の数にすることができますが、実装に依存する制限があるかもしれません。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
@page {
+  bleed: 1cm;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.page.bleed")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@page/index.html b/files/ja/web/css/@page/index.html new file mode 100644 index 0000000000..a03ac2dff6 --- /dev/null +++ b/files/ja/web/css/@page/index.html @@ -0,0 +1,110 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - '@page' + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

@page は CSS のアット規則で、文書を印刷するときに一部の CSS プロパティを変更するために使用します。

+ +

構文

+ +
@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+ +

記述子

+ +
+
size
+
対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。
+
+ +
+
marks
+
クロップや登録マークを文書に追加します。
+
+ +
+
bleed
+
ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。
+
+ +

解説

+ +

@page ですべての CSS プロパティを変更できるわけではありません。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。

+ +

@page アット規則は、 CSS オブジェクトモデルインターフェイス {{domxref("CSSPageRule")}} からアクセスできます。

+ +
注: W3C は、ビューポートに関する {{cssxref("<length>")}} の単位、 vh, vw, vmin, vmax の取り扱い方について議論中です。差し当たっては、これらを @page アット規則の中で使わないでください。
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

@page 擬似クラスの例

+ +

@page の さまざまな擬似クラスのページにある例を参照してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}:recto 及び :verso ページセレクターを追加
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}{{SpecName('CSS2.1')}} から変更はないが、 @page 内でより多くの＠規則が利用できるようになった。
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.page")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@page/marks/index.html b/files/ja/web/css/@page/marks/index.html new file mode 100644 index 0000000000..eaced148e4 --- /dev/null +++ b/files/ja/web/css/@page/marks/index.html @@ -0,0 +1,86 @@ +--- +title: marks +slug: Web/CSS/@page/marks +tags: + - '@page' + - CSS + - CSS ページ化メディア + - CSS 記述子 + - Experimental + - Reference + - ウェブ + - レイアウト +translation_of: Web/CSS/@page/marks +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の marks @-規則記述子は、 {{cssxref("@page")}} @-規則で使用し、文書の表現に対して裁ち落とし記号や十字記号を追加します。裁ち落とし記号はページを切断するべき場所を示します。十字記号はシートの配置のために使用します。

+ +

裁ち落とし記号や十字記号はページボックスの外側に印刷されます。裁ち落とし記号や十字記号を表示する余地を確保するため、最終的なページはページボックスよりいくらか大きくする必要があります。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+
+ +

値

+ +
+
crop
+
裁ち落とし記号を表示します。
+
cross
+
十字記号を表示します。
+
none
+
記号を表示しません。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
@page {
+  marks: crop cross;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}初回定義。
+ +

この CSS プロパティは当初は CSS Level 2 で提案されましたが、 CSS Level 2 (Revision 1) で落とされました。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.page.marks")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@page/size/index.html b/files/ja/web/css/@page/size/index.html new file mode 100644 index 0000000000..5193209c53 --- /dev/null +++ b/files/ja/web/css/@page/size/index.html @@ -0,0 +1,139 @@ +--- +title: size +slug: Web/CSS/@page/size +tags: + - '@page' + - At-rule descriptor + - CSS + - CSS Descriptor + - Experimental + - NeedsBrowserCompatibility + - Reference + - Web +translation_of: Web/CSS/@page/size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の size アット規則記述子は、 {{cssxref("@page")}} アット規則で使用し、ページを表現するために使用するボックスの寸法と向きを定義します。多くの場合、この寸法は印刷ページの適用可能な対象の寸法に対応します。

+ +

寸法は「拡縮可能な」キーワード (この場合、ページの有効な大きさ全体を使用します) 又は絶対的な長さのどちらかで定義します。

+ +

構文

+ +
/* 拡縮可能な寸法のキーワード値 */
+size: auto;
+size: portrait;
+size: landscape;
+
+/* <length> 値 */
+/* 1 値: 高さ = 幅 */
+size: 6in;
+
+/* 2 値: 幅の後に高さ*/
+size: 4in 6in;
+
+/* 絶対寸法のキーワード値 */
+size: A4;
+size: B5;
+size: JIS-B4;
+size: letter;
+
+/* 寸法と方向の混合 */
+size: A4 portrait;
+
+ +

値

+ +
+
auto
+
ユーザーエージェントがページの寸法を決定します。多くの場合、対象となる用紙の寸法と向きが使用されます。
+
landscape
+
ページのコンテンツは横向きモード (ボックスの長辺が水平) で表示されます。
+
portrait
+
ページのコンテンツは縦向きモード (ボックスの長辺が垂直) で表示されます。これが既定の向きです。
+
<length>
+
何らかの長さの値 ({{cssxref("<length>")}} を参照)。最初の値はページボックスの幅に対応し、二番目の値は高さに対応します。一つしか値が提供されない場合は、幅と高さの両方に使用されます。
+
<page-size>
+
+
+
A5
+
これは標準の ISO の寸法 148mm x 210mm に一致します。
+
A4
+
これは標準の ISO の寸法 210mm x 297mm に一致します。 (個人の印刷では最もよく使われる寸法です。)
+
A3
+
これは標準の ISO の寸法 297mm x 420mm に一致します。
+
B5
+
これは標準の ISO の寸法 176mm x 250mm に一致します。
+
B4
+
これは標準の ISO の寸法 250mm x 353mm に一致します。
+
JIS-B5
+
これは JIS 標準の寸法 182mm x 257mm に対応します。
+
JIS-B4
+
これは JIS 標準の寸法 257mm x 364mm に対応します。
+
letter
+
このキーワードは北米のレター用紙の寸法、すなわち 8.5in x 11in と同等です。
+
legal
+
このキーワードは北米のリーガル用紙の寸法、すなわち 8.5in x 14in と同等です。
+
ledger
+
このキーワードは北米の ledger 用紙の寸法、すなわち 11in x 17in と同等です。
+
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

寸法と向きの指定

+ +
@page {
+  size: 4in 6in landscape;
+}
+
+ +

@media 規則内部の入れ子

+ +
@media print {
+  @page {
+    size: 50mm 150mm;
+  }
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#page-size-prop', 'size')}}{{Spec2('CSS3 Paged Media')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.page.size")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@supports/index.html b/files/ja/web/css/@supports/index.html new file mode 100644 index 0000000000..68aa4f4bc7 --- /dev/null +++ b/files/ja/web/css/@supports/index.html @@ -0,0 +1,201 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +tags: + - At-rule + - CSS + - Layout + - Reference + - Web + - supports +translation_of: Web/CSS/@supports +--- +
{{CSSRef}}
+ +

@supports は CSS の アット規則で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは機能クエリと呼ばれます。規則はコードの最上位または他の条件付きグループアット規則の中に配置することができます。

+ +
@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}
+ +
@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}
+ +

JavaScript では @supports は CSS オブジェクトモデルインターフェイスの {{DOMxRef("CSSSupportsRule")}} からアクセスできます。

+ +

構文

+ +

@supports アット規則は、ステートメントのブロックを対応条件に関連付けます。対応条件は1つまたは複数の名前と値の組を結合条件 (and)、非結合条件(or)、否定 (not) で組み合わせたものです。演算子の結合順位は、括弧を使用して変更できます。

+ +

宣言の構文

+ +

もっとも基本的な対応条件は、単純な宣言 (プロパティ名に続けて、コロンで区切って値) です。宣言は括弧で囲む必要があります。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として 5% 5% を有効とみなすのであれば true を返します。

+ +
@supports (transform-origin: 5% 5%) {}
+ +

関数構文

+ +

第二の基本的な対応状況は関数の対応であり、これらの構文はすべてのブラウザーで対応されていますが、関数自体はまだ標準化の過程にあります。

+ +

selector() {{Experimental_Inline}}

+ +

ブラウザーがテストされたセレクターの構文に対応しているかどうかを検査します。以下の例は、ブラウザーが子結合子に対応していれば true を返します。

+ +
@supports selector(A > B) {}
+ +

not 演算子

+ +

not 演算子は、新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として 10em 10em 10em を有効とみなさないのであれば true を返します。

+ +
@supports not (transform-origin: 10em 10em 10em) {}
+ +

他の演算子と同様に、 not 演算子はどれだけ複雑な宣言にも適用できます。以下の例はすべて有効な式です。

+ +
@supports not (not (transform-origin: 2px)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+ +
+

注: not 演算子が最上位にある場合は、括弧でくくる必要はありません。 and や or といった他の演算子と組み合わせるときは、括弧が必須です。

+
+ +

and 演算子

+ +

and 演算子は 2 つの式から、元の式の論理積で構成される新たな式を作成します。元の式の両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式が同時に true になる場合に限り、全体の式も true になります。

+ +
@supports (display: table-cell) and (display: list-item) {}
+ +

括弧を増やすことなく、複数の論理積を並記することができます。以下の式はどちらも等価です。

+ +
@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}
+ +

or 演算子

+ +

or 演算子は 2 つの式から、元の式の論理和で構成される新たな式を作成します。元の式の一方または両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式の少なくとも 1 つが true になる場合に限り、全体の式も true になります。

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
+ +

括弧を増やすことなく、複数の論理和を並記することができます。以下の式はどちらも等価です。

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
+          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+
+ +
+

注: and 演算子と or 演算子を両方とも使用するときは、これらを適用する順序を定義するために括弧を使用しなければなりません。そうしなければ、アット規則全体を無視させる無効な条件になります。

+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

指定した CSS プロパティの対応状況を確認する

+ +
@supports (animation-name: test) {
+  … /* 接頭辞がないプロパティでアニメーションに対応する場合に適用する CSS */
+  @keyframes { /* 他のアット規則を含むことができる */
+    …
+  }
+}
+
+ +

指定した CSS プロパティの対応状況を、接頭辞付きも含めて確認する

+ +
@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+         (-ms-perspective: 10px) or (-o-perspective: 10px)) {
+  … /* 接頭辞つきを含めて 3D transforms を対応する場合に適用する CSS */
+}
+
+ +

指定した CSS プロパティに対応していないことを確認する

+ +
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
+  … /* text-align-last:justify をシミュレートするために適用する CSS */
+}
+ +

カスタムプロパティの対応状況を確認する

+ +
@supports (--foo: green) {
+  body {
+    color: var(--varName);
+  }
+}
+ +

セレクターの対応の検査 (例: {{CSSxRef(":is", ":is()")}})

+ +

{{SeeCompatTable}}

+ +
/* この規則は :is() に対応していないブラウザーでは適用されません */
+:is(ul, ol) > li {
+  … /* :is(…) セレクターに対応している場合に CSS が適用される */
+}
+
+@supports not selector(:is(a, b)) {
+  /* :is() に対応していない場合の代替 */
+  ul > li,
+  ol > li {
+    … /* 上記のものは :is(…) に対応していないブラウザーのために展開しています */
+  }
+}
+
+/* Note: By far, there's no browser that supports the `of` argument of :nth-child(…) */
+@supports selector(:nth-child(1n of a, b)) {
+  /* This rule needs to be inside the @supports block, otherwise
+     it will be partially applied in browsers which don't support
+     the `of` argument of :nth-child(…) is supported */
+  :is(
+      :nth-child(1n of ul, ol) a,
+      details > summary
+  ) {
+    … /* CSS applied when the :is(…) selector and
+         the `of` argument of :nth-child(…) are both supported */
+  }
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Conditional", "#at-supports-ext", "@supports")}}{{Spec2("CSS4 Conditional")}}selector() 関数を追加
{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS3 Conditional")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.supports")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@viewport/height/index.html b/files/ja/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..684d82b752 --- /dev/null +++ b/files/ja/web/css/@viewport/height/index.html @@ -0,0 +1,85 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

height は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。

+ +

ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。

+ +

構文

+ +
/* 1つの値 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+
+ +

値

+ +
+
auto
+
使用値は他の CSS 記述子の値から計算されます。
+
<length>
+
負の数ではない絶対的または相対的な長さです。
+
<percentage>
+
拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

高さの最小値と最大値の設定

+ +
@viewport {
+  height: 500px;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.height")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@viewport/index.html b/files/ja/web/css/@viewport/index.html new file mode 100644 index 0000000000..de6cfc815c --- /dev/null +++ b/files/ja/web/css/@viewport/index.html @@ -0,0 +1,132 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - '@viewport' + - At-rule + - CSS + - Experimental + - Layout + - Mobile + - Reference + - Screen Layout + - viewport +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}{{deprecated_header}}
+ +
+

注: https://github.com/w3c/csswg-drafts/issues/4766 に @viewport を標準路線から除外することに関する議論があります。

+
+ +

@viewport は CSS のアット規則で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。

+ +

パーセント値で指定された長さは、初期ビューポートからの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。

+ +

モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。

+ +
@viewport {
+  width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
+}
+
+ +
+

メモ: <meta name="viewport"> タグを使用すると、 @viewport より優先します。

+
+ +

構文

+ +

このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。

+ +

1.0 または 100% のズーム倍率はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。

+ +

記述子

+ +

現時点では @viewport のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 @viewport は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。

+ +
+
min-width
+
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
+
max-width
+
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
+
width
+
min-width と max-width の両方を設定するための一括指定です。
+
min-height
+
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
+
max-height
+
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
+
height
+
min-height と max-height の両方を設定するための一括指定です。
+
zoom
+
ズームの初期値を設定します。
+
min-zoom
+
ズームの最小値を設定します。
+
max-zoom
+
ズームの最大値を設定します。
+
user-zoom
+
ユーザーがズーム倍率を変更できるか否かを制御します。
+
orientation
+
文書の向きを制御します。
+
{{cssxref("@viewport/viewport-fit", "viewport-fit")}}
+
長方形ではないディスプレイでの文書の表示を制御します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ビューポートの大きさ、拡大率、向きの設定

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}{{cssxref("@viewport/viewport-fit", "viewport-fit")}} 記述子を定義。
{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@viewport/max-height/index.html b/files/ja/web/css/@viewport/max-height/index.html new file mode 100644 index 0000000000..35b966dced --- /dev/null +++ b/files/ja/web/css/@viewport/max-height/index.html @@ -0,0 +1,76 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

CSS の max-height 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。

+ +

最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。

+ +

{{cssinfo}}

+ +

構文

+ +
/* Keyword value */
+max-height: auto;
+
+/* <length> values */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* <percentage> value */
+max-height: 75%;
+ +

値

+ +
+
auto
+
使用する値は他の CSS 記述子の値から計算されます。
+
<length>
+
負ではない絶対値または相対値。
+
<percentage>
+
垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
@viewport {
+  max-height: 600px;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}{{Spec2('CSS3 Device')}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("css.at-rules.viewport.max-height")}}

diff --git a/files/ja/web/css/@viewport/max-zoom/index.html b/files/ja/web/css/@viewport/max-zoom/index.html new file mode 100644 index 0000000000..e4938538fd --- /dev/null +++ b/files/ja/web/css/@viewport/max-zoom/index.html @@ -0,0 +1,88 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

min-zoom は CSS の記述子で、 {{cssxref("@viewport")}} アット規則で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。

+ +

表示倍率 が 1.0 または 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

構文

+ +
/* キーワード値 */
+max-zoom: auto;
+
+/* <number> 値 */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* <percentage> 値 */
+max-zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。
+
{{cssxref("<number>")}}
+
非負の数値で、表示倍率の上限です。
+
{{cssxref("<percentage>")}}
+
非負のパーセント値で、表示倍率の上限です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

max-zoom の設定

+ +
@viewport {
+  max-zoom: 1.5;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.max-zoom")}}

+ +

See also

+ + diff --git a/files/ja/web/css/@viewport/min-zoom/index.html b/files/ja/web/css/@viewport/min-zoom/index.html new file mode 100644 index 0000000000..7890bffa6b --- /dev/null +++ b/files/ja/web/css/@viewport/min-zoom/index.html @@ -0,0 +1,70 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - '@viewport' + - CSS + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

CSS の min-zoom 記述子は、 {{cssxref("@viewport")}} @-規則で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。

+ +

表示倍率 が 1.0 又は 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+min-zoom: auto;
+
+/* <number> 値 */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* <percentage> 値 */
+min-zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。
+
{{cssxref("<number>")}}
+
非負の数値で、表示倍率の下限です。
+
{{cssxref("<percentage>")}}
+
非負のパーセント値で、表示倍率の下限です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.viewport.min-zoom")}}

diff --git a/files/ja/web/css/@viewport/viewport-fit/index.html b/files/ja/web/css/@viewport/viewport-fit/index.html new file mode 100644 index 0000000000..8093487398 --- /dev/null +++ b/files/ja/web/css/@viewport/viewport-fit/index.html @@ -0,0 +1,77 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - CSS 記述子 + - Experimental + - Reference + - モバイル + - 画面レイアウト +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

CSS の viewport-fit {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。

+ +

構文

+ +
/* キーワード値 */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

値

+ +
+
auto
+
この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。
+
contain
+
ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。
+
cover
+
ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、安全領域差し込み変数を使用するために強く推奨されます。
+
+ +

形式文法

+ +
auto | contain | cover
+
+ + + +

アクセシビリティの考慮事項

+ +

viewport-fit 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、安全領域差し込み変数を使用してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.viewport-fit")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/@viewport/zoom/index.html b/files/ja/web/css/@viewport/zoom/index.html new file mode 100644 index 0000000000..72405334b6 --- /dev/null +++ b/files/ja/web/css/@viewport/zoom/index.html @@ -0,0 +1,90 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

zoom は CSS の記述子で、 {{cssxref("@viewport")}} アット規則で定義された文書の表示倍率の初期値を設定します。

+ +

表示倍率 が 1.0 または 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

構文

+ +
/* キーワード値 */
+zoom: auto;
+
+/* <number> 値 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* <percentage> 値 */
+zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。
+
{{cssxref("<number>")}}
+
表示倍率として使われる非負の数値です。
+
{{cssxref("<percentage>")}}
+
表示倍率として使われる非負のパーセント値です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ビューポートの zoom 係数の設定

+ +
@viewport {
+  zoom: 2.0;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.zoom")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-alt-text/index.html b/files/ja/web/css/_colon_-moz-alt-text/index.html new file mode 100644 index 0000000000..be215a2997 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-alt-text/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-alt-text' +slug: 'Web/CSS/:-moz-alt-text' +tags: + - CSS + - CSS Reference + - Non-standard +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}

+ +

概要

+ +

:-moz-alt-text は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。

+ +

このセレクタは主にテーマ開発者によって使用されるものです。

+ +

Bugzilla

+ +

{{ Bug(11011) }}

diff --git a/files/ja/web/css/_colon_-moz-broken/index.html b/files/ja/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..b1958e3ed3 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-broken/index.html @@ -0,0 +1,58 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - NeedsCompatTable + - Non-standard + - Pseudo-class + - Reference + - Selector +translation_of: 'Web/CSS/:-moz-broken' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
+ +

:-moz-broken は CSS の擬似クラスで、 Mozilla 拡張 であり、壊れた画像リンクを表している要素に一致します。

+ +
+

注: このセレクターは、主にテーマ開発者が使用することを意図しているものです。

+
+ +

構文

+ +
:-moz-broken
+ +

例

+ +

HTML

+ +
<img src="broken.jpg" alt="This image is broken. :-(">
+ +

CSS

+ +
:-moz-broken {
+  background: bisque;
+  padding: 8px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ +

標準の一部ではありません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-moz-broken")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-drag-over/index.html b/files/ja/web/css/_colon_-moz-drag-over/index.html new file mode 100644 index 0000000000..f52d2475d1 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-drag-over/index.html @@ -0,0 +1,41 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - Mozilla 拡張 + - Non-standard + - Reference + - 疑似クラス +translation_of: 'Web/CSS/:-moz-drag-over' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の :-moz-drag-over 擬似クラスは Mozilla 拡張で、 {{event("dragover")}} イベントが呼び出される時に要素に一致します。

+ +

構文

+ +
:-moz-drag-over
+
+ +

例

+ +

HTML

+ +
<table border="1">
+  <tr>
+    <td width="100px" height="100px">Drag Over</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
td:-moz-drag-over {
+  color: red;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

diff --git a/files/ja/web/css/_colon_-moz-first-node/index.html b/files/ja/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..fd98789b11 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,47 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

概要

+ +

:-moz-first-node CSS 擬似クラスは、ある要素の最初の子ノードの要素に一致します。最初の子要素の前に (スペースではない) テキストがあると一致しないため、{{Cssxref(":first-child")}} とは動作が異なります。

+ +

要素の先頭にある空白文字は :-moz-first-node の決定において無視されます。

+ +

構文

+ +
span:-moz-first-node { style プロパティ }
+
+ +

例

+ +

CSS

+ +
span:-moz-first-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +

+  :-moz-first-node
+  :-moz-last-node
+

+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

参照

+ + diff --git a/files/ja/web/css/_colon_-moz-focusring/index.html b/files/ja/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..ca239be548 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,71 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-class + - Reference + - Selector +translation_of: 'Web/CSS/:-moz-focusring' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

CSS の :-moz-focusring 擬似クラスは、 {{cssxref(":focus")}} 擬似クラスに似た Mozilla 拡張ですが、現在フォーカスが当たっていて、かつフォーカスリングやその他のインジケーターがその周りに描かれる場合のみ一致します。

+ +
+

重要: このセレクターは CSS Selectors 4 仕様で {{cssxref(":focus-visible")}} に改名されました。

+
+ +

:-moz-focusring に一致すると :focus にも一致しますが、逆は常に成り立つとは限りません。{{glossary("user agent", "ユーザーエージェント")}}がフォーカスリングの描画を有効にしているかどうか、どのようにして要素にフォーカスが当たったかによります。ユーザーエージェントがフォーカスリングの描画を有効にしているかどうかは、オペレーティングシステムの設定やその他の要因によりますので、この擬似クラスの詳細な動きはプラットフォームごとに異なります。

+ +

作業グループは以前、この機能を CSS Selectors 4 または 5 で :focus-ring として追加する意向を持っており、改名が決定され {{cssxref(":focus-visible")}} となり、 CSS Selectors 4 に追加されました。

+ +
+

注: 開発者は :-moz-focusring を、 focus 状態がユーザーによるマウスのクリックとキーボードのタブ移動のどちらで行なわれたのかを区別するために使う傾向があります。これはカスタム要素を作成し、振る舞いに応じてスタイルを変更したい場合にも便利かもしれません。

+
+ +

構文

+ +
:-moz-focusring
+ +

例

+ +

HTML

+ +
<input />
+
+ +

CSS

+ +
input {
+  margin: 5px;
+}
+
+:-moz-focusring {
+  color: red;
+  outline: 2px dotted green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ +

どの仕様にも含まれていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-moz-focusring")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/ja/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..13b68ab469 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,39 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - CSS プロパティ + - 'CSS:Mozilla Extensions' + - Deprecated + - Non-standard + - Pseudo-class + - Reference +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +
{{CSSRef}}{{non-standard_header}}{{deprecated_header}}
+ +

:-moz-full-screen-ancestor は CSS の 擬似クラスで Mozilla 拡張であり、全画面要素のすべての祖先を表しますが、全画面化する要素を含む親文書の包含フレームは含みません。しかし、これらの要素の祖先は適用されるこの擬似クラスを持ちます。

+ +
+

この擬似クラスはThis Firefox 50 で削除されました。

+
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.-moz-full-screen-ancestor")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-last-node/index.html b/files/ja/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..3613692e05 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,47 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

概要

+ +

:-moz-last-node CSS 擬似クラスは、ある要素の最後の子ノードの要素に一致します。最後の子要素の後に (スペースではない) テキストがあると一致しないため、{{ Cssxref(":last-child") }} とは動作が異なります。

+ +

要素の末尾にある空白文字は :-moz-last-node の決定において無視されます。

+ +

構文

+ +
span:-moz-last-node { style プロパティ }
+
+ +

例

+ +

CSS

+ +
span:-moz-last-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

参照

+ + diff --git a/files/ja/web/css/_colon_-moz-list-bullet/index.html b/files/ja/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..a6629e3317 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,41 @@ +--- +title: ':-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

概要

+ +

非標準の :-moz-list-bullet Mozilla CSS 擬似クラスは、リスト要素のマーカーを編集するために使用されます。

+ +

構文

+ +

CSS

+ +
.list li::-moz-list-bullet {
+  font-size: 36px;
+}
+
+ +

HTML

+ +
<ul>
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+<ul class="list">
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+
+ +

結果

+ +

Image:liug3.jpg

diff --git a/files/ja/web/css/_colon_-moz-loading/index.html b/files/ja/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..ec446f7f98 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-loading/index.html @@ -0,0 +1,41 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - NeedsCompatTable + - Non-standard + - Pseudo-class + - Reference + - Selector + - セレクター + - 擬似クラス + - 標準外 +translation_of: 'Web/CSS/:-moz-loading' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
+ +

:-moz-loading は CSS の 擬似クラスで Mozilla 拡張であり、読み込みが開始されていないために表示できない要素、例えばまだ到着が開始されていない画像などに一致します。なお、読み込み中の画像は、この擬似クラスには一致しません。

+ +
+

注: このセレクターは主にテーマ開発者が使用するためのものです。

+
+ +

構文

+ +
:-moz-loading
+ +

例

+ +
:-moz-loading {
+  background-color: #aaa;
+  background-image: url(loading-animation.gif) center no-repeat;
+}
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/ja/web/css/_colon_-moz-locale-dir(ltr)/index.html new file mode 100644 index 0000000000..49543bf307 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -0,0 +1,47 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - Mozilla 拡張 + - Non-standard + - Reference + - ローカライズ + - 疑似クラス +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.2")}}
+ +

CSS の :-moz-locale-dir(ltr) 疑似クラスは Mozilla 拡張であり、ユーザーインターフェイスが左から右へ向けて表示される要素に一致します。これは設定の intl.uidirection.locale (locale は現在のロケール) が "ltr" に設定されていることで特定されます。

+ +
+

メモ: 擬似クラスは、主に拡張機能及びテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。

+
+ +
+

このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。

+
+ +

例

+ +

HTML

+ +
<p>If you're using a left-to-right interface, this should be red.</p>
+
+ +

CSS

+ +
p:-moz-locale-dir(ltr) {
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html new file mode 100644 index 0000000000..e5c25e95ba --- /dev/null +++ b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -0,0 +1,50 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - Mozilla 拡張 + - Right-to-left + - リファレンス + - ローカライズ + - 右書き + - 標準外 + - 疑似クラス +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.2")}}
+ +

CSS の :-moz-locale-dir(ltr) 疑似クラスは Mozilla 拡張であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の intl.uidirection.locale (locale は現在のロケール) が "rtl" に設定されていることで特定されます。

+ +
+

メモ: 擬似クラスは、主に拡張機能及びテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。

+
+ +
+

このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致しません。

+
+ +

例

+ +

HTML

+ +
<p>If you're using a right-to-left interface, this should be red.</p>
+
+ +

CSS

+ +
p:-moz-locale-dir(ltr) {
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-only-whitespace/index.html b/files/ja/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..95e836c637 --- /dev/null +++ b/files/ja/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,77 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - ':-moz-only-whitespace' + - CSS + - Non-standard + - Pseudo-class + - Reference + - セレクター +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{CSSRef}}{{Non-standard_Header}}
+ +
+

メモ: {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} では、 {{CSSxRef(":empty")}} セレクターが :-moz-only-whitespace のように動作するよう変更されましたが、まだこれに対応しているブラウザーはありません。

+
+ +

CSS の :-moz-only-whitespace 擬似クラスは、{{Glossary("whitespace", "ホワイトスペース")}}のみが入ったテキストノードのみを含む要素に一致します。 (これには空のテキストノードや子ノードを持たない要素も含みます)。

+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<div> </div>
+
+ +

CSS

+ + + +
div {
+  border: 4px solid red;
+}
+
+:-moz-only-whitespace {
+  border-color: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", "50")}}

+ +

仕様書

+ +

短期間だけ :blank として {{SpecName("CSS4 Selectors", "#changes-2018-02")}} において定義されましたが、その後に機能的に {{CSSxRef(":empty")}} に統合され、 {{CSSxRef(":blank")}} は空欄の {{HTMLElement("input")}} を意味するように再定義されました。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.-moz-only-whitespace")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-moz-placeholder/index.html b/files/ja/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..02eb38eafd --- /dev/null +++ b/files/ja/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,58 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:placeholder-shown' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}

+ +
Note: The :-moz-placeholder pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.
+ +
Note: The CSSWG have decided to introduce :placeholder-shown. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}
+ +

概要

+ +

:-moz-placeholder はプレースホルダを表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。

+ +

たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。

+ +

例

+ +

この例はプレースホルダの文字色を緑色に変更しています。

+ +
<!doctype html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

View this example live.

+ +

Bugzilla

+ +

{{ Bug(457801) }}

+ +

注記

+ +
Note: このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、全く異なる目的 から間違って作られていました。
+ +

参考

+ + diff --git a/files/ja/web/css/_colon_-moz-submit-invalid/index.html b/files/ja/web/css/_colon_-moz-submit-invalid/index.html new file mode 100644 index 0000000000..e3c30af31a --- /dev/null +++ b/files/ja/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,40 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - ':-moz-submit-invalid' + - CSS + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - Non-standard + - Pseudo-class + - Reference + - Selector + - 擬似クラス + - 標準外 +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +
{{CSSRef}}{{Non-standard_Header}}
+ +

:-moz-submit-invalid は CSS の擬似クラスで、 Mozilla 拡張であり、フォームの送信 {{HTMLElement("button")}} のうち、内容が制約の検証で妥当ではないものを表します。

+ +

既定では、適用されているスタイルはありません。この擬似クラスを使用して、無効なフォーム欄があった場合の送信ボタンの外見をカスタマイズすることができます。

+ +

構文

+ +
{{csssyntax}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-moz-submit-invalid")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_-webkit-autofill/index.html b/files/ja/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..2e8ba6c793 --- /dev/null +++ b/files/ja/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,34 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - Non-standard + - Reference + - 擬似クラス +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の :-webkit-autofill 疑似クラスは、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。

+ +

メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-webkit-autofill スタイル定義に !important を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。

+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.-webkit-autofill")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_active/index.html b/files/ja/web/css/_colon_active/index.html new file mode 100644 index 0000000000..595e02a93e --- /dev/null +++ b/files/ja/web/css/_colon_active/index.html @@ -0,0 +1,130 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

CSS の :active 疑似クラスは、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。マウスを使用する場合は、「アクティブ化」とはふつう、第1ボタンを押し下げたときに始まります。

+ +
/* アクティブ化されている <a> をすべて選択します */
+a:active {
+  color: red;
+}
+ +

:active 疑似クラスは、 {{HTMLElement("a")}} 及び {{HTMLElement("button")}} 要素で使われます。この疑似クラスで他のよくあるターゲットとしては、アクティブ化される要素を含む要素や、関連付けられた {{HTMLElement("label")}} 要素を通してアクティブ化されるフォーム要素です。

+ +

:active 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":link")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :link — :visited — :hover — :active で定義されるように、他のすべてのリンク関連規則の後に :active 規則を置いてください。

+ +
メモ: 複数ボタンのマウスを使うシステムでは、 CSS 3 は :active 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ + + +

HTML

+ +
<p>この段落にはリンクが含まれています。
+  <a href="#">このリンクはクリックすると赤色になります。</a>
+  この段落は段落やリンクをクリックすると灰色になります。
+</p>
+ +

CSS

+ +
a:link { color: blue; }          /* 未訪問リンク */
+a:visited { color: purple; }     /* 訪問済みリンク */
+a:hover { background: yellow; }  /* ホバー時 */
+a:active { color: red; }         /* アクティブなリンク */
+
+p:active { background: #eee; }   /* アクティブな段落 */
+ +

結果

+ +

{{EmbedLiveSample('Active_links')}}

+ +

フォーム要素をアクティブ化

+ +

HTML

+ +
<form>
+  <label for="my-button">My button: </label>
+  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
+</form>
+ +

CSS

+ +
form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

結果

+ +

{{EmbedLiveSample('Active_form_elements')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}変更なし。
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}初回定義。
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.active")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_any-link/index.html b/files/ja/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..045771ef23 --- /dev/null +++ b/files/ja/web/css/_colon_any-link/index.html @@ -0,0 +1,77 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - CSS 疑似クラス + - Experimental + - Reference + - Web + - セレクター + - レイアウト +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}}
+ +

CSS の :any-link 疑似クラスセレクターは、訪問の有無とは独立したソースアンカーとして振る舞う要素を表します。言い換えれば、 href 属性を持つすべての {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} の各要素を選択します。つまり、 {{cssxref(":link")}} または {{cssxref(":visited")}} に一致するすべての要素を選択します。

+ +
/* :link または :visited に該当するすべての要素を選択 */
+:any-link {
+  color: green;
+}
+ +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<a href="https://example.com">External link</a><br>
+<a href="#">Internal target link</a><br>
+<a>Placeholder link (won't get styled)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.any-link")}}

diff --git a/files/ja/web/css/_colon_blank/index.html b/files/ja/web/css/_colon_blank/index.html new file mode 100644 index 0000000000..31b50869f2 --- /dev/null +++ b/files/ja/web/css/_colon_blank/index.html @@ -0,0 +1,78 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank' +tags: + - ':blank' + - CSS + - CSS Selectors + - Draft + - Experimental + - NeedsContent + - NeedsExample + - Pseudo-class +translation_of: 'Web/CSS/:blank' +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +
+

注: :blank セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。

+ +

CSSWG issue #1967 を参照してください。

+
+ +

:blank は CSS の擬似クラスで、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) に一致します。

+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

単純な :blank の例

+ +

最終的に対応しているブラウザーでは、 :blank 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。

+ +

HTML

+ +
<textarea></textarea>
+ +

CSS

+ +
textarea:blank {
+  border: 3px solid red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.blank")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_checked/index.html b/files/ja/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..f5be173f83 --- /dev/null +++ b/files/ja/web/css/_colon_checked/index.html @@ -0,0 +1,215 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - ':checked' + - CSS + - Checked + - Layout + - Pseudo-class + - Reference + - Selector + - Toggled + - Web + - button + - checkbox + - radio +translation_of: 'Web/CSS/:checked' +--- +
{{CSSRef}}
+ +

:checked は CSS の擬似クラスセレクターで、ラジオボタン (<input type="radio">)、 チェックボックス (<input type="checkbox">)、 オプションボタン ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり on の状態にあったりすることを表します。

+ +
/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +

ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。

+ +
+

メモ: ブラウザ―は <option> を置換要素として扱うことが多いので、 :checked 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Yes</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="no">No</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Apples</option>
+  <option value="opt2">Grapes</option>
+  <option value="opt3">Pears</option>
+</select>
+
+ +

CSS

+ +
div,
+select {
+  margin: 8px;
+}
+
+/* チェックが入った入力のラベル */
+input:checked + label {
+  color: red;
+}
+
+/* チェックが入ったラジオボタン */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* チェックが入ったチェックボックス */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* 選択されたオプション */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

非表示のチェックボックスの要素を切り替え

+ +

この例では、 :checked 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 JavaScript はまったく使っていません。

+ +

HTML

+ +
<input type="checkbox" id="expand-toggle" />
+
+<table>
+  <thead>
+    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
+  </thead>
+  <tbody>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+  </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+
+ +

CSS

+ +
/* トグルチェックボックスを隠す */
+#expand-toggle {
+  display: none;
+}
+
+/* 開く要素は既定で隠す */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* ボタンにスタイルを適用 */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* チェックボックスをチェックしたときに隠しコンテンツを表示 */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* チェックボックスがチェックされていたらボタンにスタイルを適用 */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+ +

結果

+ +

{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}

+ + + +

:checked 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるにはこのデモを参照してください。

+ +
メモ: 似たような効果で、 :hover 擬似クラスを使用して隠しラジオボタンを使わないものについては、 :hover のリファレンスページからのこのデモを参照してください。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}HTML に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.checked")}}

+ +

関連情報

+ + +
diff --git a/files/ja/web/css/_colon_default/index.html b/files/ja/web/css/_colon_default/index.html new file mode 100644 index 0000000000..528bbd7d80 --- /dev/null +++ b/files/ja/web/css/_colon_default/index.html @@ -0,0 +1,111 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - CSS 基本ユーザーインターフェイス + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

:default は CSS の擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。

+ +

このセレクターが何に一致するかについては、 HTML Standard §4.16.3 Pseudo-classes で定義されています。 — {{htmlelement("button")}}、 <input type="checkbox">、 <input type="radio">、 {{htmlelement("option")}} 要素に一致させることができます。

+ + + +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<fieldset>
+  <legend>Favorite season</legend>
+
+  <input type="radio" name="season" id="spring">
+  <label for="spring">Spring</label>
+
+  <input type="radio" name="season" id="summer" checked>
+  <label for="summer">Summer</label>
+
+  <input type="radio" name="season" id="fall">
+  <label for="fall">Fall</label>
+
+  <input type="radio" name="season" id="winter">
+  <label for="winter">Winter</label>
+</fieldset>
+
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}HTML に関する意味付けと制約検証を定義。
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}変更なし。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.default")}}

+ +

関連情報

+ + +
diff --git a/files/ja/web/css/_colon_defined/index.html b/files/ja/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..814f136f82 --- /dev/null +++ b/files/ja/web/css/_colon_defined/index.html @@ -0,0 +1,125 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - HTML + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:defined' +--- +
{{ CSSRef }}
+ +

CSS の :defined 疑似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。

+ +
/* 定義されたすべての要素を選択 */
+:defined {
+  font-style: italic;
+}
+
+/* 特定の custom 要素のすべてのインスタンスを選択 */
+simple-custom:defined {
+  display: block;
+}
+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

この最初の例は <simple-custom> カスタム要素を定義するスクリプトを含んでいます。

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

次に、 <simple-custom> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。

+ +
<simple-custom text="Custom element example text"></simple-custom>
+
+<p>Standard paragraph example text</p>
+ +

それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 :defined セレクターを使用して定義された要素テキストをすべて斜体で表示します。

+ +
/* 2つの要素を背景で区別できるようにする */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+/* カスタム要素と組み込み要素を両方イタリック体にする */
+:defined {
+  font-style: italic;
+}
+ +

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

+ +
simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}
+ +

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

+ +

結果

+ +

以上のコードを実行した結果は次の通りです。

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }} 
+ +

ブラウザーの対応

+ +

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

+ +

{{Compat("css.selectors.defined")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_dir/index.html b/files/ja/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..5a97d10b89 --- /dev/null +++ b/files/ja/web/css/_colon_dir/index.html @@ -0,0 +1,112 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - BiDi + - CSS + - Experimental + - Pseudo-class + - Reference + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}
+ +

:dir() は CSS の 擬似クラスで、中に含まれる文字列の方向に基づいて要素を選択します。

+ +
/* 右から左への文字列がある要素すべてを選択 */
+:dir(rtl) {
+  background-color: red;
+}
+ +

:dir() 擬似クラスは文字方向の意味的な値、つまり、文書自身に設定されているもののみを使用します。スタイルによる文字方向、つまり、 {{cssxref("direction")}} のような CSS プロパティで設定された文字方向には対応しません。

+ +
+

メモ: :dir() 擬似クラスは [dir=…] 属性セレクター とは等価でないことに注意してください。後者は HTML の {{htmlattrxref("dir")}} 属性を選択しますが、これがない要素は、文字方向が親から継承されていても無視します。（同様に、 [dir=rtl] と [dir=ltr] は auto の値を選択しません。）それに対して、 :dir() は継承の場合も含め、{{glossary("user agent", "ユーザーエージェント")}} が計算した値で選択します。

+
+ +
+

メモ: HTML では、文字方向は {{htmlattrxref("dir")}} 属性で指定されます。他の文書タイプでは異なる方法があるかもしれません。

+
+ +

構文

+ +

:dir() 擬似クラスは1つの引数を取り、対象としたい文字方向を指定します。

+ +

引数

+ +
+
ltr
+
文字方向が左から右の要素を対象とします。
+
rtl
+
文字方向が右から左の要素を対象とします。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.dir")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_disabled/index.html b/files/ja/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..3931a973e2 --- /dev/null +++ b/files/ja/web/css/_colon_disabled/index.html @@ -0,0 +1,130 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

:disabled は CSS の擬似クラスで、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。

+ +
/* 無効な <input> を選択 */
+input:disabled {
+  background: #ccc;
+}
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

この例は基本的な送り先フォームを表示します。 JavaScript の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>送り先</legend>
+    <input type="text" placeholder="名前">
+    <input type="text" placeholder="住所">
+    <input type="text" placeholder="郵便番号">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>請求先</legend>
+    <label for="billing_is_shipping">送り先と同じ:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="名前" disabled>
+    <input type="text" placeholder="住所" disabled>
+    <input type="text" placeholder="郵便番号" disabled>
+  </fieldset>
+</form>
+
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+
+ +

JavaScript

+ +
// ページの読み込みの終了を待つ
+document.addEventListener('DOMContentLoaded', function () {
+  // チェックボックスに 'change' イベントリスナーを追加
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // 請求先のテキストフィールドを選択
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // 請求先テキストフィールドを切り替え
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 300, 250)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.disabled")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_empty/index.html b/files/ja/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..6dbc6232af --- /dev/null +++ b/files/ja/web/css/_colon_empty/index.html @@ -0,0 +1,116 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Layout + - NeedsUpdate + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{CSSRef}}
+ +

:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の {{cssxref("content")}} は要素が空であるかどうかの判断には影響しません。

+ +
+

注: {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} では、 :empty 擬似クラスは {{CSSxRef(":-moz-only-whitespace")}} のような動作に変更されましたが、現在これに対応しているブラウザーはありません。

+
+ +
/* 内容を含まない <div> 要素を選択 */
+div:empty {
+  background: lime;
+}
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<div class="box"><!-- I will be lime. --></div>
+<div class="box">I will be pink.</div>
+<div class="box">
+	<!-- I will be pink in older browsers because of the whitespace around this comment. -->
+</div>
+<div class="box">
+	<p><!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --></p>
+</div>
+
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", 300, 80)}}

+ +

アクセシビリティの考慮

+ +

読み上げソフトのような支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーやボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である accessibility tree で使用されます。

+ +

対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS4 Selectors")}}{{CSSxRef(":-moz-only-whitespace")}} のような動作に変更
{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS3 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.empty")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_enabled/index.html b/files/ja/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..edba1d3d3a --- /dev/null +++ b/files/ja/web/css/_colon_enabled/index.html @@ -0,0 +1,101 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

:enabled は CSS の擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。

+ +
/* 有効な <input> を選択 */
+input:enabled {
+  color: blue;
+}
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

+ +

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 550, 95)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義。ただし意味の結びつけの定義はなし。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.enabled")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_first-child/index.html b/files/ja/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..a0377e61a9 --- /dev/null +++ b/files/ja/web/css/_colon_first-child/index.html @@ -0,0 +1,135 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

:first-child は CSS の擬似クラスで、兄弟要素のグループの中で最初の要素を表します。

+ +
/* 兄弟要素の中で最初の <p> を
+   すべてを選択 */
+p:first-child {
+  color: lime;
+}
+ +
+

注: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

+
+ +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

リストのスタイル付け

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}変更なし。
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.first-child")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_first-of-type/index.html b/files/ja/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..3d0fe724cd --- /dev/null +++ b/files/ja/web/css/_colon_first-of-type/index.html @@ -0,0 +1,115 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

CSS の :first-of-type 疑似クラスは、兄弟要素のグループの中でその種類の最初の要素を表します。

+ +
/* 兄弟要素の中で最初の <p> 要素をすべて選択 */
+p:first-of-type {
+  color: red;
+}
+ +
+

メモ: 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

+
+ +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

最初の段落の整形

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_the_first_paragraph')}}

+ +

ネストした要素

+ +

この例は、どうやった入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

+ +

HTML

+ +
<article>
+  <div>This `div` is first!</div>
+  <div>This <span>nested `span` is first</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <div>This <span>nested `span` gets styled</span>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`.</div>
+</article>
+
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

結果

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("css.selectors.first-of-type")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_first/index.html b/files/ja/web/css/_colon_first/index.html new file mode 100644 index 0000000000..a15a595580 --- /dev/null +++ b/files/ja/web/css/_colon_first/index.html @@ -0,0 +1,102 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - CSS ページ化メディア + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +

:first は CSS の擬似クラスで {{cssxref("@page")}} アット規則で使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)

+ +
/* 印刷時に最初のページを選択 */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
+

メモ: この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、 {{cssxref("widows")}}、 ページ区切りのみです。さらに、マージンを定義するときには絶対的な長さの単位のみしか使用できません。他のすべてのプロパティは無視されます。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p>最初のページです。</p>
+<p>2枚目のページです。</p>
+<button>印刷</button>
+
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+
+ +

JavaScript

+ +
document.querySelector("button").addEventListener('click', () => {
+  window.print();
+});
+
+ +

結果

+ +

［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。

+ +

{{ EmbedLiveSample('Examples', '80%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}変更なし。
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.first")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_focus-visible/index.html b/files/ja/web/css/_colon_focus-visible/index.html new file mode 100644 index 0000000000..de61ad9b5c --- /dev/null +++ b/files/ja/web/css/_colon_focus-visible/index.html @@ -0,0 +1,138 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +tags: + - ':focus' + - ':focus-visible' + - CSS + - Experimental + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus-visible' +--- +
{{CSSRef}}
+ +

:focus-visible 擬似クラスは、要素が {{CSSxRef(":focus")}} 擬似クラスに一致している時で、{{glossary("User Agent", "ユーザーエージェント")}}が要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。

+ +

このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。

+ +

なお、 Firefox は似た機能をより古い接頭辞付きの擬似クラス、 {{CSSxRef(":-moz-focusring")}} で対応しています。

+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

基本的な例

+ +

この例では、 :focus-visible セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 :focus でスタイル付けされた要素との動作の違いに注意してください。

+ +
<input value="Default styles"><br>
+<button>Default styles</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+ +
input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+
+ +

{{EmbedLiveSample("Basic_example", "100%", 300)}}

+ +

フォーカスインジケーターの選択的な表示

+ +

カスタムコントロール、例えば カスタム要素ボタンなどは、 :focus-visible を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは {{htmlelement("button")}} のようなコントロールのネイティブのフォーカスの動作に一致します。

+ +
<custom-button tabindex="0" role="button">Click Me</custom-button>
+ +
custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Provide a fallback style for browsers
+     that don't support :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}
+ +

{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}

+ +

ポリフィル

+ +

focus-visible.js を使用して :focus-visible のポリフィルにすることができます。

+ +

アクセシビリティの考慮

+ +

弱視

+ +

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

+ + + +

認知障碍

+ +

人が形式が混在した入力フィールドを使用している場合、フォーカスインジケーターが表示されたり消えたりする理由が明確に分からないかもしれません。認知的な懸念のあるユーザーや技術的なリテラシーの低いユーザーにとっては、対話的要素が一貫した動作をしていないと、混乱を招くかもしれません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.focus-visible")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..c5816dd2ca --- /dev/null +++ b/files/ja/web/css/_colon_focus-within/index.html @@ -0,0 +1,98 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Layout + - Reference + - Web + - ウェブ + - セレクター + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

CSS の :focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 疑似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)

+ +
/* 子孫要素の一つにフォーカスがある <div> を選択 */
+div:focus-within {
+  background: cyan;
+}
+ +

このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} を強調する場合に便利です。

+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

+ +

HTML

+ +
<p>このフォームに入力してみてください。</p>
+
+<form>
+  <label for="given_name">名前:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">苗字:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 500, 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.focus-within")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_focus/index.html b/files/ja/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..a363d17db2 --- /dev/null +++ b/files/ja/web/css/_colon_focus/index.html @@ -0,0 +1,119 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Reference + - Web + - ウェブ + - セレクター + - レイアウト + - 擬似クラス + - 疑似クラス +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

:focus は CSS の 擬似クラスで、フォーカスを持っている (フォームの入力のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの［タブ］キーで選択したりしたときです。

+ +
/* フォーカスを持つ <input> 要素を選択 */
+input:focus {
+  color: red;
+}
+ +
+

メモ: この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を含む要素を選択したい場合は、 {{CSSxRef(":focus-within")}} を使用してください。

+
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

アクセシビリティの考慮事項

+ +

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

+ + + +

:focus { outline: none; }

+ +

WCAG 2.1 SC 1.4.11 Non-Text Contrast を満たすフォーカスの輪郭線で置き換えることなく、フォーカスの輪郭線 (視覚的なフォーカスインジケーター) を単に削除しないでください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}HTML に依存した意味論を定義。
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}変更なし。
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}変更なし。
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_fullscreen/index.html b/files/ja/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..82d5cb648c --- /dev/null +++ b/files/ja/web/css/_colon_fullscreen/index.html @@ -0,0 +1,97 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Full-screen + - Full-screen API + - Fullscreen API + - Pseudo-class + - Reference + - Selector + - fullscreen + - screen +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}
+ +

:fullscreen は CSS の 擬似クラスで、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。

+ +

構文

+ +
{{csssyntax}}
+ +

使用上のメモ

+ +

:fullscreen 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。

+ +

例

+ +

この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。

+ +

HTML

+ +

ページの HTML は次のようなものです。

+ +
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
+
+<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.</p>
+
+<button id="fs-toggle">Toggle Fullscreen</button>
+ +

"fs-toggle" の ID を持った {{HTMLElement("button")}} が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。

+ +

CSS

+ +

魔法は CSS で起こります。ここでは二つの規則があります。最初のものは要素が全画面状態でない場合に「Toggle Full-screen Mode」ボタンの色の背景を設定します。鍵になるのは :not(:fullscreen) を使用していることで、 :fullscreen 擬似クラスが適用されない要素を探します。

+ +
#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+
+ +

文書が全画面モードである場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。

+ +
#fs-toggle:fullscreen {
+  background-color: #faa;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.fullscreen")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_has/index.html b/files/ja/web/css/_colon_has/index.html new file mode 100644 index 0000000000..4579b2c8f4 --- /dev/null +++ b/files/ja/web/css/_colon_has/index.html @@ -0,0 +1,61 @@ +--- +title: ':has()' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Reference + - セレクター + - リファレンス + - 擬似クラス +translation_of: 'Web/CSS/:has' +--- +
{{CSSRef}}
+ +

:has() は CSS の疑似クラスで、引数として渡されたセレクターに (指定された要素の {{cssxref(":scope")}} の相対で) 該当する要素が一つ以上の要素に一致することを表します。

+ +

:has() 疑似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 :has はスタイルシート内で使用することができず、 {{domxref("document.querySelector()")}} のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。

+ +
/* <img> 要素を直接中に含む <a> を選択する */
+/* なお、これはまだブラウザーが対応していません */
+var test = document.querySelector('a:has(> img)');
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

次のセレクターは、 {{HTMLElement("img")}} を直接子に持つ {{HTMLElement("a")}} 要素のみに一致します。

+ +
a:has(> img)
+
+ +

次のセレクターは、直後に {{htmlelement("p")}} 要素を持つ {{HTMLElement("h1")}} 要素のみに一致します。

+ +
h1:has(+ p)
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#relational", ":has()")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.has")}}

diff --git a/files/ja/web/css/_colon_host-context()/index.html b/files/ja/web/css/_colon_host-context()/index.html new file mode 100644 index 0000000000..33cd84271f --- /dev/null +++ b/files/ja/web/css/_colon_host-context()/index.html @@ -0,0 +1,112 @@ +--- +title: ':host-context()' +slug: 'Web/CSS/:host-context()' +tags: + - ':host-context()' + - CSS + - Experimental + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:host-context()' +--- +
{{CSSRef}}
+ +

:host-context() は CSS の擬似クラス関数で、内部で使用される CSS を含むシャドウ DOM のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。

+ +

言い換えれば、これによってカスタム要素やそのカスタム要素のシャドウ DOM 内のものは、外部 DOM 内の位置や、祖先要素に適用されたクラスや属性に基づいて、異なるスタイルを適用することができます。

+ +

典型的な使い方としては、子孫のセレクター式 (例えば h1) を使って、 <h1> の中にあるカスタム要素のインスタンスのみを選択することができます。もう一つの典型的な使用法は、内部要素が任意の子孫要素のクラスや属性に反応するようにすることです。例えば、 .dark-theme クラスが <body> に適用されたときに、異なるテキスト色を適用することができます。

+ +
+

注: これはシャドウ DOM の外で使用した場合、効果がありません。

+
+ +
/* Selects a shadow root host, only if it is
+   a descendant of the selector argument given */
+:host-context(h1) {
+  font-weight: bold;
+}
+
+:host-context(main article) {
+  font-weight: bold;
+}
+
+/* Changes paragraph text color from black to white when
+   a .dark-theme class is applied to the document body */
+p {
+  color: #000;
+}
+
+:host-context(body.dark-theme) p {
+  color: #fff;
+}
+
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

シャドウホストの選択的なスタイル付け

+ +

以下のスニペットは host-selectors example から取ったものです。 (ライブ版もあります).

+ +

この例には、単純なカスタム要素 — <context-span> — があり、テキストを囲むことができます。

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

要素のコンストラクターの中で、 style および span 要素を生成し、 span の中をカスタム要素の内容で埋め、 style 要素をいくつかの CSS 規則で埋めます。

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

:host-context(h1) { font-style: italic; } および :host-context(h1):after { content: " - no links in headers!" } の規則は <h1> の中にある <context-span> 要素 (このインスタンスのシャドウホスト) のインスタンスをスタイル付けします。これは設計上、 <h1> 内部にカスタム要素が現れるべきではないことを明確にするために使用しています。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Scope', '#host-selector', ':host-context()') }}{{ Spec2('CSS Scope') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.host-context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_host/index.html b/files/ja/web/css/_colon_host/index.html new file mode 100644 index 0000000000..14738d5ddf --- /dev/null +++ b/files/ja/web/css/_colon_host/index.html @@ -0,0 +1,103 @@ +--- +title: ':host' +slug: 'Web/CSS/:host' +tags: + - ':host' + - CSS + - DOM + - Layout + - Pseudo-class + - Reference + - Selector + - Web + - Web Components + - shadow + - shadow dom + - ウェブコンポーネント + - シャドウ DOM + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:host' +--- +
{{ CSSRef }}
+ +

:host は CSS の 擬似クラスで、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

+ +
+

注: これはシャドウ DOM の外で使われたときには効果がありません。

+
+ +
/* シャドウのルートホストを選択 */
+:host {
+  font-weight: bold;
+}
+
+ +

構文

+ +
:host
+
+ +

例

+ +

シャドウホストのスタイル付け

+ +

以下のスニペットは、 host セレクターの例 (ライブでも参照してください) から取りました。

+ +

この例では、テキストの周りを囲むことができる簡単なカスタム要素 — <context-span> — を使います。

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

要素のコンストラクターの中で、 style および span 要素を作成し、 span の中をカスタム要素の中身で埋め、 style 要素をいくつかの CSS 規則で埋めます。

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

:host { background: rgba(0,0,0,0.1); padding: 2px 5px; } の規則は、文書中の <context-span> 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Scope', '#host-selector', ':host') }}{{ Spec2('CSS Scope') }}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.host")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_hover/index.html b/files/ja/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..ab48b04af2 --- /dev/null +++ b/files/ja/web/css/_colon_hover/index.html @@ -0,0 +1,105 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Layout + - Reference + - Web + - 疑似クラス +translation_of: 'Web/CSS/:hover' +--- +
{{CSSRef}}
+ +

CSS の :hover 疑似クラスは、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインタ―）で要素の上をホバー（通過）させたときにこの状態になります。

+ +
/* 「ホバー」状態の <a> 要素を選択します */
+a:hover {
+  color: orange;
+}
+ +

:hover 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":link")}}、{{cssxref(":visited")}}、 {{cssxref(":active")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :hover — :visited — :hover — :active で定義されるように、 :link と :visited の後、 :active の前に :hover の規則を置いてください。

+ +
メモ: :hover 疑似クラスはタッチスクリーンで問題になります。ブラウザ―によっては、 :hover 疑似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーがタッチをやめるても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<a href="#">このリンクの上を通過させてみてください。</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

結果

+ +

{{EmbedLiveSample("Basic_example")}}

+ + + +

:hover 疑似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。

+ +
メモ: :checked 疑似クラスを（隠れたラジオボタンに適用して）使用した同様の効果の例として、 :checked のリファレンスページから取ったこのデモも参照してください。
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}:hover があらゆる疑似要素に適用できるようになった。
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}目立った変更はなし。
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}初回定義。
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.hover")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_in-range/index.html b/files/ja/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..825e415327 --- /dev/null +++ b/files/ja/web/css/_colon_in-range/index.html @@ -0,0 +1,116 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

CSS の :in-range 疑似クラスは、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性による制限範囲内にある {{htmlelement("input")}} 要素を表します。

+ +
/* 入力範囲が設定されていて、値がその範囲に該当する
+   <input> 要素をすべて選択 */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

この疑似クラスは。入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

+ +
Note: この疑似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>1から10の間の値が有効です。
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">あなたの値は</label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: '範囲内です。';
+}
+
+input:out-of-range + label::after {
+  content: '範囲外です！';
+}
+ +

結果

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}いつ HTML が :in-range に該当するかを定義。
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザー実装状況

+ +
+
+ + +

{{Compat("css.selectors.in-range")}}

+
+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_indeterminate/index.html b/files/ja/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..6a444e188a --- /dev/null +++ b/files/ja/web/css/_colon_indeterminate/index.html @@ -0,0 +1,142 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - ':indeterminate' + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web + - checkbox + - progress + - radio button +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

:indeterminate は CSS の擬似クラスセレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の indeterminate 属性が true に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。

+ +
/* 中間の状態にある <input> をすべて選択 */
+input:indeterminate {
+  background: lime;
+}
+ +

このセレクターが対象とする要素は以下の通りです。

+ + + +

構文

+ +
{{csssyntax}}
+ +

例

+ +

チェックボックスとラジオボタン

+ +

この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">背景が緑色になるはずです</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">背景が緑色になるはずです</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

+ +

プログレスバー

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}HTML における意味論と制約検証の定義。
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}変更なし。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.indeterminate")}}

+ +

関連情報

+ + +
diff --git a/files/ja/web/css/_colon_invalid/index.html b/files/ja/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..9eb7b9d655 --- /dev/null +++ b/files/ja/web/css/_colon_invalid/index.html @@ -0,0 +1,154 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:invalid' +--- +
{{CSSRef}}
+ +

:invalid は CSS の擬似クラスで、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が検証に失敗したものを表します。

+ +
/* 無効な <input> を選択 */
+input:invalid {
+  background-color: pink;
+}
+ +

この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。

+ +

HTML

+ +
<form>
+  <div class="field">
+    <label for="url_input">URL を入力して下さい:</label>
+    <input type="url" id="url_input">
+  </div>
+
+  <div class="field">
+    <label for="email_input">メールアドレスを入力して下さい:</label>
+    <input type="email" id="email_input" required>
+  </div>
+</form>
+ +

CSS

+ +
label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #c00000;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 120)}}

+ +

アクセシビリティの考慮

+ +

赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

+ + + +

注

+ +

ラジオボタン

+ +

グループのラジオボタンの1つがs required の場合、 :invalid 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ name 属性を共有しています。）

+ +

Gecko の既定値

+ +

既定で Gecko は :invalid 擬似クラスのスタイルを適用しません。しかし、 :invalid の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}HTML の意味論と制約検証を定義。
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.invalid")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_is/index.html b/files/ja/web/css/_colon_is/index.html new file mode 100644 index 0000000000..9335378d3d --- /dev/null +++ b/files/ja/web/css/_colon_is/index.html @@ -0,0 +1,265 @@ +--- +title: ':is() (:matches(), :any())' +slug: 'Web/CSS/:is' +tags: + - ':is' + - CSS + - Experimental + - Pseudo-class + - Reference + - Selector + - Selectors + - Web +translation_of: 'Web/CSS/:is' +--- +

{{CSSRef}}

+ +
+

注: :matches() は :is() に改名されました。 (CSSWG issue #3258)

+
+ +

CSS の :is() 擬似クラス関数は、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

+ +
/* header, main, footer 要素の中の段落で
+   マウスポインタが通過中のものをすべて選択 */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* 上記のものは以下のものと同じ */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +

なお、現在のところ、ブラウザーはこの機能を :matches() や、古いバージョンの Chrome, Firefox, Safari では、さらに古い接頭辞付きの擬似クラス — :any() で対応しています。 :any() は :matches()/:is() とまったく同じものとして動作しますが、ベンダー接頭辞が必要であり、複合セレクターに対応していません。

+ +

後方互換性のために古い擬似クラスを使用することができます。

+ +
/* -*-any() および :matches() と後方互換性のあるバージョン
+   (無効なセレクターがあるとルール全体が無効になるため、
+   セレクターを単一のルールにグループ化することはできません。) */
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +

セレクターの解釈の許容

+ +

仕様では :is() と :where() が省略可能なセレクターリストを受け入れることを定義しています。

+ +

CSS でセレクターリストを使用している場合、セレクターのどれかが無効な場合、リスト全体が無効とみなされます。 :is() や :where() を使用している場合、1 つでも解釈に失敗するとセレクターのリスト全体が無効とみなされるのではなく、不正なセレクターや対応していないセレクターは無視され、他のセレクターが使用されます。 + +

:is(:valid, :unsupported) {
+  ...
+}
+ +

:unsupported をに対応していないブラウザーでも、正しく解釈して :valid にマッチします。

+ +
:valid, :unsupported {
+  ...
+}
+ +

:unupported に対応していないブラウザーでは、 :valid に対応していても無視されます。

+ +

例

+ +

クロスブラウザーの例

+ +
<header>
+  <p>This is my header paragraph</p>
+</header>
+
+<main>
+  <ul>
+    <li><p>This is my first</p><p>list item</p></li>
+    <li><p>This is my second</p><p>list item</p></li>
+  </ul>
+</main>
+
+<footer>
+  <p>This is my footer paragraph</p>
+</footer>
+ +
:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +
let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+      }
+    }
+  }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+  });
+}
+ +

{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}

+ +

リストセレクターの簡略化

+ +

:is() 擬似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の CSS の場合、

+ +
/* 3層（以上）の順序なしリストに四角形を使用 */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

... これを次のように置き換えることができます。

+ +
/* 3層（以上）の順序なしリストに四角形を使用 */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

section セレクターの簡略化

+ +

:is() 擬似クラスは、 HTML5 のセクションと見出しを扱うときに特に便利です。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} は互いによく入れ子になりますので、 :is() がないと、1つ1つを選択してスタイルを適用するのが難しくなります。

+ +

例えば、 :is() を使わずに、異なる深さの {{HTMLElement("h1")}} 要素にスタイルを適用すると、とても複雑になります。

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... 考えたくありません! */
+
+ +

:is() を使用すると、ずっと簡単になります。

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+
+ +

:is() と :where() の違い

+ +

この2つの違いは、 :is() がセレクター全体の詳細度にカウントされるのに対し、 {{CSSxRef(":where", ":where()")}} は詳細度の値が 0 であることです。これは、 :where() のリファレンスページにある例で示されています。

+ +

構文

+ +
{{CSSSyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.is")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_lang/index.html b/files/ja/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..85c6321ad1 --- /dev/null +++ b/files/ja/web/css/_colon_lang/index.html @@ -0,0 +1,104 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

CSS の :lang() 疑似クラス は、要素を定義された言語に基づいて選択します。

+ +
/* 英語 (en) の <p> をすべて選択 */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

メモ: HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報（HTTP ヘッダーなど）の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

+
+ +

構文

+ +

形式文法

+ +
{{csssyntax}}
+ +

引数

+ +
+
<language-code>
+
対象としたい言語を表す {{cssxref("<string>")}} です。利用可能な値は HTML の仕様書で定義されています。
+
+ +

例

+ +

この例では、 子結合子 を使用して引用要素 ({{htmlElement("q")}}) の親を選択するために :lang() 疑似クラスを使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。

+ +

HTML

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}ワイルドカードによるマッチングとカンマ区切りの言語リストを追加。
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}有意な変更なし。
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}初回定義。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("css.selectors.lang")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_last-child/index.html b/files/ja/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..7c49e1ef58 --- /dev/null +++ b/files/ja/web/css/_colon_last-child/index.html @@ -0,0 +1,129 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

:last-child はCSS の擬似クラスで、兄弟要素のグループの中で最後の要素を表します。

+ +
/* 兄弟要素の中で最後の <p> を
+   すべてを選択 */
+p:last-child {
+  color: lime;
+}
+ +
+

注: 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <p>This text isn't selected.</p>
+  <p>This text is selected!</p>
+</div>
+
+<div>
+  <p>This text isn't selected.</p>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+</div>
+
+ +

CSS

+ +
p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

リストのスタイル付け

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#the-last-child-pseudo', ':last-child')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#last-child-pseudo', ':last-child')}}{{Spec2('CSS3 Selectors')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.last-child")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_last-of-type/index.html b/files/ja/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..e8be8ce196 --- /dev/null +++ b/files/ja/web/css/_colon_last-of-type/index.html @@ -0,0 +1,113 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

CSS の :last-of-type 疑似クラスは、兄弟要素のグループの中でその種類の最後の要素を表します。

+ +
/* 兄弟要素の中で最後の <p> 要素をすべて選択 */
+p:last-of-type {
+  color: lime;
+}
+ +
+

メモ: 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

+
+ +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

最後の段落の整形

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:last-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_the_last_paragraph')}}

+ +

入れ子になった要素

+ +

この例は、どうやって入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

+ +

HTML

+ +
<article>
+  <div>This `div` is first.</div>
+  <div>This <span>nested `span` is last</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`!</div>
+</article>
+
+ +

CSS

+ +
article :last-of-type {
+  background-color: pink;
+}
+ +

結果

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("css.selectors.last-of-type")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_left/index.html b/files/ja/web/css/_colon_left/index.html new file mode 100644 index 0000000000..141cfe4573 --- /dev/null +++ b/files/ja/web/css/_colon_left/index.html @@ -0,0 +1,77 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - '@page' + - CSS + - CSS ページ化メディア + - Layout + - Pseudo-class + - Reference + - Web + - ウェブ + - 疑似クラス +translation_of: 'Web/CSS/:left' +--- +
{{ CSSRef() }}
+ +

CSS の :left 疑似クラスは {{cssxref("@page")}} @-規則 で使われ、印刷文書の左側のページすべてを表します。

+ +
/* 印刷時に左側のページを選択 */
+@page :left {
+  margin: 2in 3in;
+}
+ +

そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば :left ページになります。

+ +
+

メモ: この疑似クラスは、ページボックスの {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}変更なし。
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.left")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_link/index.html b/files/ja/web/css/_colon_link/index.html new file mode 100644 index 0000000000..4a78a0d6e8 --- /dev/null +++ b/files/ja/web/css/_colon_link/index.html @@ -0,0 +1,105 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Reference + - Pseudo-class + - Reference + - 疑似クラス +translation_of: 'Web/CSS/:link' +--- +
{{CSSRef}}
+ +

CSS の :link 疑似クラスは、まだ訪問されていない要素を表します。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} など、 href 属性を持つ未訪問のすべての要素を選択します。

+ +
/* 未訪問の <a> をすべて選択します */
+a:link {
+  color: red;
+}
+ +

:link 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":active")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :link — :visited — :hover — :active で定義されるように、他のすべてのリンク関連規則の前に :link 規則を置いてください。

+ +
+

メモ: 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

既定では、大半のブラウザーが訪問済みのリンクに特殊な {{cssxref("color")}} の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 {{cssxref("background-color")}} の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

+ +

HTML

+ +
<a href="#ordinary-target">これは普通のリンクです。</a><br>
+<a href="">このリンクを訪問しました。</a><br>
+<a>リンクのプレイスホルダー（スタイルの適用なし）</a>
+
+ +

CSS

+ +
a:link {
+  background-color: gold;
+  color: green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}変更なし。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}初回定義。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("css.selectors.link")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_not/index.html b/files/ja/web/css/_colon_not/index.html new file mode 100644 index 0000000000..50707d6fc0 --- /dev/null +++ b/files/ja/web/css/_colon_not/index.html @@ -0,0 +1,133 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - ':not()' + - CSS + - Layout + - Negation + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

:not() は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。

+ +
/* 段落以外の要素を選択 */
+:not(p) {
+  color: blue;
+}
+ +

:not() 擬似クラスには、使用する前に知っておいた方が良いクセやコツ、予想外の結果がいくつかあります。

+ +

構文

+ +

:not() 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや擬似要素を含めることはできません。

+ +
+

複数のセレクターを指定することは実験的な機能で、広くは対応されていません。

+
+ +
{{csssyntax}}
+ +

解説

+ +

:not() を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。

+ + + +

例

+ +

HTML

+ +
<p>I am a paragraph.</p>
+<p class="fancy">I am so very fancy!</p>
+<div>I am NOT a paragraph.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* '.fancy' クラスの中にない <p> 要素 */
+p:not(.fancy) {
+  color: green;
+}
+
+/* <p> 要素ではない要素 */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* <div> または <span> 要素ではない要素 */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* '.crazy' または '.fancy' ではない要素 */
+/* なお、この文法は十分に対応されていません。 */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}引数で単純セレクター以外も許容数量に拡張。
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.not")}}

+ +

関連情報

+ + +
diff --git a/files/ja/web/css/_colon_nth-child/index.html b/files/ja/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..43b4a9f49a --- /dev/null +++ b/files/ja/web/css/_colon_nth-child/index.html @@ -0,0 +1,204 @@ +--- +title: ':nth-child()' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Reference + - Selectors + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

CSS の :nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

+ +
/* リスト中の2番目の <li> 要素を選択 */
+li:nth-child(2) {
+  color: lime;
+}
+
+/* 兄弟要素の中で3つおきに
+   要素を選択 */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

構文

+ +

nth-child 擬似クラスは、引数を1つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は1から始まります。

+ +

キーワード値

+ +
+
odd
+
一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。
+
even
+
一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。
+
+ +

関数表記

+ +
+
<An+B>
+
リスト中の位置が、 An+B で定義された数値のパターンと一致する要素を表します。
+ A は整数の刻み値です。
+ B は整数の加算値です。
+ n はすべての正の整数で、0から始まります。
+
リスト中の An+B 番目の要素として読むことができます。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

セレクターの例

+ +
+
tr:nth-child(odd) 又は tr:nth-child(2n+1)
+
HTML テーブルの奇数行 (1, 3, 5, など) を表します。
+
tr:nth-child(even) または tr:nth-child(2n)
+
HTML テーブルの偶数行 (2, 4, 6, など) を表します。
+
:nth-child(7)
+
7番目の要素を表します。
+
:nth-child(5n)
+
5番目 [=5×1], 10番目 [=5×2], 15番目 [=5×3], 等の要素を表します。最初のものは 0番目 [=5x0] が式の結果として返りますが、 n が0から始まるのに対して添字は1から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように B の部分が >0 となる場合にもっとよく分かるでしょう。
+
:nth-child(n+7)
+
7番目とそれ以降のすべての要素を表します。 7番目 [=0+7], 8番目 [=1+7], 9番目 [=2+7], 等です。
+
:nth-child(3n+4)
+
4番目 [=(3×0)+4], 7番目 [=(3×1)+4], 10番目 [=(3×2)+4], 13番目 [=(3×3)+4], 等の要素を表します。
+
:nth-child(-n+3)
+
兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]
+
p:nth-child(n)
+
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じ要素を選択します (但し、具体度はより高くなります)。
+
p:nth-child(1) または p:nth-child(0n+1)
+
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは {{cssxref(":first-child")}} セレクターと同じです (具体度も同じです)。
+
+ +
+
p:nth-child(n+8):nth-child(-n+15)
+
兄弟要素のグループの中で8～15番目の <p> 要素を表します。
+
+ +

詳細な例

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}<selector> の構文と仕様書に、親を持たない要素も一致するよう追加。
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.nth-child")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_nth-last-child/index.html b/files/ja/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..997902b16f --- /dev/null +++ b/files/ja/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,196 @@ +--- +title: ':nth-last-child()' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

CSS の :nth-last-child() 疑似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

+ +
/* 兄弟要素の中で、後ろから数えて
+   3つおきに要素を選択 */
+:nth-last-child(4n) {
+  color: lime;
+}
+ +
+

メモ: この疑似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。

+
+ +

構文

+ +

nth-last-child 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

+ +

キーワード値

+ +
+
odd
+
一連の兄弟要素の中で、最後から奇数番目の要素 (1, 3, 5, など) を表します。
+
even
+
一連の兄弟要素の中で、最後から偶数番目の要素 (2, 4, 6, など) を表します。
+
+ +

関数表記

+ +
+
<An+B>
+
一連の兄弟要素の中で、 n に正の整数か0が入るとき、 An+B のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は 1 です。 A と B の値は両方とも {{cssxref("<integer>")}} です。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

セレクターの例

+ +
+
tr:nth-last-child(odd) または tr:nth-last-child(2n+1)
+
HTML テーブルの最後から数えた奇数行 (1, 3, 5, など) を表します。
+
tr:nth-last-child(even) または tr:nth-last-child(2n)
+
HTML テーブルの最後から数えた偶数行 (2, 4, 6, など) を表します。
+
:nth-last-child(7)
+
最後から数えて 7 番目の要素を表します。
+
:nth-last-child(5n)
+
最後から数えて 5, 10, 15 番目などの要素を表します。
+
:nth-last-child(3n+4)
+
最後から数えて 4, 7, 10, 13 番目などの要素を表します。
+
:nth-last-child(-n+3)
+
兄弟要素のグループの中で最後の3つの要素を表します。
+
p:nth-last-child(n) 又は p:nth-last-child(n+1)
+
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じです。 (n はゼロから始まるので、最後の要素が1で始まり、 n 及び n+1 が共に同じ要素を選択します。)
+
p:nth-last-child(1) または p:nth-last-child(0n+1)
+
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは {{cssxref(":last-child")}} セレクターと同じです。
+
+ +

詳細な例

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>First line</td>
+    </tr>
+    <tr>
+      <td>Second line</td>
+    </tr>
+    <tr>
+      <td>Third line</td>
+    </tr>
+    <tr>
+      <td>Fourth line</td>
+    </tr>
+    <tr>
+      <td>Fifth line</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +
table {
+  border: 1px solid blue;
+}
+
+/* 最後から3つの要素を選択 */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+/* 後ろから2番目から最初までの要素を選択 */
+tr:nth-last-child(n+2) {
+  color: blue;
+}
+
+/* 後ろから2番目の要素のみを選択 */
+tr:nth-last-child(2) {
+  font-weight: 600;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Table_example', 300, 150)}}

+ +

数量クエリ

+ +

数量クエリは、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは nth-last-child 疑似クラスと 一般兄弟結合子の機能を組み合わせることで実現できます。

+ +

HTML

+ +
<h4>4項目のリスト (スタイル付き):</h4>
+<ol>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+</ol>
+
+<h4>2項目のリスト (スタイルなし):</h4>
+<ol>
+  <li>One</li>
+  <li>Two</li>
+</ol>
+ +

CSS

+ +
/* 3つ以上のリスト項目がある場合、
+   すべてにスタイル付けする */
+li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Edge_case_example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も一致するよう追加。
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}初回定義
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.nth-last-child")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_nth-last-of-type/index.html b/files/ja/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..302644c802 --- /dev/null +++ b/files/ja/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,97 @@ +--- +title: ':nth-last-of-type()' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

CSS の :nth-last-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。

+ +
/* 兄弟の <p> 要素の中で、
+   後ろから数えて3つおきに選択 */
+p:nth-last-of-type(4n) {
+  color: lime;
+}
+ +
+

メモ: この疑似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。

+
+ +

構文

+ +

nth-last-of-type 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

+ +

構文の詳しい説明は {{Cssxref(":nth-last-child")}} を参照してください。

+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<div>
+  <span>This is a span.</span>
+  <span>This is another span.</span>
+  <em>This is emphasized.</em>
+  <span>Wow, this span gets limed!!!</span>
+  <strike>This is struck through.</strike>
+  <span>Here is one last span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も該当するよう追加。
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.nth-last-of-type")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_nth-of-type/index.html b/files/ja/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..9cc99efb72 --- /dev/null +++ b/files/ja/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,113 @@ +--- +title: ':nth-of-type()' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

:nth-of-type() は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

+ +
/* 兄弟の <p> 要素の中で、
+   3つおきに選択 */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

構文

+ +

nth-of-type 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

+ +

構文の詳しい説明は {{Cssxref(":nth-child")}} を参照してください。

+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <div>This element isn't counted.</div>
+  <p>1st paragraph.</p>
+  <p>2nd paragraph.</p>
+  <div>This element isn't counted.</div>
+  <p>3rd paragraph.</p>
+  <p class="fancy">4th paragraph.</p>
+</div>
+ +

CSS

+ +
/* 奇数の段落 */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* 偶数の段落 */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* 最初の段落 */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+
+/* .fancy クラスは1番目ではなく4番目の p 要素にしかついていないので、これは効果がありません */
+p.fancy:nth-of-type(1) {
+  text-decoration: underline;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example', 250, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も該当するよう追加。
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.nth-of-type")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_only-child/index.html b/files/ja/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..89ce4eb5fd --- /dev/null +++ b/files/ja/web/css/_colon_only-child/index.html @@ -0,0 +1,141 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 擬似クラス +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

CSS の :only-child 疑似クラスは、兄弟要素がない要素を表します。 :first-child:last-child または :nth-child(1):nth-last-child(1) と同じですが、詳細度はより低くなります。

+ +
/* 親の唯一の子である <p> 要素をすべて選択 */
+p:only-child {
+  background-color: lime;
+}
+ +
+

メモ: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

+
+ +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <div>I am an only child.</div>
+</div>
+
+<div>
+  <div>I am the 1st sibling.</div>
+  <div>I am the 2nd sibling.</div>
+  <div>I am the 3rd sibling, <div>but this is an only child.</div></div>
+</div>
+
+ +

CSS

+ +
div:only-child {
+  color: red;
+}
+
+div {
+  display: inline-block;
+  margin: 6px;
+  outline: 1px solid;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example','100%',180)}}

+ +

リストの例

+ +

HTML

+ +
<ol>
+  <li>First
+    <ul>
+      <li>This list has just one element.</li>
+    </ul>
+  </li>
+  <li>Second
+    <ul>
+      <li>This list has three elements.</li>
+      <li>This list has three elements.</li>
+      <li>This list has three elements.</li>
+    </ul>
+  </li>
+</ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_list_example', '100%', 210)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}初回定義
+ +

ブラウザーの互換性

+ +
+
+ + +

{{Compat("css.selectors.only-child")}}

+
+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_only-of-type/index.html b/files/ja/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..bf2d2b4df9 --- /dev/null +++ b/files/ja/web/css/_colon_only-of-type/index.html @@ -0,0 +1,98 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

CSS の :only-of-type 疑似クラスは、同じ型の兄弟要素がない要素を表します。

+ +
/* 親の唯一の子の <p> である <p> 要素をすべて選択 */
+p:only-of-type {
+  background-color: lime;
+}
+ +
+

メモ: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

+
+ +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<main>
+  <div>I am `div` #1.</div>
+  <p>I am the only `p` among my siblings.</p>
+  <div>I am `div` #2.</div>
+  <div>I am `div` #3.
+    <i>I am the only `i` child.</i>
+    <em>I am `em` #1.</em>
+    <em>I am `em` #2.</em>
+  </div>
+</main>
+
+ +

CSS

+ +
main :only-of-type {
+  color: red;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example','100%',180)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("css.selectors.only-of-type")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_optional/index.html b/files/ja/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..cdce764fdb --- /dev/null +++ b/files/ja/web/css/_colon_optional/index.html @@ -0,0 +1,124 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:optional' +--- +
{{ CSSRef }}
+ +

:optional は CSS の擬似クラスで、 {{ htmlattrxref("required", "input") }} 属性が設定されていない {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素を表します。

+ +
/* 任意の <input> をすべて選択 */
+input:optional {
+  border: 1px dashed black;
+}
+ +

この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。

+ +
+

注: {{cssxref(":required")}} 擬似クラスは必須のフォーム欄を選択します。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

オプションのフィールドの枠を紫にする

+ +

HTML

+ +
<form>
+  <div class="field">
+    <label for="url_input">Enter a URL:</label>
+    <input type="url" id="url_input">
+  </div>
+
+  <div class="field">
+    <label for="email_input">Enter an email address:</label>
+    <input type="email" id="email_input" required>
+  </div>
+</form>
+ +

CSS

+ +
label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:optional {
+  border-color: rebeccapurple;
+  border-width: 3px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 120)}}

+ +

アクセシビリティの考慮

+ +

フォームに必須ではない {{htmlelement("input")}} が含まれている場合、必須の入力欄には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

+ +

必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}HTML の意味論と制約検証を定義。
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}変更なし。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.optional")}}

+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_out-of-range/index.html b/files/ja/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..7afe975a9e --- /dev/null +++ b/files/ja/web/css/_colon_out-of-range/index.html @@ -0,0 +1,117 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Selectors + - UI Selector +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +

:out-of-range は CSS の擬似クラスで、 {{htmlelement("input")}} 要素のうち、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性で指定された範囲を外れているものを表します。

+ +
/* 入力範囲が設定されていて、値がその範囲外である
+   <input> 要素をすべて選択 */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +

この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。

+ +
注: この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +
+

HTML

+ +
<form action="" id="form1">
+ <p>1から10の間の値が有効です。</p>
+  <ul>
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">あなたの値は</label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: '範囲内です。';
+}
+
+input:out-of-range + label::after {
+  content: '範囲外です！';
+}
+ +

結果

+
+ +
{{EmbedLiveSample('Examples', 600, 140)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}いつ HTML が :out-of-range に該当するかを定義。
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.out-of-range")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_placeholder-shown/index.html b/files/ja/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..ff139e88fc --- /dev/null +++ b/files/ja/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,200 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Reference + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}
+ +

:placeholder-shown は CSS の疑似クラスは、プレイスホルダー文字列が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。

+ +
/* プレイスホルダーが有効な要素を選択 */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<input placeholder="何か入力してください！">
+ +

CSS

+ + + +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

結果

+ +

{{EmbedLiveSample("Basic_example", 200, 60)}}

+ +

文字列があふれる場合

+ +

スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。

+ +

HTML

+ +
<input placeholder="宜しければ、この入力欄に何か入力してください！">
+ +

CSS

+ + + +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

結果

+ +

{{EmbedLiveSample("Overflowing_text", 200, 60)}}

+ +

色付きのテキスト

+ +

HTML

+ +
<input placeholder="Type something here!">
+
+ +

CSS

+ + + +
input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Colored_text", 200, 60)}}

+ +

カスタマイズした入力欄

+ +

以下の例では部署名と ID コード欄をカスタムスタイルで強調します。

+ +

HTML

+ +
<form id="test">
+  <p>
+    <label for="name">Enter Student Name:</label>
+    <input id="name" placeholder="Student Name"/>
+  </p>
+  <p>
+    <label for="branch">Enter Student Branch:</label>
+    <input id="branch" placeholder="Student Branch"/>
+  </p>
+  <p>
+    <label for="sid">Enter Student ID:</label>
+    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+  </p>
+  <input type="submit"/>
+</form>
+ +

CSS

+ + + +
input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Customized_input_field", 200, 180)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_read-only/index.html b/files/ja/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..297b45a46e --- /dev/null +++ b/files/ja/web/css/_colon_read-only/index.html @@ -0,0 +1,121 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

:read-only は CSS の擬似クラスで、ユーザーが編集できない要素 (input や textarea など) を表します。

+ +
input:read-only, textarea:read-only {
+  background-color: #ccc;
+}
+
+p:read-only {
+  background-color: #ccc;
+}
+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

読み取り専用/読み書きコントロールによるフォーム情報の確認

+ +

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

+ +

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

+ +
input:-moz-read-only, textarea:-moz-read-only,
+input:read-only, textarea:read-only {
+  border: 0;
+  box-shadow: none;
+  background-color: white;
+}
+
+textarea:-moz-read-write,
+textarea:read-write {
+  box-shadow: inset 1px 1px 3px #ccc;
+  border-radius: 5px;
+}
+ +

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}

+ +

フォーム以外の読み取り専用コントロールのスタイル付け

+ +

このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できないあらゆる要素を選択します。

+ +
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
+
+<p>この段落は編集できません。読み取り専用です。</p>
+ +
p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}変更なし
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}HTML および制約検証に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.read-only")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_read-write/index.html b/files/ja/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..64552f03de --- /dev/null +++ b/files/ja/web/css/_colon_read-write/index.html @@ -0,0 +1,121 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

:read-write は CSS の擬似クラスで、ユーザーが編集できる要素 (input や textarea など) を表します。

+ +
input:read-write, textarea:read-write {
+  background-color: #bbf;
+}
+
+p:read-write {
+  background-color: #bbf;
+}
+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

読み取り専用/読み書きコントロールによるフォーム情報の確認

+ +

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

+ +

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

+ +
input:-moz-read-only, textarea:-moz-read-only,
+input:read-only, textarea:read-only {
+  border: 0;
+  box-shadow: none;
+  background-color: white;
+}
+
+textarea:-moz-read-write,
+textarea:read-write {
+  box-shadow: inset 1px 1px 3px #ccc;
+  border-radius: 5px;
+}
+ +

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}

+ +

フォーム以外の読み書き用コントロールのスタイル付け

+ +

このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できるあらゆる要素、例えば {{htmlelement("p")}} 要素に {{htmlattrxref("contenteditable")}} が設定されたものを選択します。

+ +
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
+
+<p>この段落は編集できません。読み取り専用です。</p>
+ +
p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Styling_read-write_non-form_controls', '100%', 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}変更なし
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}HTML および制約検証に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_required/index.html b/files/ja/web/css/_colon_required/index.html new file mode 100644 index 0000000000..b69b29f628 --- /dev/null +++ b/files/ja/web/css/_colon_required/index.html @@ -0,0 +1,128 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:required' +--- +
{{ CSSRef }}
+ +

:required は CSS の 擬似クラスで、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素のうち {{ htmlattrxref("required", "input") }} 属性が設定されているものを表します。

+ +
/* 必須の <input> をすべて選択 */
+input:required {
+  border: 1px dashed red;
+}
+ +

この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。

+ +
+

注: {{cssxref(":optional")}} 擬似クラスは任意のフォーム欄を選択します。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

必須フィールドの枠を赤にする

+ +

HTML

+ +
<form>
+  <div class="field">
+    <label for="url_input">Enter a URL:</label>
+    <input type="url" id="url_input">
+  </div>
+
+  <div class="field">
+    <label for="email_input">Enter an email address:</label>
+    <input type="email" id="email_input" required>
+  </div>
+</form>
+ +

CSS

+ +
label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #c00000;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 120)}}

+ +

アクセシビリティの考慮

+ +

入力が必須の {{htmlelement("input")}} には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

+ +

フォームに任意の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}HTML の意味論と制約検証を定義。
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}変更なし。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.required")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_right/index.html b/files/ja/web/css/_colon_right/index.html new file mode 100644 index 0000000000..1b6b7e2505 --- /dev/null +++ b/files/ja/web/css/_colon_right/index.html @@ -0,0 +1,77 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - CSS ページ化メディア + - Layout + - Pseudo-class + - Reference + - Web + - ウェブ + - 疑似クラス +translation_of: 'Web/CSS/:right' +--- +
{{ CSSRef() }}
+ +

CSS の :left 疑似クラスは {{cssxref("@page")}} @-規則 で使われ、印刷文書の右側のページすべてを表します。

+ +
/* 印刷時に右側のページを選択 */
+@page :right {
+  margin: 2in 3in;
+}
+ +

そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば :right ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。

+ +
+

メモ: この疑似クラスは、ページボックスの {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}変更なし。
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.right")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_root/index.html b/files/ja/web/css/_colon_root/index.html new file mode 100644 index 0000000000..7b91951406 --- /dev/null +++ b/files/ja/web/css/_colon_root/index.html @@ -0,0 +1,65 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

CSS の :root 疑似クラスは、文書を表すツリーのルート要素を選択します。 HTML では、 :root は {{HTMLElement("html")}} 要素を表し、詳細度が高いことを除けば html セレクターと同等です。

+ +
/* 文書のルート要素（HTML の場合は <html>）を選択 */
+:root {
+  background: yellow;
+}
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

:root はグローバルの CSS 変数を宣言するのに便利です。

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザー実装状況

+ + + +

{{Compat("css.selectors.root")}}

diff --git a/files/ja/web/css/_colon_scope/index.html b/files/ja/web/css/_colon_scope/index.html new file mode 100644 index 0000000000..888c9a876e --- /dev/null +++ b/files/ja/web/css/_colon_scope/index.html @@ -0,0 +1,125 @@ +--- +title: ':scope' +slug: 'Web/CSS/:scope' +tags: + - CSS + - Layout + - Reference + - Web + - スコープ付き要素 + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:scope' +--- +
{{CSSRef}}
+ +

:scope は CSS の疑似クラスで、セレクターが選択する対象の参照点である要素を表します。

+ +
/* スコープとなる要素を選択 */
+:scope {
+  background-color: lime;
+}
+ +

現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 :scope は {{cssxref(":root")}} と同じです。 DOM API ({{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, {{domxref("Element.closest()")}} など) で使用したときは、 :scope はメソッドを呼び出した要素を選択します。

+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

ID の一致

+ +

この例では、 {{domxref("Element.matches()")}} メソッドから :scope を使用して呼び出される要素を選択する方法を紹介します。

+ +

JavaScript

+ +
let paragraph = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraph.matches(":scope")) {
+  output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
+}
+ +

HTML

+ +
<p id="para">
+  これは段落です。面白い段落ではありません。すみません。
+</p>
+<p id="output"></p>
+ +

結果

+ +
{{ EmbedLiveSample('Identity_match') }}
+ +

直接の子

+ +

:scope 疑似クラスが有用だと示されるのは、すでに受け取っている {{domxref("Element")}} の直接の子を取得する必要がある場合です。

+ +

JavaScript

+ +
var context = document.getElementById('context');
+var selected = context.querySelectorAll(':scope > div');
+
+document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) {
+    return '#' + element.getAttribute('id');
+}).join(', ');
+ +

HTML

+ +
<div id="context">
+    <div id="element-1">
+        <div id="element-1.1"></div>
+        <div id="element-1.2"></div>
+    </div>
+    <div id="element-2">
+        <div id="element-2.1"></div>
+    </div>
+</div>
+<p>
+    Selected elements ids :
+    <span id="results"></span>
+</p>
+ +

結果

+ +

{{ EmbedLiveSample('Direct_children') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}{{ Spec2('CSS4 Selectors') }}初回定義
+ +

ブラウザーの互換性

+ + diff --git a/files/ja/web/css/_colon_target/index.html b/files/ja/web/css/_colon_target/index.html new file mode 100644 index 0000000000..bb9a9c40d7 --- /dev/null +++ b/files/ja/web/css/_colon_target/index.html @@ -0,0 +1,216 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

:target は CSS の擬似クラスは、 URL のフラグメントに一致する {{htmlattrxref("id")}} を持つ固有の要素 (対象要素) を表します。

+ +
/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
+:target {
+  border: 2px solid black;
+}
+ +

例えば、以下の URL には section2 と呼ばれる要素を指すフラグメント (# 記号で記述) があります。

+ +
http://www.example.com/index.html#section2
+ +

現在の URL が上記の通りの場合、以下の要素が :target セレクターで選択されます。

+ +
<section id="section2">Example</section>
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

目次

+ +

:target 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。

+ +

HTML

+ +
<h3>目次</h3>
+<ol>
+ <li><a href="#p1">第1段落にジャンプ！</a></li>
+ <li><a href="#p2">第2段落にジャンプ！</a></li>
+ <li><a href="#nowhere">このリンクは対象がないので、
+   どこにも行きません。</a></li>
+</ol>
+
+<h3>My Fun Article</h3>
+<p id="p1">You can target <i>this paragraph</i> using a
+  URL fragment. Click on the link above to try out!</p>
+<p id="p2">This is <i>another paragraph</i>, also accessible
+  from the links above. Isn't that delightful?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* 対象要素に擬似要素を追加 */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* 対象要素の中の i 要素にスタイルを適用 */
+p:target i {
+  color: red;
+}
+ +

結果

+ +
{{EmbedLiveSample('A_table_of_contents', 500, 300)}}
+ +

純粋な CSS のライトボックス

+ +

:target 擬似クラスを使用して JavaScript を使わずにライトボックスを作成することができます。この技術はページ内の最初は非表示の要素をリンクを作ることができることを利用しています。いったん対象となれば、 CSS で display を変更して表示させます。

+ +
注: :target 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 GitHub で利用できます (デモ)。
+ +

HTML

+ +
<ul>
+  <li><a href="#example1">例1を開く</a></li>
+  <li><a href="#example2">例2を開く</a></li>
+</ul>
+
+<div class="lightbox" id="example1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="example2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* 開いていないライトボックス */
+.lightbox {
+  display: none;
+}
+
+/* 開いたライトボックス */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ライトボックスの中身 */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* 閉じるボタン */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* ライトボックスのオーバーレイ */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

結果

+ +
{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}HTML 特有の意味論を定義。
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}変更なし。
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}初回定義。
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.selectors.target")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_valid/index.html b/files/ja/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..eeb229b80d --- /dev/null +++ b/files/ja/web/css/_colon_valid/index.html @@ -0,0 +1,130 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - CSS 基本ユーザーインターフェイス + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:valid' +--- +
{{CSSRef}}
+ +

CSS の :valid 擬似クラスは、内容の検証に成功した {{htmlelement("input")}} 要素 やその他の {{HTMLElement("form")}} 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。

+ +
/* 有効な <input> をすべて選択 */
+input:valid {
+  background-color: powderblue;
+}
+ +

この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。

+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。

+ +
<div>
+  <label for="fname">First name *: </label>
+  <input id="fname" name="fname" type="text" required>
+  <span></span>
+</div>
+ +

これらの表示を提供するために、以下の CSS を使用します。

+ +
input + span {
+  position: relative;
+}
+
+input + span::before {
+  position: absolute;
+  right: -20px;
+  top: 5px;
+}
+
+input:invalid {
+  border: 2px solid red;
+}
+
+input:invalid + span::before {
+  content: '✖';
+  color: red;
+}
+
+input:valid + span::before {
+  content: '✓';
+  color: green;
+}
+ +

生成されたコンテンツを相対的に配置できるように <span> を position: relative に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。

+ +
+

Note: We've used ::before to add these labels, as we were already using ::after for the "required" labels.

+
+ +

You can try it below:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}

+ +

Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.

+ +

アクセシビリティの考慮事項

+ +

緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}HTML の意味論と制約検証を定義。
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.valid")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_visited/index.html b/files/ja/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..38fbc1e1a5 --- /dev/null +++ b/files/ja/web/css/_colon_visited/index.html @@ -0,0 +1,120 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Reference + - Selectors + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:visited' +--- +
{{CSSRef}}
+ +

:visited は CSS の擬似クラスで、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。

+ +
/* 訪問済みの <a> をすべて選択 */
+a:visited {
+  color: green;
+}
+ +

:visited 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}) によって上書きされます。適切にリンクにスタイルを適用するには、 :visited ルールを :link ルールの後、 :hover および :active ルールの前に置いてください。 LVHA 順、 :link — :visited — :hover — :active と定義されています。

+ +

スタイル適用の制約

+ +

プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。

+ + + +
+

メモ: これらの制限とその理由については、プライバシーと :visited セレクターを参照してください。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

色を持っていないか透過のプロパティは、 :visited で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は color と column-rule-color だけでしょう。そのため、他のプロパティを変更したい場合は、 :visited セレクターの外で基本的な値を設定する必要があります。

+ +

HTML

+ +
<a href="#test-visited-link">このリンクを訪問しましたか？</a><br>
+<a href="">このリンクはすでに訪問済みです。</a>
+ +

CSS

+ +
a {
+  /* 該当するプロパティに不透過の既定値を設定することで、
+     :visited 状態のスタイルを定義できるようにします */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}変更なし。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。プライバシーを理由とするブラウザーの振る舞いの制限をかけた。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.visited")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_where/index.html b/files/ja/web/css/_colon_where/index.html new file mode 100644 index 0000000000..4516b847d0 --- /dev/null +++ b/files/ja/web/css/_colon_where/index.html @@ -0,0 +1,134 @@ +--- +title: ':where()' +slug: 'Web/CSS/:where' +tags: + - ':where' + - CSS + - Experimental + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - Pseudo-class + - Reference + - Selector + - Selectors + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:where' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

:where() は CSS の擬似クラス関数で、選択肢列挙を引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。

+ +

:where() と {{CSSxRef(":is", ":is()")}} の違いは、 :where() は詳細度が常に 0 であるのに対して、 :is() は引数内で最も詳細度の高いセレクターの詳細度を取ります。

+ +

例

+ +

:where() と :is() の比較

+ +

この例では :where() がどのように作用するのかを示し、 :where() と :is() の違いも説明しています。

+ +

以下のような HTML を想定してください。

+ +
<article>
+  <h2>:is()-styled links</h2>
+  <section class="is-styling">
+    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
+  </section>
+
+  <aside class="is-styling">
+    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
+  </aside>
+
+  <footer class="is-styling">
+    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
+  </footer>
+</article>
+
+<article>
+  <h2>:where()-styled links</h2>
+  <section class="where-styling">
+    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
+  </section>
+
+  <aside class="where-styling">
+    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
+  </aside>
+
+  <footer class="where-styling">
+    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
+  </footer>
+</article>
+ +

このやや矛盾した例では、2つの記事があり、それぞれがセクション、脇、フッターを含んでいます。これらの記事は、子要素をマークするために使われるクラスによって異なります。

+ +

中のリンクの選択をより簡単にして、しかし区別できるようにするために、次のように :is() や :where() を使うことができます。

+ +
html {
+  font-family: sans-serif;
+  font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+  color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+  color: orange;
+}
+ +

しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？

+ +
footer a {
+  color: blue;
+}
+ +

これは赤いリンクに作用しません。 :is() の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。

+ +

しかし、 :where() 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされてしまいます。 + +

結果は以下で見ることができます (ただし、現在のところ :is() と :where() は既定では Firefox Nightly のバージョン 77 以降では有効になっているだけで、他のバージョンの Firefox では layout.css.is-where-selectors.enabled の設定で隠されています)。

+ +

注: この例は GitHub からも見ることができます。 is-where を参照してください。

+ +

{{EmbedLiveSample('Examples', '100%', 600)}}

+ +

構文

+ +
{{CSSSyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.where")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html b/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html new file mode 100644 index 0000000000..e393f9cceb --- /dev/null +++ b/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html @@ -0,0 +1,65 @@ +--- +title: '::-moz-color-swatch' +slug: 'Web/CSS/::-moz-color-swatch' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - Non-standard + - Pseudo-element + - Reference + - 標準外 + - 疑似要素 +translation_of: 'Web/CSS/::-moz-color-swatch' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-moz-color-swatch は CSS の疑似要素であり、 Mozilla 拡張で、 {{HTMLElement("input")}} の type="color" で選択された色を表します。

+ +
+

メモ: ::-moz-color-swatch を <input type="color"> 以外に何も一致せず、何も効果がありません。

+
+ +

構文

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<input type="color" value="#de2020" />
+
+ +

CSS

+ +
input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

仕様書

+ +

どの仕様書でも定義されていません。これは Gecko に固有の専用の疑似要素です。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-moz-color-swatch")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..8b1bff631c --- /dev/null +++ b/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,60 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - NeedsCompatTable + - Non-standard + - Pseudo-element + - Reference + - 擬似要素 + - 標準外 +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-moz-progress-bar は CSS の擬似要素で Mozilla 拡張であり、 {{HTMLElement("progress")}} 要素の中のプログレスバーを表します。 (バーは進捗した量を表します。)

+ +

{{HTMLElement("progress")}} のまだ終了していない部分を Mozilla で選択したい場合は、 {{HTMLElement("progress")}} で直接選択してください。

+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Indeterminate</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* 不確実なバーは強制的に幅をゼロにする */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

上記の最初のバーは次のようになります。

+ +

Custom styled progress bar

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-moz-range-track/index.html b/files/ja/web/css/_doublecolon_-moz-range-track/index.html new file mode 100644 index 0000000000..a8e2b5b044 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,74 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::-moz-range-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-moz-range-track CSS 疑似要素は、 type="range" の {{HTMLElement("input")}} でインジケーターがスライドする track (例, 溝) を表す Mozilla 拡張機能 です。

+ +
+

Note: ::-moz-range-track を <input type="range"> 以外で使用すると、何にも一致せず、効果がありません。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-track {
+  background-color: green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

このスタイルを使用するプログレスバーは、次のようになります:

+ +

A range with the track green.

+ +

仕様

+ +

標準の一部ではありません。

+ +

ブラウザー実装状況

+ + + +

{{Compat("css.selectors.-moz-range-track")}}

+ +

関連項目

+ + diff --git a/files/ja/web/css/_doublecolon_-ms-browse/index.html b/files/ja/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..5bb2d2abd6 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,112 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference + - Selector + - セレクター + - 標準外 +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +
{{CSSRef}}{{Non-standard_Header}}
+ +

CSS の ::-ms-browse 擬似要素は Microsoft 拡張であり、 {{HTMLElement("input/file", '<input type="file">')}} のファイル選択ダイアログを開くボタンを表します。

+ +

許可されているプロパティ

+ +

以下の CSS プロパティのみが ::-ms-browse がセレクターにある場合に利用できます。その他のプロパティは無視されます。

+ +
+ +
+ +

構文

+ +
{{CSSSyntax}}
+
+ +

例

+ +

HTML

+ +
<label>Select image: <input type="file"></label>
+ +

CSS

+ +
input[type="file"]::-ms-browse {
+  color: red;
+  background-color: yellow;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

出力例

+ +

+ +

仕様書

+ +

何れの仕様書の一部でもありません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-ms-browse")}}

diff --git a/files/ja/web/css/_doublecolon_-ms-expand/index.html b/files/ja/web/css/_doublecolon_-ms-expand/index.html new file mode 100644 index 0000000000..e55bbb962c --- /dev/null +++ b/files/ja/web/css/_doublecolon_-ms-expand/index.html @@ -0,0 +1,92 @@ +--- +title: '::-ms-expand' +slug: 'Web/CSS/::-ms-expand' +tags: + - CSS + - 'CSS:Microsoft Extensions' + - 'CSS:Microsoft 拡張' + - NeedsCompatTable + - Non-standard + - Pseudo-element + - Reference + - 標準外 + - 疑似要素 +translation_of: 'Archive/Web/CSS/::-ms-expand' +--- +
{{CSSRef}}{{Non-standard_Header}}
+ +

::-ms-expand は CSS の疑似要素で、 Microsoft 拡張であり、 {{HTMLElement("select")}} メニューコントロールでドロップダウンメニューを開いたり閉じたりするボタンを表します。通常、これは下を向いた三角形です。

+ +

許可されているプロパティ

+ +

以下の CSS プロパティのみが、 ::-ms-expand をセレクターに含む規則で使用することができます。他のプロパティは無視されます。

+ +
+ +
+ +

構文

+ +
{{CSSSyntax}}
+ +

仕様書

+ +

仕様書で定められていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-ms-expand")}}

diff --git a/files/ja/web/css/_doublecolon_-ms-fill/index.html b/files/ja/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..197848e00c --- /dev/null +++ b/files/ja/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,112 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - Microsoft 拡張 + - Non-standard + - Reference + - 標準外 + - 疑似要素 +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

CSS の ::-ms-fill 疑似要素は Microsoft 拡張で、 {{HTMLElement("progress")}} で表示される進捗バーを表します。この疑似要素は Internet Explorer 10, Internet Explorer 11, Microsoft Edge のみで利用できます。

+ +

確定的な進捗バーには {{cssxref("animation-name")}} 以外の許容されているすべてのプロパティを適用します。 animation-name だけは不確定なものに適用されます。 (進捗バーは {{htmlattrxref("value","progress")}} 属性が設定されていれば確定的で、そうでなければ不確定です。不確定な進捗バーは {{cssxref(":indeterminate")}} 疑似クラスで選択することができます。)

+ +

既定では、 Internet Explorer および Edge は不確定な進捗バーに点が動くアニメーションを表示します。 ::-ms-fill に animation-name を設定することで、アニメーションをこの表にあるように変更することができます。

+ + + + + + + + + + + + + + + + + + + + +
値説明
noneアニメーションを無効にし、点は表示されません。
-ms-barバーのパターンを流れる動く点を表示します。
-ms-ring環状のパターンを流れる動く点を表示します。
+ +

許容されているプロパティ

+ +

以下の CSS プロパティのみがセレクターに ::-ms-fill を含む規則で使用することができます。その他のプロパティは無視されます。

+ + + +

構文

+ +
  {{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<progress value="10" max="50"></progress>
+
+ +

CSS

+ +
progress::-ms-fill {
+  background-color: orange;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

このスタイルを使用した進捗バーは、次のように見えるかもしれません。

+ +

A progress bar with its progress indicator colored orange.

+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.-ms-fill")}}

+ +

仕様書

+ +

何れの仕様書の一部でもありません。

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-ms-value/index.html b/files/ja/web/css/_doublecolon_-ms-value/index.html new file mode 100644 index 0000000000..1731f89f86 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-ms-value/index.html @@ -0,0 +1,103 @@ +--- +title: '::-ms-value' +slug: 'Web/CSS/::-ms-value' +tags: + - CSS + - Microsoft 拡張 + - Reference + - 標準外 + - 疑似要素 +translation_of: 'Archive/Web/CSS/::-ms-value' +--- +
{{non-standard_header}}
+ +

CSS の ::-ms-value 疑似要素は Microsoft 拡張で、テキストまたはパスワードの {{HTMLElement("input")}} コントロールの値、または {{HTMLElement("select")}} コントロールの中身に規則を適用します。

+ +

許可されているプロパティ

+ +

以下の CSS プロパティのみが ::-ms-value をセレクターに含む規則で使用することができます。

+ + + +

構文

+ +
  {{csssyntax}}
+
+ +

例

+ +
input::-ms-value {
+  color: lime;
+  font-style: italic;
+}
+ +

既定のスタイルを無効にするには、以下のようにします。

+ +
select::-ms-value {
+  background-color: transparent;
+  color: inherit;
+}
+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.-ms-value")}}

+ +
{{CSSRef}}
diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..b74c075dd6 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,66 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - Reference + - Selector + - 疑似要素 + - 非標準 +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-webkit-progress-value CSS 疑似要素 は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。

+ +
+

Note: ::-webkit-progress-value を有効にするには {{cssxref("-webkit-appearance")}} を <progress> 要素で none に設定する必要があります。

+
+ +

仕様

+ +

仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。

+ +

例

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

上記のスタイルを使用したプログレスバーは次のようになります:

+ +

+ +

ブラウザーの実装状況

+ + + +

{{Compat("css.selectors.-webkit-progress-value")}}

+ +

関連項目

+ + diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..7eb877eb17 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,47 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - 'CSS:WebKit Extensions' + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +

{{CSSRef}}{{Non-standard_Header}}

+ +

::-webkit-slider-runnable-track は CSS の擬似要素で {{HTMLElement("input/range", '<input type="range">')}} "track" (インジケータがスライドする溝) を表します。

+ +

構文

+ +
::-webkit-slider-runnable-track
+ +

仕様書

+ +

標準の一部ではありません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-webkit-slider-runnable-track")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..a897d26205 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,44 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference + - 擬似要素 + - 標準外 +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-webkit-slider-thumb は CSS の擬似要素で、数値の値を変更する {{HTMLElement("input")}} の type="range" でユーザーが「溝」の中を動かすことができる「つまみ」を表します。

+ +

仕様書

+ +

どの仕様書でも定義されていません。これは WebKit/Blink に固有の私有擬似要素です。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.-webkit-slider-thumb")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_after/index.html b/files/ja/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..a7ba688a7b --- /dev/null +++ b/files/ja/web/css/_doublecolon_after/index.html @@ -0,0 +1,177 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - ウェブ + - リファレンス + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

+ +
/* リンクの後に矢印を追加 */
+a::after {
+  content: "→";
+}
+ +
+

メモ: ::before 及び ::after によって作成される疑似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

+
+ +

構文

+ +
{{csssyntax}}
+ +
+

メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::after の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :after も使用できます。

+
+ +

例

+ +

シンプルな使い方

+ +

2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。

+ +

HTML

+ +
<p class="boring-text">古くつまらないテキストです。</p>
+<p>つまらなくも楽しくもないふつうのテキストです。</p>
+<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
+ +

CSS

+ +
.exciting-text::after {
+  content: " <- 楽しい！";
+  color: green;
+}
+
+.boring-text::after {
+  content: " <- ツマラナイ！";
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_usage', 500, 150)}}

+ +

装飾の例

+ +

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

+ +

HTML

+ +
<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "かわいいオレンジのボックスです。";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

結果

+ +

{{EmbedLiveSample('Decorative_example', 450, 20)}}

+ +

ツールチップ

+ +

この例は、 ::after を CSS の attr() 関数と data-descr カスタムデータ属性との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。

+ +

HTML

+ +
<p>Here we have some
+  <span data-descr="collection of words and punctuation">text</span> with a few
+  <span data-descr="small popups that appear when hovering">tooltips</span>.
+</p>
+
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

結果

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}擬似要素で定義されたプロパティのトランジションを許可
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.after")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_backdrop/index.html b/files/ja/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..401fbd040c --- /dev/null +++ b/files/ja/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,82 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Full-screen + - Layout + - NeedsContent + - Pseudo-element + - Reference + - 全画面 + - 疑似要素 +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}}
+ +

CSS の ::backdrop 疑似要素は、何らかの要素が全画面モードで表示される直下に直接表示される {{Glossary("viewport")}} の寸法のボックスです。これは Fullscreen API を使用した全画面モードに配置される要素、および {{HTMLElement("dialog")}} 要素の両方を含みます。

+ +

全画面モードで複数の要素が配置されたときは、 backdrop はそのような要素の最上位の直下、より古い全画面要素の上に絵が描かれます。

+ +
/* Backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}
+ +

すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。 ::backdrop 疑似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。

+ +

::backdrop 疑似要素はどの要素にも継承せず、どの要素からも継承しません。この疑似要素に適用するプロパティの制限はありません。

+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。

+ +
video::backdrop {
+  background-color: #448;
+}
+
+ +

結果の画面は以下のようになります。

+ +

+ +

なお、 backdrop である暗い青灰色の上下のレターボックス効果の場所は可視です。ふつうその領域は黒ですが、上記の CSS によって表示方法が変更されています。

+ +

Glitch ですぐに例を見るまたはコードを閲覧またはリミックスすることができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.backdrop")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_before/index.html b/files/ja/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..65596a63d7 --- /dev/null +++ b/files/ja/web/css/_doublecolon_before/index.html @@ -0,0 +1,231 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Selector + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

+ +
/* リンクの前にハートを追加 */
+a::before {
+  content: "♥";
+}
+ +
+

注: ::before および ::after によって生成される擬似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

+
+ +

構文

+ +
{{csssyntax}}
+ +
+

注: CSS3 では擬似クラスと擬似要素を見分けやすくするために、 ::before の表記法 (二重コロン付き) が導入されました。ブラウザーでは CSS2 で導入された :before も使用できます。

+
+ +

例

+ +

引用符の追加

+ +

::before 擬似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。引用符を挿入するために ::before および {{Cssxref("::after")}} の両方を使用しています。

+ +

HTML

+ +
<q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
+ +

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}

+ +

装飾の例

+ +

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

+ +

HTML

+ +
<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "このオレンジのボックスを見てください。";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

結果

+ +

{{EmbedLiveSample('Decorative_example', 450, 60)}}

+ +

やることリスト

+ +

この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。

+ +

HTML

+ +
<ul>
+  <li>牛乳を買う</li>
+  <li>犬の散歩をする</li>
+  <li>エクササイズ</li>
+  <li>コードを書く</li>
+  <li>音楽を演奏する</li>
+  <li>リラックスする</li>
+</ul>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if (ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の ::before で整形したものです。先に進んでやってみてください。

+ +

結果

+ +

{{EmbedLiveSample('To-do_list', 400, 300)}}

+ +

特殊文字

+ +

これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することはできません。特殊文字を使用する必要がある場合で、 CSS の content の文字列に入力する場合は、 If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

+ +

HTML

+ +
<ol>
+  <li>Crack Eggs into bowl</li>
+  <li>Add Milk</li>
+  <li>Add Flour</li>
+  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
+  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
+  <li>Fry until the top of the pancake loses its gloss</li>
+  <li>Flip it over and fry for a couple more minutes</li>
+  <li>serve with your favorite topping</li>
+</ol>
+
+ +

CSS

+ +
li {
+  padding:0.5em;
+}
+
+li[aria-current='step'] {
+  font-weight:bold;
+}
+
+li[aria-current='step']::after {
+  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  display: inline;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Special_characters', 400, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし。
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可。
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入。
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.before")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_cue/index.html b/files/ja/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..7422b52d8c --- /dev/null +++ b/files/ja/web/css/_doublecolon_cue/index.html @@ -0,0 +1,93 @@ +--- +title: '::cue' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - CSS + - Media + - Pseudo-element + - Reference + - Selector + - WebVTT + - Webビデオテキストトラック + - cue + - ウェブ動画テキストトラック + - セレクター + - メディア + - 擬似要素 +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

::cue は CSS の擬似要素で、選択された要素内の WebVTT キューに一致します。これにより、 VTT トラック付きのメディアでキャプションや他のキューをスタイル付けすることができます。

+ +
::cue {
+  color: yellow;
+  font-weight: bold;
+}
+ +

利用可能なプロパティ

+ +

セレクターにこの要素を含む規則では、以下の CSS プロパティしか使用することができません。

+ + + +

プロパティは、あたかも1つの部品であるかのように、一連のキュー全体に適用されます。 background とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。

+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

次の CSS はキューのスタイルを設定し、テキストが白に、背景が半透明の黒い矩形になります。

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.cue")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_first-letter/index.html b/files/ja/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..8d9d2235fe --- /dev/null +++ b/files/ja/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,166 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

::first-letter は CSS の擬似要素で、ブロックレベル要素の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。

+ +
/* <p> の最初の文字を選択します */
+p::first-letter {
+  font-size: 130%;
+}
+ +

要素の最初の文字は、常に単純に識別できるとは限りません。

+ + + +
+

CSS3 では擬似クラスと擬似要素を見分けやすくするために、 ::first-letter の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :first-letter も使用できます。

+
+ +

利用可能なプロパティ

+ +

::first-letter 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +
{{csssyntax}}
+ +

例

+ +

単純なドロップキャップ

+ +

この例では、 ::first-letter 疑似要素を使用して、 <h2> の直後の段落の最初の文字にドロップキャップ効果を作成します。

+ +

HTML

+ +
<h2>My heading</h2>
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+ +

CSS

+ +
p {
+  width: 500px;
+  line-height: 1.5;
+}
+
+h2 + p::first-letter {
+  color: white;
+  background-color: black;
+  border-radius: 2px;
+  box-shadow: 3px 3px 0 red;
+  font-size: 250%;
+  padding: 6px 3px;
+  margin-right: 6px;
+  float: left;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}

+ +

特殊な区切り文字と非ラテン文字への効果

+ +

この例では、特殊な区切り文字や非ラテン文字に対する ::first-letter の効果を説明しています。

+ +

HTML

+ +
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「先頭の特殊区切り記号です。</p>
+<p>《先頭の特殊区切り記号です。</p>
+<p>“先頭の特殊区切り記号です。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 150%;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}利用できるプロパティを組版、文字装飾、インライン配置、 {{ cssxref("opacity") }}、 {{ cssxref("box-shadow") }} に一般化。
{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}::first-letter で {{cssxref("text-shadow")}} が使用できるようになった。
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}擬似要素用の二重コロン構文の導入。リスト項目での使用時やや特定言語向け（例えばオランダ語の連字 IJ）など、特殊な場合の挙動の定義。
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}変更なし。
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}初回定義、単一コロン構文を使用。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.first-letter")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_first-line/index.html b/files/ja/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..ca36c8b9a0 --- /dev/null +++ b/files/ja/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,121 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

::first-line は CSS の擬似要素で、ブロックレベル要素の最初の行にスタイルを適用します。なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。

+ +
/* <p> の最初の行を選択 */
+p::first-line {
+  color: red;
+}
+ +
+

CSS3 では ::first-line という (二重コロン付き) 表記が、 擬似クラスと擬似要素を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された :first-line も使用できます。

+
+ +

利用可能なプロパティ

+ +

::first-line 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p>スタイルはこの段落の最初の行にのみ適用されます。
+その後のすべての文字列は普通のスタイルになります。分かりますか？</p>
+
+<span>ブロックレベル要素ではないので、この文字列の最初の行は、
+特殊なスタイルになりません。</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* 警告: これらを使用しないでください */
+  /* ::first-line 擬似要素では多くのプロパティが無効になります */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 350, 160)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}}::first-letter を利用できる場所をもっと厳密に定義。
+ 利用できるプロパティを組版、文字装飾、インライン配置、 {{cssxref("opacity")}} に一般化。
+ ::first-letter の継承を定義。
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}::first-letter で {{cssxref("text-shadow")}} が使用できるようになった。
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}擬似要素用の二重コロン構文の導入。
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}初回定義、単一コロン構文を使用。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.first-line")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_grammar-error/index.html b/files/ja/web/css/_doublecolon_grammar-error/index.html new file mode 100644 index 0000000000..af6317055e --- /dev/null +++ b/files/ja/web/css/_doublecolon_grammar-error/index.html @@ -0,0 +1,87 @@ +--- +title: '::grammar-error' +slug: 'Web/CSS/::grammar-error' +tags: + - CSS + - Experimental + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::grammar-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

::grammar-error は CSS の擬似要素で、{{glossary("user agent", "ユーザーエージェント")}}が文法的に正しくないとしたテキストの区間を示します。

+ +

利用できるプロパティ

+ +

::grammar-error 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +
::grammar-error
+ +

例

+ +

単純な文書の構文チェック

+ +

この例では、最終的に対応しているブラウザーでは、フラグの立った文法エラーがあれば、示したスタイルで強調表示されます。

+ +

HTML

+ +
<p>My friends is coming to the party tonight.</p>
+ +

CSS

+ +
::grammar-error  {
+  text-decoration: underline red;
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_document_grammar_check', '100%', 60)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.grammar-error")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_marker/index.html b/files/ja/web/css/_doublecolon_marker/index.html new file mode 100644 index 0000000000..456202817e --- /dev/null +++ b/files/ja/web/css/_doublecolon_marker/index.html @@ -0,0 +1,102 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +tags: + - CSS + - CSS Lists + - CSS リスト + - Experimental + - Layout + - Pseudo-element + - Reference + - 疑似要素 +translation_of: 'Web/CSS/::marker' +--- +
{{CSSRef}}
+ +

::marker は CSS の擬似要素で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。これは display: list-item が設定された要素や擬似要素、例えば {{HTMLElement("li")}} 要素や {{HTMLElement("summary")}} 要素で利用できます。

+ +
::marker {
+  color: blue;
+  font-size: 1.2em;
+}
+ +

利用できるプロパティ

+ +

::marker 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +
+

この仕様書は、将来追加の CSS プロパティに対応する可能性があることを示しています。

+
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<ul>
+  <li>Peaches</li>
+  <li>Apples</li>
+  <li>Plums</li>
+</ul>
+ +

CSS

+ +
ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}重要な変更はなし。
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.marker")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_part/index.html b/files/ja/web/css/_doublecolon_part/index.html new file mode 100644 index 0000000000..f4af2fa823 --- /dev/null +++ b/files/ja/web/css/_doublecolon_part/index.html @@ -0,0 +1,128 @@ +--- +title: '::part()' +slug: 'Web/CSS/::part' +tags: + - '::part' + - CSS + - Draft + - Experimental + - NeedsBrowserCompatibility + - NeedsExample + - Pseudo-element + - Reference + - Selector + - セレクター + - 擬似要素 +translation_of: 'Web/CSS/::part' +--- +
{{CSSRef}}
+ +

::part は CSS の擬似要素で、一致する {{HTMLAttrxRef("part")}} 属性を持つシャドウツリー内の要素を表します。

+ +
custom-element::part(foo) {
+  /* Styles to apply to the `foo` part */
+}
+
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<template id="tabbed-custom-element">
+<style type="text/css">
+*, ::before, ::after {
+  box-sizing: border-box;
+  padding: 1rem;
+}
+:host {
+  display: flex;
+}
+</style>
+<div part="tab active">Tab 1</div>
+<div part="tab">Tab 2</div>
+<div part="tab">Tab 3</div>
+</template>
+
+<tabbed-custom-element></tabbed-custom-element>
+ +

CSS

+ +
tabbed-custom-element::part(tab) {
+  color: #0c0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
+tabbed-custom-element::part(tab):hover {
+  background-color: #0c0c0d19;
+  border-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):hover:active {
+  background-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+tabbed-custom-element::part(active) {
+  color: #0060df;
+  border-color: #0a84ff !important;
+}
+
+ +

JavaScript

+ +
let template = document.querySelector("#tabbed-custom-element");
+globalThis.customElements.define(template.id, class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content);
+  }
+});
+
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Shadow Parts", "#part", "::part")}}{{Spec2("CSS Shadow Parts")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.part")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_placeholder/index.html b/files/ja/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..114448ae34 --- /dev/null +++ b/files/ja/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,153 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Experimental + - Reference + - フォーム + - 疑似要素 +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}
+ +

::placeholder は CSS の疑似要素で、 {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素のプレイスホルダー文字列を表します。

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

セレクターに ::placeholder を使ったルールを使用できるのは、{{cssxref("::first-line")}} 疑似要素に適用できる CSS プロパティだけです。

+ +
+

メモ: 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

赤い文字

+ +

HTML

+ +
<input placeholder="何か入力してください！">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Red_text", 200, 60)}}

+ +

緑のテキスト

+ +

HTML

+ +
<input placeholder="何か入力してください...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Green_text", 200, 60)}}

+ +

アクセシビリティの考慮事項

+ +

色のコントラスト

+ +

コントラスト比

+ +

プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。

+ +

プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です。

+ +

色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

使用性

+ +

プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させのに困難を伴う可能性があります。

+ +

プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 aria-describedby を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。

+ +

この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は aria-describedby を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。

+ +
<label for="user-email">Your email address</label>
+<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Windows 高コントラストモード

+ +

プレイスホルダー文字列は、 Windows 高コントラストモードではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。

+ + + +

ラベル

+ +

プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 {{htmlattrxref("for", "label")}} 及び {{htmlattrxref("id")}} 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_selection/index.html b/files/ja/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..33bffb3a5c --- /dev/null +++ b/files/ja/web/css/_doublecolon_selection/index.html @@ -0,0 +1,133 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Experimental + - リファレンス + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

CSS の ::selection 擬似要素は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

+ +
::selection {
+  background-color: cyan;
+}
+ +

利用できるプロパティ

+ +

::selection 擬似要素では、特定の CSS プロパティのみが利用できます。

+ + + +
+

特に、 {{CSSxRef("background-image")}} は無視されます。

+
+ +

構文

+ +
/* 従来の Firefox の構文 (バージョン 61 以前) */
+::-moz-selection
+
+{{CSSSyntax}}
+
+ +

例

+ +

HTML

+ +
この文字列は選択すると特殊なスタイルになります。
+<p>こちらの段落も文字列を選択してみてください。</p>
+ +

CSS

+ + + +
/* 選択されたテキストを赤の背景に金色とする */
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* 選択されたテキストを青の背景に白とする */
+p::selection {
+  color: white;
+  background-color: blue;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

アクセシビリティの考慮

+ +

純粋に美的な理由により、選択されたテキストのスタイルを上書きしないでください。 — ユーザーは必要に応じてカスタマイズすることができます。認知の問題を抱えている人や、技術的な知識に弱い人にとって、予期せず選択のスタイルが変更されると、機能の理解が妨げられる可能性があります。

+ +

上書きする場合は、選択部分のテキストと背景の色のコントラスト比が、弱視の人でも読める程度に高いことを確認することが重要です。

+ +

色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義しています。)

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義。
+ +
+

注: ::selection は CSS Selectors Level 3 の草稿にはありましたが、 (特に要素がネストされた場合の) 振る舞いの仕様化が途中であることや相互運用性が確保されなかったこと (W3C Style mailing list での議論に基づく) から、勧告の過程で削除されました。これは Pseudo-Elements Level 4 で再導入されています。

+
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.selection")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_slotted/index.html b/files/ja/web/css/_doublecolon_slotted/index.html new file mode 100644 index 0000000000..e02c142be6 --- /dev/null +++ b/files/ja/web/css/_doublecolon_slotted/index.html @@ -0,0 +1,113 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +tags: + - '::slotted' + - CSS + - Reference + - ウェブ + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::slotted' +--- +
{{ CSSRef }}
+ +

::slotted() は CSS の 疑似要素で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくはテンプレートとスロットの利用をご覧ください)。

+ +

これは shadow DOM 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。

+ +
/* スロット内に配置された任意の要素を選択 */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* スロット内に配置された <span> 要素を選択 */
+::slotted(span) {
+  font-weight: bold;
+}
+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

以下のコードの断片は slotted-pseudo-element デモから取られたものです (ライブでもご覧ください)。

+ +

このデモでは、３つのスロットを持つ単純なテンプレートを使用します。

+ +
<template id="person-template">
+  <div>
+    <h2>Personal ID Card</h2>
+    <slot name="person-name">NAME MISSING</slot>
+    <ul>
+      <li><slot name="person-age">AGE MISSING</slot></li>
+      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
+    </ul>
+  </div>
+</template>
+ +

カスタム要素 — <person-details> — は以下のように定義されています。

+ +
customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})
+ +

style 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (::slotted(*))、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。

+ +

この要素がページに挿入されると、以下のように見えます。

+ +
<person-details>
+  <p slot="person-name">Dr. Shazaam</p>
+  <span slot="person-age">Immortal</span>
+  <span slot="person-occupation">Superhero</span>
+</person-details>
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}{{ Spec2('CSS Scope') }}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.slotted")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_spelling-error/index.html b/files/ja/web/css/_doublecolon_spelling-error/index.html new file mode 100644 index 0000000000..cba9fd4266 --- /dev/null +++ b/files/ja/web/css/_doublecolon_spelling-error/index.html @@ -0,0 +1,72 @@ +--- +title: '::spelling-error' +slug: 'Web/CSS/::spelling-error' +tags: + - CSS + - Experimental + - NeedsExample + - Pseudo-element + - Reference + - Web + - 疑似要素 +translation_of: 'Web/CSS/::spelling-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の ::spelling-error 疑似要素は、綴りが正しくないと{{glossary("user agent", "ユーザーエージェント")}}が判断したテキスト区間を示します。

+ +
::spelling-error {
+  color: red;
+}
+ +

利用できるプロパティ

+ +

::spelling-error 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +
::spelling-error
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("css.selectors.spelling-error")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/actual_value/index.html b/files/ja/web/css/actual_value/index.html new file mode 100644 index 0000000000..563219f3a2 --- /dev/null +++ b/files/ja/web/css/actual_value/index.html @@ -0,0 +1,49 @@ +--- +title: 実効値 +slug: Web/CSS/actual_value +tags: + - CSS + - Guide + - Reference + - ガイド +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

CSS プロパティの実効値 (actual value) は、すべての必要な推定が適用された後の使用値 (used value) です。例えば、境界を整数値のピクセル幅でしか描けない{{glossary("user agent", "ユーザーエージェント")}}は、境界の太さを近似値の整数に丸めるかもしれません。

+ +

プロパティの実効値の計算

+ +

{{glossary("user agent", "ユーザーエージェント")}}はプロパティの実効値 (最終値) を4段階で計算します。

+ +
    +
  1. 最初に指定値 (specified value) が、カスケード、継承、初期値の使用の何れかによって決定されます。
    2. +
  2. 次に、仕様に従って計算値 (computed value) が計算されます (例えば、 position: absolute の付いた span は、計算で display が block に変わります)。
    3. +
  3. 最後に、レイアウトが計算され、結果として使用値になります。
    4. +
  4. 最後に、使用値がローカルの環境の制約によって変換され、結果として実効値になります。
    5. +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}初回定義。
+ +

関連情報

+ + diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.html b/files/ja/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..f962949f35 --- /dev/null +++ b/files/ja/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,85 @@ +--- +title: 隣接兄弟結合子 +slug: Web/CSS/Adjacent_sibling_combinator +tags: + - CSS + - Reference + - Selectors + - セレクター +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

隣接兄弟結合子 (adjacent sibling combinator) (+) は2つのセレクターを接続し、同じ親{{DOMxRef("element", "要素")}}の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

+ +
/* 画像の直後に来る段落 */
+img + p {
+  font-style: bold;
+}
+ +

構文

+ +
直前の要素 + 対象の要素 { スタイルプロパティ }
+
+ +

例

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#adjacent-sibling-combinators", "next-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を「次の兄弟」結合子に変更。
{{SpecName("CSS3 Selectors", "#adjacent-sibling-combinators", "Adjacent sibling combinator")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#adjacent-selectors", "Adjacent sibling selectors")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.adjacent_sibling")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/align-content/index.html b/files/ja/web/css/align-content/index.html new file mode 100644 index 0000000000..7c2530a7d2 --- /dev/null +++ b/files/ja/web/css/align-content/index.html @@ -0,0 +1,297 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - Reference + - place-content +translation_of: Web/CSS/align-content +--- +

CSS の align-content プロパティは、フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。

+ +

下記の対話型のデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。

+ +
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+ + + +

単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がありません。

+ +

構文

+ +
/* 基本的な位置による配 */
+/* align-content は left および right の値を取りません */
+align-content: center;     /* アイテムを中央に寄せる */
+align-content: start;      /* アイテムを先頭に寄せる */
+align-content: end;        /* アイテムを末尾に寄せる */
+align-content: flex-start; /* フレックスアイテムを先頭に寄せる */
+align-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
+
+/* 通常の配置 */
+align-content: normal;
+
+/* ベースラインの配置 */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* 均等配置 */
+align-content: space-between; /* アイテムを均等に配置し
+                                 最初のアイテムは先頭に寄せ、
+                                 最後のアイテムは末尾に寄せる */
+align-content: space-around;  /* アイテムを均等に配置し
+                                 各アイテムの両側に半分の大きさの
+                                 間隔を置く */
+align-content: space-evenly;  /* アイテムを均等に配置し
+                                 各アイテムの周りに同じ大きさの間隔を置く */
+align-content: stretch;       /* アイテムを均等に配置し
+                                 コンテナーに合うようにサイズ「自動」の
+                                 アイテムを引き伸ばす */
+
+/* あふれた場合の配置 */
+align-content: safe center;
+align-content: unsafe center;
+
+/* グローバル値 */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

値

+ +
+
start
+
各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
+
end
+
各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
+
flex-start
+
各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
+
flex-end
+
各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
+
center
+
各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。
+
normal
+
各アイテムは align-content の値が設定されていないかのように、既定の位置に寄せて配置されます。
+
baseline
+ first baseline
+ last baseline
+
the baseline is the line upon which most letters "sit" and below which descenders extend.
+
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
+ first baseline の代替配置は start、last baseline の代替配置は end です。
+
space-between
+
各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは配置コンテナーの交差軸の先頭側に寄せられ、最後のアイテムは配置コンテナーの交差軸の末尾側に寄せられます。
+
space-around
+
各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。
+
space-evenly
+
各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔、先頭側の端と最初のアイテムの間のの余白、末尾側の端と最後のアイテムの間の余白は、まったく同じ幅になります。
+
stretch
+
各アイテムの交差軸方向の寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、交差軸方向の寸法の合計が配置コンテナーを満たすようになります。
+
safe
+
配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。
+
unsafe
+
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-content: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="stretch">stretch</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="space-between">space-between</option>
+    <option value="space-around">space-around</option>
+    <option value="space-evenly">space-evenly</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="baseline">baseline</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

結果

+ +

{{EmbedLiveSample("Example", 260, 290)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}[ first | last ]? baseline, start, end, left, right, unsafe | safe の値を追加。
{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}{{Spec2("CSS3 Flexbox")}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +
+ + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.align-content.grid_context")}}

+
+ +

関連情報

+ + + +
{{CSSRef}}
diff --git a/files/ja/web/css/align-items/index.html b/files/ja/web/css/align-items/index.html new file mode 100644 index 0000000000..c93aa16148 --- /dev/null +++ b/files/ja/web/css/align-items/index.html @@ -0,0 +1,286 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - Reference +translation_of: Web/CSS/align-items +--- +

CSS の align-items プロパティは、すべての直接の子要素に集合として {{cssxref("align-self")}} の値を設定します。フレックスボックスでは{{glossary("Cross Axis", "交差軸")}}方向のアイテムの配置を制御します。グリッドレイアウトでは、{{glossary("Grid Areas", "グリッド領域")}}におけるアイテムのブロック軸方向の配置を制御します。

+ +

以下のデモは、グリッドレイアウトを使用して align-items のいくつかの値の動作を示しています。

+ +
{{EmbedInteractiveExample("pages/css/align-items.html")}}
+ + + +

構文

+ +
/* 基本キーワード */
+align-items: normal;
+align-items: stretch;
+
+/* 位置による配置 */
+/* align-items は左と右の値を取らない */
+align-items: center; /* アイテムを中央付近にまとめる */
+align-items: start; /* アイテムを先頭にまとめる */
+align-items: end; /* アイテムを末尾にまとめる */
+align-items: flex-start; /* フレックスアイテムを先頭にまとめる */
+align-items: flex-end; /* フレックスアイテムを末尾にまとめる */
+
+/* ベースラインに配置する */
+align-items: baseline;
+align-items: first baseline;
+align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */
+align-items: safe center;
+align-items: unsafe center;
+
+/* グローバル値 */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

値

+ +
+
normal
+
キーワードの効果は現在のレイアウトモードに依存します。 +
    +
  • 絶対配置のレイアウトでは、このキーワードは置換絶対配置ボックスにおける start のように動作し、他のすべての絶対配置ボックスでは stretch として動作します。
    • +
  • 絶対配置レイアウトの静的位置では、キーワードは stretch として動作します。
    • +
  • フレックスアイテムについては、このキーワードは stretch として動作します。
    • +
  • グリッドアイテムについては、このキーワードは stretch の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合は start のように動作します。
    • +
  • このプロパティはブロックレベルボックスや、表のセルには適用されません。
    • +
+
+
flex-start
+
フレックスアイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。
+
flex-end
+
フレックスアイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。
+
center
+
フレックスアイテムのマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。
+
start
+
そのアイテムは、互いにその軸の配置コンテナーの始点側の端に寄せられます。
+
end
+
そのアイテムは、互いにその軸の配置コンテナーの終点側の端に寄せられます。
+
self-start
+
そのアイテムは、その軸の配置コンテナーで、そのアイテムの始点側の端に寄せられます。
+
self-end
+
そのアイテムは、その軸の配置コンテナーで、そのアイテムの終点側の端に寄せられます。
+
+ +
+
baseline
+
first baseline
+
last baseline
+
すべてのフレックスアイテムは、ベースラインが一直線になるように配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。
+
stretch
+
アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。
+
safe
+
配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。
+
unsafe
+
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-items: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-items: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="baseline">baseline</option>
+    <option value="stretch">stretch</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="self-start">self-start</option>
+    <option value="self-end">self-end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe self-end">safe self-end</option>
+    <option value="unsafe self-end">unsafe self-end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

結果

+ +

{{EmbedLiveSample("Example", "260px", "290px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}{{Spec2("CSS3 Box Alignment")}}最新の構文定義に更新。
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.align-items.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.align-items.grid_context")}}

+ +

関連情報

+ + + +
{{CSSRef}}
diff --git a/files/ja/web/css/align-self/index.html b/files/ja/web/css/align-self/index.html new file mode 100644 index 0000000000..ff0dcae67a --- /dev/null +++ b/files/ja/web/css/align-self/index.html @@ -0,0 +1,176 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - place-self + - リファレンス +translation_of: Web/CSS/align-self +--- +
{{CSSRef}}
+ +

align-self は CSS のプロパティで、グリッドやフレックスのアイテムの {{cssxref("align-items")}} の値を上書きします。グリッドでは、アイテムは{{glossary("Grid Areas", "グリッド領域")}}内に配置されます。フレックスボックスでは、アイテムは{{glossary("cross axis", "交差軸")}}上に配置されます。

+ +
{{EmbedInteractiveExample("pages/css/align-self.html")}}
+ + + +

このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが auto の場合、 align-self は無視されます。

+ +

構文

+ +
/* キーワード値 */
+align-self: auto;
+align-self: normal;
+
+/* 位置による配置 */
+/* align-self は left および right の値をとりません */
+align-self: center; /* アイテムを中央付近に配置 */
+align-self: start; /* アイテムを起点に配置 */
+align-self: end; /* アイテムを末端に配置 */
+align-self: self-start; /* アイテムを起点に詰めて配置 */
+align-self: self-end; /* アイテムを末端に詰めて配置 */
+align-self: flex-start; /* フレックスアイテムを起点に配置 */
+align-self: flex-end; /* フレックスアイテムを末端に配置 */
+
+/* ベースラインによる配置 */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* 寸法が 'auto' のアイテムをコンテナーに合うよう伸長 */
+
+/* あふれたときの配置 */
+align-self: safe center;
+align-self: unsafe center;
+
+/* グローバル値 */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+ +

値

+ +
+
auto
+
親の {{cssxref("align-items")}} の値で計算します。
+
normal
+
このキーワードの効果は、現在のレイアウトモードに依存します。 +
    +
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように動作し、その他の絶対位置ボックスには stretch のように動作します。
    • +
  • 絶対位置指定レイアウトの固定位置指定時は、このキーワードは stretch と同様に動作します。
    • +
  • フレックスアイテムでは、このキーワードは stretch と同様に動作します。
    • +
  • グリッドアイテムでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように動作します。
    • +
  • ブロックレベルボックスと表のセルでは、プロパティは適用されません。
    • +
+
+
self-start
+
アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。
+
self-end
+
アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。
+
flex-start
+
このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。
+
flex-end
+
このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。
+
center
+
このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。
+
baseline
+ first baseline
+ last baseline
+
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
+ first baseline の代替配置は start、last baseline の代替配置は end です。
+
stretch
+
アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が auto であった場合、アイテムの寸法は {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 auto が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。
+
safe
+
アイテムのサイズが配置コンテナーを超えるとき、アイテムは配置モードが start であったかのように配置されます。
+
unsafe
+
アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<section>
+  <div>Item #1</div>
+  <div>Item #2</div>
+  <div>Item #3</div>
+</section>
+ +

CSS

+ +
section {
+  display: flex;
+  align-items: center;
+  height: 120px;
+  background: beige;
+}
+
+div {
+  height: 60px;
+  background: cyan;
+  margin: 5px;
+}
+
+div:nth-child(3) {
+  align-self: flex-end;
+  background: pink;
+}
+ +

表示結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Box Alignment")}}最新の構文定義に更新。
{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Flexbox")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.align-self.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.align-self.grid_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/all/index.html b/files/ja/web/css/all/index.html new file mode 100644 index 0000000000..a65d37fcf5 --- /dev/null +++ b/files/ja/web/css/all/index.html @@ -0,0 +1,169 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS + - CSS カスケードと継承 + - CSS プロパティ + - Reference + - all +translation_of: Web/CSS/all +--- +
{{CSSRef}}
+ +

CSS の all 一括指定プロパティは、要素のすべてのプロパティを ({{cssxref("unicode-bidi")}} および {{cssxref("direction")}} を除いて) 初期化します。プロパティは初期値または継承値、または他のスタイルシートに由来して指定した値に設定される可能性があります。

+ +
{{EmbedInteractiveExample("pages/css/all.html")}}
+ + + +

構文

+ +
/* グローバル値 */
+all: initial;
+all: inherit;
+all: unset;
+
+/* CSS カスケードと継承 Level 4 */
+all: revert;
+
+ +

all プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値は {{cssxref("unicode-bidi")}} および {{cssxref("direction")}} プロパティには影響しません。

+ +

値

+ +
+
{{cssxref("initial")}}
+
その要素のすべてのプロパティを初期値に変更するべきであることを指定します。
+
{{cssxref("inherit")}}
+
その要素のすべてのプロパティを継承値に変更するべきであることを指定します。
+
{{cssxref("unset")}}
+
その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。
+
{{cssxref("revert")}}
+
宣言が所属するスタイルシートの出所に応じて動作を指定します。 +
+
ユーザーエージェントのスタイルシート
+
unset と同等です。
+
ユーザーのスタイル
+
カスケードをユーザーエージェントレベルまでロールバックし、指定値が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。
+
作者のスタイル
+
カスケードをユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、指定値が計算されます。 revert の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。
+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<blockquote id="quote">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</blockquote>
+Phasellus eget velit sagittis.
+ +

CSS

+ +
body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

結果

+ +
+

all プロパティなし

+ + + + +{{EmbedLiveSample("ex0", "200", "125")}} + +

{{HTMLElement("blockquote")}} は、特定の背景色と文字色と一緒に、ブラウザーの標準スタイルを使用します。blockquoteはブロック要素のようにふるまいます。これに続くテキストはその下にあります。

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("ex1", "200", "125")}} + +

{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。 blockquote はインライン要素 (初期値) であり、 {{cssxref("background-color")}} は transparent (初期値) ですが、 {{cssxref("font-size")}} は small (継承された値) のままで、かつ {{cssxref("color")}}はblue (継承された値) です。

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("ex2", "200", "125")}} + +

{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。 blockquote はインライン要素 (初期値) であり、{{cssxref("background-color")}}はtransparent (初期値)、{{cssxref("font-size")}}はnormal (初期値)、且つ{{cssxref("color")}}は black (初期値)です。

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("ex3", "200", "125")}} + +

{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。blockquoteはブロック要素 (blockquoteを含んでいる{{HTMLElement("div")}}から継承された値)であり、{{cssxref("background-color")}}はtransparent(初期値)、{{cssxref("font-size")}}はsmall (継承された値)、且つ {{cssxref("color")}}はblue (継承された値)です。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS4 Cascade') }}revert の値を追加。
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.all")}}

+ +

関連情報

+ +

CSS のグローバルキーワード値: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}

diff --git a/files/ja/web/css/alpha-value/index.html b/files/ja/web/css/alpha-value/index.html new file mode 100644 index 0000000000..43f07fb8d7 --- /dev/null +++ b/files/ja/web/css/alpha-value/index.html @@ -0,0 +1,64 @@ +--- +title: +slug: Web/CSS/alpha-value +tags: + - Alpha-value + - CSS + - CSS Data Type + - CSS データ型 + - Data Type + - Draft + - Example + - アルファ値 + - データ型 +translation_of: Web/CSS/alpha-value +--- +
{{CSSRef}}
+ +

<alpha-value> は CSS のデータ型であり、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} によって色の{{Glossary("alpha", "アルファチャネル")}}または透過性を表します。

+ +

構文

+ +

数値で指定された場合、利用可能な範囲は '0' (完全透過) から '1' (完全不透過) までの小数値です。 0 から 1 の範囲を超える数も有効ですが、 0 から 1 の範囲にクランプされます。

+ +

パーセント値で指定された場合、 '0%' は完全に透明、 '100%' は完全に不透明に対応します。

+ +

補間

+ +

アニメーションの際、 CSS の <alpha-value> データ型の値は実数の浮動小数点値として補間されます。補間の速度はアニメーションと関連づけられたタイミング関数によって決められます。

+ +

例

+ +

<alpha-value> 値を使用する CSS 機能には、 rgba() や hsla() などの色関数や、シェイプを抽出する目的で画像の一部とみなされるピクセルを決定する {{cssxref("shape-image-threshold")}} などがあります。

+ +
/* <rgba()> */
+color: rgba(34, 12, 64, 0.6);
+color: rgba(34.0 12 64 / 60%);
+
+/* shape-image-threshold */
+shape-image-threshold: 70%;
+shape-image-threshold: 0.7;
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Colors', '#type-def-alpha-value', '<alpha-value>')}}{{Spec2('CSS4 Colors')}}目立った変更なし。
{{SpecName('CSS3 Colors', '#alphavaluedt', '<alpha-value>')}}{{Spec2('CSS3 Colors')}}<alpha-value> を rgba() および hsla() 関数表記のために導入した。
diff --git a/files/ja/web/css/alternative_style_sheets/index.html b/files/ja/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..805b130005 --- /dev/null +++ b/files/ja/web/css/alternative_style_sheets/index.html @@ -0,0 +1,102 @@ +--- +title: 代替スタイルシート +slug: Web/CSS/Alternative_style_sheets +tags: + - CSS + - Guide + - HTML + - NeedsCompatTable + - NeedsUpdate + - Reference + - ガイド +translation_of: Web/CSS/Alternative_style_sheets +--- +
{{cssref}}
+ +

ウェブページに代替スタイルシートを指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。

+ +

Firefox では、表示 >スタイルシートのサブメニューを使用して、ユーザーがスタイルシートを選択することができます。 Internet Explorer でも (IE 8 から) この機能に対応しており、表示 >スタイルから利用できます。 Chrome では (バージョン48時点で) この機能を使用するのに拡張機能が必要です。ウェブページがユーザーからスタイルの切り替えができるユーザーインターフェイスを提供することもできます。

+ +

例: 代替スタイルシートの指定

+ +

代替スタイルシートはふつう、次のように {{HTMLElement("link")}} 要素に rel="alternate stylesheet" およびび title="..." 属性を使用することで指定されます。

+ +
<link href="reset.css" rel="stylesheet" type="text/css">
+
+<link href="default.css" rel="stylesheet" type="text/css" title="既定のスタイル">
+<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="ファンシー">
+<link href="basic.css" rel="alternate stylesheet" type="text/css" title="基本">
+
+ +

この例では、スタイルシートのサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。

+ +

どのスタイルが選択されても、 reset.css の規則が常に適用されます。

+ +

やってみましょう

+ +

ここをクリックすると、やってみることができる例を見ることができます。

+ +

詳細

+ +

文書内のスタイルシートはどれも、以下のカテゴリのうち一つに当てはまります。

+ + + +

{{HTMLElement("link", "<link rel=\"stylesheet\">")}} 又は {{HTMLElement("style")}} 要素で、スタイルシートが title 属性とともに参照された場合、そのタイトルがユーザに与えられる選択肢のひとつとなります。同じタイトルでリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 title 属性を付けずにリンクされたスタイルシートは常に適用されます。

+ +

標準スタイルシートへリンクするには rel="stylesheet" を、代替スタイルシートへリンクするには rel="alternate stylesheet" を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#rel-alternate', 'link type "alternate"')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', '#the-link-is-an-alternative-stylesheet', 'alternative stylesheet')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', '#attr-style-title', 'the "title" attribute for the style element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', '#attr-meta-http-equiv-default-style', 'meta http-equiv="default-style")')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}CSS OM 仕様書は、スタイルシートセット名と、その無効フラグ、推奨される CSS スタイルシートセット名 の概念を定義しています。
+ これらがどのように指定されるのかを定義し、 HTML 仕様書が CSS スタイルシートの作成時に定義する必要がある HTML に依存した動作を定義できるようにしています。
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}以前は、 HTML 仕様書自体で推奨及び代替スタイルシートの概念を定義していました。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.link.rel.alternate_stylesheet")}}

diff --git a/files/ja/web/css/angle-percentage/index.html b/files/ja/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..adbd7d5f66 --- /dev/null +++ b/files/ja/web/css/angle-percentage/index.html @@ -0,0 +1,62 @@ +--- +title: +slug: Web/CSS/angle-percentage +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - angle-percentage + - units + - values +translation_of: Web/CSS/angle-percentage +--- +
{{CSSRef}}
+ +

<angle-percentage> は CSS のデータ型で、 {{Cssxref("angle")}} または {{Cssxref("percentage")}} が取りうる値を表します。

+ +

構文

+ +

この型に利用できる個々の構文の詳細は、 {{Cssxref("angle")}} および {{Cssxref("percentage")}} の文書を参照してください。

+ +

calc() での使用

+ +

許可されている型として <angle-percentage> が指定されているところでは、これはパーセント値が角度として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}<angle-percentage> を定義。 calc() を追加
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.angle-percentage")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/angle/index.html b/files/ja/web/css/angle/index.html new file mode 100644 index 0000000000..c7989858b1 --- /dev/null +++ b/files/ja/web/css/angle/index.html @@ -0,0 +1,94 @@ +--- +title: +slug: Web/CSS/angle +tags: + - CSS + - CSS Data Type + - CSS データ型 + - CSS 値と単位 + - Layout + - Reference + - Web + - ウェブ + - レイアウト +translation_of: Web/CSS/angle +--- +
{{CSSRef}}
+ +

CSS の <angle> データ型は、度、グラード、ラジアン、回転の値で表される角度の値を表します。例えば、 {{cssxref("<gradient>")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。

+ +
{{EmbedInteractiveExample("pages/css/type-angle.html")}}
+ + + +

構文

+ +

<angle> データ型は、一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。 数値 0 の後は、角度の単位は任意です。

+ +

任意で、先行して単一の符号 (+ または -) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 90deg は -270deg と等価で、 1turn は 4turn と等価です。しかし、 {{cssxref("animation")}} や {{cssxref("transition")}} に適用されるような動的なプロパティでは、効果が異なります。

+ +

単位

+ +
+
deg
+
角度を度数法 (度) で表します。円一周は 360deg です。例: 0deg, 90deg, 14.23deg
+
grad
+
角度をグラードで表します。円一周は 400grad です。例: 0grad, 100grad, 38.8grad
+
rad
+
角度を弧度法 (ラジアン) で表します。円一周は 2π ラジアンで、およそ 6.2832rad です。 1rad は 180/π 度です。例: 0rad, 1.0708rad, 6.2832rad
+
turn
+
角度を回転数で表します。円一周は 1turn です。例: 0turn, 0.25turn, 1.2turn
+
+ +

例

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png直角: 90deg = 100grad = 0.25turn ≈ 1.5708rad
Angle180.png平角: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.png直角 (反時計回り): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png角度なし: 0 = 0deg = 0grad = 0turn = 0rad
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Values', '#angles', '<angle>') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.types.angle")}}

diff --git a/files/ja/web/css/animation-delay/index.html b/files/ja/web/css/animation-delay/index.html new file mode 100644 index 0000000000..2535908e60 --- /dev/null +++ b/files/ja/web/css/animation-delay/index.html @@ -0,0 +1,90 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-delay +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

CSS の animation-delay プロパティは、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

+ +
{{EmbedInteractiveExample("pages/css/animation-delay.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+ +

構文

+ +
/* 単一のアニメーション */
+animation-delay: 3s;
+animation-delay: 0s;
+animation-delay: -1500ms;
+
+/* 複数のアニメーション */
+animation-delay: 2.1s, 480ms;
+
+ +

値

+ +
+
{{cssxref("<time>")}}
+
アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (s) またはミリ秒 (ms) のどちらかで指定できます。単位は必須です。
+
正の数が指定された場合は、アニメーションが始まる経過時間を示します。 0s （既定値）の場合は、アニメーションは適用されたらすぐに始まります。
+
+

負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 -1s を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。

+
+
+ +
+

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

CSS アニメーションを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.animation-delay")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-direction/index.html b/files/ja/web/css/animation-direction/index.html new file mode 100644 index 0000000000..a3ecf9e9ac --- /dev/null +++ b/files/ja/web/css/animation-direction/index.html @@ -0,0 +1,98 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animations + - CSS Property + - CSS アニメーション + - CSS プロパティ + - Reference +translation_of: Web/CSS/animation-direction +--- +
{{CSSRef}}
+ +

CSS の animation-direction プロパティは、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-direction.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+ +

構文

+ +
/* 単一のアニメーション */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* 複数のアニメーション */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* グローバル値 */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+
+ +

値

+ +
+
normal
+
アニメーションを毎回順方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。
+
reverse
+
アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、タイミング関数も逆になります。例えば、タイミング関数の ease-in が ease-out になります。
+
alternate
+
アニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
+
alternate-reverse
+
アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
+
+ +
+

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS アニメーションを参照してください。

+ +

仕様書

+ +

{{cssinfo}}

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.animation-direction")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-duration/index.html b/files/ja/web/css/animation-duration/index.html new file mode 100644 index 0000000000..becc1fd743 --- /dev/null +++ b/files/ja/web/css/animation-duration/index.html @@ -0,0 +1,91 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-duration +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}}
+ +

animation-duration は CSS のプロパティで、1回のアニメーション周期が完了するまでの所要時間を設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-duration.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+ +

構文

+ +
/* 単一のアニメーション */
+animation-duration: 6s;
+animation-duration: 120ms;
+
+/* 複数のアニメーション */
+animation-duration: 1.64s, 15.22s;
+animation-duration: 10s, 35s, 230ms;
+
+ +

値

+ +
+
{{cssxref("<time>")}}
+
1回のアニメーションの周期にかかる時間。この値は、秒 (s) またはミリ秒 (ms) で指定することができます。値は正の数か0でなければならず、単位は必須です。 0s の値は、既定値ですが、アニメーションを実行しないことを意味します。
+
+ +
+

注: 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は 0s と等価に解釈するかもしれません。

+
+ +
+

注: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS アニメーションを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-duration', 'animation-duration')}}{{Spec2('CSS3 Animations')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.animation-duration")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-fill-mode/index.html b/files/ja/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..d2752a3009 --- /dev/null +++ b/files/ja/web/css/animation-fill-mode/index.html @@ -0,0 +1,187 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}
+ +

CSS の animation-fill-mode プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} を使用すると便利です。

+ +

構文

+ +
/* 単一のアニメーション */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* 複数のアニメーション */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

値

+ +
+
none
+
アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。
+
forwards
+
対象は実行の最後のキーフレームで設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-count最後のキーフレーム
normal偶数または奇数100% または to
reverse偶数または奇数0% または from
alternate偶数0% または from
alternate奇数100% または to
alternate-reverse偶数100% または to
alternate-reverse奇数0% または from
+
+
backwards
+
アニメーションは最初の適切なキーフレームで定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。 + + + + + + + + + + + + + + + + + +
animation-direction最初の適切なキーフレーム
normal または alternate0% または from
reverse または alternate-reverse100% または to
+
+
both
+
アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。
+
+ +
+

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

以下の例で animation-fill-mode の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。

+ +

HTML

+ +
<p>マウスを灰色のボックスの上に乗せてください！</p>
+<div class="demo">
+ <div class="growsandstays">これは大きくなって大きいままになります。</div>
+  <div class="grows">これは大きくなるだけです。</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}
+ +

{{EmbedLiveSample('Example',700,300)}}

+ +

これ以外の例は CSS アニメーションを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.animation-fill-mode")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-iteration-count/index.html b/files/ja/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..a7e74e4f23 --- /dev/null +++ b/files/ja/web/css/animation-iteration-count/index.html @@ -0,0 +1,91 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - CSS プロパティアニメーション + - Reference +translation_of: Web/CSS/animation-iteration-count +--- +
{{CSSRef}}
+ +

CSS の animation-iteration-count プロパティは、停止するまでにアニメーション周期が再生される回数を指定します。

+ +

複数の値が指定された場合、アニメーションが再生されるたびにリスト中の次の値が使用され、最後の1つが使用されたら最初に戻ります。

+ +
{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+ +

構文

+ +
/* キーワード値 */
+animation-iteration-count: infinite;
+
+/* <number> 値 */
+animation-iteration-count: 3;
+animation-iteration-count: 2.4;
+
+/* 複数の値 */
+animation-iteration-count: 2, 0, infinite;
+ +

animation-iteration-count プロパティは1つ以上のコンマで区切られた値で指定します。

+ +

値

+ +
+
infinite
+
アニメーションは無制限に繰り返されます。
+
{{cssxref("<number>")}}
+
アニメーションが繰り返される回数です。既定値は 1 です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 0.5 はアニメーション周期の半分を再生します。負の数は無効です。
+
+ +
+

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS アニメーションを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.animation-iteration-count")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-name/index.html b/files/ja/web/css/animation-name/index.html new file mode 100644 index 0000000000..885cba4529 --- /dev/null +++ b/files/ja/web/css/animation-name/index.html @@ -0,0 +1,93 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +

CSS の animation-name プロパティは、要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する {{cssxref("@keyframes")}} @-規則を設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-name.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+ +

構文

+ +
/* 単一のアニメーション */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* 複数のアニメーション */
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* グローバル値 */
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+ +

値

+ +
+
none
+
キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。
+
{{cssxref("<custom-ident>")}}
+
アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 a から z、 数字 0 から 9、 アンダースコア (_)、 ダッシュ (-) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は none, unset, initial, inherit であってはなりません。
+
+ +
+

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS アニメーションを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.properties.animation-name")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-play-state/index.html b/files/ja/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..7d0ce0296d --- /dev/null +++ b/files/ja/web/css/animation-play-state/index.html @@ -0,0 +1,90 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}
+ +

CSS の animation-play-state プロパティは、アニメーションが実行中か停止中かを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}
+ + + +

停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。

+ +

構文

+ +
/* 単一のアニメーション */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* 複数のアニメーション */
+animation-play-state: paused, running, running;
+
+/* グローバル値 */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

値

+ +
+
running
+
アニメーションが現在実行中です。
+
paused
+
アニメーションが現在停止中です。
+
+ +
+

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

{{cssinfo}}

+ +

例

+ +

例は CSS アニメーションを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.animation-play-state")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-timing-function/index.html b/files/ja/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..b2e5cbb10d --- /dev/null +++ b/files/ja/web/css/animation-timing-function/index.html @@ -0,0 +1,275 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +
{{CSSRef}}
+ +

animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
+ + + +

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+ +

構文

+ +
/* キーワード値 */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* 関数値 */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* 段階関数のキーワード */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* 複数のアニメーション */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* グローバル値 */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

タイミング関数は @keyframes 規則内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに animation-timing-function が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から animation-timing-function の適切な値が使用されます。

+ +

キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 animation-timing-function のうち 100% または to に指定したものは使用されません。

+ +

値

+ +
+
{{cssxref("<timing-function>")}}
+
+

{{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。

+ +

ステップではないキーワード値 (easy, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ 3 次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。

+
+
ease
+
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。
+
linear
+
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じで、等しい速度でアニメーションします。
+
ease-in
+
cubic-bezier(0.42, 0, 1.0, 1.0) と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。
+
ease-out
+
cubic-bezier(0, 0, 0.58, 1.0) と同じで、アニメーションは速く始まり、速度を落としながら続きます。
+
ease-in-out
+
cubic-bezier(0.42, 0, 0.58, 1.0) と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。
+
cubic-bezier(p1, p2, p3, p4)
+
ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。
+
steps(n, <jumpterm>)
+
遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 n が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。 +
+
jump-start
+
アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。
+
jump-end
+
アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。
+
jump-none
+
どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。
+
jump-both
+
0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。
+
start
+
jump-start と同じです。
+
end
+
jump-end と同じです。
+
+
+
step-start
+
steps(1, jump-start) と同じです。
+
step-end
+
steps(1, jump-end) と同じです。
+
+ +
+

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
+

二次元ベジェの例

+ + + +
.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}
+ +
{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}
+
+ +
+

段階の例

+ + + +
.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}
+ +
{{EmbedLiveSample("Step_examples", 600, 200)}}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.animation-timing-function")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation/index.html b/files/ja/web/css/animation/index.html new file mode 100644 index 0000000000..2d3fc60770 --- /dev/null +++ b/files/ja/web/css/animation/index.html @@ -0,0 +1,358 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-delay + - animation-direction + - animation-duration + - animation-fill-mode + - animation-iteration-count + - animation-name + - animation-play-state + - animation-timing-function +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

CSS の animation 一括指定プロパティは、スタイル間のアニメーションを適用します。これは {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}} の一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/animation.html")}}
+ + + +
/* @keyframes duration | timing-function | delay |
+iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;
+
+ + + +

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

+ +

アニメーションできるプロパティの説明があります。この説明は言うまでもなく CSS トランジションにも有効です。

+ +

{{cssinfo}}

+ +

構文

+ +

animation プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。

+ +

それぞれ個別のアニメーションは以下のように定義されます。

+ +
    +
  • 以下の値は0～1回出現します。 +
      +
    • {{cssxref("<single-transition-timing-function>")}}
      • +
    • {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}
      • +
    • {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}
      • +
    • {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}
      • +
    • {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}}
      • +
    +
    • +
  • アニメーションの名前は任意で、 none, {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}} のいずれかになります。
    • +
  • 0～2回の {{cssxref("<time>")}} の値
    • +
+ +

各アニメーションの定義の中での順序は重要です。{{cssxref("<time>")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。

+ +

順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。

+ +

値

+ +
+
<single-animation-iteration-count>
+
アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。
+
<single-animation-direction>
+
アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。
+
<single-animation-fill-mode>
+
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。
+
<single-animation-play-state>
+
アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。
+
+ +

構文形式

+ +
{{csssyntax}}
+ +

例

+ +

台風の目

+ +
<div class="view_port">
+  <div class="polling_message">
+    Listening for dispatches
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: linear-gradient(to right,
+      rgba(0, 0, 0, .9) 25%,
+      rgba(0, 0, 0, .1) 50%,
+      rgba(0, 0, 0, .9) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+
+ +

{{EmbedLiveSample('Cylon_Eye')}}

+ +

これ以外の例は CSS アニメーションを参照してください。

+ +

アクセシビリティの考慮事項

+ +

点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。

+ +

アニメーションを停止したり無効にしたりする仕組みを、できれば Reduced Motion Media Query を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.animation")}}

+ +

Quantum CSS のメモ

+ +
    +
  • Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります ({{bug(1383239)}})。これは Firefox の新しい並列 CSS エンジン（Quantum CSS または Stylo と呼ばれており、 Firefox 57 でリリースする計画です）で修正されています。
    • +
  • 他の Gecko のバグとして、 {{htmlelement("details")}} 要素が open 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります ({{bug(1382124)}})。 Quantum CSS では修正されています。
    • +
  • さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の {{cssxref("font-size")}} を変更しても影響されないというものがあります ({{bug(1254424)}})。 Quantum CSS では修正されています。
    • +
+ +

関連情報

+ + diff --git a/files/ja/web/css/appearance/index.html b/files/ja/web/css/appearance/index.html new file mode 100644 index 0000000000..c3bcde3b53 --- /dev/null +++ b/files/ja/web/css/appearance/index.html @@ -0,0 +1,2673 @@ +--- +title: 'appearance (-moz-appearance, -webkit-appearance)' +slug: Web/CSS/appearance +tags: + - '-moz-appearance' + - '-webkit-appearance' + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - Reference + - appearance +translation_of: Web/CSS/appearance +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の -moz-appearance プロパティは、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、 Gecko (Firefox) によって使用されます。

+ +

-webkit-appearance プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から -webkit-appearance に対応しています。

+ +
{{EmbedInteractiveExample("pages/css/appearance.html")}}
+ + + +

このプロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、 Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されます。

+ +
+

互換性メモ: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 none キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。

+
+ +

構文

+ +
/* CSS 基本ユーザーインターフェイス Level 4 の値 */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Gecko で使用できる値の一部 */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+
+ +

-moz-appearance プロパティは、以下の一覧から一つの値を選択して指定することができます。

+ +

値

+ +

<appearance> は以下のキーワードのうちの一つです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値デモブラウザー説明
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge特別なスタイルは適用されません。これが既定です。
auto {{Experimental_Inline}} + + {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}なしユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では none として動作します。
attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}Safari
borderless-attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}Safari
button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がボタンのように描画されます。
button-arrow-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-next {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-previous {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-bevel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
button-focus {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
caps-lock-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}Safari Edge
caret {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
checkbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Firefox要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox
checkmenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox
color-well {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}Safariinput type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}Safari
default-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}Safari Edge
discrete-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}Safari
dualbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
groupbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
inner-spin-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}Firefox Chrome Safari
image-controls-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}Safari
list-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}Safaridatalist
listbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
listitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
media-enter-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-exit-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-fullscreen-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}Safari
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}Safari
media-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-overlay-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}Chrome Safari
media-return-to-realtime-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}Safari
media-rewind-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}Safari
media-seek-back-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}Safari Edge
media-seek-forward-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}Safari Edge
media-toggle-closed-captions-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}Chrome Safari
media-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}Chrome Safari Edge
media-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}Chrome Safari Edge
media-volume-slider-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}Chrome Safari
media-volume-slider-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}Safari
media-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}Chrome Safari
media-volume-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}Chrome Safari
media-controls-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-dark-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}Safari
media-controls-fullscreen-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-light-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}Safari
media-current-time-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}Chrome Safari
media-time-remaining-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}Chrome Safari
menuarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menubar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menucheckbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuimage {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menulist {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)
menupopup {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuradio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuseparator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
meter + + {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
meterbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxFirefox 16 の新機能。代わりに meter を使用のこと
meterchunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxFirefox 16 で追加。 Firefox 64 で削除。
number-input {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}Firefox
progress-bar + + {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
progress-bar-value {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}Chrome Safari
progressbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}Firefox要素が進捗バーのようにスタイル付けられます。代わりに progress-bar を使用のこと
progressbar-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox
progresschunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
progresschunk-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
push-button {{Non-standard_Inline}} + + {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}Chrome Safari Edge
radio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Firefox要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
radiomenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
range {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox
range-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox
rating-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}Safari
resizer {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
resizerpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scale-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbend {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox
scalethumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbstart {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox
scalethumbtick {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox
scalethumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox
scale-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox
scrollbartrack-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbartrack-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox
searchfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
searchfield-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}Safari Edge
searchfield-cancel-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}Chrome Safari Edge
snapshotted-plugin-overlay {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}Safari
separator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
sheet {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}None
slider-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
slider-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
spinner {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-downbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-upbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
splitter {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
square-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}Chrome Safari Edge
statusbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
statusbarpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanels {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-back {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-forward {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
textarea + + {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield-multiline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}Firefox代わりに textarea を使用のこと
toolbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton-dropdown {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbargripper {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tooltip {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheader {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadercell {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadersortarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwisty {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwistyopen {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeview {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
relevancy-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}Safari
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。
-moz-win-communicationstext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-win-communications-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。
-moz-win-media-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-box-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-close {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-maximize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-minimize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-restore {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-bottom {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-apple-pay-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}SafariiOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

次のようにすると、要素を Firefox のツールバーボタンのように見せます。

+ +
.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+
+ +

カスタムスタイリングをラジオボタンとチェックボックス適用するための appearance:none の使用例を示す例は、このJSFiddleも参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}{{Spec2("CSS4 Basic UI")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.appearance")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/at-rule/index.html b/files/ja/web/css/at-rule/index.html new file mode 100644 index 0000000000..6d4fdbcd1d --- /dev/null +++ b/files/ja/web/css/at-rule/index.html @@ -0,0 +1,85 @@ +--- +title: '@-規則' +slug: Web/CSS/At-rule +tags: + - '@-規則' + - '@規則' + - CSS + - CSS リファレンス + - Reference + - アット規則 +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

@-規則 は CSS 文 の一つで、 CSS の振舞いを規定します。 @-規則は、アットマーク、 '@' (U+0040 COMMERCIAL AT) で始まり、それに続く識別子から、次のセミコロン、 ';' (U+003B SEMICOLON) もしくは次の CSS ブロックのどちらかが現れるまでの部分からなります。

+ +
/* 一般的な構造 */
+@IDENTIFIER (RULE);
+
+/* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる */
+@charset "utf-8";
+ +

@-規則は何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます:

+ +
    +
  • {{cssxref("@charset")}} — スタイルシートで使用される文字セットを定義します。
    • +
  • {{cssxref("@import")}} — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。
    • +
  • {{cssxref("@namespace")}} — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。
    • +
  • 入れ子状の @-規則 — 入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループ規則の内部で使用されます: +
      +
    • {{cssxref("@media")}} — メディアクエリの条件を満たすデバイスで読み込まれた場合にこれの中身が適用される、条件付きグループ規則です。
      • +
    • {{cssxref("@supports")}} — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループ規則です。
      • +
    • {{cssxref("@document")}} {{experimental_inline}} — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループ規則です。(CSS Level 4 仕様に先送り)
      • +
    • {{cssxref("@page")}} — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。
      • +
    • {{cssxref("@font-face")}} — ダウンロードすべき外部フォントに関する指定を記述します。
      • +
    • {{cssxref("@keyframes")}} — CSS アニメーションシーケンスの中間ステップに関する指定を記述します。
      • +
    • {{cssxref("@viewport")}} {{experimental_inline}} — 小さな画面のデバイス用に、ビューポートに関する指定を記述します。(現在は Working Draft 段階)
      • +
    • {{cssxref("@counter-style")}} — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。(勧告候補段階ですが、現時点で Gecko しか実装していません)
      • +
    • {{cssxref("@font-feature-values")}} (および @swash, @ornaments, @annotation, @stylistic, @styleset, @character-variant)
      + — OpenType の各機能を有効化するために、 {{cssxref("font-variant-alternates")}} の一般名を定義します。(勧告候補段階ですが、現時点で Gecko しか実装していません)
      • +
    +
    • +
+ +

条件付きグループ規則

+ +

プロパティの値のように、各 @-規則は異なる構文を持ちます。しかし、いくつかの @-規則は 条件付きグループ規則という特別なカテゴリに分類されます。条件付きグループ規則の文は、構文が共通していて、どれも入れ子の文を持つことができ、ここには普通のルールセットはもちろん、さらに入れ子の @-規則を含める事ができます。さらに言えば、それらはすべて共通の意味あいがあります。 — 全ては常に真か偽と判定される何らかの条件と結びついています。条件が真であれば、条件付きグループ規則内の文全部が適用されます。

+ +

条件付きグループ規則は CSS Conditionals Level 3 で定義されており、以下の規則があります。

+ +
    +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
  • {{cssxref("@document")}} (CSS Level 4 仕様に先送り)
    • +
+ +

条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}初回定義
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}@-webkit-keyframes を標準化
+ +

関連情報

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ja/web/css/attr()/index.html b/files/ja/web/css/attr()/index.html new file mode 100644 index 0000000000..12fe274750 --- /dev/null +++ b/files/ja/web/css/attr()/index.html @@ -0,0 +1,257 @@ +--- +title: attr() +slug: Web/CSS/attr() +tags: + - CSS + - CSS 関数 + - Reference + - Web + - attr + - レイアウト +translation_of: Web/CSS/attr() +--- +
{{CSSRef}}
+ +
メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。
+ +

attr() は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

+ +
/* Simple usage */
+attr(data-count);
+attr(title);
+
+/* 型付き */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* 代替値付き */
+attr(data-count number, 0);
+attr(src url, "");
+attr(data-width px, inherit);
+attr(data-something, "default");
+
+ +

構文

+ +

値

+ +
+
attribute-name
+
CSS で参照する、 HTML 要素の属性名です。
+
<type-or-unit> {{Experimental_Inline}}
+
属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を <type-or-unit> で与えると、 attr() 式も無効になります。省略すると既定値の string になります。有効な値は以下の通りです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード関係する型コメント既定値
string{{CSSxRef("<string>")}}属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。空文字列
color {{Experimental_Inline}}{{CSSxRef("<color>")}}属性値はハッシュ (3値または6値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。
+ 前後の空白は除去されます。		currentcolor
url {{Experimental_Inline}}{{CSSxRef("<url>")}}属性値は、 CSS の url() 関数の中で使用される文字列として解析されます。
+ 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。
+ 前後の空白は除去されます。		一般的なエラーの状況で存在しない文書を指す about:invalid の URL。
integer {{Experimental_Inline}}{{CSSxRef("<integer>")}}属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
number {{Experimental_Inline}}{{CSSxRef("<number>")}}属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
length {{Experimental_Inline}}{{CSSxRef("<length>")}}属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (12.5em など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{Experimental_Inline}}{{CSSxRef("<length>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
angle {{Experimental_Inline}}{{CSSxRef("<angle>")}}属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (30.5deg など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
deg, grad, rad {{Experimental_Inline}}{{CSSxRef("<angle>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
time {{Experimental_Inline}}{{CSSxRef("<time>")}}属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
s, ms {{Experimental_Inline}}{{CSSxRef("<time>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
frequency {{Experimental_Inline}}{{CSSxRef("<frequency>")}}属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
Hz, kHz {{Experimental_Inline}}{{CSSxRef("<frequency>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
% {{Experimental_Inline}}{{CSSxRef("<percentage>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 指定された値が長さの場合は、 attr() は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。		0%、または 0% が妥当な値ではないプロパティでは、プロパティの最小値。
+
+
<fallback> {{Experimental_Inline}}
+
関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 <type-or-unit> で定義された既定値を使います。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

content プロパティ

+ +

HTML

+ +
<p data-foo="hello">world</p>
+ +

CSS

+ +
[data-foo]::before {
+  content: attr(data-foo) " ";
+}
+ +

結果

+ +

{{EmbedLiveSample("content_property", "100%", 50)}}

+ +

<color> 値

+ +

{{SeeCompatTable}}

+ +
+

HTML

+ +
<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div>
+ +

CSS

+ + + +
.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}
+
+ +

{{EmbedLiveSample("color-value", "100%", 50)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}{{CSSxRef("var()")}} のように動作するように変更。 attr() を含むプロパティ値は解析時に有効となり、属性値の検証は計算値になるまで延期されます。
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} +

2 つのオプション引数を追加
+ 全プロパティで使用可能
+ {{CSSxRef("<string>")}} 以外の値が返せるようになった。

+ これらの変更は実験的であり、ブラウザーの互換性が少なすぎると CR 段階で外される可能性がある
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}{{CSSxRef("content")}} プロパティに限定
+ 常に {{CSSxRef("<string>")}} を返す
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.attr")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/attribute_selectors/index.html b/files/ja/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..dbe1c60acd --- /dev/null +++ b/files/ja/web/css/attribute_selectors/index.html @@ -0,0 +1,236 @@ +--- +title: 属性セレクター +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - CSS 3 属性セレクター + - CSS 属性 + - Reference + - セレクター + - ノードの識別 + - ノードの選択 + - リファレンス + - 属性 + - 属性セレクター + - 要素の識別 +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

CSS の属性セレクター (attribute selector) は、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。

+ +
/* title 属性を持つ <a> 要素 */
+a[title] {
+		color: purple;
+}
+
+/* href が "https://example.org" と一致する <a> 要素 */
+a[href="https://example.org"] {
+		color: green;
+}
+
+/* href に "example" を含む <a> 要素 */
+a[href*="example"] {
+		font-size: 2em;
+}
+
+/* href が "org" で終わる <a> 要素 */
+a[href$=".org"] {
+		font-style: italic;
+}
+ +

構文

+ +
+
[attr]
+
attr という名前の属性を持つ要素を表します。
+
[attr=value]
+
attr という名前の属性の値が正確に value である要素を表します。
+
[attr~=value]
+
attr という名前の属性の値が正確に value と一致する要素を表します。空白区切りの語のリストの形で、複数の value を含めることができます。
+
[attr|=value]
+
attr という名前の属性の値が正確に value と一致するか、 value で始まり直後にハイフン (- (U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。
+
[attr^=value]
+
attr という名前の属性の値が value で始まる要素を表します。
+
[attr$=value]
+
attr という名前の属性の値が value で終わる要素を表します。
+
[attr*=value]
+
attr という名前の属性の値が、文字列中に value を1つ以上含む要素を表します。
+
[attr operator value i]
+
閉じ角括弧の前に i (または I) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。
+
[attr operator value s] {{Experimental_Inline}}
+
閉じ角括弧の前に s (または S) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。
+
+ +

例

+ + + +

CSS

+ +
a {
+		color: blue;
+}
+
+/* "#" で始まる内部リンク */
+a[href^="#"] {
+		background-color: gold;
+}
+
+/* URL のどこかに "example" が含まれるリンク */
+a[href*="example"] {
+		background-color: silver;
+}
+
+/* URL のどこかに "insensitive" が含まれるリンクで、
+			大文字小文字は区別しない */
+a[href*="insensitive" i] {
+		color: cyan;
+}
+
+/* URL のどこかに "cAsE" があるリンクに一致
+大文字小文字の区別つき */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* ".org" で終わるリンク */
+a[href$=".org"] {
+		color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

結果

+ +

{{EmbedLiveSample("Links")}}

+ +

言語

+ +

CSS

+ +
/* `lang` 属性があるすべての div を太字にする。 */
+div[lang] {
+  font-weight: bold;
+}
+
+/* アメリカ英語の div はすべて青。 */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* ポルトガル語の div はすべて緑。 */
+div[lang="pt"] {
+  color: green;
+}
+
+/* 中国語の div はすべて赤。
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* 'data-lang' が中国語繁体字の div はすべて紫。 */
+/* 注: ハイフン区切りの属性は二重引用符なしで使用できる */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+
+ +

結果

+ +

{{EmbedLiveSample("Languages")}}

+ +

HTML 順序付きリスト

+ +

{{SeeCompatTable}}

+ +

HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 case-sensitive 修飾子がなければ正しく動作しません。

+ +

CSS

+ +
/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

結果

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}ASCII の大文字小文字を区別する選択、区別しない選択のための修飾子を追加
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("attr")}}
    • +
  • 単一要素の選択: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, {{DOMxRef("Element.querySelector()")}}
    • +
  • 一致するすべての要素の選択: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, {{DOMxRef("Element.querySelectorAll()")}}
    • +
  • 上記のメソッドはすべて {{domxref("ParentNode")}} に混在して実装されています。 {{DOMxRef("ParentNode.querySelector()")}} および {{DOMxRef("ParentNode.querySelectorAll()")}} を参照してください
    • +
diff --git a/files/ja/web/css/aural/index.html b/files/ja/web/css/aural/index.html new file mode 100644 index 0000000000..ac66215e3c --- /dev/null +++ b/files/ja/web/css/aural/index.html @@ -0,0 +1,41 @@ +--- +title: aural +slug: Web/CSS/aural +tags: + - CSS + - リファレンス + - 非推奨 +translation_of: Web/CSS/@media/aural +--- +
{{CSSRef}} {{deprecated_header}} {{obsolete_header("6.0")}}
+ +

CSS の aural メディア種別は、音声出力の能力を持った機器に使用されます。

+ +
+

メモ: このメディア種別は speech に置き換えられ、非推奨になりました。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
CSS Level 2非推奨初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/auto/index.html b/files/ja/web/css/auto/index.html new file mode 100644 index 0000000000..68a6d03e67 --- /dev/null +++ b/files/ja/web/css/auto/index.html @@ -0,0 +1,28 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/width +--- +
+ {{CSSRef}}
+

概要

+

ユーザエージェントによって自動的に計算される値です。その具体的な効果は auto が適用されたプロパティ毎にそれぞれ異なります。

+

auto 値の使用が可能なプロパティ

+
    +
  • {{Cssxref("overflow")}}
    • +
  • {{Cssxref("overflow-x")}}
    • +
  • {{Cssxref("overflow-y")}}
    • +
  • {{Cssxref("cursor")}}
    • +
  • {{Cssxref("width")}}
    • +
  • {{Cssxref("marker-offset")}}
    • +
  • {{Cssxref("margin")}}
    • +
  • margin-* (left|bottom|top|right|start|end)
    • +
  • {{Cssxref("bottom")}}
    • +
  • {{Cssxref("left")}}
    • +
  • {{Cssxref("table-layout")}}
    • +
  • {{Cssxref("z-index")}}
    • +
  • {{Cssxref("column-width")}}
    • +
diff --git a/files/ja/web/css/backdrop-filter/index.html b/files/ja/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..11d185cec2 --- /dev/null +++ b/files/ja/web/css/backdrop-filter/index.html @@ -0,0 +1,147 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS プロパティ + - Graphics + - Layout + - Reference + - SVG + - SVG フィルター + - Web + - ウェブ + - グラフィック + - レイアウト +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}
+ +

backdrop-filter は CSS のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。

+ +
/* キーワード値 */
+backdrop-filter: none;
+
+/* SVG フィルターへの URL */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* <filter-function> 値 */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* 複数のフィルター */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* グローバル値 */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
背後にフィルターを適用しません。
+
<filter-function-list>
+
背景に適用する {{cssxref("<filter-function>")}} または SVG フィルターの空白区切りのリストです。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+ -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 600, 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.backdrop-filter")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/backface-visibility/index.html b/files/ja/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..abe789c057 --- /dev/null +++ b/files/ja/web/css/backface-visibility/index.html @@ -0,0 +1,215 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS Property + - CSS Transforms + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/backface-visibility +--- +
{{CSSRef}}
+ +

backface-visibility は CSS のプロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
+ + + +

要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。)

+ +

構文

+ +
/* キーワード値 */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* グローバル値 */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+ +

backface-visibility プロパティは、以下に挙げたキーワードのうちの一つで指定します。

+ +

値

+ +
+
visible
+
ユーザーに対して裏を向いたとき、背面が可視になります。
+
hidden
+
背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

透明な面と不透明な面を持った立方体

+ +

この例は、透明な面と不透明な面を持つ立方体を表示します。

+ +

HTML

+ +
<table>
+  <tr>
+    <th><code>backface-visibility: visible;</code></th>
+    <th><code>backface-visibility: hidden;</code></th>
+  </tr>
+  <tr>
+    <td>
+      <div class="container">
+        <div class="cube showbf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        すべての面が透明であり、
+        裏面 (2, 4, 5) が 表面 (1, 3, 6) を通して表示されます。
+      </p>
+    </td>
+    <td>
+      <div class="container">
+        <div class="cube hidebf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        背後の3面 (2, 4, 5) は非表示です。
+      </p>
+    </td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Classes that will show or hide the
+   three back faces of the "cube" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* コンテナ div、立方体 div、面の一般的な設定 */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* テーブルの見栄えをよくする */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

結果

+ +

{{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.backface-visibility")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-attachment/index.html b/files/ja/web/css/background-attachment/index.html new file mode 100644 index 0000000000..cca2c19152 --- /dev/null +++ b/files/ja/web/css/background-attachment/index.html @@ -0,0 +1,153 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

background-attachment は CSS のプロパティで、背景画像の位置を{{glossary("Viewport", "ビューポート")}}の中で固定するか、包含ブロックと一緒にスクロールするかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* グローバル値 */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

background-attachment プロパティは、以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
fixed
+
背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは {{cssxref("background-clip", "background-clip: text", "#text")}} とは両立できません)
+
local
+
背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。
+
scroll
+
背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

単純な例

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

複数の背景画像

+ +

このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる <attachment> をカンマ区切りで指定できます。それぞれの画像には先頭から順番に <attachment> の値が適用されます。

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

結果

+ +

{{EmbedLiveSample("Multiple_background_images")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}複数の背景画像と local に対応するために一括指定プロパティを拡張。
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}重要な変更なし。
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}重要な変更なし。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.background-attachment")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-blend-mode/index.html b/files/ja/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..11fea632d7 --- /dev/null +++ b/files/ja/web/css/background-blend-mode/index.html @@ -0,0 +1,114 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - CSS + - CSS プロパティ + - Reference + - 合成と混合 +translation_of: Web/CSS/background-blend-mode +--- +
{{CSSRef}}
+ +

CSS の background-blend-mode プロパティは、要素の背景画像を互いに、または要素の背景色と、どのように混合するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
+ + + +

混合モードは {{cssxref("background-image")}} プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや短縮が行われます。

+ +

構文

+ +
/* 1 値 */
+background-blend-mode: normal;
+
+/* 2 値、背景ごとにひとつずつ */
+background-blend-mode: darken, luminosity;
+
+/* グローバル値 */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

値

+ +
+
{{cssxref("<blend-mode>")}}
+
適用する混合モードです。複数の値をコンマ区切りで置くことができます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ + + + + + + +

{{ EmbedLiveSample('Examples', "330", "330") }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}{{ Spec2('Compositing') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.background-blend-mode")}}

+ +

関連情報

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
diff --git a/files/ja/web/css/background-clip/index.html b/files/ja/web/css/background-clip/index.html new file mode 100644 index 0000000000..f9a9583cde --- /dev/null +++ b/files/ja/web/css/background-clip/index.html @@ -0,0 +1,137 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-clip +--- +

{{CSSRef}}

+ +

background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-clip.html")}}
+ + + +

要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。

+ +
+

注: ルート要素は異なる背景の描画領域を持っているため、その要素に background-clip プロパティが指定されても効果はありません。「特殊要素の背景」を参照してください。

+
+ +
+

注: ルート要素が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が none であり、その {{cssxref("background-color")}} が transparent であると、ユーザーエージェントは代わりに、 {{cssxref("background")}} プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その <body> 要素の background プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 <body> 要素にキャンバスの背景を指定することを推奨します。

+
+ +

構文

+ +
/* キーワード値 */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* グローバル値 */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+
+ +

値

+ +
+
border-box
+
背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
+
padding-box
+
背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
+
content-box
+
背景をコンテンツボックスの中に (切り取って) 表示します。
+
text {{experimental_inline}}
+
背景を前景のテキストの中に (切り取って) 表示します。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p class="border-box">背景が境界の裏まで拡張されます。</p>
+<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
+<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
+<p class="text">背景が前景のテキストで切り取られます。</p>
+
+ +

CSS

+ +
p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 580)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}初回定義
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}text の値を追加。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.background-clip")}}

+ +

関連情報

+ +
    +
  • {{cssxref("clip-path")}} プロパティは要素全体を表示する部分を定義するクリッピング領域を作成します。
    • +
  • 背景のプロパティ: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}
    • +
  • CSS ボックスモデルの紹介
    • +
diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html new file mode 100644 index 0000000000..c75f4fb248 --- /dev/null +++ b/files/ja/web/css/background-color/index.html @@ -0,0 +1,156 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - グラフィック + - リファレンス + - レイアウト +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

CSS の background-color プロパティは、要素の背景色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-color.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+background-color: red;
+background-color: indigo;
+
+/* Hexadecimal value */
+background-color: #bbff00;    /* 不透過 */
+background-color: #11ffee00;  /* 完全透過 */
+background-color: #11ffeeff;  /* 不透過 */
+
+/* RGB 値 */
+background-color: rgb(255, 255, 128);        /* 不透過 */
+background-color: rgba(117, 190, 218, 0.5);  /* 50% 不透過 */
+
+/* HSL 値 */
+background-color: hsl(50, 33%, 25%);         /* 不透過 */
+background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 不透過 */
+
+/* 特殊なキーワード値 */
+background-color: currentcolor;
+background-color: transparent;
+
+/* グローバル値 */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+ +

background-color プロパティは単一の <color> 値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
背景の均等色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div class="exampleone">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 200, 150)}}

+ +

アクセシビリティの考慮事項

+ +

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。

+ +

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}形式上は transparent キーワードが削除されたが、 {{cssxref("<color>")}} の正規の値として組み入れられたため、変更なし。
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.background-color")}}

+ +

関連情報

+ +
    +
  • 複数の背景
    • +
  • {{cssxref("<color>")}} データ型
    • +
  • その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • +
  • CSS を使用した HTML の要素への色の適用
    • +
diff --git a/files/ja/web/css/background-image/index.html b/files/ja/web/css/background-image/index.html new file mode 100644 index 0000000000..6305d98ea0 --- /dev/null +++ b/files/ja/web/css/background-image/index.html @@ -0,0 +1,169 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - Background + - CSS + - CSS Background + - CSS Property + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-image + - 'recipe:css-property' + - リファレンス +translation_of: Web/CSS/background-image +--- +

{{CSSRef}}

+ +

background-image は CSS のプロパティで、要素に1つ以上の背景画像を設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-image.html")}}
+ + + +

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

+ +

要素の境界は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。

+ +

指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none 値であるかのように処理します。

+ +
注: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
+ +

構文

+ +

それぞれの背景画像は、キーワード none または {{cssxref("<image>")}} 値として指定されます。

+ +

複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。

+ +
background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url('https://mdn.mozillademos.org/files/7693/catfront.png');
+ +

値

+ +
+
none
+
画像を用いないことを表すキーワード。
+
<image>
+
表示する背景を指し示す {{cssxref("<image>")}}。複数の背景に対応している場合は、カンマ区切りで複数指定することができます。
+
+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

背景画像の重ね合わせ

+ +

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

+ +

HTML

+ +
<div>
+  <p class="catsandstars">
+    This paragraph is full of cats<br />and stars.
+  </p>
+  <p>This paragraph is not.</p>
+  <p class="catsandstars">
+    Here are more cats for you.<br />Look at them!
+  </p>
+  <p>And no more.</p>
+</div>
+ +

CSS

+ +
p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-image: none;
+  background-color: transparent;
+}
+
+div {
+  background-image:
+      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:
+      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+      url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Layering_background_images')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の {{cssxref("<image>")}} CSS データ型をサポートするよう拡張されました。
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.properties.background-image")}}
+ +

関連情報

+ +
    +
  • CSS イメージスプライト
    • +
  • {{HTMLElement("img")}}
    • +
  • 画像に関するデータ型: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}
    • +
  • 画像に関する関数: +
      +
    • {{cssxref("cross-fade")}}
      • +
    • {{cssxref("element")}}
      • +
    • {{cssxref("imagefunction", "image()")}}
      • +
    • {{cssxref("image-set")}}
      • +
    • {{cssxref("linear-gradient")}}
      • +
    • {{cssxref("radial-gradient")}}
      • +
    • {{cssxref("repeating-linear-gradient")}}
      • +
    • {{cssxref("repeating-radial-gradient")}}
      • +
    • {{cssxref("paint")}}
      • +
    • {{cssxref("url", "url()")}}
      • +
    +
    • +
diff --git a/files/ja/web/css/background-origin/index.html b/files/ja/web/css/background-origin/index.html new file mode 100644 index 0000000000..bdef2ef165 --- /dev/null +++ b/files/ja/web/css/background-origin/index.html @@ -0,0 +1,112 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - Background + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-origin +translation_of: Web/CSS/background-origin +--- +
{{CSSRef}}
+ +

CSS の background-origin プロパティは、背景配置領域を設定します。言い換えれば、 {{cssxref("background-image")}} プロパティで指定された画像の原点の位置を設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-origin.html")}}
+ + + +

{{cssxref("background-attachment")}} が fixed のときは background-origin が無視されることに注意してください。

+ +
メモ: {{cssxref("background")}} 一括指定プロパティは、該当する値を設定しなかった場合、このプロパティの値を初期値にリセットします。
+ +

構文

+ +
/* キーワード値 */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* グローバル値 */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+
+ +

background-origin プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +
+
border-box
+
背景は境界ボックスからの相対位置になります。
+
padding-box
+
背景はパディングボックスからの相対位置になります。
+
content-box
+
背景はコンテンツボックスからの相対位置になります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+
+ +
#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+
+ +
div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* 背景に二つの画像を適用 */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.background-origin")}}

+ +

関連情報

+ +
    +
  • {{cssxref("background-clip")}}
    • +
diff --git a/files/ja/web/css/background-position-x/index.html b/files/ja/web/css/background-position-x/index.html new file mode 100644 index 0000000000..b2d1d43a22 --- /dev/null +++ b/files/ja/web/css/background-position-x/index.html @@ -0,0 +1,106 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Experimental + - Reference +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

CSS の background-position-x プロパティは、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。

+ +
{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
+ + + +

このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。

+ +

構文

+ +
/* キーワード値 */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* <percentage> 値 */
+background-position-x: 25%;
+
+/* <length> 値 */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* 辺からの相対値 */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* 複数の値 */
+background-position-x: 0px, center;
+
+/* グローバル値 */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

background-position-x プロパティは、1つ以上の値をカンマで区切って指定します。

+ +

値

+ +
+
left
+
背景画像の左端を、背景位置レイヤーの左端に配置します。
+
center
+
背景画像を背景位置レイヤーの方向の中央に配置します。
+
right
+
背景画像の右端を、背景位置レイヤーの右端に配置します。
+
{{cssxref("<length>")}}
+
指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。
+
{{cssxref("<percentage>")}}
+
指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の右端が、コンテナーの右端の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.background-position-x")}}

+ +

関連情報

+ +
    +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • 複数の背景の使用
    • +
diff --git a/files/ja/web/css/background-position-y/index.html b/files/ja/web/css/background-position-y/index.html new file mode 100644 index 0000000000..a57e431146 --- /dev/null +++ b/files/ja/web/css/background-position-y/index.html @@ -0,0 +1,107 @@ +--- +title: background-position-y +slug: Web/CSS/background-position-y +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 背景と境界 + - Experimental + - Reference +translation_of: Web/CSS/background-position-y +--- +
{{CSSRef}}
+ +

background-position-y は CSS のプロパティで、各背景画像における垂直の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。

+ +
{{EmbedInteractiveExample("pages/css/background-position-y.html")}}
+ + + +

このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。

+ +

構文

+ +
/* キーワード値 */
+background-position-y: top;
+background-position-y: center;
+background-position-y: bottom;
+
+/* <percentage> 値 */
+background-position-y: 25%;
+
+/* <length> 値 */
+background-position-y: 0px;
+background-position-y: 1cm;
+background-position-y: 8em;
+
+/* 辺からの相対値 */
+background-position-y: bottom 3px;
+background-position-y: bottom 10%;
+
+/* 複数の値 */
+background-position-y: 0px, center;
+
+/* グローバル値 */
+background-position-y: inherit;
+background-position-y: initial;
+background-position-y: unset;
+
+ +

background-position-y プロパティは、1つ以上の値をコンマで区切って指定します。

+ +

値

+ +
+
top
+
背景画像の上端を、背景位置レイヤーの上端に合わせます。
+
center
+
背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。
+
bottom
+
背景画像の下端を、背景位置レイヤーの下端に合わせます。
+
{{cssxref("<length>")}}
+
指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)
+
{{cssxref("<percentage>")}}
+
指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100%の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50%の値は背景画像を垂直方向に中央揃えします。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}{{Spec2('CSS4 Backgrounds')}}長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.background-position-y")}}

+ +

関連情報

+ +
    +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • 複数の背景の使用
    • +
diff --git a/files/ja/web/css/background-position/index.html b/files/ja/web/css/background-position/index.html new file mode 100644 index 0000000000..57d104aef1 --- /dev/null +++ b/files/ja/web/css/background-position/index.html @@ -0,0 +1,231 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-position +--- +
{{CSSRef}}
+ +

background-position は CSS のプロパティで、それぞれの背景画像の初期位置を設定します。位置は {{cssxref("background-origin")}} で設定された位置レイヤーからの相対です。

+ +
{{EmbedInteractiveExample("pages/css/background-position.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* <percentage> 値 */
+background-position: 25% 75%;
+
+/* <length> 値 */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* 複数の画像 */
+background-position: 0 0, center;
+
+/* 辺からのオフセット値 */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* グローバル値 */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+
+ +

background-position プロパティは1つ以上の <position> 値をカンマで区切って指定します。

+ +

値

+ +
+
<position>
+
{{cssxref("<position>")}} です。位置は要素のボックスの辺を基準にして項目を配置するための X/Y 座標を定義します。1～4つの値を使用して定義できます。2つのキーワード値でない値を使用する場合は、最初の値が水平位置を表し、2番目の値が垂直位置を表します。1つの値しか指定されない場合、2番目の値は center とみなされます。3つまたは4つの値が使用された場合は、 length-percentage 値はその前のキーワード値に対するオフセットです。
+
+

値1つの構文: 値は以下のようになります。

+ +
    +
  • center のキーワード値の場合は、画像を中央揃えにします。
    • +
  • キーワード値 top、 left、 bottom、 right のうちの一つの場合。アイテムを配置する辺を指定します。もう一方の寸法が50％に設定されていれば、指定された端までの間の中央に配置されます。
    • +
  • {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の場合。これは左からの相対位置の X 座標を指定し、 Y 座標は50%に設定されます。
    • +
+ +

値2つの構文: 1つ目の値が X を定義し、もう1つの値が Y を定義します。両方が以下の値を取ることができます。

+ +
    +
  • キーワード値 top、 left、 bottom、 right のうちの一つの場合。ここで left または right が指定された場合は、これが X 座標を定義し、もう一方の値が Y 座標になります。 top または bottom が指定された場合は、これが Y 座標を定義し、もう一方の値が X 座標を定義します。
    • +
  • {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の場合。もう一方の値が left または right の場合、この値は上辺からの相対的な Y 座標を定義します。もう一方の値が top または bottom の場合、この値は左辺からの相対的な X 座標を定義します。両方の値が <length> または <percentage> の値である場合は、最初の値が X 座標を定義し、2番目の値が Y 座標を定義します。
    • +
  • 注: 一方の値が top または bottom である場合、もう一方の値を top または bottom にすることはできません。一方の値が left または right である場合、もう一方の値を left または right にすることはできません。すなわち、例えば top top や left right は妥当ではありません。
    • +
  • 既定値は top left または 0% 0% です。
    • +
+
+
+

値3つの構文: 2つの値はキーワード値で、3つ目の値はその前の値のオフセットです。

+ +
    +
  • 最初の値はキーワード値 top, left, bottom, right, center のうちの1つです。ここで left または right が指定された場合は、これは X 座標を定義します。 top または bottom が指定された場合は、これは Y 座標を定義し、もう一方のキーワード値が X 座標を定義します。
    • +
  • {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値が2番目の値であった場合は、最初の値に対するオフセットです。3番目の値であった場合は、2番目の値に対するオフセットです。
    • +
  • 単一の長さまたはパーセント値は、その前のキーワード値に対するオフセットです。1つのキーワードに2つの keyword with two {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値の組み合わせは無効です。
    • +
+
+
+

値4つの構文: 1番目と3番目の値は、X と Y を定義するキーワード値で、2番目と4番目の値は、先行する X と Y のキーワード値のオフセットです。

+ +
    +
  • 1番目と3番目の値は top, left, bottom, right のうちの1つです。ここで left または right が指定された場合、これは X を定義します。 top または bottom が指定された場合、これは Y を表し、もう一方のキーワード値が X を表します。
    • +
  • 2番目と4番目の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値です。2番目の値は1番目のキーワードのオフセットです。4番目の値は3番目の値のオフセットです。
    • +
+
+
+

パーセント値について

+
+
指定された背景画像の位置のパーセント値のオフセットは、コンテナーに対して相対的なものです。 0% の値は、背景画像の左 (または上) の端がコンテナーの対応する左 (または上) の端に整列していることを意味するか、または、画像の 0% マークがコンテナーの 0% マーク上にあることを意味します。 100％ の値は、背景画像の右 (または下) の縁が容器の右 (または下) の縁と揃うか、または画像の 100％ マークが容器の100％マーク上になることを意味します。したがって、水平方向または垂直方向に 50% の値を設定すると、画像の 50% マークがコンテナーの 50% マーク上になるので、背景画像が中央に位置することになります。同様に、 background-position: 25% 75% は、画像の左から 25%、上から 75% の位置にある点が、コンテナの左から 25%、上から 75% の位置にあるコンテナーの点に配置されることを意味します。
+
基本的に何が起こるかというと、背景画像の寸法が対応するコンテナの寸法から減算され、その結果の値のパーセンテージが左端（または上端）からの直接のオフセットとして使用されます。
+
+

(コンテナーの幅 - 画像の幅) * (position x%) = (x オフセット値)
+ (コンテナーの高さ - 画像の高さ) * (position y%) = (y オフセット値)

+ +

X 軸を例にすると、幅 300px の画像があり、それを幅 100px のコンテナーに入れて、 background-size を auto に設定して使用しているとします。

+ +

100px - 300px = -200px (コンテナーと画像の差)

+ +

ですから、位置のパーセント値が -25%, 0%, 50%, 100%, 125% であった場合、画像とコンテナーの橋のオフセット値は以下のようになります。

+ +

-200px * -25% = 50px
+ -200px * 0% = 0px
+ -200px * 50% = -100px
+ -200px * 100% = -200px
+ -200px * 125% = -250px

+ +

そのため、この例の結果の値では、画像の左端がコンテナーの左端からオフセットされています。

+ +
    +
  • + 50px (画像の左端を100ピクセル幅のコンテナーの中央に配置)
    • +
  • 0px (画像の左端がコンテナーの左端に一致)
    • +
  • -100px (画像の左端をコンテナーの左から 100px に配置。この例では画像の中央である 100px の位置が、コンテナーの中央になることを意味します)
    • +
  • -200px (画像の左端をコンテナーの左から 200px に配置。この例では右の画像の端が右のコンテナの端と一致することを意味します)
    • +
  • -250px (画像の左端をコンテナーの左から 250px に配置。この例では 300px 幅の画像の右端をコンテナの中央に置きます)
    • +
+ +

背景サイズが指定された軸のコンテナーのサイズと等しい場合、その軸のパーセンテージ位置は、「コンテナーと画像の差」がゼロになるので、何の効果もないことは言及しておく価値があります。絶対値を使ってオフセットする必要があります。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

背景画像の位置指定

+ +

以下の3つの例は、 {{cssxref("background")}} を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3番目の例では1つの要素内にある2つの異なる背景画像の位置を指定する方法を示しています。

+ +

HTML

+ +
<div class="exampleone">Example One</div>
+<div class="exampletwo">Example Two</div>
+<div class="examplethree">Example Three</div>
+ +

CSS

+ +
/* すべての <div> で共有される */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* これらの例は background 一括指定プロパティを使用しています */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 left 4em bottom 1em no-repeat;
+}
+
+/* 複数の背景画像: 各画像は対応する位置スタイルに、
+   最初に指定されたものから順に対応付けられます。 */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       right 3em bottom 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Positioning_background_images', 420, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}複数の背景のサポートを追加。4個の値を持つ構文、実装に一致するように割合の定義を調整。
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}キーワード値と {{cssxref("<length>")}} および {{cssxref("<percentage>")}} の値の混合指定を許容。
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.background-position")}}

+ +

Quantum CSS のメモ

+ +
    +
  • Gecko には background-position が異なる数の {{cssxref("<position>")}} の値を持つ2つの値の {{cssxref("transition")}} ができないというバグがあります。例えば background-position: 10px 10px; と background-position: 20px 20px, 30px 30px; などです（{{bug(1390446)}} を参照）。 Firefox の新しいパラレル CSS エンジン (Quantum CSS または Stylo と呼ばれており、 Firefox 57 でリリース予定) では修正されています。
    • +
+ +

関連情報

+ +
    +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • 複数の背景
    • +
  • {{cssxref("transform-origin")}}
    • +
diff --git a/files/ja/web/css/background-repeat/index.html b/files/ja/web/css/background-repeat/index.html new file mode 100644 index 0000000000..5ca4c622ba --- /dev/null +++ b/files/ja/web/css/background-repeat/index.html @@ -0,0 +1,234 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - Background + - CSS + - CSS プロパティ + - CSS 背景と境界 + - background-repeat + - リファレンス +translation_of: Web/CSS/background-repeat +--- +
{{CSSRef}}
+ +

CSS の background-repeat プロパティは、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
+ + + +

既定では、繰り返された画像が要素のサイズによって切り取られます。他にも、背景画像のリサイズを伴う方法 (round を使用) や、背景画像間にスペースを挿入する方法 (space を使用) など、別の敷き詰め方法を選択することも可能です。

+ +

構文

+ +
/* キーワード値 */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* 値2つの構文: 水平方向 | 垂直方向 */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* グローバル値 */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+
+ +

値

+ +
+
<repeat-style>
+
値1つの構文は完全な値2つの構文に対する一括指定です。
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
単一の値対応するペアの値
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ 値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です:
+
+ + + + + + + + + + + + + + + + + + + +
repeat画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。
space画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。{{cssxref("background-position")}} プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。space を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。
round利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。
no-repeat画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は {{cssxref("background-position")}} CSS プロパティで定義されます。
+
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<ol>
+  <li>no-repeat
+    <div class="one"></div>
+  </li>
+  <li>repeat
+    <div class="two"></div>
+  </li>
+  <li>repeat-x
+    <div class="three"></div>
+  </li>
+  <li>repeat-y
+    <div class="four"></div>
+  </li>
+  <li>space
+    <div class="five"></div>
+  </li>
+  <li>round
+    <div class="six"></div>
+  </li>
+  <li>repeat-x, repeat-y (multiple images)
+    <div class="seven"></div>
+  </li>
+</ol>
+ +

CSS

+ +
/* 例のすべての div で共通 */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* 背景の繰り返し */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* 複数の画像 */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}
+ +

結果

+ +

この例では、リストの各要素に background-repeat の異なる値が対応付けられています。

+ +

{{EmbedLiveSample('Examples', 240, 560)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}複数の背景画像、水平・垂直方向にそれぞれ別の繰り返し方法を指定できる値 2 つの構文、space と round キーワード、および背景描画領域を明確に定義したことによる、インラインレベル要素に対する背景のサポートの追加。
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}特筆すべき変更点はなし
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.background-repeat", "background-repeat")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-size/index.html b/files/ja/web/css/background-size/index.html new file mode 100644 index 0000000000..377a64e800 --- /dev/null +++ b/files/ja/web/css/background-size/index.html @@ -0,0 +1,196 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - Background + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-size +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

background-size は CSS のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。

+ +
{{EmbedInteractiveExample("pages/css/background-size.html")}}
+ + + +

背景画像に覆われていない領域は {{cssxref("background-color")}} プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。

+ +

構文

+ +
/* キーワード値 */
+background-size: cover;
+background-size: contain;
+
+/* 値1つの構文 */
+/* 画像の幅 (高さは 'auto' になる) */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* 値2つの構文 */
+/* 1番目の値は画像の幅、2番目の値は高さ */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* 複数の背景 */
+background-size: auto, auto; /* 'auto auto' と混同しないでください */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* グローバル値 */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

background-size プロパティは以下のいずれか1つの方法で指定します。

+ +
    +
  • contain または cover のキーワード値を使用
    • +
  • 幅の値のみを使用、この場合の高さは既定の auto になります。
    • +
  • 幅と高さの値の両方を使用、この場合は1番目の値で幅を、2番目の値で高さを設定します。どちらの値も {{cssxref("<length>")}}、 {{cssxref("<percentage>")}} または auto のいずれかになります。
    • +
+ +

複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。

+ +

値

+ +
+
contain
+
画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。
+
cover
+
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
+
auto
+
縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
+
{{cssxref("<length>")}}
+
その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。
+
{{cssxref("<percentage>")}}
+
その軸が背景配置領域の指定された割合になるよう拡大縮小します。背景配置領域とは、 {{cssxref("background-origin")}} の値（既定ではパディングボックス）によって定められます。しかし、背景の {{cssxref("background-attachment")}} の値が fixed の場合、配置領域は{{glossary("viewport", "ビューポート")}}全体となります。負の値は使用できません。
+
+ +

固有の軸と比率

+ +

値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。

+ +
    +
  • ビットマップ画像 (JPG など) には、常に固有の寸法と比率があります。
    • +
  • ベクター画像 (SVG など) には固有の寸法がないことがあります。水平と垂直の両方に固有の寸法がある場合は、固有の比率もあります。固有の寸法がなかったり、一方しかなかったりする場合は、固有の比率がある場合もあるしない場合もあります。
    • +
  • CSS の {{cssxref("<gradient>")}} には固有の寸法も固有の比率もありません。
    • +
  • {{cssxref("element()")}} 関数によって作成された背景画像では、それを作成する要素の固有の寸法と比率を使用します。
    • +
+ +
+

メモ: <gradient> の振る舞いは Gecko 8.0 {{geckoRelease("8.0")}} で変更されました。それより前は、固有の寸法がないものの、背景配置領域と同じ比率の画像として扱われていました。

+
+ +
+

メモ: Gecko では、 {{cssxref("element()")}} 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。

+
+ +

固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。

+ +
+
background-size の幅と高さがともに定義されていて auto でない場合
+
背景画像は指定の寸法で描画されます。
+
background-size が contain または cover の場合
+
固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。
+
background-size が auto または auto auto の場合
+
+
    +
  • 画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。
    • +
  • 画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。
    • +
  • 画像に固有の寸法はない物の固有の比率がある場合は、 contain が指定された場合のように描画されます。
    • +
  • 画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。
    • +
  • 画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。
    • +
+
+
+
メモ: SVG 画像には preserveAspectRatio 属性があり、既定では contain と同等です。 Firefox 43 では、 Chrome 52 とは対照的に、明確に background-size が設定されると preserveAspectRatio が無視されます。
+
+
background-size の一方が auto でもう一方が auto ではない場合
+
+
    +
  • 画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。
    • +
  • 画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。
    • +
+
+
+ +
+

メモ: 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

例については Scaling background images を参照してください。

+ +

メモ

+ +

背景としてグラデーションを定義し、background-size をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう (例えば background-size: 50%)。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ CSS3 の background-size 仕様 や CSS3 の Image Values gradient 仕様 に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。

+ +
.gradient-example {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* 利用が安全ではない */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* 利用可能 */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+
+ +

なお、 <gradient> に対してピクセルの寸法と auto を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.background-size")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background/index.html b/files/ja/web/css/background/index.html new file mode 100644 index 0000000000..92ce9a9189 --- /dev/null +++ b/files/ja/web/css/background/index.html @@ -0,0 +1,174 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/background +--- +

{{CSSRef("CSS Background")}}

+ +

background は CSS の一括指定プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ + + +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
+ +

構文

+ +
/* <background-color> を使用 */
+background: green;
+
+/* <bg-image> と <repeat-style> を使用 */
+background: url("test.jpg") repeat-y;
+
+/* <box> と <background-color> を使用 */
+background: border-box red;
+
+/* 単一の画像、中央寄せかつ縮小 */
+background: no-repeat center/80% url("../img/image.png");
+
+ +

background プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。

+ +

それぞれのレイヤーの構文は以下の通りです。

+ +
    +
  • それぞれのレイヤーは、以下の値をそれぞれ0～1回含めることができます。 + +
    • +
  • <bg-size> の値は <position> の直後に '/' の文字で区切って含めなければなりません。例: "center/80%"
    • +
  • <box> の値は0～2回含めることができます。1回の場合は {{cssxref("background-origin")}} と {{cssxref("background-clip")}} の両方に設定されます。2回の場合は、1つ目は {{cssxref("background-origin")}} に、2つ目は {{cssxref("background-clip")}} に設定されます。
    • +
  • <background-color> の値は最後のレイヤーの指定でのみ含めることができます。
    • +
+ +

値

+ +
+
<attachment>
+
{{cssxref("background-attachment")}} を参照
+
<box>
+
{{cssxref("background-clip")}} 及び {{cssxref("background-origin")}} を参照
+
<background-color>
+
{{cssxref("background-color")}} を参照
+
<bg-image>
+
{{Cssxref("background-image")}} を参照
+
<position>
+
{{cssxref("background-position")}} を参照
+
<repeat-style>
+
{{cssxref("background-repeat")}} を参照
+
<bg-size>
+
{{cssxref("background-size")}} を参照。
+
+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

色キーワードと画像による背景の設定

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}一括指定プロパティが拡張され、複数の背景と新しい {{cssxref("background-size")}}, {{cssxref("background-origin")}}, {{cssxref("background-clip")}} プロパティに対応した。
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}重要な変更なし
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.background")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/basic-shape/index.html b/files/ja/web/css/basic-shape/index.html new file mode 100644 index 0000000000..39ed0d2953 --- /dev/null +++ b/files/ja/web/css/basic-shape/index.html @@ -0,0 +1,175 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS シェイプ + - CSS データ型 + - リファレンス +translation_of: Web/CSS/basic-shape +--- +
{{CSSRef}}
+ +

CSS の <basic-shape> データ型は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。

+ +
{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
+ + + +

構文

+ +

<basic-shape> データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。

+ +

シェイプを作成するときは、 <basic-shape> の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。

+ +

シェイプ関数

+ +

以下のシェイプに対応しています。 <basic-shape> 値はすべて関数表記であり、 値定義構文で定義されます。

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

内部の長方形を定義します。

+ +

最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。

+ +

<border-radius> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。

+ +

内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合（たとえば左右の距離がそれぞれ75％に設定された場合など）は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空のフロート領域を生成します。

+
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

引数 <shape-radius> はr、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して sqrt(width^2+height^2)/sqrt(2) としての割合になります。

+ +

引数 {{cssxref("<position>")}} は円の中心を定義します。省略時は既定で中央になります。

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

引数 <shape-radius> は、 rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅（rx 値の場合）と高さ（ry 値の場合）に対する割合になります。

+ +

引数 position は楕円の中心を定義します。省略時は既定で中央になります。

+
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

<fill-rule> は多角形の内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

+ +

それぞれの shape-arg の組における引数 xi と yi は、多角形の i 番目の頂点の座標を表します。

+
+
path()
+
+ 
path( [<fill-rule>,]? <string>)
+ +

省略可能な <fill-rule> は、パスの内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

+ +

必須の <string> は、引用符で囲まれた SVG Path です。

+
+
+ +

上記で定義されていない引数は、以下のように定義されています。

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

円や楕円の半径を定義します。省略時の既定値は closest-side です。

+ +

closest-side はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。

+ +

farthest-side はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。

+ +

基本シェイプの計算値

+ +

<basic-shape> 関数での値は以下の例外を除けば、規定通りに計算されます。

+ +
    +
  • 省略された値は既定値として含められ計算されます。
    • +
  • circle() または ellipse() における {{cssxref("<position>")}} 値は、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした（水平と垂直）オフセットの組として計算されます。
    • +
  • inset() での <border-radius> 値は全8つの {{cssxref("length")}} またはパーセント値の展開リストとして計算されます。
    • +
+ +

基本シェイプの補間

+ +

 ある <basic-shape> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("<length>")}}、 {{cssxref("<percentage>")}}、 {{cssxref("calc", "calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば（両方のリストの同じ位置に nonzero があった場合など）、それらの値は補間が行われます。

+ +
    +
  • どちらのシェイプも同じ参照ボックスを使う必要があります。
    • +
  • 両方のシェイプが同じ型で、型が ellipse() または circle() で、半径に closest-side または farthest-side のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。
    • +
  • 両方のシェイプの型が inset() の場合、シェイプ関数のそれぞれの値の間で補間が行われます。
    • +
  • 両方のシェイプの型が polygon() で、両方の多角形が同じ数の角を持っており、同じ <fill-rule> を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。
    • +
  • 両方のシェイプの型が path() の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。
    • +
  • それ以外の場合は補間が行われません。
    • +
+ +

例

+ +

アニメーションする多角形

+ +

この例では、 @keyframes @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample('Animated_polygon','340', '340')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.types.basic-shape")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/blend-mode/index.html b/files/ja/web/css/blend-mode/index.html new file mode 100644 index 0000000000..b187084964 --- /dev/null +++ b/files/ja/web/css/blend-mode/index.html @@ -0,0 +1,403 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - Blend modes + - CSS + - CSS Compositing + - CSS Data Type + - CSS データ型 + - CSS 合成 + - Compositing + - Reference + - ブレンドモード + - 合成 +translation_of: Web/CSS/blend-mode +--- +
{{CSSRef}}
+ +

<blend-mode> は CSS のデータ型で、要素が重なったときにどのように色が現れるかを記述します。 {{cssxref("background-blend-mode")}} または {{cssxref("mix-blend-mode")}} プロパティで使用されます。

+ +

ブレンドモードは、適用されるレイヤーの各ピクセルについて前景と背景の色を取り、それらを計算し、新しい色の値を返します。

+ +

構文

+ +

<blend-mode> データ型は、以下に挙げたキーワードのうちの一つで定義します。

+ +

値

+ +
+
normal
+
+

下の色が何であるかに関わらず、上の色が最終的な色になります。
+ この効果は2枚の不透明の紙が重なっているようなものです。

+ +
+ +
+ +

{{ EmbedLiveSample('normal_example', "300", "300") }}

+
+
multiply
+
+

上の色と下の色を掛け合わせた結果が最終的な色になります。
+ 黒いレイヤーは最終的に黒いレイヤーに近づけ、白いレイヤーは変化をもたらしません。
+ この効果は2枚の透明なフィルムに印刷された画像を重ね合わせたようなものです。

+ +
+ +
+ +

{{ EmbedLiveSample('multiply_example', "300", "300") }}

+
+
screen
+
+

色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。
+ 黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白いのレイヤーへ近づけます。
+ この効果は2枚の画像がスクリーンに投影された状況に似ています。

+ +
+ +
+ +

{{ EmbedLiveSample('screen_example', "300", "300") }}

+
+
overlay
+
下の色が暗ければ multiply、下の色が明るければ screen の結果が最終的な色になります。。
+ このブレンドモードは hard-light と同等ですが、レイヤーは逆です。 +
+ +
+ +

{{ EmbedLiveSample('overlay_example', "300", "300") }}

+
+
darken
+
+

色成分ごとに最も暗い値が最終的な値になります。

+ +
+ +
+ +

{{ EmbedLiveSample('darken_example', "300", "300") }}

+
+
lighten
+
+

色成分ごとに最も明るい値が最終的な値になります。

+ +
+ +
+ +

{{ EmbedLiveSample('lighten_example', "300", "300") }}

+
+
color-dodge
+
+

下の色を、反転した上の色で除算した結果が、最終的な色になります。
+ 黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。
+ このブレンドモードは screen に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。

+ +
+ +
+ +

{{ EmbedLiveSample('color-dodge_example', "300", "300") }}

+
+
color-burn
+
+

反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になります。
+ 白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。
+ このブレンドモードは multiply に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。

+ +
+ +
+ +

{{ EmbedLiveSample('color-burn_example', "300", "300") }}

+
+
hard-light
+
+

上の色が暗い色であれば multiply 、明るい色であれば screen の結果が最終的な色になります。
+ このブレンドモードは overlay と同じですが、レイヤーが入れ替わっています。
+ この効果は、背景に強烈なスポットライトを当てた状況に似ています。

+ +
+ +
+ +

{{ EmbedLiveSample('hard-light_example', "300", "300") }}

+
+
soft-light
+
+

最終的な色は hard-light に似ていますが、よりソフトになります。
+ このブレンドモードは hard-light に似ています。
+ この効果は、背景に拡散光のスポットライトを当てた状況に似ています。

+ +
+ +
+ +

{{ EmbedLiveSample('soft-light_example', "300", "300") }}

+
+
difference
+
+

2つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。
+ 黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

+ +
+ +
+ +

{{ EmbedLiveSample('difference_example', "300", "300") }}

+
+
exclusion
+
+

最終的な色は difference に似ていますが、コントラストが低くなります。
+ difference と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

+ +
+ +
+ +

{{ EmbedLiveSample('exclusion_example', "300", "300") }}

+
+
hue
+
+

最終的な色は上の色の色調を持ちますが、彩度および明度は下の色の値を使用します。

+ +
+ +
+ +

{{ EmbedLiveSample('hue_example', "300", "300") }}

+
+
saturation
+
+

最終的な色は上の色の彩度を持ちますが、色調および明度は下の色の値を使用します。
+ 彩度を持たない純粋なグレーの背景は、効果がありません。

+ +
+ +
+ +

{{ EmbedLiveSample('saturation_example', "300", "300") }}

+
+
color
+
+

最終的な色は上の色の色調および彩度を持ちますが、明度は下の色の値を使用します。
+ この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。

+ +
+ +
+ +

{{ EmbedLiveSample('color_example', "300", "300") }}

+
+
luminosity
+
+

最終的な色は上の色の明度を持ちますが、色調および 彩度は下の色の値を使用します。
+ このブレンドモードは color と同じですが、レイヤーが入れ替わっています。

+ +
+ +
+ +

{{ EmbedLiveSample('luminosity_example', "300", "300") }}

+
+
+ +

ブレンドモードの補間

+ +

ブレンドモード間の遷移は補間されません。変更は直ちに行われます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.blend-mode")}}

+ +

関連情報

+ +
    +
  • このデータ型を使用するプロパティ: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}
    • +
  • Blend modes
    • +
diff --git a/files/ja/web/css/block-size/index.html b/files/ja/web/css/block-size/index.html new file mode 100644 index 0000000000..9e4f423851 --- /dev/null +++ b/files/ja/web/css/block-size/index.html @@ -0,0 +1,107 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/block-size +--- +
{{CSSRef}}
+ +

block-size は CSS のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは {{cssxref("width")}} または {{cssxref("height")}} プロパティに相当し、 {{cssxref("writing-mode")}} の値によって変わります。

+ +

書字方向が垂直方向であった場合、 block-size の値は要素の幅に対応し、水平方向であった場合は要素の高さに対応します。関連プロパティの {{cssxref("inline-size")}} が要素のもう一方の寸法を定義します。

+ +
{{EmbedInteractiveExample("pages/css/block-size.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+block-size: 300px;
+block-size: 25em;
+
+/* <percentage> 値 */
+block-size: 75%;
+
+/* キーワード値 */
+block-size: max-content;
+block-size: min-content;
+block-size: fit-content(20em);
+block-size: auto;
+
+/* グローバル値 */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+
+ +

値

+ +

block-size プロパティは、{{cssxref("width")}} や {{cssxref("height")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

縦書き時のブロック方向の寸法

+ +

HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}
+ +

Result

+ +

{{EmbedLiveSample("Block_size_with_vertical_text")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.block-size")}}

+ +

関連情報

+ +
    +
  • 対応付けされる物理的プロパティ: {{cssxref("width")}} および {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/ja/web/css/border-block-color/index.html b/files/ja/web/css/border-block-color/index.html new file mode 100644 index 0000000000..3b3b348c11 --- /dev/null +++ b/files/ja/web/css/border-block-color/index.html @@ -0,0 +1,94 @@ +--- +title: border-block-color +slug: Web/CSS/border-block-color +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference +translation_of: Web/CSS/border-block-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-end-color は CSS のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} および {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} および {{cssxref("border-left-color")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
border-block-color: yellow;
+border-block-color: #F5F6F7;
+
+ +

他の方向の境界については、 {{cssxref("border-block-color")}} によって、 {{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}} の両方を設定することができます。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-color")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応します
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-end-color/index.html b/files/ja/web/css/border-block-end-color/index.html new file mode 100644 index 0000000000..ad34d10b2f --- /dev/null +++ b/files/ja/web/css/border-block-end-color/index.html @@ -0,0 +1,102 @@ +--- +title: border-block-end-color +slug: Web/CSS/border-block-end-color +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-color + - border-block-end + - border-block-end-color +translation_of: Web/CSS/border-block-end-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-end-color は CSS のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}
+ + + +

構文

+ +
border-block-end-color: yellow;
+border-block-end-color: #F5F6F7;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-end-color")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-end-style/index.html b/files/ja/web/css/border-block-end-style/index.html new file mode 100644 index 0000000000..b536bdd846 --- /dev/null +++ b/files/ja/web/css/border-block-end-style/index.html @@ -0,0 +1,104 @@ +--- +title: border-block-end-style +slug: Web/CSS/border-block-end-style +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-end + - border-block-end-style + - border-block-style +translation_of: Web/CSS/border-block-end-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-end-style は CSS のプロパティで、要素の論理的なブロックの終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}
+ + + +

構文

+ +
/* <'border-style'> 値 */
+border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-style'>
+
境界のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-end-style")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-end-width/index.html b/files/ja/web/css/border-block-end-width/index.html new file mode 100644 index 0000000000..131b154a85 --- /dev/null +++ b/files/ja/web/css/border-block-end-width/index.html @@ -0,0 +1,103 @@ +--- +title: border-block-end-width +slug: Web/CSS/border-block-end-width +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-end + - border-block-end-width + - border-block-width +translation_of: Web/CSS/border-block-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-end-width は CSS のプロパティで、要素の論理的なブロックの終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
+ + + +

構文

+ +
/* <'border-width'> 値 */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-end-width")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-end/index.html b/files/ja/web/css/border-block-end/index.html new file mode 100644 index 0000000000..485152ccb0 --- /dev/null +++ b/files/ja/web/css/border-block-end/index.html @@ -0,0 +1,110 @@ +--- +title: border-block-end +slug: Web/CSS/border-block-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-end-color + - border-block-end-style + - border-block-end-width +translation_of: Web/CSS/border-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-end は CSS のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/border-block-end.html")}}
+ + + +

構文

+ +
border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed blue;
+
+ +

border-block-end は1つ以上の {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-block-end-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +

関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。

+ +

{{cssinfo}}

+ +

値

+ +

border-block-end は以下の値のうちの1つ以上を任意の順序で指定します。

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
<'border-style'>
+
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-end")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-start-color/index.html b/files/ja/web/css/border-block-start-color/index.html new file mode 100644 index 0000000000..5ca63e40e5 --- /dev/null +++ b/files/ja/web/css/border-block-start-color/index.html @@ -0,0 +1,102 @@ +--- +title: border-block-start-color +slug: Web/CSS/border-block-start-color +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-color + - border-block-start + - border-block-start-color +translation_of: Web/CSS/border-block-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-start-color は CSS のプロパティで、要素の論理的なブロックの先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
+ + + +

構文

+ +
border-block-start-color: blue;
+border-block-start-color: #4c5d21;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'color'>
+
{{cssxref("border-color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-start-color")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
    • +
diff --git a/files/ja/web/css/border-block-start-style/index.html b/files/ja/web/css/border-block-start-style/index.html new file mode 100644 index 0000000000..cff711d790 --- /dev/null +++ b/files/ja/web/css/border-block-start-style/index.html @@ -0,0 +1,105 @@ +--- +title: border-block-start-style +slug: Web/CSS/border-block-start-style +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-start + - border-block-start-style + - border-block-style + - 境界 +translation_of: Web/CSS/border-block-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-start-style は CSS のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
+ + + +

構文

+ +
/* <'border-style'> 値 */
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-style'>
+
境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-start-style")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-start-width/index.html b/files/ja/web/css/border-block-start-width/index.html new file mode 100644 index 0000000000..4409e56a82 --- /dev/null +++ b/files/ja/web/css/border-block-start-width/index.html @@ -0,0 +1,103 @@ +--- +title: border-block-start-width +slug: Web/CSS/border-block-start-width +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-start + - border-block-start-width + - border-block-width +translation_of: Web/CSS/border-block-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-start-width は CSS のプロパティで、要素の論理的なブロックの先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
+ + + +

構文

+ +
/* <'border-width'> 値 */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界の幅を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-start-width")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-start/index.html b/files/ja/web/css/border-block-start/index.html new file mode 100644 index 0000000000..6e4490037a --- /dev/null +++ b/files/ja/web/css/border-block-start/index.html @@ -0,0 +1,111 @@ +--- +title: border-block-start +slug: Web/CSS/border-block-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-block + - border-block-start + - border-block-start-color + - border-block-start-style + - border-block-start-width +translation_of: Web/CSS/border-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-start は CSS のプロパティで、個々の論理的なブロック方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/border-block-start.html")}}
+ + + +

構文

+ +
border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed blue;
+
+ +

border-block-start は1つ以上の {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, {{cssxref("border-block-start-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +

関連するプロパティとしては、 {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。

+ +

{{cssinfo}}

+ +

値

+ +

border-block-start は以下の値の家の1つ以上を任意の順序で指定します。

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
<'border-style'>
+
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-start")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-style/index.html b/files/ja/web/css/border-block-style/index.html new file mode 100644 index 0000000000..928aeb32cf --- /dev/null +++ b/files/ja/web/css/border-block-style/index.html @@ -0,0 +1,96 @@ +--- +title: border-block-style +slug: Web/CSS/border-block-style +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference +translation_of: Web/CSS/border-block-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-style は CSS のプロパティで、要素の論理的なブロック方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}} と {{cssxref("border-bottom-style")}}、または {{cssxref("border-right-style")}} と {{cssxref("border-left-style")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
/* <'border-style'> 値 */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+
+ +

他の方向の境界については、 {{cssxref("border-block-style")}} によって、 {{cssxref("border-block-start-style")}} と {{cssxref("border-block-end-style")}} の両方を設定することができます。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<'border-style'>
+
境界のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-style")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応します
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block-width/index.html b/files/ja/web/css/border-block-width/index.html new file mode 100644 index 0000000000..e20b409a44 --- /dev/null +++ b/files/ja/web/css/border-block-width/index.html @@ -0,0 +1,95 @@ +--- +title: border-block-width +slug: Web/CSS/border-block-width +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference +translation_of: Web/CSS/border-block-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-block-width は CSS のプロパティで、要素の論理的なブロック方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
/* <'border-width'> values */
+border-block-width: 5px;
+border-block-width: thick;
+
+ +

関連するプロパティとしては、 {{cssxref("border-inline-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-width")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応します
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-block/index.html b/files/ja/web/css/border-block/index.html new file mode 100644 index 0000000000..1d5b736960 --- /dev/null +++ b/files/ja/web/css/border-block/index.html @@ -0,0 +1,102 @@ +--- +title: border-block +slug: Web/CSS/border-block +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference +translation_of: Web/CSS/border-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

The border-block は CSS のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの1ヶ所で設定する一括指定プロパティです。

+ +
border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+
+ +

border-block は {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。

+ +

他の方向の境界については、 {{cssxref("border-inline")}} によって、 {{cssxref("border-inline-start")}} と {{cssxref("border-inline-end")}} の両方を設定することができます。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +

border-block は以下の値のうちの1つ以上を任意の順序で指定します。

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
<'border-style'>
+
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block")}}

+ +

関連情報

+ +
    +
  • このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応付けられます。
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-bottom-color/index.html b/files/ja/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..37b4ce9f2a --- /dev/null +++ b/files/ja/web/css/border-bottom-color/index.html @@ -0,0 +1,117 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-color +--- +
{{CSSRef}}
+ +

border-bottom-color は CSS のプロパティで、要素の下側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-bottom")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-bottom-color: red;
+border-bottom-color: #ffbb00;
+border-bottom-color: rgb(255, 0, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: currentcolor;
+border-bottom-color: transparent;
+
+/* グローバル値 */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+
+ +

border-bottom-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-bottom-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-bottom-color")}}

+ +

関連情報

+ +
    +
  • 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}.
    • +
  • 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-left-color")}}
    • +
  • 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}}
    • +
diff --git a/files/ja/web/css/border-bottom-left-radius/index.html b/files/ja/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..e1821163f7 --- /dev/null +++ b/files/ja/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,195 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-left-radius +--- +
{{CSSRef}}
+ +

border-bottom-left-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}
+ + + +

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-bottom-left-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
注: このプロパティの値が border-bottom-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-bottom-left-radius: radius */
+border-bottom-left-radius: 3px;
+
+/* パーセント値 */
+
+/* ボックスが正方形ならば円、長方形ならば楕円 */
+border-bottom-left-radius: 20%;
+
+/* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
+border-bottom-left-radius: 20% 20%;
+
+/* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
+border-bottom-left-radius: 20% 10%;
+
+/* 角を楕円にする */
+/* border-bottom-left-radius: horizontal vertical */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+ +

値１つで指定する場合:

+ +
    +
  • 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。
    • +
+ +

値２つで指定する場合:

+ +
    +
  • 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。
    • +
  • 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
    • +
+ +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
+
.
+
+ 		境界として使用されている円弧 + 
+div {
+  border-bottom-left-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		背景色は境界で切り取られる + 
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-bottom-left-radius")}}

+ +

関連情報

+ +
    +
  • 一括指定の {{cssxref("border-radius")}} プロパティ
    • +
  • {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-top-left-radius")}}
    • +
diff --git a/files/ja/web/css/border-bottom-right-radius/index.html b/files/ja/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..a757c6aa39 --- /dev/null +++ b/files/ja/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,189 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-right-radius +--- +
{{CSSRef}}
+ +

border-bottom-right-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}
+ + + +

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-bottom-right-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
注: このプロパティの値が border-bottom-right-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-bottom-right-radius: radius */
+border-bottom-right-radius: 3px;
+
+/* パーセント値 */
+border-bottom-right-radius: 20%; /* ボックスが正方形ならば円、長方形ならば楕円 */
+border-bottom-right-radius: 20% 20%; /* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
+border-bottom-right-radius: 20% 10%; /* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
+
+/* 角を楕円にする */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+ +

値１つで指定する場合:

+ +
    +
  • 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。
    • +
+ +

値２つで指定する場合:

+ +
    +
  • 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。
    • +
  • 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
    • +
+ +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
+
.
+
+ 		境界として使用されている円弧 + 
+div {
+  border-bottom-right-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-bottom-right-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		背景色は境界で切り取られる + 
+div {
+  border-bottom-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-bottom-right-radius")}}

+ +

関連情報

+ +
    +
  • 一括指定の {{cssxref("border-radius")}} プロパティ
    • +
  • {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-top-left-radius")}}
    • +
diff --git a/files/ja/web/css/border-bottom-style/index.html b/files/ja/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..01471dae24 --- /dev/null +++ b/files/ja/web/css/border-bottom-style/index.html @@ -0,0 +1,139 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border + - border-bottom + - border-style + - リファレンス +translation_of: Web/CSS/border-bottom-style +--- +
{{CSSRef}}
+ +

border-bottom-style は CSS のプロパティで、要素の下側の境界 ({{cssxref("border")}}) における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
+ + + +
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+ +

構文

+ +
/* キーワード値 */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* グローバル値 */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+
+ +

border-bottom-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

こちらの表では border-bottom-style のすべての値を紹介します。

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 3px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-bottom-style の例のクラス */
+.b1 {border-bottom-style: none;}
+.b2 {border-bottom-style: hidden;}
+.b3 {border-bottom-style: dotted;}
+.b4 {border-bottom-style: dashed;}
+.b5 {border-bottom-style: solid;}
+.b6 {border-bottom-style: double;}
+.b7 {border-bottom-style: groove;}
+.b8 {border-bottom-style: ridge;}
+.b9 {border-bottom-style: inset;}
+.b10 {border-bottom-style: outset;}
+ +

結果

+ +

{{ EmbedLiveSample('Examples', 300, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Backgrounds', '#propdef-border-bottom-style', 'border-bottom-style') }}{{ Spec2('CSS3 Backgrounds') }}重要な変更はなし。
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-bottom-style")}}

+ +

関連情報

+ +
    +
  • その他の形状に関する境界のプロパティ: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}
    • +
  • その他の下側の境界に関するプロパティ: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-width") }}
    • +
diff --git a/files/ja/web/css/border-bottom-width/index.html b/files/ja/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..fb65fdb357 --- /dev/null +++ b/files/ja/web/css/border-bottom-width/index.html @@ -0,0 +1,148 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-bottom + - border-width +translation_of: Web/CSS/border-bottom-width +--- +
{{CSSRef}}
+ +

CSS の border-bottom-width プロパティは、ボックスの下の境界の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* <length> 値 */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* グローバルキーワード */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+
+ +

値

+ +
+
<line-width>
+
明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		細い境界線
medium +
 
+ 		中くらいの境界線
thick +
 
+ 		太い境界線
+ +
+

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-bottom-width: thick;
+}
+div:nth-child(2) {
+  border-bottom-width: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はなし。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}{{Spec2('CSS2.1')}}目立った変更はなし。
{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-bottom-width")}}

+ +

関連情報

+ +
    +
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}
    • +
  • 他の border-bottom 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, {{Cssxref("border-bottom-color")}}
    • +
diff --git a/files/ja/web/css/border-bottom/index.html b/files/ja/web/css/border-bottom/index.html new file mode 100644 index 0000000000..dfc11e2f13 --- /dev/null +++ b/files/ja/web/css/border-bottom/index.html @@ -0,0 +1,139 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-bottom +--- +
{{CSSRef}}
+ +

border-bottom は一括指定の CSS のプロパティで、要素の下側の境界のプロパティをすべて設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
+ + + +

他の一括指定プロパティと同様に、 border-bottom は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・

+ +
border-bottom-style: dotted;
+border-bottom: thick green;
+
+ +

・・・は、実際には以下と同じです・・・

+ +
border-bottom-style: dotted;
+border-bottom: none thick green;
+
+ +

・・・そして、 border-bottom の前で設定された {{cssxref("border-bottom-style")}} の値は無視されます。 {{cssxref("border-bottom-style")}} の既定値は none なので、 border-style の部分の設定は境界線なしとなります。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
+ +

構文

+ +
border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+
+ +

一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。

+ +

値

+ +
+
<br-width>
+
{{cssxref("border-bottom-width")}} を参照してください。
+
<br-style>
+
{{cssxref("border-bottom-style")}} を参照してください。
+
{{cssxref("<color>")}}
+
{{cssxref("border-bottom-color")}} を参照してください。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

下の境界の適用

+ +

HTML

+ +
<div>
+  このボックスには下側に境界線があります。
+</div>
+ +

CSS

+ +
div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Applying_a_bottom_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom', 'border-bottom')}}{{Spec2('CSS3 Backgrounds')}}直接的な変更はないが、 {{cssxref("border-bottom-color")}} に適用される値が変更された。
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}{{Spec2('CSS2.1')}}有意な変更点なし。
{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-bottom")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-block")}}
    • +
  • {{cssxref("outline")}}
    • +
diff --git a/files/ja/web/css/border-collapse/index.html b/files/ja/web/css/border-collapse/index.html new file mode 100644 index 0000000000..384a7d42c9 --- /dev/null +++ b/files/ja/web/css/border-collapse/index.html @@ -0,0 +1,144 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/border-collapse +--- +
{{CSSRef}}
+ +

CSS の border-collapse プロパティは、 {{htmlElement("table")}} の中のセルが境界線を共有するか分離するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+ + + +

セルが collapsed の場合、 {{cssxref("border-style")}} の値で inset が groove のように動作し、 outset が ridge のように動作します。

+ +

セルが separated の場合、セルの間隔は {{cssxref("border-spacing")}} プロパティで定義されます。

+ +

構文

+ +
/* キーワード値 */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* グローバル値 */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+
+ +

border-collapse プロパティは、以下のリストから選択された単一のキーワードで指定します。

+ +

値

+ +
+
collapse
+
隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
+
separate
+
隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ブラウザーエンジンのカラフルな表

+ +

HTML

+ +
<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+ +

CSS

+ +
.collapse {
+  border-collapse: collapse;
+}
+
+.separate {
+  border-collapse: separate;
+}
+
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 5px;
+}
+
+table th,
+table td {
+  border: solid 3px;
+}
+
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ed { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }
+ +

結果

+ +

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-collapse")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border-spacing")}}, {{cssxref("border-style")}}
    • +
  • border-collapse プロパティは HTML の {{htmlelement("table")}} 要素の表示方法を変更します。
    • +
diff --git a/files/ja/web/css/border-color/index.html b/files/ja/web/css/border-color/index.html new file mode 100644 index 0000000000..2e1c0247af --- /dev/null +++ b/files/ja/web/css/border-color/index.html @@ -0,0 +1,196 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS プロパティ + - CSS 境界線 + - CSS 背景と境界 + - HTML 色 + - Reference + - Styling HTML + - border + - border-color + - 一括指定プロパティ + - 色 +translation_of: Web/CSS/border-color +--- +
{{CSSRef}}
+ +

border-color は一括指定を行う CSS のプロパティで、要素の境界の色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-color.html")}}
+ + + +

各辺を個々に設定する場合は、 {{CSSxRef("border-top-color")}}、 {{CSSxRef("border-right-color")}}、 {{CSSxRef("border-bottom-color")}}、 {{CSSxRef("border-left-color")}}、 または書字方向を意識した{{CSSxRef("border-block-start-color")}}、 {{CSSxRef("border-block-end-color")}}、 {{CSSxRef("border-inline-start-color")}}、 {{CSSxRef("border-inline-end-color")}} を使用します。

+ +

境界線の色についての詳細な情報は、 {{SectionOnPage("/ja/docs/Web/HTML/Applying_color", "Borders")}} にあります。

+ +

構文

+ +
/* <color> 値 */
+border-color: red;
+
+/* 水平線 | 垂直線 */
+border-color: red #f015ca;
+
+/* 上辺 | 垂直線 | 下辺 */
+border-color: red rgb(240,30,50,.7) green;
+
+/* 上辺 | 右辺 | 下辺 | 左辺 */
+border-color: red yellow green blue;
+
+/* グローバル値 */
+border-color: inherit;
+border-color: initial;
+border-color: unset;
+
+ +

border-color プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。

+ +
    +
  • 値が1つ指定された場合、全4辺に同じ色が適用される。
    • +
  • 値が2つ指定された場合、1つ目の色は上下、2つ目は左右の辺に適用される。
    • +
  • 値が3つ指定された場合、1つ目の色上、2つ目は左右、3つ目は下の辺に適用される。
    • +
  • 値が4つ指定された場合、それぞれ上、右、下、左の順（時計回り）に適用される。
    • +
+ +

値

+ +
+
{{CSSxRef("<color>")}}
+
境界線の色を定義します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

完全な border-color の使用法

+ +

HTML

+ +
<div id="justone">
+  <p><code>border-color: red;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: red;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="horzvert">
+  <p><code>border-color: gold red;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: gold;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="topvertbott">
+  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: cyan;</code></li>
+  </ul>
+</div>
+<div id="trbl">
+  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: black;</code></li>
+    <li><code>border-left-color: gold;</code></li>
+  </ul>
+</div>
+
+ +

CSS

+ +
#justone {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#topvertbott {
+  border-color: red cyan gold;
+}
+
+#trbl {
+  border-color: red cyan black gold;
+}
+
+/* すべての div に幅とスタイルを設定 */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}{{Spec2("CSS Logical Properties")}}logical キーワードを追加。
{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}{{Spec2("CSS3 Backgrounds")}}transparent キーワードが削除され、 {{CSSxRef("<color>")}} データ型の一部になった。
{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}{{Spec2("CSS2.1")}}一括指定プロパティと定義された。
{{SpecName("CSS1", "#border-color", "border-color")}}{{Spec2("CSS1")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-color")}}

+ +

関連情報

+ +
    +
  • 境界線の色関係の CSS プロパティ: {{CSSxRef("border")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}},
    • +
  • その他の境界線に関する CSS プロパティ: {{CSSxRef("border-width")}}, {{CSSxRef("border-style")}}
    • +
  • {{CSSxRef("<color>")}} データ型
    • +
  • その他の色に関するプロパティ: {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}
    • +
  • CSS を使用した HTML の要素への色の適用
    • +
diff --git a/files/ja/web/css/border-end-end-radius/index.html b/files/ja/web/css/border-end-end-radius/index.html new file mode 100644 index 0000000000..2b479ee923 --- /dev/null +++ b/files/ja/web/css/border-end-end-radius/index.html @@ -0,0 +1,113 @@ +--- +title: border-end-end-radius +slug: Web/CSS/border-end-end-radius +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - border-end-end-radius + - 'recipe:css-property' + - writing modes +translation_of: Web/CSS/border-end-end-radius +--- +

{{CSSRef}}

+ +

border-end-end-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

+ +
/* <length> 値 */
+/* 値1つの場合は角を円にする */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-end-end-radius: 1em 2em;
+
+/* グローバル値 */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+
+ +

このプロパティは、要素の block-end と inline-end の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 {{CSSxRef("border-bottom-right-radius")}} プロパティに対応します。

+ +

構文

+ +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

縦書きの時の境界の丸め

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-end-end-radius")}}

+ +

関連情報

+ +
    +
  • 対応する物理プロパティ: {{CSSxRef("border-bottom-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-end-start-radius/index.html b/files/ja/web/css/border-end-start-radius/index.html new file mode 100644 index 0000000000..d7967ba6b1 --- /dev/null +++ b/files/ja/web/css/border-end-start-radius/index.html @@ -0,0 +1,113 @@ +--- +title: border-end-start-radius +slug: Web/CSS/border-end-start-radius +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - border-end-start-radius + - 'recipe:css-property' + - writing modes +translation_of: Web/CSS/border-end-start-radius +--- +

{{CSSRef}}

+ +

border-end-start-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

+ +
/* <length> 値 */
+/* 値1つの場合は角を円にする */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-end-start-radius: 1em 2em;
+
+/* グローバル値 */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+
+ +

このプロパティは、要素の block-end と inline-start の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 {{CSSxRef("border-bottom-left-radius")}} プロパティに対応します。

+ +

構文

+ +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

縦書きの時の境界の丸め

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-end-start-radius")}}

+ +

関連情報

+ +
    +
  • 対応する物理プロパティ: {{CSSxRef("border-top-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-image-outset/index.html b/files/ja/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..2ae454522e --- /dev/null +++ b/files/ja/web/css/border-image-outset/index.html @@ -0,0 +1,114 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

border-image-outset は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

+ +

境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。

+ +
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+border-image-outset: 1rem;
+
+/* <number> 値 */
+border-image-outset: 1.5;
+
+/* 上下 | 左右 */
+border-image-outset: 1 1.2;
+
+/* 上 | 左右 | 下 */
+border-image-outset: 30px 2 45px;
+
+/* 上 | 右 | 下 | 左 */
+border-image-outset: 7px 12px 14px 5px;
+
+/* グローバル値 */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+
+ +

border-image-outset プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は {{cssxref("<length>")}} 又は {{cssxref("<number>")}} です。負の値は無効であり、指定すると border-image-outset の宣言が無効になります。

+ +
    +
  1. 値が1つ指定された場合は、全4辺に適用されます。
    2. +
  2. 値が2つ指定された場合は、1つ目が上下に、2つ目が左右に適用されます。
    3. +
  3. 値が3つ指定された場合は、1つ目が上に、2つ目が左右に、3つ目が下に適用されます。
    4. +
  4. 値が4つ指定された場合は、上、右、下、左の順 (時計回り) で適用されます。
    5. +
+ +

値

+ +
+
{{cssxref("<length>")}}
+
border-image がはみ出す寸法を長さ — 数値と単位で指定します。
+
{{cssxref("<number>")}}
+
border-image がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が border-width: 1em 2px 0 1.5rem で、 border-image-outset: 2 であると、最終的な border-image-outset は 2em 4px 0 3rem として計算されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div id="outset">This element has an outset border image!</div>
+
+ +

CSS

+ +
#outset {
+  width: 10rem;
+  background: #cef;
+  border: 1.4rem solid;
+  border-image: radial-gradient(#ff2, #55f) 40;
+  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
+  margin: 2.1rem;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", "auto", 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-image-outset")}}

diff --git a/files/ja/web/css/border-image-repeat/index.html b/files/ja/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..53d19da69d --- /dev/null +++ b/files/ja/web/css/border-image-repeat/index.html @@ -0,0 +1,126 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-image + - リファレンス +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

CSS の border-image-repeat プロパティは、元画像の辺の領域を、どうやって要素の境界画像に合うように合わせるかを定義します。

+ +
{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-image-repeat: stretch;
+border-image-repeat: repeat;
+border-image-repeat: round;
+border-image-repeat: space;
+
+/* 垂直 | 水平 */
+border-image-repeat: round stretch;
+
+/* グローバル値 */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

border-image-repeat プロパティは、下記の値のリストにある1つ又は2つの値を使用して指定することができます。

+ +
    +
  • 値が1つ指定された場合、全4辺に同じ動作が適用されます。
    • +
  • 値が2つ指定された場合、1つ目の動作が上下に、2つ目が左右に適用されます。
    • +
+ +

値

+ +
+
stretch
+
2つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。
+
repeat
+
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。
+
round
+
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。
+
space
+
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS コンテンツ

+ +
#bordered {
+  width: 12rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 40px solid;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image-repeat: stretch;  /* live sample で変更可能 */
+}
+
+ + + +

{{EmbedLiveSample("Example", "auto", 200)}}

+ +

仕様策定状況

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-image-repeat")}}

diff --git a/files/ja/web/css/border-image-slice/index.html b/files/ja/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..98e350758f --- /dev/null +++ b/files/ja/web/css/border-image-slice/index.html @@ -0,0 +1,115 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-image + - border-image-slice + - リファレンス +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

CSS の border-image-slice プロパティは {{cssxref("border-image-source")}} で指定された画像を複数の領域に分割します。これらの領域は境界画像の部品を構成します。

+ +
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
+ + + +

分割する過程で、4つの角、4つの辺、それに中央領域の計9つの領域を作成します。それぞれの辺からの距離で設定される4本の分割線が、領域の寸法を制御します。

+ +

The nine regions defined by the border-image or border-image-slice properties

+ +

上の図は、それぞれの領域の位置を説明しています。

+ +
    +
  • 1-4 の領域は角の領域です。それぞれが1回ずつ使用され、最終的な境界画像の中で四隅を形成します。
    • +
  • 5-8 の領域は 辺の領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて反復、拡縮、その他の加工が行なわれます。
    • +
  • 9 の領域は中央領域です。既定では描画されませんが、キーワード fill がセットされていれば背景画像のように使用されます。
    • +
+ +

{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

+ +

構文

+ +
/* すべての辺 */
+border-image-slice: 30%;
+
+/* 上下 | 左右 */
+border-image-slice: 10% 30%;
+
+/* 上 | 左右 | 下 */
+border-image-slice: 30 30% 45;
+
+/* 上 | 右 | 下 | 左 */
+border-image-slice: 7 12 14 5;
+
+/* `fill` キーワードの使用 */
+border-image-slice: 10% fill 7 12;
+
+/* グローバル値 */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

border-image-slice プロパティは1つから4つの <number-percentage> 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は 100% に丸められます。

+ +
    +
  • 位置が1つ指定された場合、全4本の分割線がそれぞれの辺から同じ距離で作成されます。
    • +
  • 位置が2つ指定された場合、1つ目の値を上下の辺からの距離として、2つ目を左右の辺からの距離として分割線を作成します。
    • +
  • 位置が3つ指定された場合、1つ目の値を上の辺からの距離として、2つ目を左右の辺からの距離、3つ目は下の辺からの距離として分割線を作成します。
    • +
  • 位置が4つ指定された場合、上、右、下、左の順（時計回り）でそれぞれの辺からの距離として分割線を作成します。
    • +
+ +

fill の値は任意で、使用する場合は、宣言のどこにおいても構いません。

+ +

値

+ +
+
{{cssxref("<number>")}}
+
縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。
+
{{cssxref("<percentage>")}}
+
縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。
+
fill
+
中央の画像領域を維持し、背景画像のように表示しますが、実際の {{cssxref("background")}} の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-image-slice")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-image-source/index.html b/files/ja/web/css/border-image-source/index.html new file mode 100644 index 0000000000..ffac71e956 --- /dev/null +++ b/files/ja/web/css/border-image-source/index.html @@ -0,0 +1,93 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - CSS Borders + - CSS Property + - CSS プロパティ + - CSS 背景と境界 + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef}}
+ +

border-image-source は CSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
+ + + +

元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。

+ +

構文

+ +
/* キーワード値 */
+border-image-source: none;
+
+/* <image> 値 */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* グローバル値 */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

値

+ +
+
none
+
境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。
+
{{cssxref("<image>")}}
+
境界に使用する画像への参照です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

さまさまな値を使った表示例は、 {{cssxref("border-image")}} をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-image-source")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("outline")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("url()", "url()")}} 関数
    • +
diff --git a/files/ja/web/css/border-image-width/index.html b/files/ja/web/css/border-image-width/index.html new file mode 100644 index 0000000000..35702b3958 --- /dev/null +++ b/files/ja/web/css/border-image-width/index.html @@ -0,0 +1,129 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

border-image-width は CSS のプロパティで、要素の境界画像の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
+ + + +

このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

+ +

構文

+ +
/* キーワード値 */
+border-image-width: auto;
+
+/* <length> 値 */
+border-image-width: 1rem;
+
+/* <percentage> 値 */
+border-image-width: 25%;
+
+/* <number> 値 */
+border-image-width: 3;
+
+/* 上下 | 左右 */
+border-image-width: 2em 3em;
+
+/* 上 | 左右 | 下 */
+border-image-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+border-image-width: 5% 2em 10% auto;
+
+/* グローバル値 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

border-image-width プロパティは下記の値のリストにある1つから4つの値を使用して指定することができます。

+ +
    +
  • 値が1つ指定された場合、全4辺に同じ幅が適用されます。
    • +
  • 値が2つ指定された場合、1つ目の幅が上下に、2つ目が左右に適用されます。
    • +
  • 値が3つ指定された場合、1つ目の幅が上に、2つ目が左右に、3つ目が下に適用されます。
    • +
  • 値が4つ指定された場合、幅は上、右、下、左の順 (時計回り) で適用されます。
    • +
+ +

値

+ +
+
<length-percentage>
+
境界の幅を、 {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} で指定します。パーセント値は水平オフセットにおいては境界画像の領域の幅、また垂直オフセットにおいては境界画像の領域の高さです。負の値であってはいけません。
+
<number>
+
境界の幅を、対応する {{cssxref("border-width")}} に対する倍率として指定します。負の値であってはいけません。
+
auto
+
境界の幅が、対応する {{cssxref("border-image-slice")}} の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する border-width が代わりに使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

この例は以下の90×90ピクセルの ".png" ファイルを使用して境界画像を作成します。

+ +

+ +

そして、元の画像内のそれぞれの円は30×30ピクセルです。

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+ +

CSS

+ +
p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 200, 240)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-image-width")}}

diff --git a/files/ja/web/css/border-image/index.html b/files/ja/web/css/border-image/index.html new file mode 100644 index 0000000000..0ee0aa316a --- /dev/null +++ b/files/ja/web/css/border-image/index.html @@ -0,0 +1,171 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image + - border-image-slice + - border-image-source +translation_of: Web/CSS/border-image +--- +
{{CSSRef}}
+ +

border-image は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。

+ +
{{EmbedInteractiveExample("pages/css/border-image.html")}}
+ + + +

このプロパティは {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}} の 一括指定プロパティです。他の一括指定プロパティと同様、省略された値には初期値が設定されます。

+ +
+

メモ: 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。実際、仕様書によればこれが必須になっていますが、すべてのブラウザーがこの要件を実装しているわけではありません。

+
+ +

構文

+ +
/* source | slice */
+border-image: linear-gradient(red, blue) 27;
+
+/* source | slice | repeat */
+border-image: url("/images/border.png") 27 space;
+
+/* source | slice | width */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* source | slice | width | outset | repeat */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+
+ +

border-image プロパティは以下に挙げられた1つから5つの値で指定することができます。

+ +
+

メモ: {{cssxref("border-image-source")}} の 計算値 が none になったり、画像が表示できなかったりした場合は、 {{cssxref("border-style")}} が代わりに表示されます。

+
+ +

値

+ +
+
<'border-image-source'>
+
元となる画像です。 {{cssxref("border-image-source")}} を参照してください。
+
<'border-image-slice'>
+
source の画像を領域に分割する座標です。4つまでの値が指定できます。 {{cssxref("border-image-slice")}} を参照してください。
+
<'border-image-width'>
+
境界画像の幅です。4つまでの値が指定できます。 {{cssxref("border-image-width")}} を参照してください。
+
<'border-image-outset'>
+
要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 {{cssxref("border-image-outset")}} を参照してください。
+
<'border-image-repeat'>
+
source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 {{cssxref("border-image-repeat")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ビットマップ

+ +

この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが3つずつ並んだ81×81ピクセルの ".png" ファイルです。

+ +

境界画像の例

+ +

HTML

+ +
<div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div>
+
+ +

CSS

+ +

個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための 27 を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 round に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。

+ +
#bitmap {
+  width: 200px;
+  background-color: #ffa;
+  border: 36px solid orange;
+  margin: 30px;
+  padding: 10px;
+
+  border-image:
+      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
+      27 /                    /* slice */
+      36px 28px 18px 8px /    /* width */
+      18px 14px 9px 4px       /* outset */
+      round;                  /* repeat */
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Bitmap', '100%', 200)}}

+ +

グラデーション

+ +

HTML

+ +
<div id="gradient">この要素はグラデーションの境界に囲まれています。</div>
+
+ +

CSS

+ +
#gradient {
+  width: 200px;
+  border: 30px solid;
+  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
+  padding: 20px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Gradient')}}

+ +

アクセシビリティの考慮事項

+ +

支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-image")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("outline")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("url()", "url()")}} 関数
    • +
  • Gradient functions: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}
    • +
diff --git a/files/ja/web/css/border-inline-color/index.html b/files/ja/web/css/border-inline-color/index.html new file mode 100644 index 0000000000..8dbf1be88f --- /dev/null +++ b/files/ja/web/css/border-inline-color/index.html @@ -0,0 +1,94 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference +translation_of: Web/CSS/border-inline-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-start-color は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} および {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} および {{cssxref("border-left-color")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の方向の境界色を定義します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-color")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
    • +
diff --git a/files/ja/web/css/border-inline-end-color/index.html b/files/ja/web/css/border-inline-end-color/index.html new file mode 100644 index 0000000000..4a868a5bed --- /dev/null +++ b/files/ja/web/css/border-inline-end-color/index.html @@ -0,0 +1,102 @@ +--- +title: border-inline-end-color +slug: Web/CSS/border-inline-end-color +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-color + - border-inline-end + - border-inline-end-color +translation_of: Web/CSS/border-inline-end-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-end-color は CSS のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
+ + + +

構文

+ +
border-inline-end-color: rebeccapurple;
+border-inline-end-color: #663399;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} が要素の他の境界色を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-end-color")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-end-style/index.html b/files/ja/web/css/border-inline-end-style/index.html new file mode 100644 index 0000000000..a33a5711dd --- /dev/null +++ b/files/ja/web/css/border-inline-end-style/index.html @@ -0,0 +1,104 @@ +--- +title: border-inline-end-style +slug: Web/CSS/border-inline-end-style +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-end + - border-inline-end-style + - border-inline-style +translation_of: Web/CSS/border-inline-end-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-end-style は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
+ + + +

構文

+ +
/* <'border-style'> 値 */
+border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;
+
+ +

関連するプロパティとしては、 {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-style'>
+
境界のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-block-end-style")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-end-width/index.html b/files/ja/web/css/border-inline-end-width/index.html new file mode 100644 index 0000000000..cd8926c2d3 --- /dev/null +++ b/files/ja/web/css/border-inline-end-width/index.html @@ -0,0 +1,103 @@ +--- +title: border-inline-end-width +slug: Web/CSS/border-inline-end-width +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-end + - border-inline-end-width + - border-inline-width +translation_of: Web/CSS/border-inline-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-end-width は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
+ + + +

構文

+ +
/* <'border-width'> 値 */
+border-inline-end-width: 2px;
+border-inline-end-width: thick;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} が要素の他の境界の幅を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-end-width")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-end/index.html b/files/ja/web/css/border-inline-end/index.html new file mode 100644 index 0000000000..13490579f3 --- /dev/null +++ b/files/ja/web/css/border-inline-end/index.html @@ -0,0 +1,111 @@ +--- +title: border-inline-end +slug: Web/CSS/border-inline-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-end + - border-inline-end-color + - border-inline-end-style + - border-inline-end-width +translation_of: Web/CSS/border-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-end は CSS のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
+ + + +

構文

+ +
border-inline-end: 1px;
+border-inline-end: 2px dashed;
+border-inline-end: medium dashed blue;
+
+ +

border-inline-end は1つ以上の {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, {{cssxref("border-inline-end-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +

関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}} が要素の他の境界を定義します。

+ +

{{cssinfo}}

+ +

値

+ +

border-inline-end は以下の値のうちの1つ以上を任意の順序で指定します。

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
<'border-style'>
+
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-end")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-start-color/index.html b/files/ja/web/css/border-inline-start-color/index.html new file mode 100644 index 0000000000..dde977fdea --- /dev/null +++ b/files/ja/web/css/border-inline-start-color/index.html @@ -0,0 +1,102 @@ +--- +title: border-inline-start-color +slug: Web/CSS/border-inline-start-color +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-color + - border-inline-start + - border-inline-start-color +translation_of: Web/CSS/border-inline-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-start-color は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
+ + + +

構文

+ +
border-inline-start-color: red;
+border-inline-start-color: #ee4141;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-start-color")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-start-style/index.html b/files/ja/web/css/border-inline-start-style/index.html new file mode 100644 index 0000000000..83db36932f --- /dev/null +++ b/files/ja/web/css/border-inline-start-style/index.html @@ -0,0 +1,104 @@ +--- +title: border-inline-start-style +slug: Web/CSS/border-inline-start-style +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-start + - border-inline-start-style + - border-inline-style +translation_of: Web/CSS/border-inline-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-start-style は CSS のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
+ + + +

構文

+ +
/* <'border-style'> 値 */
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-style'>
+
境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-start-style")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-start-width/index.html b/files/ja/web/css/border-inline-start-width/index.html new file mode 100644 index 0000000000..dfd1916c0a --- /dev/null +++ b/files/ja/web/css/border-inline-start-width/index.html @@ -0,0 +1,103 @@ +--- +title: border-inline-start-width +slug: Web/CSS/border-inline-start-width +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-start + - border-inline-start-width + - border-inline-width +translation_of: Web/CSS/border-inline-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-start-width は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
+ + + +

構文

+ +
/* <'border-width'> 値 */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+
+ +

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界の幅を定義します。

+ +

{{cssinfo}}

+ +

値

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-start-width")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-start/index.html b/files/ja/web/css/border-inline-start/index.html new file mode 100644 index 0000000000..20ccccddf6 --- /dev/null +++ b/files/ja/web/css/border-inline-start/index.html @@ -0,0 +1,111 @@ +--- +title: border-inline-start +slug: Web/CSS/border-inline-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - border-inline + - border-inline-start + - border-inline-start-color + - border-inline-start-style + - border-inline-start-width +translation_of: Web/CSS/border-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-start は CSS のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
+ + + +

構文

+ +
border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+
+ +

border-inline-start は1つ以上の {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +

関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。

+ +

{{cssinfo}}

+ +

値

+ +

border-inline-start は以下の値の内の1つ以上を任意の順序で指定します。

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
<'border-style'>
+
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-start")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-style/index.html b/files/ja/web/css/border-inline-style/index.html new file mode 100644 index 0000000000..7b49f9aeb0 --- /dev/null +++ b/files/ja/web/css/border-inline-style/index.html @@ -0,0 +1,96 @@ +--- +title: border-inline-style +slug: Web/CSS/border-inline-style +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference +translation_of: Web/CSS/border-inline-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-style は CSS のプロパティで、要素の論理的なインライン方向の境界のスタイルを、要素の書字方向やテキストの向きに応じて物理的な境界のスタイルに割り当てて定義します。これは {{cssxref("border-top-style")}} および {{cssxref("border-bottom-style")}}、または {{cssxref("border-left-style")}} および {{cssxref("border-right-style")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に応じて対応します。

+ +
/* <'border-style'> の値 */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+
+ +

他の方向の境界スタイルは {{cssxref("border-block-style")}} で設定することができ、これは {{cssxref("border-block-start-style")}} および {{cssxref("border-block-end-style")}} を定義します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<'border-style'>
+
境界線のスタイルです。 {{ cssxref("border-style") }} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}{{Spec2("CSS Logical Properties")}}初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-style")}}

+ +

関連情報

+ +
    +
  • このプロパティは物理的な境界のプロパティ {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに割り当てられます。
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline-width/index.html b/files/ja/web/css/border-inline-width/index.html new file mode 100644 index 0000000000..81904da54d --- /dev/null +++ b/files/ja/web/css/border-inline-width/index.html @@ -0,0 +1,96 @@ +--- +title: border-inline-width +slug: Web/CSS/border-inline-width +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference +translation_of: Web/CSS/border-inline-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

border-inline-width は CSS のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} の組み合わせのどちらか対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
/* <'border-width'> 値 */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+
+ +

他の方向の境界の幅については、 {{cssxref("border-block-width")}} によって、 {{cssxref("border-block-start-width")}} と {{cssxref("border-block-end-width")}} を設定することができます。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-width", "border-inline-width")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline-width")}}

+ +

関連情報

+ +
    +
  • このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応します
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-inline/index.html b/files/ja/web/css/border-inline/index.html new file mode 100644 index 0000000000..f3e3bde468 --- /dev/null +++ b/files/ja/web/css/border-inline/index.html @@ -0,0 +1,100 @@ +--- +title: border-inline +slug: Web/CSS/border-inline +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/border-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

The border-inline は CSS のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの1ヶ所で設定する一括指定プロパティです。

+ +
border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+
+ +

border-inline は {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, {{cssxref("border-inline-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。

+ +

他の方向の境界については、 {{cssxref("border-block")}} によって、 {{cssxref("border-block-start")}} と {{cssxref("border-block-end")}} の両方を設定することができます。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +

border-inline は以下の値のうちの1つ以上を任意の順序で指定します。

+ +
+
<'border-width'>
+
境界の幅です。 {{cssxref("border-width")}} を参照してください。
+
<'border-style'>
+
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
+
<'color'>
+
境界の色です。 {{cssxref("color")}} を参照してください。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-inline")}}

+ +

関連情報

+ +
    +
  • このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応付けられます。
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-left-color/index.html b/files/ja/web/css/border-left-color/index.html new file mode 100644 index 0000000000..6e50e7e0b1 --- /dev/null +++ b/files/ja/web/css/border-left-color/index.html @@ -0,0 +1,119 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-color + - border-left +translation_of: Web/CSS/border-left-color +--- +
{{CSSRef}}
+ +

border-left-color は CSS のプロパティで、要素の左側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-left")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-left-color: red;
+border-left-color: #ffbb00;
+border-left-color: rgb(255, 0, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: currentcolor;
+border-left-color: transparent;
+
+/* グローバル値 */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+
+ +

border-left-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
左の境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-left-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-left-color")}}

+ +

関連情報

+ +
    +
  • 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}.
    • +
  • 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}
    • +
  • 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}}
    • +
diff --git a/files/ja/web/css/border-left-style/index.html b/files/ja/web/css/border-left-style/index.html new file mode 100644 index 0000000000..427e9c5f46 --- /dev/null +++ b/files/ja/web/css/border-left-style/index.html @@ -0,0 +1,137 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-left + - border-style +translation_of: Web/CSS/border-left-style +--- +
{{CSSRef}}
+ +

CSS の border-left-style プロパティは、要素の左側の {{cssxref("border")}} における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
+ + + +
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+ +

構文

+ +
/* キーワード値 */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* グローバル値 */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+
+ +

border-left-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-left-style の例のクラス */
+.b1 {border-left-style: none;}
+.b2 {border-left-style: hidden;}
+.b3 {border-left-style: dotted;}
+.b4 {border-left-style: dashed;}
+.b5 {border-left-style: solid;}
+.b6 {border-left-style: double;}
+.b7 {border-left-style: groove;}
+.b8 {border-left-style: ridge;}
+.b9 {border-left-style: inset;}
+.b10 {border-left-style: outset;}
+ +

結果

+ +

{{ EmbedLiveSample('Examples', 300, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}明確な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-left-style")}}

+ +

関連情報

+ +
    +
  • その他の形状に関する境界のプロパティ: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-style")}}
    • +
  • その他の左側の境界に関するプロパティ: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, {{Cssxref("border-left-width")}}
    • +
diff --git a/files/ja/web/css/border-left-width/index.html b/files/ja/web/css/border-left-width/index.html new file mode 100644 index 0000000000..eb54d04b4e --- /dev/null +++ b/files/ja/web/css/border-left-width/index.html @@ -0,0 +1,148 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-left + - border-width +translation_of: Web/CSS/border-left-width +--- +
{{CSSRef}}
+ +

border-left-width は CSS のプロパティで、要素の左側の境界の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* <length> 値 */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* グローバル値 */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+
+ +

値

+ +
+
<line-width>
+
明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + + + + + + + + + + + + + + + + + +
thin +
+ 		細い境界線
medium +
+ 		中くらいの境界線
thick +
+ 		太い境界線
+ +
+

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-left-width: thick;
+}
+div:nth-child(2) {
+  border-left-width: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はなし。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}{{Spec2('CSS2.1')}}目立った変更はなし。
{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-left-width")}}

+ +

関連情報

+ +
    +
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}
    • +
  • 他の border-left 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-left-color")}}
    • +
diff --git a/files/ja/web/css/border-left/index.html b/files/ja/web/css/border-left/index.html new file mode 100644 index 0000000000..22e4a8467d --- /dev/null +++ b/files/ja/web/css/border-left/index.html @@ -0,0 +1,139 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-left +--- +
{{CSSRef}}
+ +

border-left は一括指定の CSS のプロパティで、要素の左側の境界のプロパティをすべて設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-left.html")}}
+ + + +

他の一括指定プロパティと同様に、 border-left は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・

+ +
border-left-style: dotted;
+border-left: thick green;
+
+ +

・・・は、実際には以下と同じです・・・

+ +
border-left-style: dotted;
+border-left: none thick green;
+
+ +

・・・そして、 border-left の前で設定された {{cssxref("border-left-style")}} の値は無視されます。 {{cssxref("border-left-style")}} の既定値は none なので、 border-style の部分の設定は境界線なしとなります。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
+ +

構文

+ +
border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+
+ +

一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。

+ +

値

+ +
+
<br-width>
+
{{cssxref("border-left-width")}} を参照してください。
+
<br-style>
+
{{cssxref("border-left-style")}} を参照してください。
+
{{cssxref("<color>")}}
+
{{cssxref("border-left-color")}} を参照してください。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

左の境界の適用

+ +

HTML

+ +
<div>
+  このボックスには左側に境界線があります。
+</div>
+ +

CSS

+ +
div {
+  border-left: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Applying_a_left_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-left', 'border-left')}}{{Spec2('CSS3 Backgrounds')}}直接的な変更はないが、 {{cssxref("border-left-color")}} に適用される値が変更された。
{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}{{Spec2('CSS2.1')}}有意な変更点なし。
{{SpecName('CSS1', '#border-left', 'border-left')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-left")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-block")}}
    • +
  • {{cssxref("outline")}}
    • +
diff --git a/files/ja/web/css/border-radius/index.html b/files/ja/web/css/border-radius/index.html new file mode 100644 index 0000000000..f72ffbefe4 --- /dev/null +++ b/files/ja/web/css/border-radius/index.html @@ -0,0 +1,217 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-radius +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

border-radius は CSS の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ + + +

このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの一括指定です。

+ +

半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。

+ +

border-radius プロパティは {{cssxref("border-collapse")}} が collapse の table 要素には適用されません。

+ +
メモ: 他の一括指定プロパティと同様、個別のサブプロパティは border-radius:0 0 inherit inherit のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
+ +

構文

+ +
/* 最初の半径の構文は1つから4つの値が許可されています */
+/* 半径を全4角に設定 */
+border-radius: 10px;
+
+/* 左上と右下 | 右上と左下 */
+border-radius: 10px 5%;
+
+/* 左上 | 右上と左下 | 右下 */
+border-radius: 2px 4px 2px;
+
+/* 左上 | 右上 | 右下 | 左下 */
+border-radius: 1px 0 3px 4px;
+
+/* 2番目の半径の構文は1つから4つの値が許可されています */
+/* (最初の半径の値) / radius */
+border-radius: 10px / 20px;
+
+/* (最初の半径の値) / 左上と右下 | 右上と左下 */
+border-radius: 10px 5% / 20px 30px;
+
+/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* グローバル値 */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+
+ +

border-radius プロパティは次のように指定することができます。

+ +
    +
  • 1つ、2つ、3つ、4つの {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} の値。これは角の半径を1つ設定するために使用します。
    • +
  • その後に任意で、 "/" と1つ、2つ、3つ、4つの <length> 又は <percentage> の値。これは追加の半径を設定し、楕円形の角にすることができます。
    • +
+ +

値

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
半径all-corner.png境界の四隅に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。1つの値の構文のみで使用されます。
左上と右下top-left-bottom-right.png要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つの値の構文のみで使用されます。
右上と左下top-right-bottom-left.png要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つ又は3つの値の構文のみで使用されます。
左上top-left.png要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
右上top-right.png要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
右下bottom-rigth.png要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
左下bottom-left.png要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
+ +
+
{{cssxref("<length>")}}
+
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。
+
{{cssxref("<percentage>")}}
+
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。
+
+ +

例:

+ +
border-radius: 1em/5em;
+
+/* ... is equivalent to: */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... is equivalent to: */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
  border: solid 10px;
+  /* 境界が「D」のように描画される */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +
  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+ +
  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+ +

ライブサンプル

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-radius")}}

+ +

関連情報

+ +
    +
  • border-radius 関連 CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}
    • +
diff --git a/files/ja/web/css/border-right-color/index.html b/files/ja/web/css/border-right-color/index.html new file mode 100644 index 0000000000..5655faa913 --- /dev/null +++ b/files/ja/web/css/border-right-color/index.html @@ -0,0 +1,117 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-right-color +--- +
{{CSSRef}}
+ +

border-right-color は CSS のプロパティで、要素の右側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-right")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-right-color: red;
+border-right-color: #ffbb00;
+border-right-color: rgb(255, 0, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: currentcolor;
+border-right-color: transparent;
+
+/* グローバル値 */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+
+ +

border-right-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
右の境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-right-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-right-color")}}

+ +

関連情報

+ +
    +
  • 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}}.
    • +
  • 他の境界線の色に関する CSS プロパティ: {{cssxref("border-left-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}
    • +
  • 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}}
    • +
diff --git a/files/ja/web/css/border-right-style/index.html b/files/ja/web/css/border-right-style/index.html new file mode 100644 index 0000000000..fd9108dd8f --- /dev/null +++ b/files/ja/web/css/border-right-style/index.html @@ -0,0 +1,137 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-right + - border-style +translation_of: Web/CSS/border-right-style +--- +
{{CSSRef}}
+ +

border-right-style は CSS のプロパティで、要素の右側の境界 ({{cssxref("border")}}) における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-right-style.html")}}
+ + + +
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+ +

構文

+ +
/* キーワード値 */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* グローバル値 */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+
+ +

border-right-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-right-style の例のクラス */
+.b1 {border-right-style: none;}
+.b2 {border-right-style: hidden;}
+.b3 {border-right-style: dotted;}
+.b4 {border-right-style: dashed;}
+.b5 {border-right-style: solid;}
+.b6 {border-right-style: double;}
+.b7 {border-right-style: groove;}
+.b8 {border-right-style: ridge;}
+.b9 {border-right-style: inset;}
+.b10 {border-right-style: outset;}
+ +

結果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}{{Spec2('CSS3 Backgrounds')}}重要な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}{{Spec2('CSS2.1')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-right-style")}}

+ +

関連情報

+ +
    +
  • その他の形状に関する境界のプロパティ: {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}
    • +
  • その他の左側の境界に関するプロパティ: {{ Cssxref("border-right") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-width") }}
    • +
diff --git a/files/ja/web/css/border-right-width/index.html b/files/ja/web/css/border-right-width/index.html new file mode 100644 index 0000000000..4290b4da04 --- /dev/null +++ b/files/ja/web/css/border-right-width/index.html @@ -0,0 +1,148 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-right + - border-width +translation_of: Web/CSS/border-right-width +--- +
{{CSSRef}}
+ +

CSS の border-right-width プロパティは、要素の右側の境界の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* <length> 値 */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* グローバル値 */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;
+
+ +

値

+ +
+
<line-width>
+
明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		細い境界線
medium +
 
+ 		中くらいの境界線
thick +
 
+ 		太い境界線
+ +
+

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-right-width: thick;
+}
+div:nth-child(2) {
+  border-right-width: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はなし。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}{{Spec2('CSS2.1')}}目立った変更はなし。
{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-right-width")}}

+ +

関連情報

+ +
    +
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}
    • +
  • 他の border-right 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-right-color")}}
    • +
diff --git a/files/ja/web/css/border-right/index.html b/files/ja/web/css/border-right/index.html new file mode 100644 index 0000000000..5cbd175efa --- /dev/null +++ b/files/ja/web/css/border-right/index.html @@ -0,0 +1,139 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-right +--- +
{{CSSRef}}
+ +

border-right は一括指定の CSS のプロパティで、要素の右側の境界のプロパティをすべて設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-right.html")}}
+ + + +

他の一括指定プロパティと同様に、 border-right は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・

+ +
border-right-style: dotted;
+border-right: thick green;
+
+ +

・・・は、実際には以下と同じです・・・

+ +
border-right-style: dotted;
+border-right: none thick green;
+
+ +

・・・そして、 border-right の前で設定された {{cssxref("border-right-style")}} の値は無視されます。 {{cssxref("border-right-style")}} の既定値は none なので、 border-style の部分の設定は境界線なしとなります。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
+ +

構文

+ +
border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+
+ +

一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。

+ +

値

+ +
+
<br-width>
+
{{cssxref("border-right-width")}} を参照してください。
+
<br-style>
+
{{cssxref("border-right-style")}} を参照してください。
+
{{cssxref("<color>")}}
+
{{cssxref("border-right-color")}} を参照してください。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

右の境界の適用

+ +

HTML

+ +
<div>
+  このボックスには右側に境界線があります。
+</div>
+ +

CSS

+ +
div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Applying_a_right_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-right', 'border-right')}}{{Spec2('CSS3 Backgrounds')}}直接的な変更はないが、 {{cssxref("border-right-color")}} に適用される値が変更された。
{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}{{Spec2('CSS2.1')}}有意な変更点なし。
{{SpecName('CSS1', '#border-right', 'border-right')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-right")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-block")}}
    • +
  • {{cssxref("outline")}}
    • +
diff --git a/files/ja/web/css/border-spacing/index.html b/files/ja/web/css/border-spacing/index.html new file mode 100644 index 0000000000..0e9470089c --- /dev/null +++ b/files/ja/web/css/border-spacing/index.html @@ -0,0 +1,131 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS テーブル + - CSS プロパティ + - CSS 表 + - Reference + - リファレンス +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

CSS の border-spacing プロパティは、 {{htmlelement("table")}} における隣り合うセルの枠線同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が separate のときのみ適用されます。

+ +
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+ + + +

border-spacing の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する border-spacing と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。

+ +
+

メモ: border-spacing プロパティは、 <table> 要素の非推奨になった cellspacing 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。

+
+ +

構文

+ +
/* <length> */
+border-spacing: 2px;
+
+/* 左右の <length> | 上下の <length> */
+border-spacing: 1cm 2em;
+
+/* グローバル値 */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+
+ +

border-spacing プロパティは1つまたは2つの値で指定することができます。

+ +
    +
  • <length> 値が1つ指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
    • +
  • <length> 値が2つ指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う列の間隔) を定義し、2番目の値がセル間の上下方向の間隔 (つまり、隣り合う行の間隔) を定義します。
    • +
+ +

値

+ +
+
{{cssxref("<length>")}}
+
固定値による間隔の大きさです。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

この例では表のセル間において、垂直方向に .5em、水平方向に 1em の間隔を適用します。なお、外の辺においては、表の padding の値が border-spacing の値に追加されます。

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1</td><td>2</td><td>3</td>
+  </tr>
+  <tr>
+    <td>4</td><td>5</td><td>6</td>
+  </tr>
+  <tr>
+    <td>7</td><td>8</td><td>9</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
table {
+  border-spacing: 1em .5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Example', 400, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-spacing")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border-collapse")}}, {{cssxref("border-style")}}
    • +
  • border-spacing プロパティは HTML の {{htmlelement("table")}} 要素の出現方法を変更します。
    • +
diff --git a/files/ja/web/css/border-start-end-radius/index.html b/files/ja/web/css/border-start-end-radius/index.html new file mode 100644 index 0000000000..853988d0b7 --- /dev/null +++ b/files/ja/web/css/border-start-end-radius/index.html @@ -0,0 +1,113 @@ +--- +title: border-start-end-radius +slug: Web/CSS/border-start-end-radius +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - border-start-end-radius + - 'recipe:css-property' + - writing modes +translation_of: Web/CSS/border-start-end-radius +--- +

{{CSSRef}}

+ +

border-start-end-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

+ +
/* <length> 値 */
+/* 値1つの場合は角を円にする */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-start-end-radius: 1em 2em;
+
+/* グローバル値 */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+
+ +

このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 {{CSSxRef("border-top-right-radius")}} プロパティに対応します。

+ +

構文

+ +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

縦書きの時の境界の丸め

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-start-end-radius")}}

+ +

関連情報

+ +
    +
  • 対応する物理プロパティ: {{CSSxRef("border-bottom-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-start-start-radius/index.html b/files/ja/web/css/border-start-start-radius/index.html new file mode 100644 index 0000000000..9a1b326993 --- /dev/null +++ b/files/ja/web/css/border-start-start-radius/index.html @@ -0,0 +1,113 @@ +--- +title: border-start-start-radius +slug: Web/CSS/border-start-start-radius +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - border-start-start-radius + - 'recipe:css-property' + - writing modes +translation_of: Web/CSS/border-start-start-radius +--- +

{{CSSRef}}

+ +

border-start-start-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

+ +
/* <length> 値 */
+/* 値1つの場合は角を円にする */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-start-start-radius: 1em 2em;
+
+/* グローバル値 */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+
+ +

このプロパティは、要素の block-start と inline-start の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 {{CSSxRef("border-top-left-radius")}} プロパティに対応します。

+ +

構文

+ +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

縦書きの時の境界の丸め

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-start-radius: 10px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-start-start-radius")}}

+ +

関連情報

+ +
    +
  • 対応する物理プロパティ: {{CSSxRef("border-top-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/ja/web/css/border-style/index.html b/files/ja/web/css/border-style/index.html new file mode 100644 index 0000000000..1dd8bcc7a4 --- /dev/null +++ b/files/ja/web/css/border-style/index.html @@ -0,0 +1,246 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - Web + - border + - border-style + - 一括指定プロパティ +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

border-style は 一括指定 の CSS プロパティで、要素の境界線の4辺すべての線のスタイルを設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/* 上下 | 左右 */
+border-style: dotted solid;
+
+/* 上 | 左右 | 下 */
+border-style: hidden double dashed;
+
+/* 上 | 右 | 下 | 左 */
+border-style: none solid dotted dashed;
+
+/* グローバル値 */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

border-style プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。

+ +
    +
  • 値が1つ指定された場合、全4辺に同じスタイルが適用される。
    • +
  • 値が2つ指定された場合、1つ目のスタイルは上下、2つ目は左右の辺に適用される。
    • +
  • 値が3つ指定された場合、1つ目のスタイルは上、2つ目は左右、3つ目は下の辺に適用される。
    • +
  • 値が4つ指定された場合、スタイルはそれぞれ上、右、下、左の順（時計回り）に適用される。
    • +
+ +

それぞれの値は以下の一覧にあるキーワードです。

+ +

値

+ +
+
<line-style>
+
枠線のスタイルを表すキーワード。以下の値を使用できます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
要素
+ 		hidden キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 none 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
hidden +
要素
+ 		none キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 hidden 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
dotted +
要素
+ 		連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。
dashed +
要素
+ 		短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
solid +
要素
+ 		1本の直線、実線を表示します。
double +
要素
+ 		2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。
groove +
要素
+ 		凹んだように見える境界線を表示します。 ridge の逆です。
ridge +
要素
+ 		出っ張ったように見える境界線を表示します。 groove の逆です。
inset +
要素
+ 		要素が埋め込まれて見える境界線を表示します。 outset の逆です。 {{cssxref("border-collapse")}} が collapsed に設定されたテーブルのセルに適用すると、この値は groove のようにふるまいます。
outset +
要素
+ 		+

要素が出っ張って見える境界線を表示します。 inset の逆です。 {{cssxref("border-collapse")}} を collapsed に設定したテーブルセルに適用すると、この値は ridge のようにふるまいます。

+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

プロパティのすべての値を指定したテーブル

+ +

プロパティのすべての値のサンプルです。

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* テーブルの外見を定義 */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style の例示用クラス */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

結果

+ +

{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}変更なし。
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}hidden キーワードを追加。
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-style")}}

+ +

関連情報

+ +
    +
  • 境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}
    • +
diff --git a/files/ja/web/css/border-top-color/index.html b/files/ja/web/css/border-top-color/index.html new file mode 100644 index 0000000000..8754521b7a --- /dev/null +++ b/files/ja/web/css/border-top-color/index.html @@ -0,0 +1,117 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-top-color +--- +
{{CSSRef}}
+ +

border-top-color は CSS のプロパティで、要素の上側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-top")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentcolor;
+border-top-color: transparent;
+
+/* グローバル値 */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+
+ +

border-top-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
上の境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-top-color")}}

+ +

関連情報

+ +
    +
  • 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}.
    • +
  • 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}
    • +
  • 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}
    • +
diff --git a/files/ja/web/css/border-top-left-radius/index.html b/files/ja/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..0fd505b09b --- /dev/null +++ b/files/ja/web/css/border-top-left-radius/index.html @@ -0,0 +1,170 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-radius + - リファレンス +translation_of: Web/CSS/border-top-left-radius +--- +
{{CSSRef}}
+ +

CSS の border-top-left-radius プロパティは、要素の左上の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
+ + + +

丸みは円又は楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
このプロパティの値が border-top-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* 角を楕円にする */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +

値１つで指定する場合:

+ +
    +
  • 値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。
    • +
+ +

値２つで指定する場合:

+ +
    +
  • 最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。
    • +
  • 最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
    • +
+ +

値

+ +
+
<length-percentage>
+
円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
 
+ 		境界として使用されている円弧 + 
+div {
+  border-top-left-radius: 40px 40px;
+}
+
+
+
 
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-top-left-radius: 40px 20px;
+}
+
+
+
 
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		背景色は境界で切り取られる + 
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-top-left-radius")}}

+ +

関連情報

+ +

CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}

diff --git a/files/ja/web/css/border-top-right-radius/index.html b/files/ja/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..e207a4c5cf --- /dev/null +++ b/files/ja/web/css/border-top-right-radius/index.html @@ -0,0 +1,172 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-radius + - リファレンス +translation_of: Web/CSS/border-top-right-radius +--- +
{{CSSRef}}
+ +

CSS の border-top-right-radius プロパティは、要素の右上の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}
+ + + +

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-top-right-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
このプロパティの値が border-top-right-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-top-right-radius: radius */
+border-top-right-radius: 3px;
+
+/* 角を楕円にする */
+/* border-top-right-radius: horizontal vertical */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+
+ +

値１つで指定する場合:

+ +
    +
  • 値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。
    • +
+ +

値２つで指定する場合:

+ +
    +
  • 最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。
    • +
  • 最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
    • +
+ +

値

+ +
+
<length-percentage>
+
円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
+ 		境界として使用されている円弧 + 
+div {
+  border-top-right-radius: 40px 40px;
+}
+
+
+
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-top-right-radius: 40px 20px;
+}
+
+
+
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-top-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-top-right-radius: 40%;
+}
+
+
+
+ 		背景色は境界で切り取られる + 
+div {
+  border-top-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-top-right-radius")}}

+ +

関連情報

+ +

CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}

diff --git a/files/ja/web/css/border-top-style/index.html b/files/ja/web/css/border-top-style/index.html new file mode 100644 index 0000000000..9932676ff5 --- /dev/null +++ b/files/ja/web/css/border-top-style/index.html @@ -0,0 +1,139 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-style + - border-top +translation_of: Web/CSS/border-top-style +--- +
{{CSSRef}}
+ +

border-top-style は CSS のプロパティで、要素の上側の境界 ({{CSSxRef("border")}}) における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-top-style.html")}}
+ + + +
+

メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

+
+ +

構文

+ +
/* キーワード値 */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* グローバル値 */
+border-top-style: inherit;
+border-top-style: initial;
+border-top-style: unset;
+
+ +

border-top-style プロパティは、 {{CSSxRef("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-top-style の例のクラス */
+.b1 {border-top-style: none;}
+.b2 {border-top-style: hidden;}
+.b3 {border-top-style: dotted;}
+.b4 {border-top-style: dashed;}
+.b5 {border-top-style: solid;}
+.b6 {border-top-style: double;}
+.b7 {border-top-style: groove;}
+.b8 {border-top-style: ridge;}
+.b9 {border-top-style: inset;}
+.b10 {border-top-style: outset;}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 300, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}{{Spec2('CSS3 Backgrounds')}}重要な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}{{Spec2('CSS2.1')}}初回定義。
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-top-style")}}

+ +

関連情報

+ +
    +
  • その他の形状に関する境界のプロパティ: {{CSSxRef("border-left-style")}}, {{CSSxRef("border-right-style")}}, {{CSSxRef("border-bottom-style")}}, {{CSSxRef("border-style")}}
    • +
  • その他の左側の境界に関するプロパティ: {{CSSxRef("border-top")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-top-width")}}
    • +
diff --git a/files/ja/web/css/border-top-width/index.html b/files/ja/web/css/border-top-width/index.html new file mode 100644 index 0000000000..9d6d09ba3e --- /dev/null +++ b/files/ja/web/css/border-top-width/index.html @@ -0,0 +1,148 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-top + - border-width +translation_of: Web/CSS/border-top-width +--- +
{{CSSRef}}
+ +

CSS の border-top-width プロパティは、要素の上側の境界の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* <length> 値 */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* グローバルキーワード */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+
+ +

値

+ +
+
<line-width>
+
明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		細い境界線
medium +
 
+ 		中くらいの境界線
thick +
 
+ 		太い境界線
+ +
+

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-top-width: thick;
+}
+div:nth-child(2) {
+  border-top-width: 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はなし。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}{{Spec2('CSS2.1')}}目立った変更はなし。
{{SpecName('CSS1', '#border-left-width', 'border-top-width')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-top-width")}}

+ +

関連情報

+ +
    +
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}
    • +
  • 他の border-top 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-top-color")}}
    • +
diff --git a/files/ja/web/css/border-top/index.html b/files/ja/web/css/border-top/index.html new file mode 100644 index 0000000000..1c5a2650f7 --- /dev/null +++ b/files/ja/web/css/border-top/index.html @@ -0,0 +1,139 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-top +--- +
{{CSSRef}}
+ +

border-top は一括指定の CSS のプロパティで、要素の上側の境界のプロパティをすべて設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-top.html")}}
+ + + +

他の一括指定プロパティと同様に、 border-top は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・

+ +
border-top-style: dotted;
+border-top: thick green;
+
+ +

・・・は、実際には以下と同じです・・・

+ +
border-top-style: dotted;
+border-top: none thick green;
+
+ +

・・・そして、 border-top の前で設定された {{cssxref("border-top-style")}} の値は無視されます。 {{cssxref("border-top-style")}} の既定値は none なので、 border-style の部分の設定は境界線なしとなります。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
+ +

構文

+ +
border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+
+ +

一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。

+ +

値

+ +
+
<br-width>
+
{{cssxref("border-top-width")}} を参照してください。
+
<br-style>
+
{{cssxref("border-top-style")}} を参照してください。
+
{{cssxref("<color>")}}
+
{{cssxref("border-top-color")}} を参照してください。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

上側の境界の適用

+ +

HTML

+ +
<div>
+  このボックスには上側に境界線があります。
+</div>
+ +

CSS

+ +
div {
+  border-top: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Applying_a_top_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}}直接的な変更はないが、 {{cssxref("border-top-color")}} に適用される値が変更された。
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}有意な変更点なし。
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-top")}}

+ +

関連情報

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-block")}}
    • +
  • {{cssxref("outline")}}
    • +
diff --git a/files/ja/web/css/border-width/index.html b/files/ja/web/css/border-width/index.html new file mode 100644 index 0000000000..a9b09f0205 --- /dev/null +++ b/files/ja/web/css/border-width/index.html @@ -0,0 +1,183 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-width + - リファレンス +translation_of: Web/CSS/border-width +--- +
{{CSSRef}}
+ +

CSS の border-width プロパティは、要素の境界線の四辺すべての線の幅を設定する一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/border-width.html")}}
+ +

それぞれの辺は個別に、 {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} や、書字方向による指定を利用して {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} で設定することができます。

+ +

構文

+ +
/* キーワード値 */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* <length> 値 */
+border-width: 4px;
+border-width: 1.2rem;
+
+/* 上下 | 左右 */
+border-width: 2px 1.5em;
+
+/* 上 | 左右 | 下 */
+border-width: 1px 2em 1.5cm;
+
+/* 上 | 右 | 下 | 左 */
+border-width: 1px 2em 0 4rem;
+
+/* グローバルキーワード */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+
+ +

border-width プロパティは一つ、二つ、三つ、四つの値を使って指定することができます。

+ +
    +
  • 値が一つ指定された場合、全四辺に同じ幅が適用される。
    • +
  • 値が二つ指定された場合、1つ目の幅は上下、2つ目は左右の辺に適用される。
    • +
  • 値が三つ指定された場合、1つ目の幅は上、2つ目は左右、3つ目は下の辺に適用される。
    • +
  • 値が四つ指定された場合、幅はそれぞれ上、右、下、左の順 (時計回り) に適用される。
    • +
+ +

値

+ +
+
<line-width>
+
明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		細い境界線
medium +
 
+ 		中くらいの境界線
thick +
 
+ 		太い境界線
+ +
+

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

+
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

値と長さの組み合わせ

+ +

HTML

+ +
<p id="sval">
+    one value: 6px wide border on all 4 sides</p>
+<p id="bival">
+    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
+<p id="treval">
+    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
+<p id="fourval">
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p>
+ +

CSS

+ +
#sval {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+#bival {
+  border: solid red;
+  border-width: 2px 10px;
+}
+#treval {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+#fourval {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}
+ +

結果

+ +

{{ EmbedLiveSample('A_mix_of_values_and_lengths', 320, 320) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}直接は変更なし。 CSS の {{cssxref("<length>")}} データ型拡張がこのプロパティに影響。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}値の意味が文書内で一定でなければならないという制限を追加。
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.border-width")}}

+ +

関連情報

+ +
    +
  • 境界線に関する一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}
    • +
  • 境界線の幅に関するプロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}
    • +
diff --git a/files/ja/web/css/border/index.html b/files/ja/web/css/border/index.html new file mode 100644 index 0000000000..bf684888c7 --- /dev/null +++ b/files/ja/web/css/border/index.html @@ -0,0 +1,153 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Borders + - CSS Shorthand property + - Layout + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

border は CSS の 一括指定プロパティで、要素の境界を設定します。これは {{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}} の値を設定します。

+ +

例

+ +
{{EmbedInteractiveExample("pages/css/border.html")}}
+ + + +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-width")}}
    • +
+ +

構文

+ +
/* 種類 */
+border: solid;
+
+/* 幅 | 種類 */
+border: 2px dotted;
+
+/* 種類 | 色 */
+border: outset #f33;
+
+/* 幅 | 種類 | 色 */
+border: medium dashed green;
+
+/* グローバル値 */
+border: inherit;
+border: initial;
+border: unset;
+
+ +

border プロパティは、以下に挙げる値の1～3つを使用して指定します。値の順序は関係ありません。

+ +
+

注: style が指定されていない場合は境界線は表示されません。 style の既定値が none だからです。

+
+ +

値

+ +
+
<line-width>
+
境界線の太さを設定します。指定されなかった場合は既定値の medium になります。 {{cssxref("border-width")}} を参照してください。
+
<line-style>
+
境界線の種類を設定します。指定されなかった場合は既定値の none になります。 {{cssxref("border-style")}} を参照してください。
+
{{cssxref("<color>")}}
+
境界線の色を設定します。指定されなかった場合は既定値で要素の {{cssxref("color")}} プロパティになります。 {{cssxref("border-color")}} を参照してください。
+
+ +

解説

+ +

他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 border は {{cssxref("border-image")}} のカスタム値を指定することができず、初期値、つまり none に設定します。

+ +

border による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の {{cssxref("border-width")}}、 {{cssxref("border-style")}}、 {{cssxref("border-color")}} プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 ({{cssxref("border-top")}} など) や論理的 ({{cssxref("border-block-start")}} など) な境界線プロパティを使用することもできます。

+ +

境界線と輪郭線

+ +

境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。

+ +
    +
  • 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。
    • +
  • 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。
    • +
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ピンク色の出っ張った境界の設定

+ +

HTML

+ +
<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
+
+ +

CSS

+ +
div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}
+ +

結果

+ +

{{EmbedLiveSample('Setting_a_pink_outset_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}transparent の特別扱いを廃止し、有効な {{cssxref("<color>")}} とした。実質的な影響はない。
+ 一括指定を使用してカスタム値を設定することはできないため、 border は {{cssxref("border-image")}} を初期値 (none) にリセットするようになった。
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}inherit キーワードを受け付けるようになった。また、transparent を有効な色として受けつけるようになった。
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border")}}

diff --git a/files/ja/web/css/bottom/index.html b/files/ja/web/css/bottom/index.html new file mode 100644 index 0000000000..87298e5afe --- /dev/null +++ b/files/ja/web/css/bottom/index.html @@ -0,0 +1,153 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/bottom +--- +
{{CSSRef}}
+ +

bottom は CSS のプロパティで、位置指定要素 (positioned elements) の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。

+ +
{{EmbedInteractiveExample("pages/css/bottom.html")}}
+ + + +

bottom の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。

+ +
    +
  • position が absolute または fixed に設定されている場合、 bottom プロパティは要素の下辺と包含ブロックの下辺との間の距離を指定します。
    • +
  • position が relative に設定されている場合、 bottom プロパティは要素の下辺が通常位置から上方向へ移動する量を指定します。
    • +
  • position が sticky に設定されている場合、 bottom プロパティは sticky 制約の矩形を計算するために使用されます。
    • +
  • position が static に設定されている場合、 bottom プロパティは効果がありません。
    • +
+ +

{{cssxref("top")}} と bottom の両方が指定されており、 position が absolute または fixed に設定されており、かつ {{cssxref("height")}} が未指定 (auto または 100% のどちらか) の場合は、 top と bottom の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または position が relative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

+ +

構文

+ +
/* <length> 値 */
+bottom: 3px;
+bottom: 2.4em;
+
+/* 内包ブロックの高さに対する <percentage> */
+bottom: 10%;
+
+/* キーワード値 */
+bottom: auto;
+
+/* グローバル値 */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 +
    +
  • 絶対位置指定要素の場合は、包含ブロックの下辺までの距離。
    • +
  • 相対位置指定要素の場合は、通常の位置からの上方向への移動量。
    • +
+
+
{{cssxref("<percentage>")}}
+
包含ブロックの高さに対する {{cssxref("<percentage>")}} です。
+
auto
+
以下のように指定します。 +
    +
  • 絶対位置指定要素では、要素の位置は {{Cssxref("top")}} プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 top も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
    • +
  • 相対位置指定要素では、通常の位置から要素までの距離は {{Cssxref("top")}} に基づきます。また、 top も auto であった場合は、垂直方向には移動しません。
    • +
+
+
inherit
+
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または auto キーワードと同様に扱われます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

この例は、 {{cssxref("position")}} が absolute と fixed であった場合の bottom プロパティの動作の違いを示します。

+ +

HTML

+ +
<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p>
+<div class="fixed"><p>Fixed</p></div>
+<div class="absolute"><p>Absolute</p></div>
+ +

CSS

+ +
p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.2);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example','500','250')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}{{Spec2('CSS3 Positioning')}}sticky の位置の動作を追加
{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.bottom")}}

+ +

関連情報

+ +
    +
  • {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("left")}}
    • +
  • 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}
    • +
  • {{cssxref("position")}}
    • +
diff --git a/files/ja/web/css/box-align/index.html b/files/ja/web/css/box-align/index.html new file mode 100644 index 0000000000..6ad0ca4bc0 --- /dev/null +++ b/files/ja/web/css/box-align/index.html @@ -0,0 +1,146 @@ +--- +title: box-align +slug: Web/CSS/box-align +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference +translation_of: Web/CSS/box-align +--- +
{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}
+ +

box-align は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。

+ +

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

+ +
/* キーワード値 */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+
+ +

配置する方向は、その要素の向き (水平か垂直か) に依存します。

+ +

{{cssinfo}}

+ +

構文

+ +

box-align プロパティは、 以下に記載する値で定義されます。

+ +

値

+ +
+
start
+
ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。
+
center
+
ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。
+
end
+
ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。
+
baseline
+
ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。
+
stretch
+
ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>CSS box-align example</title>
+<style>
+div.example {
+  display: box;                   /* 仕様書通り */
+  display: -moz-box;              /* Mozilla */
+  display: -webkit-box;           /* WebKit */
+
+  /* ボックスの高さを子要素より高くし、
+     box-pack のためのスペースを確保する */
+  height: 400px;
+
+  /* ボックスの幅を子要素より広くし、
+     box-align のためのスペースを確保する */
+  width: 300px;
+
+  /* 子要素の向きは垂直方向にする */
+  box-orient: vertical;           /* 仕様書通り */
+  -moz-box-orient: vertical;      /* Mozilla */
+  -webkit-box-orient: vertical;   /* WebKit */
+
+  /* 子要素をボックス内の水平方向に対して中央に整列させる */
+  box-align: center;              /* 仕様書通り */
+  -moz-box-align: center;         /* Mozilla */
+  -webkit-box-align: center;      /* WebKit */
+
+  /* 子要素をボックス内の終端に寄せる */
+  box-pack: end;                  /* 仕様書通り */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example > p {
+  /* 子要素を親要素の幅より狭くし、
+  box-align のためのスペースを確保する */
+  width: 200px;
+}
+</style>
+</head>
+<body>
+  <div class="example">
+    <p>I will be second from the bottom of div.example, centered horizontally.</p>
+    <p>I will be on the bottom of div.example, centered horizontally.</p>
+  </div>
+</body>
+</html>
+ +

メモ

+ +

配置の用途で start と定義されるボックスの辺は、ボックスの向きに依存します。

+ + + + + + + + + + + + +
Horizontaltop
Verticalleft
+ +

start と反対方向の辺が end と定義されます。

+ +

その要素の align 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。

+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +

{{Compat("css.properties.box-align")}}

+ +

関連情報

+ +
    +
  • {{cssxref("align-items")}}, {{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-pack")}}
    • +
diff --git a/files/ja/web/css/box-decoration-break/index.html b/files/ja/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..b370a57727 --- /dev/null +++ b/files/ja/web/css/box-decoration-break/index.html @@ -0,0 +1,155 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS プロパティ + - CSS 断片化 + - Experimental + - Reference +translation_of: Web/CSS/box-decoration-break +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の box-decoration-break プロパティは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。

+ +
{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
+ + + +

指定された値は、次のプロパティの表示方法に影響を与えます。

+ +
    +
  • {{Cssxref("background")}}
    • +
  • {{Cssxref("border")}}
    • +
  • {{Cssxref("border-image")}}
    • +
  • {{Cssxref("box-shadow")}}
    • +
  • {{Cssxref("clip-path")}}
    • +
  • {{Cssxref("margin")}}
    • +
  • {{Cssxref("padding")}}
    • +
+ +

構文

+ +
/* キーワード値 */
+box-decoration-break: slice;
+box-decoration-break: clone;
+
+/* グローバル値 */
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+
+ +

box-decoration-break プロパティは、以下の一覧にあるキーワード値の一つで指定します。

+ +

値

+ +
+
slice
+
要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページのための断片に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。
+
clone
+
それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }} はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 {{ Cssxref("background-repeat") }}: no-repeat がついた背景画像であっても、複数回繰り返されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

インラインボックスの断片化

+ +

改行を含むインライン要素は次のように整形されます。

+ +
.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+<span class="example">The<br>quick<br>orange fox</span>
+ +

... 結果は以下のようになります。

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

+ +

上記のスタイルに box-decoration-break: clone を追加すると、

+ +
-webkit-box-decoration-break: clone;
+box-decoration-break: clone;
+
+ +

... 以下のような結果になります。

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

+ +

ブラウザーで上記の二つのインラインの例を試してみることができます。

+ +

これはインライン要素に大きな border-radius の値を使用した例です。二番目の "iM" には、 "i" と "M" の間に改行があります。それに対して、最初の "iM" には改行がありません。なお、２つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。

+ +

A screenshot of the rendering of the second inline element example.

+ +

ブラウザーで上の例を試してみることができます。

+ +

ブロックボックスの断片化

+ +

上記と同様のスタイルのブロックボックスは、断片化がないと次のような結果になります。

+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +

上記のブロックが三つの段に分割されると、次のような結果になります。

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

+ +

なお、これらの断片を縦に並べると、断片化されていない描画結果と同じになります。

+ +

そして、同じ例を box-decoration-break: clone で整形すると、次のような結果になります。

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

+ +

なお、それぞれの断片に同じ境界線、ボックスの影、背景が複製されます。

+ +

ブラウザーで上の例を試してみることができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.box-decoration-break")}}

+ +

関連情報

+ +
    +
  • {{cssxref("break-after")}}, {{cssxref("break-before")}}, {{cssxref("break-inside")}}
    • +
diff --git a/files/ja/web/css/box-direction/index.html b/files/ja/web/css/box-direction/index.html new file mode 100644 index 0000000000..3e39f80bc6 --- /dev/null +++ b/files/ja/web/css/box-direction/index.html @@ -0,0 +1,99 @@ +--- +title: box-direction +slug: Web/CSS/box-direction +tags: + - CSS + - Non-standard + - Reference + - box-direction +translation_of: Web/CSS/box-direction +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった box-direction は flex-direction に置き換えられたので、 -moz-box-direction は XUL でのみ使用されます。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の box-direction プロパティは、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。

+ +
/* キーワード値 */
+box-direction: normal;
+box-direction: reverse;
+
+/* グローバル値 */
+box-direction: inherit;
+box-direction: initial;
+box-direction: unset;
+
+ +

{{CSSInfo}}

+ +

構文

+ +

box-direction プロパティは以下の列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
normal
+
ボックスが内容を先頭 (左または上の端) から配置します。
+
reverse
+
ボックスが内容を末尾 (右または下の端) から配置します。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +
.example {
+  /* bottom-to-top layout */
+  -moz-box-direction: reverse;      /* Mozilla */
+  -webkit-box-direction: reverse;   /* WebKit */
+  box-direction: reverse;           /* 仕様書通り */
+}
+
+ +

メモ

+ +

配置目的で start で示されるボックスの端は、ボックスの方向に依存します。

+ + + + + + + + + + + + +
Horizontalleft
Verticaltop
+ +

start と反対側の辺は end で示します。

+ +

書字方向が要素の dir 属性を使用して設定されている場合は、このスタイルは無視されます。

+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +

{{Compat("css.properties.box-direction")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("box-orient")}}
    • +
  • {{CSSxRef("box-pack")}}
    • +
  • {{CSSxRef("box-align")}}
    • +
  • {{CSSxRef("flex-direction")}}
    • +
diff --git a/files/ja/web/css/box-flex-group/index.html b/files/ja/web/css/box-flex-group/index.html new file mode 100644 index 0000000000..16d0cc0655 --- /dev/null +++ b/files/ja/web/css/box-flex-group/index.html @@ -0,0 +1,78 @@ +--- +title: box-flex-group +slug: Web/CSS/box-flex-group +tags: + - CSS + - CSS Property + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/box-flex-group +--- +

{{CSSRef}}{{Non-standard_Header}}

+ +
+

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

box-flex-group は CSS のプロパティで、フレックスボックスの子要素をフレックスグループに割り当てます。

+ +
/* <integer> 値 */
+box-flex-group: 1;
+box-flex-group: 5;
+
+/* グローバル値 */
+box-flex-group: inherit;
+box-flex-group: initial;
+box-flex-group: unset;
+
+ +

フレックスグループに割り当てられたフレックス要素について、最初のフレックスグループは 1 であり、より高い値は下位のフレックスグループを示します。初期値は 1 です。ボックスの余白が分割されるとき、ブラウザーは最初にすべての要素が最初のフレックスグループに入ると想定します。そのグループ内のそれぞれの要素は、同じフレックスグループ内の他の要素のフレックス係数と比較した、その余蘊そのフレックス係数に基づいて余白が与えられます。グループ内のすべてのフレックスな子の余白が最大まで増加した場合は、前のフレックスグループから残っている余白を使用して、次のフレックスグループ内の子に対して処理が繰り返されます。フレックスグループがなくなり、まだ余白が残っている場合は、 {{cssxref("box-pack")}} プロパティに従って、追加の余白が包含ボックス内で配分されます。

+ +

推奨される子の余白が計算された後でボックスがあふれた場合は、追加の余白を追加するときに使用されるのと同様の方法で、フレックス要素からスペースが削除されます。各フレックスグループを順番に調べ、各要素のフレックス係数の比率に従ってスペースを削除します。要素は最小幅より小さくはなりません。

+ +

構文

+ +

box-flex-group プロパティは、任意の正の {{CSSxRef("<integer>")}} で指定します。

+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

シンプルな使用例

+ +

当初のフレックスボックスの仕様書では、 box-flex-group を使用してフレックスの子を異なるグループに割り当て、自由な空間を配分できるようになっていました。

+ +
article:nth-child(1) {
+  -webkit-box-flex-group: 1;
+}
+
+article:nth-child(2) {
+  -webkit-box-flex-group: 2;
+}
+ +

これは WebKit ベースのブラウザーのみが接頭辞つきで対応しましたが、仕様書のその後の版ではこれとは同等の機能ではありませんでした。代わりに、フレックスコンテナー内の空間の配分は、 {{cssxref("flex-basis")}}, {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} を使用して制御するようになっています。

+ +

仕様書

+ +

どの仕様書にも含まれていません。

+ +

ブラウザーの互換性

+ + + +
{{Compat("css.properties.box-flex-group")}}
+ +

関連情報

+ +
    +
  • {{CSSxRef("box-flex")}}
    • +
  • {{CSSxRef("box-ordinal-group")}}
    • +
  • {{CSSxRef("box-pack")}}
    • +
diff --git a/files/ja/web/css/box-flex/index.html b/files/ja/web/css/box-flex/index.html new file mode 100644 index 0000000000..5b179f5efb --- /dev/null +++ b/files/ja/web/css/box-flex/index.html @@ -0,0 +1,114 @@ +--- +title: box-flex +slug: Web/CSS/box-flex +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - box-flex +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の 'box-flex' (このプロパティの元になったもの) または '-webkit-box-flex' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の -moz-box-flex および -webkit-box-flex プロパティは、 -moz-box または -webkit-box が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。

+ +
/* <number> 値 */
+-moz-box-flex: 0;
+-moz-box-flex: 2;
+-moz-box-flex: 3.5;
+-webkit-box-flex: 0;
+-webkit-box-flex: 2;
+-webkit-box-flex: 3.5;
+
+/* Global values */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+-webkit-box-flex: inherit;
+-webkit-box-flex: initial;
+-webkit-box-flex: unset;
+
+ +
{{CSSInfo}}
+ +

構文

+ +

box-flex プロパティは {{CSSxRef("<number>")}} として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な余白の比率で拡張されます。

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>-moz-box-flex example</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>I will expand to fill extra space</p>
+      <p>I will not expand</p>
+    </div>
+  </body>
+</html>
+
+ +

メモ

+ +

包含ボックスは利用可能な余白を、中のそれぞれの要素におけるフレックス値の比率で拡張します。

+ +

フレックス値がゼロになっている中の要素は拡張されません。

+ +

フレックス値がゼロではない中の要素が一つしかない場合は、有効な余白を埋めるまで拡張されます。

+ +

同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。

+ +

フレックス値が要素の flex 属性を使用して設定された場合は、スタイルは無視されます。

+ +

包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの equalsize 属性を always の値に設定してください。この属性には対応する CSS プロパティはありません。

+ +

包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば height: 0) と、同じゼロより大きい box-flex の値 (例えば -moz-box-flex: 1) を設定することです。

+ +

仕様書

+ +

このプロパティは標準外の拡張です。古い CSS3 Flexbox 仕様書の草稿には box-flex プロパティが定義されていましたが、この草稿はその後で置き換えられました。

+ +

ブラウザーの対応

+ + + +
{{Compat("css.properties.box-flex")}}
+ +

関連情報

+ +
    +
  • {{CSSxRef("box-orient")}}
    • +
  • {{CSSxRef("box-pack")}}
    • +
  • {{CSSxRef("box-direction")}}
    • +
  • {{CSSxRef("flex")}}
    • +
diff --git a/files/ja/web/css/box-lines/index.html b/files/ja/web/css/box-lines/index.html new file mode 100644 index 0000000000..b2c01cbf1f --- /dev/null +++ b/files/ja/web/css/box-lines/index.html @@ -0,0 +1,78 @@ +--- +title: box-lines +slug: Web/CSS/box-lines +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - 標準外 +translation_of: Web/CSS/box-lines +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の box-lines プロパティは、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。

+ +
/* キーワード値 */
+box-lines: single;
+box-lines: multiple;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+
+ +

既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は box-lines プロパティを使用して変更することができます。既定値は single であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。

+ +

しかし、 multiple の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。

+ +

水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に1つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。

+ +

同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。

+ +

配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が 0 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。

+ +
{{CSSInfo}}
+ +

構文

+ +

box-lines プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
single
+
ボックスの要素は単一の行または列に配置されます。
+
multiple
+
ボックスの要素は複数の行または列に配置されます。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +
{{Compat("css.properties.box-lines")}}
+ +

関連情報

+ +
    +
  • {{CSSxRef("box-flex")}}
    • +
  • {{CSSxRef("box-flex-group")}}
    • +
  • {{CSSxRef("box-pack")}}
    • +
diff --git a/files/ja/web/css/box-ordinal-group/index.html b/files/ja/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..7dd95b2029 --- /dev/null +++ b/files/ja/web/css/box-ordinal-group/index.html @@ -0,0 +1,80 @@ +--- +title: box-ordinal-group +slug: Web/CSS/box-ordinal-group +tags: + - CSS + - CSS Property + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/box-ordinal-group +--- +
{{CSSRef}}{{Non-standard_Header}} +
+

これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

+
+
+ +

box-ordinal-group は CSS のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。

+ +
/* <integer> 値 */
+box-ordinal-group: 1;
+box-ordinal-group: 5;
+
+/* グローバル値 */
+box-ordinal-group: inherit;
+box-ordinal-group: initial;
+box-ordinal-group: unset;
+
+ +

順序付きグループは、ボックスの直接の子が現れる順序を制御するために、 {{CSSxRef("box-direction")}} プロパティとの組み合わせで使用されることがあります。 box-direction の計算値が normal である場合、ボックスは小さい番号が付いた順序付きグループから要素を表示し、それらの要素がコンテナーの左 (水平ボックスの場合) または上端 (垂直ボックスの場合) に現れます。同じ順序付きグループの要素は、ソースの文書ツリーに現れる順序で流れます。逆の方向では、順序付きグループは要素が逆に現れた場合を除き、順序付きグループは同じ順序で現れようとします。

+ +

構文

+ +

box-ordinal-group プロパティは任意の正の {{CSSxRef("<integer>")}} で指定されます。

+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

基本的な使用方法の例

+ +

古いバージョンの仕様では、 box-ordinal-group はフレックスコンテナー内の子の表ジュ順序を変更するために含まれていました。

+ +
article:nth-child(1) {
+  -webkit-box-ordinal-group: 2
+  -moz-box-ordinal-group: 2
+  box-ordinal-group: 2
+}
+
+article:nth-child(2) {
+  -webkit-box-ordinal-group: 1
+  -moz-box-ordinal-group: 1
+  box-ordinal-group: 1
+}
+ +

現在のフレックスボックスの同等の機能は {{cssxref("order")}} です。

+ +

仕様書

+ +

どの仕様書にも含まれていません。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.box-ordinal-group")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("box-flex")}}
    • +
  • {{CSSxRef("box-flex-group")}}
    • +
  • {{CSSxRef("box-pack")}}
    • +
diff --git a/files/ja/web/css/box-orient/index.html b/files/ja/web/css/box-orient/index.html new file mode 100644 index 0000000000..35708ac6e3 --- /dev/null +++ b/files/ja/web/css/box-orient/index.html @@ -0,0 +1,110 @@ +--- +title: box-orient +slug: Web/CSS/box-orient +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/box-orient +--- +
{{CSSRef}}{{Non-standard_header}} +

これはもともと CSS Flexible Box Layout Module の草稿でしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の box-orient プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。

+ +
/* キーワード値 */
+box-orient: horizontal;
+box-orient: vertical;
+box-orient: inline-axis;
+box-orient: block-axis;
+
+/* グローバル値 */
+box-orient: inherit;
+box-orient: initial;
+box-orient: unset;
+
+ +

例えば、 XUL の {{XULElem("box")}} や {{XULElem("hbox")}} 要素は既定で中身を水平にレイアウトするのに対し、XUL の {{XULElem("vbox")}} 要素は既定で中身を垂直にレイアウトします。

+ +

HTML DOM 要素は既定で中身をインライン軸に沿ってレイアウトします。この CSS プロパティは HTML 要素のうち CSS の {{CSSxRef("display")}} が {{CSSxRef("box")}} または {{CSSxRef("inline-box")}} の値であるものに対してのみ適用されます。

+ +

{{CSSInfo}}

+ +

構文

+ +

box-orient プロパティは以下の列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
horizontal
+
ボックスは、その内容を水平にレイアウトします。
+
vertical
+
ボックスは、その内容を垂直にレイアウトします。
+
inline-axis (HTML)
+
ボックスは、子をインライン軸に沿って表示します。
+
block-axis (HTML)
+
ボックスは、子をブロック軸に沿って表示します。
+
+ +

inline-axis と block-axis は書字方向に依存するキーワードであり、英語では、それぞれ horizontal と vertical に対応付けられます。

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

CSS

+ +
div.example {
+  display: -moz-box;                /* Mozilla */
+  display: -webkit-box;             /* WebKit */
+  display: box;                     /* 仕様書通り */
+
+  /* 子は垂直に向けられる */
+  -moz-box-orient: horizontal;      /* Mozilla */
+  -webkit-box-orient: horizontal;   /* WebKit */
+  box-orient: horizontal;           /* 仕様書通り */
+}
+
+ +

HTML

+ +
<div class="example">
+  <p>I will be to the left of my sibling.</p>
+  <p>I will be to the right of my sibling.</p>
+</div>
+ +

結果

+ +

box-orient プロパティは、例にある上記の二つの {{HTMLElement("p")}} セクションに作用して同じ行に表示するようにし、次のように表示します。

+ +

{{ EmbedLiveSample('Examples', 600, 50, '', 'Web/CSS/box-orient') }}

+ +

メモ

+ +

XUL 要素では、方向は要素の {{XULAttr("orient")}} 属性を使用して設定されるので、このスタイルは無視されます。

+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +

{{Compat("css.properties.box-orient")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("box-direction")}}
    • +
  • {{CSSxRef("box-pack")}}
    • +
  • {{CSSxRef("box-align")}}
    • +
  • {{CSSxRef("flex-direction")}}
    • +
diff --git a/files/ja/web/css/box-pack/index.html b/files/ja/web/css/box-pack/index.html new file mode 100644 index 0000000000..0a448172a9 --- /dev/null +++ b/files/ja/web/css/box-pack/index.html @@ -0,0 +1,144 @@ +--- +title: box-pack +slug: Web/CSS/box-pack +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - box-pack +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の -moz-box-pack および -webkit-box-pack プロパティは、 -moz-box または -webkit-box がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に余白がある場合のみ見ることができます。

+ +
/* キーワード値 */
+box-pack: start;
+box-pack: center;
+box-pack: end;
+box-pack: justify;
+
+/* グローバル値 */
+box-pack: inherit;
+box-pack: initial;
+box-pack: unset;
+
+ +

レイアウトの方向は要素の方向、 horizontal または vertical に依存します。

+ +
{{CSSInfo}}
+ +

構文

+ +

box-pack プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
start
+
ボックスは内容を先頭にまとめ、残りの余白を末尾に残します。
+
center
+
ボックスは内容を中央にまとめ、残りの余白を先頭と末尾に均等に分配します。
+
end
+
ボックスは内容を末尾にまとめ、残りの余白を先頭に残します。
+
justify
+
余白はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には余白が配置されません。子が一つだけであれば、値が start であるのと同様に扱われます。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* このボックスを子よりも高くし、
+     box-pack のための余裕を作る */
+  height: 300px;
+  /* このボックスを、水平方向に中央揃えされた
+     内容を表示するのに十分な幅にする */
+  width: 300px;
+
+  /* 子を垂直方向に並べる */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* 子をこのボックスの水平方向に中央揃えする */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* 子をこのボックスの下にまとめる */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* 子を親より狭くして、
+     box-align のための余裕を作る */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>I will be second from the bottom of div.example, centered horizontally.</p>
+  <p>I will be on the bottom of div.example, centered horizontally.</p>
+</div>
+
+ +
{{EmbedLiveSample('Examples', 310, 310)}}
+ +

メモ

+ +

まとめる目的で start で示されるボックスの端は、ボックスの向きと方向に依存します。

+ + + + + + + + + + + + + + + + + + + +
 NormalReverse
Horizontal左右
Vertical上下
+ +

start と反対の端は end で表されます。

+ +

まとめ方が要素の pack 属性を使用して設定されていた場合は、スタイルは無視されます。

+ +

仕様書

+ +

このプロパティは標準外ですが、 CSS3 Flexbox の早期の草稿に似たプロパティが現れ、仕様書のより新しい版で置き換えられました。

+ +

ブラウザーの対応

+ + + +
{{Compat("css.properties.box-pack")}}
+ +

関連情報

+ +
    +
  • {{CSSxRef("box-orient")}}
    • +
  • {{CSSxRef("box-direction")}}
    • +
  • {{CSSxRef("box-align")}}
    • +
diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html new file mode 100644 index 0000000000..241656e182 --- /dev/null +++ b/files/ja/web/css/box-shadow/index.html @@ -0,0 +1,192 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Property + - CSS Styles + - CSS スタイル + - CSS プロパティ + - CSS 背景と境界 + - HTML Colors + - Reference + - Shadows + - Styles + - Styling HTML + - box-shadow + - 'recipe:css-property' + - 影 +translation_of: Web/CSS/box-shadow +--- +
{{CSSRef}}
+ +

box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。

+ +
{{EmbedInteractiveExample("pages/css/box-shadow.html")}}
+ + + +

box-shadow プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数のテキストの影の場合と同様になります (最初に指定された影が最も手前に来ます)。

+ +

Box-shadow generator は、 box-shadow を対話的に作成できるツールです。

+ +

構文

+ +
/* キーワード値 */
+box-shadow: none;
+
+/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* 複数の影はカンマで区切る */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* グローバルキーワード */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+
+ +

単一の box-shadow の使用を指定してみます。

+ +
    +
  • 二つ、三つ、四つの <length> 値 + +
      +
    • 値が二つだけ与えられた場合、 <offset-x><offset-y> として解釈されます。
      • +
    • 値が三つ与えられた場合、 <blur-radius> として解釈されます。
      • +
    • 値が四つ与えられた場合、 <spread-radius> として解釈されます。
      • +
    +
    • +
  • 任意で、 inset キーワード
    • +
  • 任意で、 <color> の値
    • +
+ +

複数の影を指定するには、影をカンマで区切ったリストを提供します。

+ +

値

+ +
+
inset
+
指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
+ inset キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 inset な影は背景の上、境界や内容の下に描画されます。
+
<offset-x> <offset-y>
+
これら２つの {{cssxref("<length>")}} 値は、影のオフセットを設定します。 <offset-x> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <offset-y> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については {{cssxref("<length>")}} をご覧ください。
+ どちらのオフセットも 0 である場合、影は要素の裏に配置されます。 (<blur-radius> や <spread-radius> が指定されている場合は、ぼかし効果が与えられるでしょう。)
+
<blur-radius>
+
これは３番目の {{cssxref("<length>")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は 0 となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。
+
+
…影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。
+
+
<spread-radius>
+
4 番目に指定された {{cssxref("<length>")}} の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は 0 と解釈され、影の大きさは要素の大きさと同じままとなります。
+
<color>
+
可能なキーワード及び記述方法については {{cssxref("<color>")}} の値をご覧ください。
+ 値が指定されていない場合は、既定で {{cssxref("currentcolor")}} になります。
+
+ +

補間

+ +

リストの中 (none は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、及び (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし inset が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で inset と inset の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は transparent の色の影で補完し、すべての長さが 0 であり、 inset (の有無) が一致するものがあれば、より長いリストに一致します。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

3つの影の設定

+ +

この例では、3 つの影を使用しています。インセットシャドウ、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。

+ +
+

HTML

+ +
<blockquote><q>You may shoot me with your words,<br/>
+You may cut me with your eyes,<br/>
+You may kill me with your hatefulness,<br/>
+But still, like air, I'll rise.</q>
+<p>&mdash; Maya Angelou</p>
+</blockquote>
+ +

CSS

+ +
blockquote {
+  padding: 20px;
+  box-shadow:
+       inset 0 -3em 3em rgba(0,0,0,0.1),
+             0 0  0 2px rgb(255,255,255),
+             0.3em 0.3em 1em rgba(0,0,0,0.3);
+}
+
+ +

{{EmbedLiveSample('Setting_three_shadows', '300', '300')}}

+ +

offset と blur をゼロに設定

+ +
+

x-offset, y-offset, blur がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 border-radius が 0 に設定されていた場合、影の角は同様に尖った形になります。 border-radius にそれ以外の値を設定した場合、角は丸みを帯びます。。

+ +

影が隣接する要素と重ならないように、また、含まれるボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウはボックスモデルの寸法に影響を与えません。

+ +

HTML

+ +
<div><p>Hello World</p></div>
+ +

CSS

+ +
p {
+  box-shadow: 0 0 0 2em #F4AAB9,
+              0 0 0 4em #66CCFF;
+  margin: 4em;
+  padding:1em;
+}
+
+ +

{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.box-shadow")}}

+ +

関連情報

+ +
    +
  • {{cssxref("<color>")}} データ型
    • +
  • その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • CSS を用いた HTML 要素への色の適用
    • +
diff --git a/files/ja/web/css/box-sizing/index.html b/files/ja/web/css/box-sizing/index.html new file mode 100644 index 0000000000..345b21e0ab --- /dev/null +++ b/files/ja/web/css/box-sizing/index.html @@ -0,0 +1,137 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - Boxes + - CSS + - CSS Box Model + - CSS Property + - CSS プロパティ + - CSS ボックスモデル + - Reference + - border-box + - box model + - box-sizing + - content-box + - height + - size + - width +translation_of: Web/CSS/box-sizing +--- +

{{CSSRef}}

+ +

CSS の box-sizing プロパティは、要素の全体の幅と高さをどのように計算するのかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

CSS ボックスモデルの既定では、要素に割り当てられた width および height は、要素のコンテンツ領域のみに適用されます。要素に境界線やパディングがある場合、画面にレンダリングされる矩形の大きさは width および height にこれらを加えたものになります。つまり、 width および height を設定する際には、境界線やパディングが加えられるように値を調整しなければなりません。例えば、 width: 25%; で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。

+ +

box-sizing プロパティは上記の振る舞いを調整するために使用できます。

+ +
    +
  • content-box は CSS box-sizing の既定の振る舞いです。要素の幅を100ピクセルに設定した場合、要素のコンテンツ領域の幅は100ピクセルになり、境界線やパディングを加えたものが最終的にレンダリングされる幅になり、要素が100pxよりも広くなります。
    • +
  • border-box は、要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対するサイズ設定をもっと簡単になります。
    • +
+ +
+

注: 要素をレイアウトする際には、 box-sizing を border-box に設定しておくと便利です。これにより、要素の寸法の扱いが非常に簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 position: relative または position: absolute を使用する場合、 box-sizing: content-box を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。

+
+ +

構文

+ +

box-sizing プロパティは、以下のいずれか1つのキーワードを選択して定義します。

+ +

値

+ +
+
content-box
+
これは、 CSS 標準仕様で規定されている初期値および既定値です。 {{Cssxref("width")}} および {{Cssxref("height")}} プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含みません。例えば .box {width: 350px; border: 10px solid black;} は 370px の幅のボックスを描画します。
+
この場合、それぞれの要素の寸法は、 幅 = コンテンツの幅、高さ = コンテンツの高さ として計算されます（境界線やパディングの値を除く）。
+
border-box
+
{{Cssxref("width")}} および {{Cssxref("height")}} プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。なお、パディングと境界線はボックスの内側に置かれることに注意してください。例えば .box {width: 350px; border: 10px solid black;} は、ブラウザーでボックスの幅が 350px、コンテンツ領域の幅 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするために border-box を使用することはできません。
+
この場合、それぞれの要素の寸法は、 幅 = 境界線 + パディング + コンテンツの幅、 高さ = 境界線 + パディング + コンテンツの高さ として計算されます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

content-box と border-box のボックスサイズ

+ +

この例では、2つの box-sizing の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* 全体の幅: 160px + (2 * 20px) + (2 * 8px) = 216px
+     全体の高さ: 80px + (2 * 20px) + (2 * 8px) = 136px
+     コンテンツ領域の幅: 160px
+     コンテンツ領域の高さ: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* 全体の幅: 160px
+     全体の高さ: 80px
+     コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px
+     コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.box-sizing")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/break-after/index.html b/files/ja/web/css/break-after/index.html new file mode 100644 index 0000000000..2e846d7a87 --- /dev/null +++ b/files/ja/web/css/break-after/index.html @@ -0,0 +1,259 @@ +--- +title: break-after +slug: Web/CSS/break-after +tags: + - CSS + - CSS Fragmentation + - CSS Multi-column Layout + - CSS Property + - NeedsExample + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/break-after +--- +
{{CSSRef}}
+ +

break-after は CSS のプロパティで、生成されたボックスの後で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。

+ +
/* 一般の区切り値 */
+break-after: auto;
+break-after: avoid;
+break-after: always;
+break-after: all;
+
+/* 改ページ値 */
+break-after: avoid-page;
+break-after: page;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+
+/* 段区切り値 */
+break-after: avoid-column;
+break-after: column;
+
+/* 領域区切り値 */
+break-after: avoid-region;
+break-after: region;
+
+/* グローバル値 */
+break-after: inherit;
+break-after: initial;
+break-after: unset;
+
+ +

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の break-after の値、次の要素の {{cssxref("break-before")}} の値、包含要素の {{cssxref("break-inside")}} の値です。

+ +

区切られるかどうかを判断するために、以下の規則が適用されます。

+ +
    +
  1. 考慮される三つの値の中の何れかに区切りを強制する値 (always, left, right, page, column, region の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 break-before の値は break-after の値より優先し、それは更に break-inside よりも優先します)。
    2. +
  2. 考慮される三つの値の中に区切りを防止する値 (avoid, avoid-page, avoid-region, avoid-column の何れか) が含まれていた場合は、その場所で区切りは適用されません。
    3. +
+ +

強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 avoid に関する値に解決される要素の境界には追加されません。

+ +

構文

+ +

break-after プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +

一般の区切り値

+ +
+
auto
+
該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+
avoid
+
該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+
always {{experimental_inline}}
+
該当するボックスの直後で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。
+
all {{experimental_inline}}
+
該当するボックスの直後で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。
+
+ +

改ページ値

+ +
+
avoid-page
+
該当するボックスの直後の改ページを禁止します。
+
page
+
該当するボックスの直後で改ページを行います。
+
left
+
該当するボックスの直後で一つまたは二つの改ページを行い、次のページが左ページになるようにします。
+
right
+
該当するボックスの直後で一つまたは二つの改ページを行い、次のページが右ページになるようにします。
+
recto {{experimental_inline}}
+
該当するボックスの直後で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
+
verso {{experimental_inline}}
+
該当するボックスの直後で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)
+
+ +

段区切り値

+ +
+
avoid-column
+
該当するボックスの直後の段区切りを禁止します。
+
column
+
該当するボックスの直後で段区切りを行います。
+
+ +

領域区切り値

+ +
+
avoid-region {{experimental_inline}}
+
該当するボックスの直後の領域区切りを禁止します。
+
region {{experimental_inline}}
+
該当するボックスの直後で領域区切りを行います。
+
+ +

改ページの別名

+ +

互換性のため、古い {{cssxref("page-break-after")}} はブラウザーから break-after の別名として扱われます。これにより、 page-break-after を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +
+

ブラウザーにおいては always の値は page-break-* において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では always の値ではなく page の別名となっています。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

きれいに段に分割

+ +

次の例では、すべての段にまたがる <h1> (column-span: all を使用して実現) と、一連の <h2> と段落を column-width: 200px を使用して段組みレイアウトしたコンテナーを用意しています。

+ +

既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 break-after: column を <p> 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に <h2> がきちんと配置されます。

+ +

HTML

+ +
<article>
+  <h1>Main heading</h1>
+
+  <h2>Subheading</h2>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p>
+
+  <h2>Subheading</h2>
+
+  <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p>
+
+  <h2>Subheading</h2>
+
+  <p>Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis. Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat egestas tellus.
+
+  <h2>Subheading</h2>
+
+  <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p>
+</article>
+ +

CSS

+ +
html {
+  font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+  font-size: 3rem;
+  letter-spacing: 2px;
+  column-span: all;
+}
+
+h2 {
+  font-size: 1.2rem;
+  color: red;
+  letter-spacing: 1px;
+}
+
+p {
+  line-height: 1.5;
+  break-after: column;
+}
+
+article {
+  column-width: 200px;
+  gap: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Breaking_into_neat_columns', '100%', 600)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#break-between', 'break-after')}}{{Spec2('CSS3 Fragmentation')}}recto および verso キーワードを追加。このプロパティのメディア種別を paged から {{xref_cssvisual}} に変更。異なる種類の区切りを持つ区切りアルゴリズムを定義した。
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}{{Spec2('CSS3 Regions')}}領域区切りを扱うようにプロパティを拡張した。 avoid-region および region キーワードを追加した。
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-after')}}{{Spec2('CSS3 Multicol')}}初回定義。 CSS 2.1 の {{cssxref("page-break-after")}} プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。
+ +

ブラウザーの互換性

+ + + +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.break-after.multicol_context")}}

+ +

ページメディアでの対応

+ +

{{Compat("css.properties.break-after.paged_context")}}

diff --git a/files/ja/web/css/break-before/index.html b/files/ja/web/css/break-before/index.html new file mode 100644 index 0000000000..f52d6657d0 --- /dev/null +++ b/files/ja/web/css/break-before/index.html @@ -0,0 +1,193 @@ +--- +title: break-before +slug: Web/CSS/break-before +tags: + - CSS + - CSS プロパティ + - CSS 断片化 + - CSS 段組みレイアウト + - Reference +translation_of: Web/CSS/break-before +--- +
{{CSSRef}}
+ +

CSS の break-before プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。

+ +
/* 一般の区切り値 */
+break-before: auto;
+break-before: avoid;
+break-before: always;
+break-before: all;
+
+/* 改ページ値 */
+break-before: avoid-page;
+break-before: page;
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* 段区切り値 */
+break-before: avoid-column;
+break-before: column;
+
+/* 領域区切り値 */
+break-before: avoid-region;
+break-before: region;
+
+/* グローバル値 */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+
+ +

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の break-before の値、包含要素の {{cssxref("break-inside")}} の値です。

+ +

区切られるかどうかを判断するために、以下の規則が適用されます。

+ +
    +
  1. 考慮される三つの値の中の何れかに区切りを強制する値 (always, left, right, page, column, region の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 break-before の値は break-after の値より優先し、それは更に break-inside よりも優先します)。
    2. +
  2. 考慮される三つの値の中に区切りを防止する値 (avoid, avoid-page, avoid-region, avoid-column の何れか) が含まれていた場合は、その場所で区切りは適用されません。
    3. +
+ +

強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 avoid に関する値に解決される要素の境界には追加されません。

+ +

{{cssinfo}}

+ +

構文

+ +

break-before プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +

一般の区切り値

+ +
+
auto
+
該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+
avoid
+
該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+
always {{experimental_inline}}
+
該当するボックスの直前で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。
+
all {{experimental_inline}}
+
該当するボックスの直前で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。
+
+ +

改ページ値

+ +
+
avoid-page
+
該当するボックスの直前の改ページを禁止します。
+
page
+
該当するボックスの直前で改ページを行います。
+
left
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページになるようにします。
+
right
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページになるようにします。
+
recto {{experimental_inline}}
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
+
verso {{experimental_inline}}
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)
+
+ +

段区切り値

+ +
+
avoid-column
+
該当するボックスの直前の段区切りを禁止します。
+
column
+
該当するボックスの直前で段区切りを行います。
+
+ +

領域区切り値

+ +
+
avoid-region {{experimental_inline}}
+
該当するボックスの直前の領域区切りを禁止します。
+
region {{experimental_inline}}
+
該当するボックスの直前で領域区切りを行います。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

改ページの別名

+ +

互換性のため、古い {{cssxref("page-break-before")}} はブラウザーから break-before の別名として扱われます。これにより、 page-break-before を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-beforebreak-before
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +
+

ブラウザーにおいては always の値は page-break-* において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では always の値ではなく page の別名となっています。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}{{Spec2('CSS3 Fragmentation')}}recto および verso キーワードを追加。このプロパティのメディア種別を paged から {{xref_cssvisual}} に変更。異なる種類の区切りを持つ区切りアルゴリズムを定義した。
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}{{Spec2('CSS3 Regions')}}領域区切りを扱うようにプロパティを拡張した。 avoid-region および region キーワードを追加した。
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}{{Spec2('CSS3 Multicol')}}初回定義。 CSS 2.1 の {{cssxref("page-break-before")}} プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。
+ +

ブラウザーの対応

+ + + +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.break-before.multicol_context")}}

+ +

ページ化メディアでの対応

+ +

{{Compat("css.properties.break-before.paged_context")}}

diff --git a/files/ja/web/css/break-inside/index.html b/files/ja/web/css/break-inside/index.html new file mode 100644 index 0000000000..3f0781500a --- /dev/null +++ b/files/ja/web/css/break-inside/index.html @@ -0,0 +1,207 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +tags: + - CSS + - CSS Fragmentation + - CSS Multi-column Layout + - CSS Property + - NeedsExample + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/break-inside +--- +
{{CSSRef}}
+ +

break-inside は CSS のプロパティで、生成されたボックスの途中で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。

+ +
/* キーワード値 */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* グローバル値 */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+
+ +

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の {{cssxref("break-before")}} の値、包含要素の break-inside の値です。

+ +

区切られるかどうかを判断するために、以下の規則が適用されます。

+ +
    +
  1. 考慮される三つの値の中の何れかに区切りを強制する値 (always, left, right, page, column, region の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 break-before の値は break-after の値より優先し、それは更に break-inside よりも優先します)。
    2. +
  2. 考慮される三つの値の中に区切りを防止する値 (avoid, avoid-page, avoid-region, avoid-column の何れか) が含まれていた場合は、その場所で区切りは適用されません。
    3. +
+ +

強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 avoid に関する値に解決される要素の境界には追加されません。

+ +

構文

+ +

break-inside プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +
+
auto
+
主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+
avoid
+
主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+
avoid-page
+
主ボックスの途中の改ページを禁止します。
+
avoid-column
+
主ボックスの途中の段区切りを禁止します。
+
avoid-region {{experimental_inline}}
+
主ボックスの途中の領域区切りを禁止します。
+
+ +

改ページの別名

+ +

互換性のため、ブラウザーは古い {{cssxref("page-break-inside")}} を break-inside の別名として扱います。これにより、 page-break-inside を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+ + + + + + + + + + + + + + + + + + +
page-break-insidebreak-inside
autoauto
avoidavoid
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

図の中の改行を防ぐ

+ +

次の例では、すべての段にまたがる <h1> (column-span: all を使用して実現) と、 column-width: 200px を使用して複数の段に配置された一連の段落を含むコンテナーを用意しています。また、画像とキャプションを含む <figure> もあります。

+ +

既定では、画像とキャプションの間に改行が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 break-inside: avoid を <figure> に設定しています。

+ +

HTML

+ +
<article>
+  <h1>Main heading</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p>
+
+  <figure>
+    <img src="https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png">
+    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
+  </figure>
+
+  <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p>
+
+  <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p>
+</article>
+ +

CSS

+ +
html {
+  font-family: helvetica, arial, sans-serif;
+}
+
+body {
+  width: 80%;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 3rem;
+  letter-spacing: 2px;
+  column-span: all;
+}
+
+h1 + p {
+  margin-top: 0;
+}
+
+p {
+  line-height: 1.5;
+  break-after: column;
+}
+
+figure {
+  break-inside: avoid;
+}
+
+img {
+  max-width: 70%;
+  display: block;
+  margin: 0 auto;
+}
+
+figcaption {
+  font-style: italic;
+  font-size: 0.8rem;
+  width: 70%;
+}
+
+article {
+  column-width: 200px;
+  gap: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Avoiding_breaking_inside_a_figure', '100%', 600)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}変更なし。
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}領域区切りを扱うようにプロパティを拡張した。
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.break-inside", 4)}}

+ +

互換性のメモ

+ +

Forefox 65 以前では、より古い {{cssxref("page-break-inside")}} プロパティがページと同様に段の分割も防止するするよう動作します。後方互換性のために両方のプロパティを追加してください。

+ +

古い WebKit ベースのブラウザーでは、接頭辞付きの -webkit-column-break-inside プロパティで段区切りを制御することができます。

diff --git a/files/ja/web/css/calc()/index.html b/files/ja/web/css/calc()/index.html new file mode 100644 index 0000000000..2eb9293a88 --- /dev/null +++ b/files/ja/web/css/calc()/index.html @@ -0,0 +1,167 @@ +--- +title: calc() +slug: Web/CSS/calc() +tags: + - CSS + - CSS 値と単位 + - CSS 関数 + - calc + - ウェブ + - リファレンス + - レイアウト +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

CSS の calc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, {{cssxref("<integer>")}} が利用できる場所ならば使用できます。

+ +
{{EmbedInteractiveExample("pages/css/function-calc.html")}}
+ + + +

構文

+ +
/* プロパティ: calc(式) */
+width: calc(100% - 80px);
+ +

calc() 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な演算子の優先順位の規則を使用します。

+ +
+
+
+
加算です。
+
-
+
減算です。
+
*
+
乗算です。引数の少なくとも1つは {{cssxref("<number>")}} でなければなりません。
+
/
+
除算です。右側は {{cssxref("<number>")}} でなければなりません。
+
+ +

式のオペランドは任意の {{cssxref("<length>")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。

+ +

メモ

+ +
    +
  • + 演算子と - 演算子は前後に空白文字をつける必要があります。たとえば、 calc(50% -8px) と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 calc(50% - 8px) はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 calc(8px + -50%) は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。
    • +
  • * 演算子と / 演算子には前後の空白文字は必要ありませんが、こちらにも空白文字を用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。
    • +
  • ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。
    • +
  • 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 auto が指定されたものとして扱います。
    • +
  • calc() 関数を入れ子にすることは許可されており、内側のものは単なる括弧として扱われます。
    • +
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

余白をつけてオブジェクトを画面に配置する

+ +

calc() はマージン設定を持つボックス配置を容易にします。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は40ピクセル空けます。

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+ +
<div class="banner">これはバナーです！</div>
+ +

{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}

+ +

フォーム項目のコンテナーへの自動フィット

+ +

calc() はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。

+ +

いくつかの CSS を見てみましょう。

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

ここで、フォームはウィンドウの取り得る幅の1/6を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 calc() を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}

+ +

入れ子の calc() と CSS 変数

+ +

calc() で CSS 変数を使用することもできます。以下のコードを見てみてください。

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ +

すべての変数が展開された後、 widthC の値は calc( calc( 100px / 2) / 2) になります。この値が .foo の width プロパティに割り当てられるとき、内部にあるすべての calc() は (入れ子の深さにかかわらず) 単なる括弧になり、width プロパティの値は最終的に calc( ( 100px / 2) / 2)、すなわち 25px になります。要するに、calc() の内部にある calc() は単なる括弧と同等です。

+ +

アクセシビリティの考慮事項

+ +

calc() をテキストの大きさを制御するために使用するとき、値の一つに相対的な長さの単位を含むことを確認してください。

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

これによって、ページが拡大縮小されたときにテキストの寸法が拡大縮小されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.calc")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/caption-side/index.html b/files/ja/web/css/caption-side/index.html new file mode 100644 index 0000000000..8628282eb2 --- /dev/null +++ b/files/ja/web/css/caption-side/index.html @@ -0,0 +1,140 @@ +--- +title: caption-side +slug: Web/CSS/caption-side +tags: + - CSS + - CSS Property + - CSS Tables + - Reference +translation_of: Web/CSS/caption-side +--- +
{{CSSRef}}
+ +

caption-side は、表 ({{htmlelement("table")}}) の {{HTMLElement("caption")}} の配置位置を指定する CSS プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* 方向を示す値 */
+caption-side: top;
+caption-side: bottom;
+
+/* 警告: 非標準の値 */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+/* グローバル値 */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+
+ +

このプロパティの値は、表の {{cssxref('writing-mode')}} に対して相対的です。

+ +

値

+ +
+
top
+
キャプションボックスを表の上に配置することを示すキーワードです。
+
bottom
+
キャプションボックスを表の下に配置することを示すキーワードです。
+
left {{non-standard_inline}}
+
キャプションボックスを表の左に配置することを示すキーワードです。
+
{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}
+
right {{non-standard_inline}}
+
キャプションボックスを表の右に配置することを示すキーワードです。
+
{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}
+
top-outside {{non-standard_inline}}
+
キャプションボックスを表の上に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
+ {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 top について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}
+
bottom-outside {{non-standard_inline}}
+
キャプションボックスを表の下に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
+ {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 bottom について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}
+
+ +

形式構文

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<table class="top">
+  <caption>Caption ABOVE the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+<br>
+
+<table class="bottom">
+  <caption>Caption BELOW the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
.top caption {
+  caption-side: top;
+}
+
+.bottom caption {
+  caption-side: bottom;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+}
+
+ +

出力

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}{{Spec2('CSS Logical Properties')}}値 top および bottom は、writing-mode の値に対して相対的であることを定義
{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}{{Spec2('CSS2.1')}}最初の定義
+ +

ブラウザ実装状況

+ + + +

{{Compat("css.properties.caption-side")}}

diff --git a/files/ja/web/css/caret-color/index.html b/files/ja/web/css/caret-color/index.html new file mode 100644 index 0000000000..9ec9500f78 --- /dev/null +++ b/files/ja/web/css/caret-color/index.html @@ -0,0 +1,124 @@ +--- +title: caret-color +slug: Web/CSS/caret-color +tags: + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - HTML 整形 + - HTML 色 + - Reference + - contenteditable + - テキスト編集 + - 入力 + - 編集 +translation_of: Web/CSS/caret-color +--- +
{{CSSRef}}
+ +

CSS の caret-color プロパティは、 {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中ので、次に入力された文字が挿入される位置を示す視覚的なマーカーである入力キャレットの色を設定します。キャレットは {{HTMLElement("input")}} 要素や {{htmlattrxref("contenteditable")}} 属性が付いた要素に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。

+ +
{{EmbedInteractiveExample("pages/css/caret-color.html")}}
+ + + +

なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 {{cssxref("cursor")}} プロパティが auto のときにテキスト上に移動した場合や、 cursor プロパティが text または vertical-text の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。

+ +

構文

+ +
/* キーワード値 */
+caret-color: auto;
+caret-color: transparent;
+caret-color: currentColor;
+
+/* <color> 値 */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+
+ +

値

+ +
+
auto
+
ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、ユーザーエージェントは視認性や周囲のコンテンツとのコントラストを高めるために、 currentcolor、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 +
+

メモ: ユーザーエージェントは auto の値に currentcolor (通常はアニメーション可能) を使用することがありますが、 auto はトランジションやアニメーションで補完されません。

+
+
+
{{cssxref("<color>")}}
+
キャレットの色です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<input value="この入力欄は既定のキャレットを使用します。" size="64"/>
+<input class="custom" value="キャレットが独自の色です！" size="64"/>
+<p contenteditable class="custom">この段落は編集可能であり、
+   同様にキャレットが独自の色です！</p>
+ +

CSS

+ +
input {
+  caret-color: auto;
+  display: block;
+  margin-bottom: .5em;
+}
+
+input.custom {
+  caret-color: red;
+}
+
+
+p.custom {
+  caret-color: green;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', 500, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}{{Spec2("CSS3 UI")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.caret-color")}}

+ +

関連情報

+ +
    +
  • {{HTMLElement("input")}} 要素
    • +
  • 要素のテキストを編集可能にする HTML の {{htmlattrxref("contenteditable")}} 属性
    • +
  • Making content editable
    • +
  • Applying color to HTML elements using CSS
    • +
  • {{cssxref("<color>")}} データ型
    • +
  • その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • +
diff --git a/files/ja/web/css/cascade/index.html b/files/ja/web/css/cascade/index.html new file mode 100644 index 0000000000..fe6ecec340 --- /dev/null +++ b/files/ja/web/css/cascade/index.html @@ -0,0 +1,211 @@ +--- +title: CSS カスケード入門 +slug: Web/CSS/Cascade +tags: + - CSS + - CSS カスケードと継承 + - Reference + - カスケード + - ガイド + - スタイル + - スタイルシート + - レイアウト +translation_of: Web/CSS/Cascade +--- +
{{CSSRef}}
+ +

カスケードは、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これはカスケーディングスタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 {{Glossary("CSS")}} 宣言をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。

+ +

どの CSS エンティティがカスケードに関係するか

+ +

CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む @-規則、例えば記述子を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 @font-face は font-family 記述子で識別されます。いくつかの @font-face 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な @font-face が考慮されます。

+ +

大部分の @-規則 — {{cssxref("@media")}}, {{cssxref("@document")}}, {{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 @font-face と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。

+ +

最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。

+ +

CSS 宣言のオリジン

+ +

CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、 {{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}, {{anch("Author stylesheets", "ページ作成者スタイルシート")}}, {{anch("User stylesheets", "ユーザースタイルシート")}} など、さまざまなものに由来します。

+ +

スタイルシートはこれらの異なる起源に由来しますが、それらは範囲が重複しています。これを機能させるために、カスケードアルゴリズムはそれらの相互作用を定義します。

+ +

ユーザーエージェントスタイルシート

+ +

ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートにはユーザーエージェントスタイルシートという名前が付けられています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。

+ +

一部のブラウザーでは、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。

+ +

ページ作成者スタイルシート

+ +

ページ作成者スタイルシートは、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。

+ +

ユーザースタイルシート

+ +

ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自のユーザースタイルシートを使用して、多くのブラウザーでスタイルを上書きすることを選択できます。

+ +

カスケード順

+ +

カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。

+ +
    +
  1. 最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な media @-規則の一部である規則を意味します。
    2. +
  2. 次に、これらのルールをその重要度、つまり、 !important が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる !important の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    起源重要性
    1ユーザーエージェントnormal
    2ユーザーnormal
    3作成者normal
    4アニメーション
    5ユーザーエージェント!important
    6作成者!important
    7ユーザー!important
    8トランジション
    +
    3. +
  3. 同等の場合は、どれを選択するかに値の詳細度が考慮されます。
    4. +
+ +

スタイルの初期化

+ +

コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ {{cssxref("all")}} を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。

+ +

allでは、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。

+ +

CSS アニメーションとカスケード

+ +

CSS アニメーションは、 {{cssxref("@keyframes")}} @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混合することはありません。

+ +

複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。

+ +

例

+ +

さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。

+ +

ユーザーエージェント CSS:

+ +
li { margin-left: 10px }
+ +

作成者 CSS 1:

+ +
li { margin-left: 0 } /* 初期化のため */
+ +

作成者 CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

ユーザー CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

この場合、 li および .specific 規則内の宣言を適用する必要があります。 !importantとして宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。

+ +

ここでは3つの宣言が競合しています。

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。

+ +
margin-left: 3px
+ +

カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Cascade")}}{{Spec2("CSS4 Cascade")}}プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。
{{SpecName("CSS3 Cascade")}}{{Spec2("CSS3 Cascade")}}カスケードオリジンの上書を削除。 W3C 標準で使用されなかったため。
{{SpecName("CSS2.1", "cascade.html", "the cascade")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#the-cascade", "the cascade")}}{{Spec2("CSS1")}}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/child_combinator/index.html b/files/ja/web/css/child_combinator/index.html new file mode 100644 index 0000000000..dc29194c31 --- /dev/null +++ b/files/ja/web/css/child_combinator/index.html @@ -0,0 +1,93 @@ +--- +title: 子結合子 +slug: Web/CSS/Child_combinator +tags: + - CSS + - Reference + - Selector + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

子結合子 (child combinator) (>) は2つの CSS セレクターの間に配置されます。2つ目のセレクターが1つ目のセレクターの直接の子要素の場合にのみマッチします。

+ +
/* "my-things"クラスを持つリストの子要素であるリスト項目 */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

2つ目のセレクターに一致する要素は、1つ目のセレクターに一致する要素の直接の子要素でなければなりません。これは、子孫結合子が1つ目のセレクターに一致する要素が祖先に存在する2つ目のセレクターに一致するすべての要素に一致するのに比べて厳密です。

+ +

構文

+ +
セレクター1 > セレクター2 { スタイルプロパティ }
+
+ +

例

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Span #1, in the div.
+    <span>Span #2, in the span that's in the div.</span>
+  </span>
+</div>
+<span>Span #3, not in the div at all.</span>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", "100%", 100)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#child-combinators", "child combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}}{{Spec2("CSS3 Selectors")}}変更なし
{{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.child")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/clamp()/index.html b/files/ja/web/css/clamp()/index.html new file mode 100644 index 0000000000..e8f18e5e57 --- /dev/null +++ b/files/ja/web/css/clamp()/index.html @@ -0,0 +1,123 @@ +--- +title: clamp() +slug: Web/CSS/clamp() +tags: + - CSS + - CSS Function + - CSS 関数 + - Calculate + - Compute + - Function + - Layout + - Reference + - Web + - clamp + - ウェブ + - レイアウト + - 計算 + - 関数 +translation_of: Web/CSS/clamp() +--- +
{{CSSRef}}
+ +

clamp() は CSS の関数で、値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 clamp() 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。

+ +

clamp(MIN, VAL, MAX) は {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX)) と同等です。

+ +
/* property: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);
+ +

上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。

+ +

上記の場合で em が 16px の幅であると仮定しましょう。

+ +
width: clamp(10px, 4em, 80px);
+/* 1em = 16px, 4em = 16px * 4 = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) は max(MIN, min(VAL, MAX))) と同等 */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
+ +

構文

+ +

clamp() 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。

+ +

最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。

+ +

推奨値は、結果が最小値と最大値の間である限り使用される値の式です。

+ +

最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。

+ +

式は計算関数 (詳しくは {{CSSxRef("calc")}} を参照)、リテラル値、 {{CSSxRef("attr", "attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min")}} および {{CSSxRef("max")}} 関数などです。数式としては、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。

+ +

式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。

+ +

メモ

+ +
    +
  • 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 auto がして甥されたものとして扱われることがあります。
    • +
  • 式の値として max() および min() 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。
    • +
  • 式は加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。
    • +
  • {{CSSxRef("min")}} および {{CSSxRef("max")}} を clamp() 関数の中で使用したくなるでしょう。
    • +
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

フォントへの最小値と最大値の設定

+ +

clamp() によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 Fluid Typography の中のコードと同じ効果を持ちます。

+ +
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+
+ +
<p>
+If 2.5vw is less than 1rem, the font-size will be 1rem.
+If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
+Otherwise, it will be 2.5vw.
+</p>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}

+ +

アクセシビリティの考慮事項

+ +

TBD

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.clamp")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("calc")}}
    • +
  • {{CSSxRef("max")}}
    • +
  • {{CSSxRef("min")}}
    • +
  • CSS Values
    • +
diff --git a/files/ja/web/css/class_selectors/index.html b/files/ja/web/css/class_selectors/index.html new file mode 100644 index 0000000000..f5acf09c25 --- /dev/null +++ b/files/ja/web/css/class_selectors/index.html @@ -0,0 +1,107 @@ +--- +title: クラスセレクター +slug: Web/CSS/Class_selectors +tags: + - CSS + - Reference + - セレクター +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

CSS のクラスセレクター (class selector) は、 {{htmlattrxref("class")}} 属性の内容に基づいて要素を選択します。

+ +
/* class="spacious" であるすべての要素 */
+.spacious {
+  margin: 2em;
+}
+
+/* class="spacious" であるすべての <li> 要素 */
+li.spacious {
+  margin: 2em;
+}
+
+/* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて */
+/* 例えば、 class="elegant retro spacious" */
+li.spacious.elegant {
+  margin: 2em;
+}
+
+ +

構文

+ +
.クラス名 { スタイルプロパティ }
+ +

なお、これは以下の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です。

+ +
[class~=クラス名] { スタイルプロパティ }
+ +

例

+ +

CSS

+ +
.red {
+  color: #f33;
+}
+
+.yellow-bg {
+  background: #ffa;
+}
+
+.fancy {
+  font-weight: bold;
+  text-shadow: 4px 4px 3px #77f;
+}
+
+ +

HTML

+ +
<p class="red">この段落は赤い文字です。</p>
+<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p>
+<p class="red fancy">この段落は「fancy」スタイルで赤い文字です。</p>
+<p>これは単なる普通の段落です。</p>
+
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}変更なし
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("css.selectors.class")}}

diff --git a/files/ja/web/css/clear/index.html b/files/ja/web/css/clear/index.html new file mode 100644 index 0000000000..1c90db6387 --- /dev/null +++ b/files/ja/web/css/clear/index.html @@ -0,0 +1,237 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。 clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

非浮動ブロックに適用された場合は、その要素の境界の辺が、関係するすべての浮動要素のマージンの辺より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。

+ +

一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。

+ +

解除されることに関連する浮動要素は、その前の浮動要素と同一のブロック整形コンテキスト内の先行する浮動要素です。

+ +
+

メモ: 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは clearfix と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} 疑似要素 に clear を使います。

+ +
#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+ +

構文

+ +
/* キーワード値 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* グローバル値 */
+clear: inherit;
+clear: initial;
+clear: unset;
+
+ +

値

+ +
+
none
+
要素は先行するフロートと切り離されず、下に移動しません。
+
left
+
要素は先行する 左の フロートと切り離され、下に移動します。
+
right
+
要素は先行する 右の フロートと切り離され、下に移動します。
+
both
+
要素は先行する 左右両方の フロートと切り離され、下に移動します。
+
inline-start
+
要素は、先行する包含ブロックの始端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では左側、rtl 表記では右側のフロートです。
+
inline-end
+
要素は、先行する包含ブロックの終端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では右側、rtl 表記では左側のフロートです。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

clear: left

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+
+ +

{{ EmbedLiveSample('clear-left','100%','250') }}

+ +

clear: right

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+ +

{{ EmbedLiveSample('clear-right','100%','250') }}

+ +

clear: both

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}
+ +

{{ EmbedLiveSample('clear-both','100%','300') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}重要な変更はないが、細部が明瞭になった
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.clear")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/clip-path/index.html b/files/ja/web/css/clip-path/index.html new file mode 100644 index 0000000000..c469fec575 --- /dev/null +++ b/files/ja/web/css/clip-path/index.html @@ -0,0 +1,623 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - Web + - 'recipe:css-property' +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}
+ +

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

+ +
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+clip-path: none;
+
+/* <clip-source> 値 */
+clip-path: url(resources.svg#c1);
+
+/* <geometry-box> 値 */
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* <basic-shape> 値 */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* ボックスおよびシェイプ値の組み合わせ */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* グローバル値 */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ +

clip-path プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。

+ +

値

+ +
+
<clip-source>
+
SVG の {{SVGElement("clipPath")}} 要素を参照する {{cssxref("<url>")}} です。
+
{{cssxref("<basic-shape>")}}
+
<geometry-box> 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして border-box が使用されます。
+
<geometry-box>
+
<basic-shape> と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。
+
+
+
margin-box
+
マージンボックスを参照ボックスとして使用します。
+
border-box
+
境界ボックスを参照ボックスとして使用します。
+
padding-box
+
パディングボックスを参照ボックスとして使用します。
+
content-box
+
コンテンボックスを参照ボックスとして使用します。
+
fill-box
+
オブジェクトの境界ボックスを参照ボックスとして使用します。
+
stroke-box
+
ストロークの境界ボックスを参照ボックスとして使用します。
+
view-box
+
最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に {{SVGAttr("viewBox")}} 属性が指定されている場合、参照ボックスは viewBox 属性で指定された座標系の原点に位置し、参照ボックスの寸法は viewBox 属性の width および height 値に設定されます。
+
+
+
none
+
クリッピングパスは作成されません。
+
+ +
+

注: 計算値が none 以外の場合は、新しい重ね合わせコンテキストを生成します。これは、 {{cssxref("opacity")}} が 1 以外の値の場合と同様です。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML と SVG の比較

+ + + +

{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}}

+ +

完全な例

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Complete_example", 230, 250)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Shapes 2", "#supported-basic-shapes", 'path')}}{{Spec2('CSS Shapes 2')}}path() を定義。
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}適用範囲を HTML 要素に拡張。 clip-path プロパティが非推奨の {{cssxref("clip")}} プロパティを置き換えた。
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}初回定義 (SVG 要素のみに適用)。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.clip-path")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/clip/index.html b/files/ja/web/css/clip/index.html new file mode 100644 index 0000000000..cc9e9a3e1b --- /dev/null +++ b/files/ja/web/css/clip/index.html @@ -0,0 +1,132 @@ +--- +title: clip +slug: Web/CSS/clip +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/clip +--- +
{{CSSRef}}
+ +

clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。

+ +
/* キーワード値 */
+clip: auto;
+
+/* <shape> 値 */
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* グローバル値 */
+clip: inherit;
+clip: initial;
+clip: unset;
+ +

構文

+ +
+

注: 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。

+
+ +

値

+ +
+
{{cssxref("<shape>")}}
+
rect(<top>, <right>, <bottom>, <left>) 形式の矩形の {{cssxref("<shape>")}} です。 <top> と <bottom> は、ボックス境界の上辺からのオフセットを表します。<right> と <left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。
+
<top>、<right>、<bottom>、<left> の値は {{cssxref("<length>")}} または auto のいずれかです。auto が指定されると、その辺のボックス境界で切り取られます。
+
auto
+
要素はクリップされません (既定値)。ボックス境界で切り取る rect(auto, auto, auto, auto) とはまったく異なることに注意してください。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

画像の切り抜き

+ +

CSS

+ +
.dotted-border {
+  border: dotted;
+  position: relative;
+  width: 536px;
+  height: 350px;
+}
+
+#top-left,
+#middle,
+#bottom-right {
+  position: absolute;
+  top: 0;
+}
+
+#top-left {
+  left: 360px;
+  clip: rect(0, 175px, 113px, 0);
+}
+
+
+#middle {
+  left: 280px;
+  clip: rect(119px, 255px, 229px, 80px);
+}
+
+#bottom-right {
+  left: 200px;
+  clip: rect(235px, 335px, 345px, 160px);
+}
+ +

HTML

+ +
<p class="dotted-border">
+  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
+  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
+  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
+  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
+</p>
+ +

結果

+ +

{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}clip プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.clip")}}

+ +

関連情報

+ +
    +
  • このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。
    • +
  • 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}}
    • +
diff --git a/files/ja/web/css/color-adjust/index.html b/files/ja/web/css/color-adjust/index.html new file mode 100644 index 0000000000..a6eac63a08 --- /dev/null +++ b/files/ja/web/css/color-adjust/index.html @@ -0,0 +1,125 @@ +--- +title: color-adjust +slug: Web/CSS/color-adjust +tags: + - Adjusting Colors + - CSS + - CSS Colors + - CSS Property + - HTML Colors + - HTML Styles + - Layout + - Non-standard + - Reference + - Styling HTML + - Styling text + - Web + - color-adjust + - 'recipe:css-property' +translation_of: Web/CSS/color-adjust +--- +
{{CSSRef}}
+ +

color-adjust は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。

+ +

構文

+ +
color-adjust: economy;
+color-adjust: exact;
+ +

color-adjust プロパティの値は、以下のキーワードのうちの一つでなければなりません。

+ +

値

+ +
+
economy
+
ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。
+
exact
+
要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。
+
+ +

使用上の注意

+ +

ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。

+ +
    +
  • コンテンツがテキストや背景色を使用しているため、出力機器上では読みやすさの点で似たような色になってしまう。
    • +
  • 出力デバイスがプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。
    • +
  • ページを印刷するとき、ブラウザは、暗い背景の明るい色のテキストを、白い背景の濃いテキストに置き換えることを望むかもしれません。
    • +
+ +

ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているおぷh損は、 color-adjust の値よりも優先されます。言い換えれば、 color-adjust が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で color-adjust をどのように扱うかをそれ自身で決定することが許されています。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

低コントラストの維持

+ +

この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 color-adjust: exact を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。

+ +

CSS

+ +
.my-box {
+  background-color: black;
+  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  color: #900;
+  width: 15rem;
+  height: 6rem;
+  text-align: center;
+  font: 24px "Helvetica", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color-adjust: exact;
+}
+
+ +

HTML

+ +
<div class="my-box">
+  <p>Need more contrast!</p>
+</div>
+ +

結果

+ +

{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}{{Spec2('CSS Color Adjust')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.color-adjust")}}

+ +

関連情報

+ +
    +
  • CSS を使った HTML の要素への色の適用
    • +
  • その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
diff --git a/files/ja/web/css/color/index.html b/files/ja/web/css/color/index.html new file mode 100644 index 0000000000..77a3ad9077 --- /dev/null +++ b/files/ja/web/css/color/index.html @@ -0,0 +1,160 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - CSS Property + - CSS テキスト + - CSS プロパティ + - CSS 色 + - HTML 整形 + - Layout + - Reference + - Web +translation_of: Web/CSS/color +--- +
{{CSSRef}}
+ +

CSS の color プロパティは、要素のテキストやテキスト装飾における前景色の色の値を設定し、 {{cssxref("currentcolor")}} の値を設定します。 currentcolor は他のプロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。

+ +
{{EmbedInteractiveExample("pages/css/color.html")}}
+ + + +

HTML における色の使用の概要については、CSS を使用した HTML 要素への色の適用をご覧ください。

+ +

構文

+ +
/* キーワード値 */
+color: currentcolor;
+
+/* <named-color> 値 */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* <hex-color> 値 */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* <rgb()> 値 */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* <hsl()> 値 */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* グローバル値 */
+color: inherit;
+color: initial;
+color: unset;
+
+ +

color プロパティは単一の {{cssxref("<color>")}} 値で指定します。

+ +

なお、値は {{cssxref("color")}} の形でなければなりません。 {{cssxref("<gradient>")}} は実際の型が {{cssxref("<image>")}} であるため使用できません。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
要素のテキストや装飾部分の色を設定します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

以下の例はすべて、要素のテキストを赤色にします。

+ +
p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50% 透過 */
+p { color: #ff000080; }
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+
+ +

アクセシビリティの考慮事項

+ +

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。

+ +

色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}}rgb(), rgba(), hsl(), hsla() に関数記法にカンマがない構文を追加。 rgb(), hsl() にアルファ値を含めることを許可して、 rgba() および hsla() をそれらの (非推奨な) 別名に変更。
+ rebeccapurple キーワードを追加。
+ 最後の桁がアルファ値を表す、 4 桁および 8 桁の 16 進数による色の値を追加。
+ hwb(), device-cmyk(), color() 関数を追加。
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}system-color を非推奨化。 SVG color を追加。 rgba(), hsl(), hsla() の関数記法を追加
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}orange color と system-color を追加
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.color")}}

+ +

関連情報

+ +
    +
  • {{cssxref("<color>")}} データ型
    • +
  • 他の色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}
    • +
  • CSS を使用した HTML 要素への色の適用
    • +
diff --git a/files/ja/web/css/color_value/index.html b/files/ja/web/css/color_value/index.html new file mode 100644 index 0000000000..ed3abd2d12 --- /dev/null +++ b/files/ja/web/css/color_value/index.html @@ -0,0 +1,1539 @@ +--- +title: +slug: Web/CSS/color_value +tags: + - CSS + - CSS データ型 + - Reference + - Web + - hsl + - hsla + - rgb + - rgba + - レイアウト + - 単位 + - 色 +translation_of: Web/CSS/color_value +--- +
{{CSSRef}}
+ +

<color> は CSS のデータ型で、 sRGB 色空間にある一つの色を表します。 <color> は アルファチャネル透過値を含むこともでき、背景とどのように合成するかを示すこともできます。

+ +

<color> は以下の何れかの方法で定義することができます。

+ +
    +
  • キーワードの使用 (blue や transparent など)
    • +
  • RGB 立方体座標方式の使用 (#+16進数値や、rgb() や rgba() の関数記法によって)
    • +
  • HSL 円柱座標方式 の使用 (hsl() や hsla() の関数記法によって)
    • +
+ +
+

メモ: この記事は <color> データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 CSS を使用した HTML 要素への色の適用を参照してください。

+
+ +

構文

+ +

<color> データ型は以下のいずれか1つの方法を使って指定されます。

+ +
+

メモ: <color> の色は詳細に定義されていますが、出力端末によって (時には著しく) 違って見えるかもしれません。出力端末の大半は色補正がされておらず、ブラウザーによっては出力端末の色プロファイルに対応していないからです。

+
+ +

色キーワード

+ +

色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば red, blue, black, lightseagreen といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。

+ +

キーワードを使うとき、考慮すべき点がいくつかあります。

+ +
    +
  • HTML は CSS1 に見られる基本16色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS および SVG のみで使用してください。
    • +
  • HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。
    • +
  • CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。
    • +
  • 同じ色を表すキーワードがいくつかあります。 +
      +
    • aqua / cyan
      • +
    • fuchsia / magenta
      • +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • キーワードは X11 の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。
    • +
+ +
+

メモ: 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。

+ +
    +
  • CSS Level 1 は基本的な16色だけを受け付けていました。VGA グラフィックカードで表示可能な色の組み合わせという意味で、VGA 色と命名されました。
    • +
  • CSS Level 2 は orange キーワードを追加しました。
    • +
  • 当初から、ブラウザーはその他の色を受け付けていました。初期のブラウザーのいくつかは X11 アプリケーションであったため、ほとんどは X11 色名称でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく拡張色キーワード、X11 色、SVG 色と呼ばれます。
    • +
  • CSS Colors Level 4 では ウェブのパイオニア、エリック・メイヤーに敬意を表して rebeccapurple のキーワードを追加しました。
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書キーワードRGB 16 進表記例
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan
+ (synonym of aqua)		#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta
+ (synonym of fuchsia)		#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
+ +

transparent キーワード

+ +

transparent は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値 rgba(0,0,0,0) へのショートカットです。

+ +
+

互換性のメモ: {{cssxref("gradient","グラデーション")}}の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は transparent をアルファ乗算色空間で計算するように定めています。しかし、古いブラウザーはアルファ―チャンネルが 0 の値である黒として扱うかもしれません。

+
+ +
+

歴史的なメモ: transparent キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは {{Cssxref("background")}} プロパティと {{Cssxref("border")}} プロパティの2つにおいて、通常の <color> の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 transparent は色として再定義されました。 <color> の値を使用することができる場所ならば、どこでも使用することができるようになりました。

+
+ +

currentcolor キーワード

+ +

currentcolor キーワードは、要素の {{Cssxref("color")}} プロパティの値を表します。これで color の値をプロパティが既定で受け取らなくても利用することができます。

+ +

currentcolor が color プロパティの値として使用された場合、 color プロパティが継承した値が使用されます。

+ +

currentcolor の例

+ +
HTML
+ +
<div style="color:blue; border: 1px dashed currentcolor;">
+  この文字列の色は青です。
+  <div style="background:currentcolor; height:9px;"></div>
+  このブロックは青い境界線で囲まれています。
+</div>
+ +
結果
+ +

{{EmbedLiveSample('currentcolor_example')}}

+ +

RGB 色

+ +

RGB 色モデルは赤、緑、青の成分によって指定された色を定義します。任意のアルファ成分は色の透過性を表します。

+ +

構文

+ +

RGB 色は16進表記 (# の接頭辞つき) と関数表記 (rgb(), rgba()) の両方で表すことができます。

+ +
+

メモ: CSS Colors Level 4 では、 rgba() は rgb() の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。

+
+ +
+
16進表記: #RRGGBB[AA]
+
R (赤)、 G (緑)、 B (青) と A (アルファ) は16進数の文字 (0–9, A–F) です。 A は任意です。例えば、 #ff0000 は #ff0000ff と同等です。
+
16進表記: #RGB[A]
+
R (赤)、 G (緑)、 B (青) と A (アルファ) は16進数の文字 (0–9, A–F) です。 A は任意です。3桁表記 (#RGB) は6桁形式 (#RRGGBB) を短縮したものです。例えば、 #f09 は #ff0099 と同じ色です。同様に、4桁の RGB 表記 (#RGBA) は8桁形式 (#RRGGBBAA) を短縮したものです。例えば、 #0f38 は #00ff3388 と同じ色です。
+
関数表記: rgb[a](R, G, B[, A])
+
R (赤)、 G (緑)、 B (青) は {{cssxref("<number>", "数値")}}または{{cssxref("<percentage>", "パーセント表記")}}のどちらかで、255が100%に対応します。 A (アルファ)は0と1の間の{{cssxref("<number>", "数値")}}、または{{cssxref("<percentage>", "パーセント表記")}}で、数値1が100% (不透明) です。
+
関数表記: rgb[a](R G B[ / A])
+
CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
+
+ +

例

+ +
様々な RGB 構文
+ +

この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。

+ +
/* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
+
+/* 16進表記 */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* 関数表記 */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0)
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */
+rgb(255 0 153)
+
+/* アルファ値付き16進表記 */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* アルファ値付き関数表記 */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* 空白区切りの構文 */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* 浮動小数点値による実数表記 */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+
+ +
RGB の様々な透過性
+ +
/* 16進表記 */
+#3a30                    /* 透明な緑 */ 
+#3A3F                    /* 不透明な緑 */ 
+#33aa3300                /* 完全に透明な緑 */ 
+#33AA3388                /*  50%半透明の緑 */ 
+
+/* 関数表記 */
+rgba(51, 170, 51, .1)    /*  10%半透明の緑 */ 
+rgba(51, 170, 51, .4)    /*  40%半透明の緑 */ 
+rgba(51, 170, 51, .7)    /*  70%半透明の緑 */ 
+rgba(51, 170, 51,  1)    /* 完全に不透明な緑 */ 
+
+/* ホワイトスペース区切りの構文 */
+rgba(51 170 51 / 0.4)    /*  40%半透明の緑 */ 
+rgba(51 170 51 / 40%)    /*  40%半透明の緑 */ 
+
+/* 実数値の関数構文 */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+ +

HSL 色

+ +

HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた色を定義します。任意のアルファ成分は色の透過性を表します。

+ +

多くのデザイナーは、 HSL は色相、彩度、明度をそれぞれ個別に調整できるので、 RGB より直感的であると考えています。 HSL は一連の合う色の組み合わせ (例えば、同じ色相で、明暗や彩度が異なる色など) をより簡単に作成することもできます。

+ +

構文

+ +

HSL 色は関数表記の hsl() および hsla() を通して説明されます。

+ +
+

メモ: CSS Colors Level 4 では、 hsla() は hsl() の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。

+
+ +
+
関数表記: hsl[a](H, S, L[, A])
+
H (色相) は色相環の{{cssxref("<angle>", "角度")}}を {{SpecName("CSS4 Colors","#the-hsl-notation")}} で定義されている deg、 rad、 grad、 turn の単位で与えます。単位のない{{cssxref("<number>", "数値")}}の場合は、 {{SpecName("CSS3 Colors", "#hsl-color")}} で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、 青=240deg、 などのように色相環を回ります。 <angle> は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。
+
S (彩度) と L (明度) はパーセント表記です。彩度100%は完全に鮮やかな色で、彩度0%は完全に薄い色 (灰色) です。明度100%は白で、明度0%は黒で、明度50%は「普通」です。
+
A (アルファ)は0と1の間の{{cssxref("<number>", "数値")}}、または{{cssxref("<percentage>", "パーセント表記")}}で、数値1が100% (不透明) です。
+
関数表記: hsl[a](H S L[ / A])
+
CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
+
+ +

例

+ +
様々な HSL の構文
+ +
/* これらの例はすべて同じ色、ラベンダーを指定します。 */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+
+ +
彩度100%の色
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表記説明例
hsl(0, 100%, 50%)red
hsl(30, 100%, 50%)orange
hsl(60, 100%, 50%)yellow
hsl(90, 100%, 50%)lime green
hsl(120, 100%, 50%)green
hsl(150, 100%, 50%)blue-green
hsl(180, 100%, 50%)cyan
hsl(210, 100%, 50%)sky blue
hsl(240, 100%, 50%)blue
hsl(270, 100%, 50%)purple
hsl(300, 100%, 50%)magenta
hsl(330, 100%, 50%)pink
hsl(360, 100%, 50%)red
+ +
緑の明度の変化
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表記説明例
hsl(120, 100%, 0%)black
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)white
+ +
緑の彩度の変化
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表記説明例
hsl(120, 100%, 50%)green
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)gray
+ +
HSL の様々な透過性
+ +
hsla(240, 100%, 50%, .05)     /*   5%半透明の青 */ 
+hsla(240, 100%, 50%, .4)      /*  40%半透明の青 */ 
+hsla(240, 100%, 50%, .7)      /*  70%半透明の青 */ 
+hsla(240, 100%, 50%, 1)       /* 不透明な青 */ 
+
+/* 空白表記 */
+hsla(240 100% 50% / .05)      /*   5%半透明の青 */ 
+
+/* アルファのパーセント表記 */
+hsla(240 100% 50% / 5%)       /*   5%半透明の青 */ 
+
+ +

システム色

+ +

色強制モード (forced-colors メディアクエリで検出可能) では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。

+ +

以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。

+ +
+

なお、これらのキーワードは大文字小文字を区別しませんが、読みやすさのために大文字小文字を交ぜて表記しています。

+
+ +
+
ActiveText
+
+

アクティブなリンクのテキスト

+
+
ButtonFace
+
+

プッシュボタンの背景

+
+
ButtonText
+
+

プッシュボタンのテキスト

+
+
Canvas
+
+

アプリケーションのコンテンツや文書の背景

+
+
CanvasText
+
+

アプリケーションのコンテンツや文書のテキスト

+
+
Field
+
+

入力フィールドの背景

+
+
FieldText
+
+

入力フィールドのテキスト

+
+
GrayText
+
+

無効なテキスト

+
+
Highlight
+
+

コントロールの中で選択されているアイテムの背景

+
+
HighlightText
+
+

コントロールの中で選択されているアイテムのテキスト

+
+
LinkText
+
+

アクティブではない、訪問していないリンクのテキスト

+
+
VisitedText
+
+

訪問したリンクのテキスト

+
+
+ +

非推奨のシステム色のキーワード

+ +

以下のキーワードは、 CSS Color モジュールの早期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用は {{deprecated_inline}} です。

+ +
+
+
ActiveBorder
+
+

アクティブウィンドウの境界線。

+
+
ActiveCaption
+
+

アクティブウィンドウのキャプション。 CaptionText を前景色として使用してください。

+
+
AppWorkspace
+
+

複数文書インターフェイス (MDI) の背景色。

+
+
Background
+
+

デスクトップの背景です。

+
+
ButtonHighlight
+
+

周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。

+
+
ButtonShadow
+
+

周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。

+
+
CaptionText
+
+

キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 ActiveCaption を背景色として使用してください。

+
+
InactiveBorder
+
+

非アクティブウィンドウの境界線です。

+
+
InactiveCaption
+
+

非アクティブウィンドウのキャプションです。 InactiveCaptionText を前景色に使用してください。

+
+
InactiveCaptionText
+
+

非アクティブなキャプションの文字列の色です。 InactiveCaption を背景色に使用してください。

+
+
InfoBackground
+
+

ツールチップコントロールの背景色です。 InfoText を前景色に使用してください。

+
+
InfoText
+
+

ツールチップコントロールの文字色です。 InfoBackground を背景色に使用してください。

+
+
Menu
+
+

メニューの背景。 MenuText または -moz-MenuBarText を前景色に使用してください。

+
+
MenuText
+
+

メニュー内の文字列。 Menu を背景色に使用してください。

+
+
Scrollbar
+
+

スクロールバーの背景色。

+
+
ThreeDDarkShadow
+
+

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の暗い方 (ふつうは外側) の色。

+
+
ThreeDFace
+
+

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の表面の色。前景色には ButtonText を使用してください。

+
+
ThreeDHighlight
+
+

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺の明るい方 (ふつうは外側) の色。

+
+
ThreeDLightShadow
+
+

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺のっ暗い方 (ふつうは内側) の色。

+
+
ThreeDShadow
+
+

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の明るい方 (ふつうは内側) の色。

+
+
Window
+
+

ウィンドウの背景。 WindowText を前景色に使用してください。

+
+
WindowFrame
+
+

ウィンドウの枠。

+
+
WindowText
+
+

ウィンドウ内の文字列。 Window を背景色に使用してください。

+
+
+
+ +

Mozilla システム色拡張

+ +
+
+
-moz-ButtonDefault
+
+

ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。

+
+
-moz-ButtonHoverFace
+
+

マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は ThreeDFace または ButtonFace)。 -moz-ButtonHoverText の前景色と一緒に使う必要があります。

+
+
-moz-ButtonHoverText
+
+

マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は ButtonText)。 -moz-ButtonHoverFace background の背景色と一緒に使う必要があります。

+
+
-moz-CellHighlight
+
+

ツリーウィジェットで選択された項目の背景色。 -moz-CellHighlightText の前景色と一緒に使用する必要があります。 -moz-html-CellHighlight も参照。

+
+
-moz-CellHighlightText
+
+

ツリー内で選択された項目のテキスト色。 -moz-CellHighlight background の背景色と一緒に使う必要があります。 -moz-html-CellHighlightText も参照。

+
+
-moz-Combobox
+
+

{{Gecko_minversion_inline("1.9.2")}} コンボボックスの背景色。 -moz-ComboboxText の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-Field を使用してください。

+
+
-moz-ComboboxText
+
+

{{Gecko_minversion_inline("1.9.2")}} コンボボックスのテキスト色。 -moz-Combobox の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-FieldText を使用してください。

+
+
-moz-Dialog
+
+

ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。

+
+
-moz-DialogText
+
+

ダイアログボックスのテキスト色。 -moz-DialogText の背景色と一緒に使う必要があります。

+
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
+

{{gecko_minversion_inline("1.9")}} ツリー内の偶数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-OddTreeRow も参照してください。

+
+
-moz-html-CellHighlight
+
+

{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムの背景色。前景色には -moz-html-CellHighlightText を使用します。 Gecko 1.9 以前では、 -moz-CellHighlight を使用してください。

+
+
-moz-html-CellHighlightText
+
+

{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムのテキストの色。背景色には -moz-html-CellHighlight を使用します。 Gecko 1.9 以前では、 -moz-CellHighlightText を使用してください。

+
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
+

{{Gecko_minversion_inline("1.9.1")}}

+
+
-moz-mac-chrome-inactive
+
+

{{Gecko_minversion_inline("1.9.1")}}

+
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
+

ホバーされたメニュー項目の背景色。 Highlight によく似ています。 -moz-MenuHoverText や -moz-MenuBarHoverText の前景色と一緒に使う必要があります。

+
+
-moz-MenuHoverText
+
+

ホバーされたメニュー項目のテキスト色。 HighlightText によく似ています。 -moz-MenuHover の背景色と一緒に使う必要があります。

+
+
-moz-MenuBarText
+
+

{{Gecko_minversion_inline("1.9.2")}} メニューバーのテキスト色。 MenuText によく似ています。 Menu の背景の上に使用します。

+
+
-moz-MenuBarHoverText
+
+

メニューバーのホバーされたテキストの色。多くの場合、 -moz-MenuHoverText に似ています。 -moz-MenuHover 背景の上に使用する必要があります。

+
+
-moz-nativehyperlinktext
+
+

{{Gecko_minversion_inline("1.9.1")}} 既定のプラットフォームのハイパーリンク色

+
+
-moz-OddTreeRow
+
+

{{gecko_minversion_inline("1.9")}} ツリー内の奇数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-EvenTreeRow も参照してください。

+
+
-moz-win-communicationstext
+
+

{{gecko_minversion_inline("1.9")}} {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox; を持つオブジェクトのテキストに使用する必要があります。

+
+
-moz-win-mediatext
+
+

{{gecko_minversion_inline("1.9")}} {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox を持つオブj稀有とのテキストに使用する必要があります。

+
+
-moz-win-accentcolor
+
+

{{gecko_minversion_inline("56")}}
+ スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセントカラーにアクセスするために使用します。

+
+
-moz-win-accentcolortext
+
+

{{gecko_minversion_inline("56")}}
+ スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。

+
+
+
+ +

Mozilla 色設定拡張

+ +
+
-moz-activehyperlinktext
+
+

アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

+
+
-moz-default-background-color
+
+

{{Gecko_minversion_inline("5.0")}} 文書の背景色のユーザー設定です。

+
+
-moz-default-color
+
+

{{Gecko_minversion_inline("5.0")}} 文字色のユーザー設定です。

+
+
-moz-hyperlinktext
+
+

未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

+
+
-moz-visitedhyperlinktext
+
+

訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

+
+
+ +

補間

+ +

アニメーションやグラデーションにおいて、 <color> の値は赤、緑、青の成分ごとに補間されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間はアルファ乗算済み sRGBA 色空間で行われます。アニメーションでは補間の速度はアニメーションと関連づけられたタイミング関数によって決められます。

+ +

アクセシビリティの考慮事項

+ +

色を見分けることが難しい人がいます。 WCAG 2.0 勧告は、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは Color and color contrast をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}rebeccapurple、4 桁 (#RGBA) および 8 桁 (#RRGGBBAA) の 16 進記法、rgb() および hsl() の別名である rgba() および hsla() (どちらも引数の構文が同じ)、関数の引数をカンマの代わりに空白で区切るこおｔ、アルファ値のパーセント値表記、hsl() 色の色相の角度表記を追加。
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}システム色を非推奨化。 SVG 色を追加。rgba(), hsl(), hsla() 関数記法を追加
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}orange キーワードとシステム色を追加
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}初回定義。基本16色のキーワードを含む。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.color")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。
    • +
  • このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}
    • +
  • CSS を使った HTML の要素への色の適用
    • +
diff --git a/files/ja/web/css/column-count/index.html b/files/ja/web/css/column-count/index.html new file mode 100644 index 0000000000..9f1ee0dbb3 --- /dev/null +++ b/files/ja/web/css/column-count/index.html @@ -0,0 +1,100 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS + - CSS プロパティ + - CSS 段組みレイアウト + - リファレンス + - 段組み +translation_of: Web/CSS/column-count +--- +
{{CSSRef}}
+ +

CSS の column-count プロパティは、指定された段数で要素のコンテンツを分割します。

+ +
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+column-count: auto;
+
+/* <integer> 値 */
+column-count: 3;
+
+/* グローバル値 */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+ +

値

+ +
+
auto
+
段数は {{cssxref("column-width")}} など、他の CSS プロパティによって決定されます。
+
{{cssxref("<integer>")}}
+
正の{{cssxref("<integer>", "整数")}}のみで、要素の中で流れる理想的な列の数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の列数を示します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.column-count")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-fill/index.html b/files/ja/web/css/column-fill/index.html new file mode 100644 index 0000000000..1ccb7597ae --- /dev/null +++ b/files/ja/web/css/column-fill/index.html @@ -0,0 +1,110 @@ +--- +title: column-fill +slug: Web/CSS/column-fill +tags: + - CSS + - CSS Multi-column Layout + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/column-fill +--- +
{{CSSRef}}
+ +

column-fill は CSS のプロパティで、段組みレイアウトで要素のコンテンツが複数の段に分割されるとき、どのようにバランスを取るのかを制御します。

+ +
{{EmbedInteractiveExample("pages/css/column-fill.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+column-fill: auto;
+column-fill: balance;
+column-fill: balance-all;
+
+/* グローバル値 */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+
+ +

column-fill プロパティは、以下に挙げたキーワード値のうちの1つで指定します。初期値は balance で、コンテンツは段の間で均等になります。

+ +

値

+ +
+
auto
+
段は順に埋められます。コンテンツは必要な余地があるときだけ分割されるので、一部の段は空になることがあります。
+
balance
+
コンテンツは各段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、最後の断片のみが均等に分割されます。従ってページ付きメディアでは、最後のページのみが均等に分割されます。
+
balance-all
+
コンテンツは格段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、すべての断片が均等になります。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

テキストを段間で均等に分割

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into multiple
+  columns. The CSS `column-fill` property is
+  used to spread the contents evenly across
+  all the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Splitting_text_evenly_across_columns', 'auto', 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Multicol', '#cf', 'column-fill')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.column-fill")}}

+ +
+

仕様上の未解決の問題により、 column-fill にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。

+ +

特に、 column-fill: auto を使用して連続的に列を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の列をすべてのコンテンツで埋めます。

+
diff --git a/files/ja/web/css/column-gap/index.html b/files/ja/web/css/column-gap/index.html new file mode 100644 index 0000000000..4708977143 --- /dev/null +++ b/files/ja/web/css/column-gap/index.html @@ -0,0 +1,209 @@ +--- +title: column-gap (grid-column-gap) +slug: Web/CSS/column-gap +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - CSS 段組みレイアウト + - Reference + - column-gap + - 'recipe:css-property' +translation_of: Web/CSS/column-gap +--- +
{{CSSRef}}
+ +

column-gap は CSS のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
+ + + +

当初は段組みレイアウトの一部でしたが、 column-gap の定義は複数のレイアウト方法を含めるように拡張されました。現在はボックス配置の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。

+ +
+

CSS グリッドレイアウトは当初、 grid-column-gap プロパティを定義していました。この接頭辞付きのプロパティは column-gap で置き換えられました。しかし、グリッドで grid-column-gap を実装しており column-gap を実装していないブラウザーに対応するため、接頭辞付きのプロパティを使用する必要があるでしょう。

+
+ +

構文

+ +
/* キーワード値 */
+column-gap: normal;
+
+/* <length> 値 */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* <percentage> 値 */
+column-gap: 3%;
+
+/* グローバル値 */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+
+ +

column-gap プロパティは以下に挙げた値の一つで指定します。

+ +

値

+ +
+
normal
+
段間 (列間) にはブラウザー既定の幅が使われます。段組みレイアウトでは 1em と指定され、他の種類のレイアウトでは 0 になります。
+
{{CSSxRef("<length>")}}
+
段間 (列間) の寸法を {{CSSxRef("<length>")}} として定義します。 {{CSSxRef("<length>")}} のプロパティ値は負の数であってはいけません。
+
{{CSSxRef("<percentage>")}}
+
段間 (列間) の寸法を {{CSSxRef("<percentage>")}} として定義します。 {{CSSxRef("<percentage>")}} のプロパティ値は負の数であってはいけません。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

フレックスレイアウト

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  height: 100px;
+  column-gap: 20px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: auto;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Flex_layout", "auto", "120px")}}

+ +

グリッドレイアウト

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Grid_layout", "auto", "120px")}}

+ +

段組みレイアウト

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS `column-gap` property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}グリッド及びフレックスボックスに適用
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}グリッドレイアウトにどう適用されるかを指定
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}初回定義。
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.column-gap.grid_context")}}

+ +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.column-gap.multicol_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-rule-color/index.html b/files/ja/web/css/column-rule-color/index.html new file mode 100644 index 0000000000..8aecf5ad2d --- /dev/null +++ b/files/ja/web/css/column-rule-color/index.html @@ -0,0 +1,103 @@ +--- +title: column-rule-color +slug: Web/CSS/column-rule-color +tags: + - CSS + - CSS プロパティ + - CSS 段組みレイアウト + - HTML 色 + - Reference + - 段組み +translation_of: Web/CSS/column-rule-color +--- +
{{CSSRef}}
+ +

column-rule-color は CSS のプロパティで、段組みレイアウトで段間に引かれる線の色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* グローバル値 */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+
+ +

column-rule-color プロパティは、単一の <color> 値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
段を分割する段間罫の色です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p>This is a bunch of text split into three columns.
+   The `column-rule-color` property is used to change
+   the color of the line that is drawn between columns.
+   Don't you think that's wonderful?</p>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-color: blue;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.column-rule-color")}}

+ +

関連情報

+ +
    +
  • {{cssxref("<color>")}} データ型
    • +
  • 他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}
    • +
  • CSS を使った HTML の要素への色の適用
    • +
diff --git a/files/ja/web/css/column-rule-style/index.html b/files/ja/web/css/column-rule-style/index.html new file mode 100644 index 0000000000..04f25f3270 --- /dev/null +++ b/files/ja/web/css/column-rule-style/index.html @@ -0,0 +1,99 @@ +--- +title: column-rule-style +slug: Web/CSS/column-rule-style +tags: + - CSS + - CSS プロパティ + - CSS 段組みレイアウト + - Reference + - 段組み +translation_of: Web/CSS/column-rule-style +--- +
{{CSSRef}}
+ +

CSS の column-rule-style プロパティは、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
+ + + +

構文

+ +
/* <'border-style'> の値 */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* グローバル値 */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+
+ +

column-rule-style プロパティは、単一の <'border-style'> 値で指定します。

+ +

値

+ +
+
<'border-style'>
+
{{ cssxref("border-style") }} で定義されているキーワードで、段間罫のスタイルを指定します。スタイルは collasped の境界線モデルで解釈されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<p>This is a bunch of text split into three columns.
+   The `column-rule-style` property is used to change
+   the style of the line that is drawn between columns.
+   Don't you think that's wonderful?</p>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: dashed;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }}{{ Spec2('CSS3 Multicol') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.column-rule-style")}}

diff --git a/files/ja/web/css/column-rule-width/index.html b/files/ja/web/css/column-rule-width/index.html new file mode 100644 index 0000000000..f946e5e131 --- /dev/null +++ b/files/ja/web/css/column-rule-width/index.html @@ -0,0 +1,99 @@ +--- +title: column-rule-width +slug: Web/CSS/column-rule-width +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 段組みレイアウト + - Reference + - 段組み +translation_of: Web/CSS/column-rule-width +--- +
{{ CSSRef}}
+ +

column-rule-width は CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* <length> 値 */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* グローバル値 */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+
+ +

column-rule-width プロパティは単一の <'border-width'> の値で指定します。

+ +

値

+ +
+
<'border-width'>
+
{{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("<length>")}} または thin、 medium、 thick のキーワードのいずれかです。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<p>This is a bunch of text split into three columns.
+   The `column-rule-width` property is used to change
+   the width of the line that is drawn between columns.
+   Don't you think that's wonderful?</p>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-width: thick;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Multicol', '#crw', 'column-rule-width') }}{{ Spec2('CSS3 Multicol') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.column-rule-width")}}

diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html new file mode 100644 index 0000000000..ed13f58638 --- /dev/null +++ b/files/ja/web/css/column-rule/index.html @@ -0,0 +1,130 @@ +--- +title: column-rule +slug: Web/CSS/column-rule +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 段組みレイアウト + - column-rule + - column-rule-color + - column-rule-style + - column-rule-width + - リファレンス + - 一括指定プロパティ + - 段組み +translation_of: Web/CSS/column-rule +--- +
{{CSSRef}}
+ +

column-rule は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さ、スタイル、色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-rule.html")}}
+ + + +

これは一括指定プロパティであり、一回の便利な宣言で個別の column-rule-* プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。

+ +
+

メモ: 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。

+
+ +

構文

+ +
column-rule: dotted;
+column-rule: solid 8px;
+column-rule: solid blue;
+column-rule: thick inset blue;
+
+/* グローバル値 */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+
+ +

column-rule プロパティは、以下に挙げる値のうち1から3つを任意の順序で指定します。

+ +

値

+ +
+
<'column-rule-width'>
+
{{cssxref("<length>")}} または3つのキーワード、 thin, medium, thick のうちの1つです。詳しくは {{cssxref("border-width")}} を参照してください。
+
<'column-rule-style'>
+
有効な値と詳細は {{cssxref("border-style")}} を参照してください。
+
<'column-rule-color'>
+
{{cssxref("<color>")}} 値です。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

例1

+ +
/* "medium dotted currentColor" と同じ */
+p.foo { column-rule: dotted; }
+
+/* "medium solid blue" と同じ */
+p.bar { column-rule: solid blue; }
+
+/* "8px solid currentColor" と同じ */
+p.baz { column-rule: solid 8px; }
+
+p.abc { column-rule: thick inset blue; }
+
+ +

例2

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns.
+  Take note of how the `column-rule` property is used
+  to adjust the style, width, and color of the rule
+  that appears between the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  padding: 0.3em;
+  background: #ff7;
+  column-count: 3;
+  column-rule: inset 2px #33f;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example_2')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.column-rule")}}

diff --git a/files/ja/web/css/column-span/index.html b/files/ja/web/css/column-span/index.html new file mode 100644 index 0000000000..63a153b5c6 --- /dev/null +++ b/files/ja/web/css/column-span/index.html @@ -0,0 +1,117 @@ +--- +title: column-span +slug: Web/CSS/column-span +tags: + - CSS + - CSS Multi-column Layout + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/column-span +--- +
{{CSSRef}}
+ +

column-span は CSS のプロパティで、値に all を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。

+ +
{{EmbedInteractiveExample("pages/css/column-span.html")}}
+ +
/* キーワード値 */
+column-span: none;
+column-span: all;
+
+/* グローバル値 */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+
+ +

複数の段にまたがる要素は、スパニング要素 (spanning element) と呼びます。

+ +

構文

+ +

column-span プロパティは以下に挙げたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
none
+
この要素は複数の段にまたがりません。
+
all
+
この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

段をまたぐ見出しの設定

+ +

この例では、見出しが記事のすべての段にまたがって作成されます。

+ +

HTML

+ +
<article>
+  <h2>Header spanning all of the columns</h2>
+  <p>
+     The h2 should span all the columns. The rest
+     of the text should be distributed among the columns.
+  </p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+</article>
+
+ +

CSS

+ +
article {
+  columns: 3;
+}
+
+h2 {
+  column-span: all;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Making_a_heading_span_columns', 'auto', 260)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.column-span")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-width/index.html b/files/ja/web/css/column-width/index.html new file mode 100644 index 0000000000..159888d092 --- /dev/null +++ b/files/ja/web/css/column-width/index.html @@ -0,0 +1,110 @@ +--- +title: column-width +slug: Web/CSS/column-width +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 段組みレイアウト + - リファレンス + - 段組み +translation_of: Web/CSS/column-width +--- +
{{CSSRef}}
+ +

column-width は CSS のプロパティで、段組みレイアウトで理想的な段の幅を設定します。コンテナーは column-width の値よりも狭い段がないように、できるだけ多くの段を配置します。コンテナーの幅が指定された値よりも狭い場合、実際の段の幅はより狭くなることがあります。

+ +
{{EmbedInteractiveExample("pages/css/column-width.html")}}
+ + + +

このプロパティは様々な画面の大きさに合うレスポンシブデザインを作成するのに役立ちます。特に (優先度の高い) {{cssxref("column-count")}} プロパティがある場合、正確な段の幅を設定するには、すべての幅の値を指定する必要があります。横書きでは、これらは {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}}, {{cssxref('column-rule-width')}} です。

+ +

構文

+ +
/* キーワード値 */
+column-width: auto;
+
+/* <length> 値 */
+column-width: 60px;
+column-width: 15.5em;
+column-width: 3.3vw;
+
+/* グローバル値 */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+
+ +

column-width プロパティは以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
{{cssxref("<length>")}}
+
段の最適な幅のヒントを与えます。実際の段の幅は指定された値と異なります。余白を埋める必要がある場合は広くなる可能性があり、利用可能な幅が小さすぎる場合は狭くなる可能性があります。この値は正の数だけで、そうでなければ宣言は無効になります。パーセント値も無効です。
+
auto
+
段の幅は {{cssxref("column-count")}} などの他の CSS プロパティによって決定されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p class="content-box">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+</p>
+ +

CSS

+ +
.content-box {
+  column-width: 100px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 160)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}{{Spec2('CSS4 Writing Modes')}}min-content, max-content, fill-available, fit-content の各キーワードによって固有の寸法を追加。
{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.column-width")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/column_combinator/index.html b/files/ja/web/css/column_combinator/index.html new file mode 100644 index 0000000000..8e533ec13e --- /dev/null +++ b/files/ja/web/css/column_combinator/index.html @@ -0,0 +1,99 @@ +--- +title: 列結合子 +slug: Web/CSS/Column_combinator +tags: + - CSS + - Experimental + - Reference + - Selectors + - セレクター + - 表 +translation_of: Web/CSS/Column_combinator +--- +
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+ +

列結合子 (column combinator) (||) は、二つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。

+ +
/* 表の "selected" クラスの列に所属するセル */
+col.selected || td {
+  background: gray;
+}
+
+ +

構文

+ +
column-selector || cell-selector {
+  /* スタイルプロパティ */
+}
+
+ +

Examples

+ +

HTML

+ +
<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", "100%")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.column")}}

+ +

関連情報

+ +
    +
  • {{HTMLElement("col")}}
    • +
  • {{HTMLElement("colgroup")}}
    • +
  • {{CSSxRef("grid")}}
    • +
diff --git a/files/ja/web/css/columns/index.html b/files/ja/web/css/columns/index.html new file mode 100644 index 0000000000..6f01f3ac59 --- /dev/null +++ b/files/ja/web/css/columns/index.html @@ -0,0 +1,103 @@ +--- +title: columns +slug: Web/CSS/columns +tags: + - CSS + - CSS Property + - CSS 段組みレイアウト + - Reference + - 一括指定プロパティ + - 段組み +translation_of: Web/CSS/columns +--- +
{{CSSRef}}
+ +

CSS の columns プロパティは、段組みされた要素の段の幅や段数を設定します。

+ +
{{EmbedInteractiveExample("pages/css/columns.html")}}
+ + + +

これは {{cssxref('column-width')}} と {{cssxref("column-count")}} の両方を一度に便利に宣言できる一括指定プロパティです。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。

+ +

構文

+ +
/* 段の幅 */
+columns: 18em;
+
+/* 段数 */
+columns: auto;
+columns: 2;
+
+/* 段の幅と段数の両方 */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* グローバル値 */
+columns: inherit;
+columns: initial;
+columns: unset;
+ +

columns プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。

+ +

値

+ +
+
<'column-width'>
+
{{cssxref("<length>")}} 値または auto キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。
+
<'column-count'>
+
正の {{cssxref("<integer>")}} のみで、要素の中で流れる理想的な段数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の段数を示します。
+
+ +

構文形式

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  columns: 3 auto;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

仕様策定状況

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Multicol', '#columns', 'columns')}}{{Spec2('CSS3 Multicol')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.columns")}}

diff --git a/files/ja/web/css/comments/index.html b/files/ja/web/css/comments/index.html new file mode 100644 index 0000000000..2c90a49e58 --- /dev/null +++ b/files/ja/web/css/comments/index.html @@ -0,0 +1,54 @@ +--- +title: コメント +slug: Web/CSS/Comments +tags: + - CSS + - CSS 構文と基本データ型 + - Reference +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

CSS のコメントは、説明的なメモをコードに追加したり、スタイルシートの特定の部分をブラウザーに解釈させないようにしたりするために使用します。設計上、コメントは文書のレイアウトにおいて効果を持ちません。

+ +

構文

+ +

コメントはスタイルシート内で、ホワイトスペースが置ける場所ならばどこでも配置できます。1行で使用したり、複数行に渡らせたりすることができます。

+ +
/* コメント */
+ +

例

+ +
/* 1行のコメント */
+
+/*
+複数行に
+またがる
+コメント
+*/
+
+/* 以下のコメントは、特定の
+   スタイルを無効にします。 */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+
+ +

メモ

+ +

/* */ のコメント構文は、1行のコメントにも複数行のコメントにも使用されます。外部のスタイルシートでコメントを指定する方法は他にありません。しかし、推奨されませんが、 {{htmlelement("style")}} 要素を使用するときは、古いブラウザーから CSS を隠すために <!-- --> を使用することができます。 /* */ のコメント文法を使用する他のプログラミング言語と同様、コメントはネストできません。言い換えれば、 /* の後で最初に */ が出現すると、コメントが終了します。

+ +

仕様書

+ + + +

関連情報

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ja/web/css/common_css_questions/index.html b/files/ja/web/css/common_css_questions/index.html new file mode 100644 index 0000000000..4307266923 --- /dev/null +++ b/files/ja/web/css/common_css_questions/index.html @@ -0,0 +1,231 @@ +--- +title: CSS の一般的な質問 +slug: Web/CSS/Common_CSS_Questions +tags: + - CSS + - FAQ + - Web + - questions + - ガイド + - 例 +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。

+ +

なぜ CSS が妥当なのに正しくレンダリングされないのか？

+ +

ブラウザーは DOCTYPE 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい DOCTYPE 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。

+ +

現代のブラウザーは、2つの主要なレンダリングモードを備えています。

+ +
    +
  • Quirks Mode: 後方互換モードとも呼ばれます。古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリング規則に従います。 DOCTYPE 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の DOCTYPE 宣言であるドキュメントは、 Quirks Mode でレンダリングされます。
    • +
  • Standards Mode: ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい DOCTYPE 宣言を持つページは Standards Mode でレンダリングされます。
    • +
+ +

Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードでありますAlmost Standards Mode があります。

+ +

以下は Standards Mode または Almost Standards Mode になる DOCTYPE 宣言で、もっとも一般的に使用されるものの一覧です:

+ +
<!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、
+                   この doctype が推奨されます */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

可能な限り、 HTML5 の doctype を使用するべきです。

+ +

なぜ CSS が妥当なのにまったくレンダリングされないのか?

+ +

以下のような可能性があります。

+ +
    +
  • CSS ファイルへのパスが間違っている。
    • +
  • 適用されるためには、 CSS スタイルシートを MIME タイプ text/css で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。
    • +
+ +

id と class の違いは何か?

+ +

HTML の要素は、 id 属性と class 属性の片方または両方を持つことができます。 id 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 class 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の id または class 名に対してスタイルを設定できます。

+ +
    +
  • ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が1つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。
    • +
  • 適用されるスタイルのルールを1つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。
    • +
+ +

一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。

+ +
    +
  • class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります
    • +
  • class を使用すると、複数の要素のスタイルを設定できるため、id セレクタを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です
    • +
  • class セレクタは id セレクタよりも特異性が低いため、必要に応じてオーバーライドする方が簡単です
    • +
+ +
+

注: 詳しくは Selectors もご覧ください。

+
+ +

プロパティの既定値に戻すにはどうすればよいのか?

+ +

当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。

+ +
/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: black; }
+ +

これは CSS 2 で変わり、initial キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。

+ +
/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: initial; }
+ +

スタイルを他のスタイルから派生させるにはどうすればよいか?

+ +

CSS では、あるスタイルが他の表現で定義されることを許可していません (Working Group のスタンスに関する、Eric Meyer 氏のコメントをご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 CSS 変数 が導入されました。

+ +

ひとつの要素に複数のクラスを割り当てる方法は?

+ +

HTML の要素は class 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。class 属性内のクラスの順序は関係がありません。

+ +

なぜ私のスタイル規則は正しく動作しないのか?

+ +

構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために DOM Inspector の CSS Style Rules ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。

+ +

HTML 要素の階層

+ +

CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。

+ +

明示的に再定義されたスタイル規則

+ +

CSS スタイルシートでは、順序こそが重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  他の規則             */
+/*  他の規則             */
+/*  他の規則             */
+.stockSymbol { font-weight: normal; }
+
+<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。

+ +

ショートハンドプロパティの使用

+ +

ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序こそが重要であるためです。

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now set to normal */
+}
+
+ +

* セレクタの使用

+ +

ワイルドカードセレクタ * はすべての要素を参照するものであり、特に注意して使用しなければなりません。

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

この例では、body * セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した font-weight: bold; は、body 内の全要素に適用した font-weight: normal; にオーバーライドされます。

+ +

特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。

+ +

CSS の詳細度

+ +

ある要素に複数の規則を適用すると、スタイルの詳細さに従って規則が選ばれます。インラインスタイル（HTML の style 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは CSS 2.1 Specification chapter 6.4.3 でご覧いただけます。

+ +

-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?

+ +

これらのプロパティは接頭辞付きプロパティと呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。

+ +

本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの -webkit- 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが -webkit- プレフィックスエイリアスを実装し始めました。

+ +

実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。

+ +

作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：

+ +
-ms-transform: rotate(90deg);
+-webkit-transform: rotate(90deg);
+transform: rotate(90deg);
+ +
+

メモ: 接頭辞付きプロパティの処理の詳細については、クロスブラウザテストモジュールの一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理を参照してください。

+
+ +
+

メモ: Mozilla をプレフィックスとする CSS プロパティの詳細については、CSS の Mozilla 拡張ページを参照してください。

+
+ +

z-index は位置指定へどのように関係するのか?

+ +

z-index プロパティは、要素を積み重ねる順序を指定します。

+ +

z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (position:absolute、position:relative、または  position:fixed) を持つ要素に対してのみ機能します。

+ +
+

メモ: 詳細については、ポジショニング学習の記事、特に z-index の紹介セクションを参照してください。

+
diff --git a/files/ja/web/css/compositing_and_blending/index.html b/files/ja/web/css/compositing_and_blending/index.html new file mode 100644 index 0000000000..bcac5a1c4a --- /dev/null +++ b/files/ja/web/css/compositing_and_blending/index.html @@ -0,0 +1,78 @@ +--- +title: 合成と混合 +slug: Web/CSS/Compositing_and_Blending +tags: + - CSS + - リファレンス + - 合成と混合 + - 概要 +translation_of: Web/CSS/Compositing_and_Blending +--- +
{{CSSRef}}
+ +

合成と混合 (Compositing and Blending) は CSS モジュールの一つで、様々な要素のシェイプを単一の画像に合成する方法を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("background-blend-mode")}}
    • +
  • {{cssxref("isolation")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
+
+ +

データ型

+ +
+
    +
  • {{cssxref("<blend-mode>")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Compositing")}}{{Spec2("Compositing")}}初回定義
+ +

ブラウザーの対応

+ +

background-blend-mode プロパティ

+ +
+ + +

{{Compat("css.properties.background-blend-mode")}}

+
+ +

isolation プロパティ

+ +
+ + +

{{Compat("css.properties.isolation")}}

+
+ +

mix-blend-mode プロパティ

+ +
+ + +

{{Compat("css.properties.mix-blend-mode")}}

+
diff --git a/files/ja/web/css/computed_value/index.html b/files/ja/web/css/computed_value/index.html new file mode 100644 index 0000000000..f08509b8d0 --- /dev/null +++ b/files/ja/web/css/computed_value/index.html @@ -0,0 +1,59 @@ +--- +title: 計算値 +slug: Web/CSS/computed_value +tags: + - CSS + - Guide + - Reference + - リファレンス +translation_of: Web/CSS/computed_value +--- +
{{cssref}}
+ +

CSS の プロパティの計算値 (computed value) は、継承の過程で親から子へ伝えられる値です。これは指定値から計算されます。

+ +
    +
  1. 特殊な値である {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}} を扱います。
    2. +
  2. プロパティの概要の「計算値」に記載された値に達するのに必要な計算を行います。
    3. +
+ +

プロパティの計算値に達するのに必要な計算は、一般に (em の単位やパーセントなどの) 相対値を絶対値に変換する計算を含みます。例えば、ある要素に font-size: 16px と padding-top: 2em が指定された場合、 padding-top の計算値は 32px (フォントサイズの倍) になります。

+ +

しかしながら、いくつかのプロパティ (width, margin-right, text-indent, top など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント指定された値はパーセント計算された値に変わります。さらに、 line-height に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、使用値が定義された場合、絶対値になります。

+ +
+

注: DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は解決値を返しますが、これはプロパティによって計算値であるか使用値であるかが変わります。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}} +

変更なし

+
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

+ +
    +
  • {{domxref("window.getComputedStyle")}}
    • +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ja/web/css/conic-gradient()/index.html b/files/ja/web/css/conic-gradient()/index.html new file mode 100644 index 0000000000..bd847a2406 --- /dev/null +++ b/files/ja/web/css/conic-gradient()/index.html @@ -0,0 +1,269 @@ +--- +title: conic-gradient() +slug: Web/CSS/conic-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Reference + - ウェブ + - グラデーション + - グラフィック + - レイアウト +translation_of: Web/CSS/conic-gradient() +--- +
{{CSSRef}}
+ +

conic-gradient() は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 conic-gradient() 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。

+ +
{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}
+ + + +

他のグラデーションと同様、扇形グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <image> の寸法に一致します。

+ +

繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("repeating-conic-gradient")}} 関数を使用してください。

+ +

g

+ +

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 conic-gradient() は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

+ +
+

なぜ "conic" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。

+
+ +

扇型グラデーションの理解

+ +

扇形グラデーションの構文は放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。

+ +

扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点

+ +

扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。長さを指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位には度を表す deg、グラデーションを表す grad、ラジアンを表す rad、回転数を表す turn があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。

+ +

放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。

+ +

グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の始点は北、つまり12時の方向です。そして、グラデーションは from の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。

+ +

グラデーションのカスタマイズ

+ +

By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an {{CSSxRef("<angle>")}}. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent

+ +
conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
+ +

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.

+ +
conic-gradient(red 40grad, 80grad, blue 360grad);
+ +

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:

+ +
conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
+conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);
+ +

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient

+ +
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+
+ +

There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.

+ +
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+
+ +

And, yes, you can mix and match different angle units, but don't. The above is hard to read.

+ +

構文

+ +
/* 45度回転した扇形グラデーション、
+   青で始まり赤で終わる */
+conic-gradient(from 45deg, blue, red);
+
+/* A a bluish purple box: the gradient goes from blue to red,
+   but as only the bottom right quadrant is visible, as the
+   center of the conic gradient is in at the top left corner */
+conic-gradient(from 90deg at 0 0, blue, red);
+
+/* 色相環 */
+background: conic-gradient(
+    hsl(360, 100%, 50%),
+    hsl(315, 100%, 50%),
+    hsl(270, 100%, 50%),
+    hsl(225, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(135, 100%, 50%),
+    hsl(90, 100%, 50%),
+    hsl(45, 100%, 50%),
+    hsl(0, 100%, 50%)
+);
+ +

値

+ +
+
{{CSSxRef("<angle>")}}
+
Preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
+
<position>
+
Using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. If omitted, the default value is center, meaing the gradient will be centered, .
+
<angular-color-stop>
+
A color-stop's {{CSSxRef("<color>")}} value, followed by one or two optional stop positions, (an {{CSSxRef("<angle>")}} along the gradient's circumference axis).
+
<color-hint>
+
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
+
+
+

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

+
+
+
+ +

形式文法

+ +
conic-gradient(
+  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
+  \---------------------------------/ \----------------------------/
+        Gradient definition                List of color stops
+
+where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
+  and <angular-color-stop> = <color> && <color-stop-angle>?
+  and <angular-color-hint> = <angle-percentage>
+  and <color-stop-angle> = <angle-percentage>{1,2}
+ +

例

+ +
+

40度のグラデーション

+ + + +
div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+
+ +

{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}

+
+ +
+

中心をずらしたグラデーション

+ + + +
div {
+  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
+}
+ +

{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}

+
+ +
+

グラデーションの円グラフ

+ +

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

+ + + +
div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}
+ +

{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}

+
+ +
+

Checkerboard

+ + + +
div {
+  background:
+     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
+     top left / 25% 25% repeat;
+  border: 1px solid;
+}
+ +

{{EmbedLiveSample("Checkerboard", 120, 120)}}

+
+ +
+

注: 他の例は CSS グラデーションの使用 をご覧ください。

+
+ +

アクセシビリティの考慮事項

+ +

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}{{Spec2('CSS4 Images')}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.image.gradient.conic-gradient")}}
+ +

関連情報

+ +
    +
  • CSS グラデーションの使用
    • +
  • 他のグラデーション関数: {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/ja/web/css/contain/index.html b/files/ja/web/css/contain/index.html new file mode 100644 index 0000000000..ce4baf2d86 --- /dev/null +++ b/files/ja/web/css/contain/index.html @@ -0,0 +1,210 @@ +--- +title: contain +slug: Web/CSS/contain +tags: + - CSS + - CSS Containment + - CSS Property + - Layout + - NeedsExample + - Paint + - Reference + - Style + - Web + - 'recipe:css-property' +translation_of: Web/CSS/contain +--- +
{{CSSRef}}
+ +

contain は CSS のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から独立していることを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。

+ +

このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。

+ +
+

注: (paint, strict, content のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。

+ +
    +
  1. 新しい包含ブロック (対象は {{cssxref("position")}} プロパティが absolute または fixed の子孫)。
    2. +
  2. 新しい重ね合わせコンテキスト。
    3. +
  3. 新しいブロック整形コンテキスト。
    4. +
+
+ +

構文

+ +
/* キーワード値 */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* 複数のキーワード */
+contain: size paint;
+contain: size layout paint;
+
+/* グローバル値 */
+contain: inherit;
+contain: initial;
+contain: unset;
+ +

contain プロパティは以下のうちの一つで指定します。

+ +
    +
  • none, strict, content の何れかのキーワードを単独で使用。
    • +
  • size, layout, style, and paint の各キーワードを1つ以上、任意の順序で使用。
    • +
+ +

値

+ +
+
none
+
その要素が通常通り描画され、抑制を適用しないことを示します。
+
strict
+
style を除くすべての抑制規則がその要素に適用されることを示します。これは contain: size layout paint と同等です。
+
content
+
size および style 以外の抑制規則がその要素に適用されることを示します。これは contain: layout paint と同等です。
+
size
+
子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。
+
layout
+
要素の外側が内部のレイアウトなどに影響しないことを示します。
+
style
+
ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。なお、この値は仕様書で「リスクあり」と位置づけられており、どこでも対応しているとは限りません。
+
paint
+
その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

単純なレイアウト

+ +

以下のマークアップは多数のコンテンツを持つ記事からなるものです。

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ +

それぞれの <article> および <img> には境界があり、画像は浮動状態です。

+ +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}
+ +

{{EmbedLiveSample('Simple_layout', '100%', '300')}}

+ +

浮動要素の干渉

+ +

1つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、2つ目の記事のレイアウトにも支障をきたしてしまいます。

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+  <img src="i-just-showed-up.jpg" alt="social">
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ + + +

ご覧の通り、浮動要素の動作方法が原因で、最初の画像が2つ目の記事の領域内に掛かってしまっています。

+ +

{{EmbedLiveSample('Float_interference', '100%', '300')}}

+ +

contain による修正

+ +

それぞれの article の contain プロパティを content の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。

+ + + +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+  contain: content;
+}
+ +

これで、最初の画像が2つ目の記事の下に浮いてくることなく、包含する要素の範囲内に留まることも意味します。

+ +

{{EmbedLiveSample('Fixing_with_contain', '100%', '330')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Containment')}}{{Spec2('CSS Containment')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.global_keywords.initial")}}

+ +

関連情報

+ +
    +
  • CSS 抑制
    • +
  • CSS の {{cssxref("position")}} プロパティ
    • +
diff --git a/files/ja/web/css/containing_block/index.html b/files/ja/web/css/containing_block/index.html new file mode 100644 index 0000000000..9239a20877 --- /dev/null +++ b/files/ja/web/css/containing_block/index.html @@ -0,0 +1,269 @@ +--- +title: レイアウトと包含ブロック +slug: Web/CSS/Containing_block +tags: + - CSS + - CSS Position + - Containers + - Guide + - Layout + - Position + - Style + - blocks + - containing block + - size +translation_of: Web/CSS/Containing_block +--- +
{{cssref}}
+ +

要素の寸法や位置は、しばしば包含ブロック (containing block) に影響されます。多くの場合、包含ブロックは要素から見て直近のブロックレベルの祖先のコンテンツ領域ですが、常にそうとは限りません。この記事では、要素の包含ブロックが決まる要因を学びます。

+ +

ユーザーエージェント (ブラウザーなど) が文書をレイアウトする時、それぞれの要素にボックスを生成します。それぞれのボックスは４つの領域に分かれます。

+ +
    +
  1. コンテンツ領域
    2. +
  2. パディング領域
    3. +
  3. 境界領域
    4. +
  4. マージン領域
    5. +
+ +

ボックスモデルの図

+ +

多くの開発者が、要素の包含ブロックは常に親要素のコンテンツ領域であると信じていますが、それは必ずしも正しくありません。要素の包含ブロックが何になるかを決定する要因を調べてみましょう。

+ +

包含ブロックの影響

+ +

何が要素の包含ブロックを決定するかを学習する前に、最初になぜそのようなことが起こるのかを知っておくと役立ちます。

+ +

要素の寸法と位置は、しばしば包含ブロックに影響されます。 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} に適用されるパーセント値や、絶対位置指定要素 (つまり、 {{cssxref("position")}} が absolute または fixed に設定されている要素) のオフセットプロパティは、要素の包含ブロックから計算されます。

+ +

包含ブロックの識別

+ +

包含ブロックを識別するプロセスは、要素の {{cssxref("position")}} プロパティの値に全面的に依存します。

+ +
    +
  1. position プロパティが static, relative, sticky のいずれかの場合、包含ブロックはブロックコンテナー (inline-block, block, list-item などの要素) または整形コンテキストを確立する要素 (表コンテナー、フレックスコンテナー、グリッドコンテナー、ブロックコンテナー自身など) である直近の祖先要素のコンテンツボックスの辺によって構成されます。
    2. +
  2. position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。
    3. +
  3. position プロパティが fixed の場合、包含ブロックは{{glossary("viewport", "ビューポート")}} (連続的なメディアの場合) またはページ領域 (ページメディアの場合) によって確立されます。
    4. +
  4. position プロパティが absolute または fixed の場合、包含ブロックは以下の条件を持った直近の祖先要素におけるパディングボックスの辺によって構成されることがあります。 +
      +
    1. {{cssxref("transform")}} または {{cssxref("perspective")}} の値が none 以外である
      2. +
    2. {{cssxref("will-change")}} の値が transform または perspective である
      3. +
    3. {{cssxref("filter")}} の値が none 以外、または will-change の値が filter の場合 (Firefox のみで動作)。
      4. +
    4. {{cssxref("contain")}} の値が paint の場合 (例 contain: paint;)
      5. +
    +
    5. +
+ +
+

注: ルート要素 ({{HTMLElement("html")}}) が包含ブロックである場合、初期包含ブロックと呼ばれる矩形になります。これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。

+
+ +

包含ブロックからのパーセント値の計算

+ +

前述の通り、特定のプロパティがパーセント値を与えられた場合、計算値は要素の包含ブロックに依存します。このように動作するプロパティはボックスモデルプロパティ及びオフセットプロパティです。

+ +
    +
  1. {{cssxref("height")}}, {{cssxref("top")}}, {{cssxref("bottom")}} の各プロパティは、包含ブロックの height からパーセント値を計算します。
    2. +
  2. {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} の各プロパティは、包含ブロックの width からパーセント値を計算します。
    3. +
+ +

いくつかの例

+ +

すべての例の HTML コードは以下の通りです。

+ +
<body>
+  <section>
+    <p>This is a paragraph!</p>
+  </section>
+</body>
+
+ +

以下のそれぞれの例では、 CSS のみが異なります。

+ +

例 1

+ +

この例では、段落が静的に配置されているため、包含ブロックはブロックコンテナーである直近の祖先である {{HTMLElement("section")}} になります。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_1','100%','300')}}

+ +

例 2

+ +

この例では、 <section> が (display: inline であるため) ブロックコンテナーではなく、整形コンテキストを確立しないので、段落の包含ブロックは {{HTMLElement("body")}} 要素になります。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_2','100%','300')}}

+ +

例 3

+ +

この例では、 <section> の position が absolute であるため、段落の包含ブロックは <section> になります。段落のパーセント値は、包含ブロックの padding に影響されますが、 {{cssxref("box-sizing")}} の値が border-box である場合はそのようにはなりません。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_3','100%','300')}}

+ +

例 4

+ +

この例では、段落の position が fixed なので、包含ブロックは初期包含ブロック (画面の場合はビューポート) になります。従って、段落の寸法はブラウザーウィンドウの寸法に基づいて変化します。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_4','100%','300')}}

+ +

例 5

+ +

この例では、段落の position が absolute なので、包含ブロックは {{cssxref("transform")}} プロパティが none ではない直近の祖先である <section> になります。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_5','100%','300')}}

+ +

関連情報

+ +
    +
  • {{css_key_concepts}}
    • +
  • {{cssxref("all")}} プロパティは、すべての CSS 宣言を初期状態に初期化します
    • +
diff --git a/files/ja/web/css/content/index.html b/files/ja/web/css/content/index.html new file mode 100644 index 0000000000..c28fc33ac9 --- /dev/null +++ b/files/ja/web/css/content/index.html @@ -0,0 +1,297 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - CSS プロパティ + - CSS 生成コンテンツ + - Reference +translation_of: Web/CSS/content +--- +
{{CSSRef}}
+ +

CSS の content プロパティは、要素を生成された値で置き換えます。 content プロパティを使用して挿入されたオブジェクトは、無名の置換要素になります。

+ +
/* 他の値と組み合わせることができないキーワード */
+content: normal;
+content: none;
+
+/* <image> 値 */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* 生成コンテンツの代替テキスト、第3水準の仕様書で追加 */
+content: url("http://www.example.com/test.png") / "This is the alt text";
+
+/* 以下の値は ::before および ::after を使用して生成されたコンテンツにのみ適用 */
+
+/* <string> 値 */
+content: "prefix";
+
+/* <counter> 値 */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* HTML 属性値にリンクした attr() 値 */
+content: attr(value string);
+
+/* 言語や位置に依存したキーワード */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* normal と none を除き、複数の値が同時に使用可 */
+content: open-quote chapter_counter;
+
+/* グローバル値 */
+content: inherit;
+content: initial;
+content: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
擬似要素は生成されません。
+
normal
+
:before および :after 擬似要素では none として計算されます。
+
{{cssxref("<string>")}}
+
要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 \000A9 は著作権記号を表します。
+
{{cssxref("<image>")}}
+
{{cssxref("<url>")}} または {{cssxref("<gradient>")}} データ型で示された {{cssxref("<image>")}}、または表示するコンテンツを記述する {{cssxref("element", "element()")}} 関数で定義されたウェブページの一部です。
+
{{cssxref("<counter>")}}
+
CSS カウンターの値で、通常は数値です。 {{cssxref("counter")}} または {{cssxref("counters")}} 関数を使用して表示することができます。
+
+

{{cssxref("counter")}} 関数には、 'counter(名前)' または 'counter(名前, スタイル)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前の最も内側のカウンターです。指定されたスタイルで整形されます (decimal が既定値です)。

+ +

{{cssxref("counters")}} 関数も、 'counters(名前, 文字列)' または 'counters(名前, 文字列, スタイル)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(decimal が既定値です)。

+
+
attr(x)
+
要素の属性の値 x を文字列として返します。属性 x が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。
+
open-quote | close-quote
+
これらの値は {{cssxref("quotes")}} プロパティの対応する文字列に置き換えられます。
+
no-open-quote | no-close-quote
+
内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

見出しと引用符

+ +

この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。

+ +

HTML

+ +
<h1>5</h1>
+<p>According to Sir Tim Berners-Lee,
+  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.</q>
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p>According to the Mozilla Manifesto,
+  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.</q>
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+</p>
+ +

CSS

+ +
q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* 最後の空白は、追加コンテンツと
+                           残りのコンテンツの間を隔てる
+                           ものです */
+}
+ +

結果

+ +

{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}

+ +

テキストと組み合わせる画像

+ +

この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。

+ +

HTML

+ +
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
+ +

CSS

+ +
a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}
+ +

結果

+ +

{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}

+ +

クラスのターゲッティング

+ +

この例はリストの特定の項目の後に追加のテキストを挿入します。

+ +

HTML

+ +
<h2>Paperback Best Sellers</h2>
+<ol>
+  <li>Political Thriller</li>
+  <li class="new-entry">Halloween Stories</li>
+  <li>My Biography</li>
+  <li class="new-entry">Vampire Romance</li>
+</ol>
+ +

CSS

+ +
.new-entry::after {
+  content: " New!";  /* 先頭の空白は、追加コンテンツと
+                        残りのコンテンツの間を隔てる
+                        ものです */
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Targeting_classes', '100%', 160)}}

+ +

画像および要素の属性

+ +

この例はそれぞれのリンクの前に画像を挿入し、後に id 属性を追加します。

+ +

HTML

+ +
<ul>
+  <li><a id="moz" href="http://www.mozilla.org/">
+    Mozilla Home Page</a></li>
+  <li><a id="mdn" href="https://developer.mozilla.org/">
+    Mozilla Developer Network</a></li>
+</ul>
+ +

CSS

+ +
a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}

+ +

要素の置き換え

+ +

この例は要素の内容を画像で置き換えます。要素の内容を {{cssxref("<url>")}} または {{cssxref("<image>")}} の値のどちらかで置き換えることができます。 ::before または ::after で追加された内容は、要素の中身が置き換えられるときは生成されません。

+ +

HTML

+ +
<div id="replaced">Mozilla</div>
+
+ +

CSS

+ +
#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* 要素の置換に対応している場合は表示されない */
+  content: " (" attr(id) ")";
+}
+ +

結果

+ +

{{EmbedLiveSample('Element_replacement', '100%', 200)}}

+ +

アクセシビリティの考慮事項

+ +

CSS の生成コンテンツは DOM に含まれません。そのため、アクセシビリティツリーに現れず、支援技術とブラウザーの組み合わせによってはアナウンスされません。コンテンツがページの目的を理解する上で重要な情報を持つのであれば、文書本体に含めた方が適切です。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}代替テキストの対応を追加
{{SpecName("CSS2.1", "generate.html#content", "content")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.content")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("::after")}}
    • +
  • {{Cssxref("::before")}}
    • +
  • {{Cssxref("::marker")}}
    • +
  • {{Cssxref("quotes")}}
    • +
  • {{cssxref("url()", "url()")}} 関数
    • +
diff --git a/files/ja/web/css/counter()/index.html b/files/ja/web/css/counter()/index.html new file mode 100644 index 0000000000..7793cfceae --- /dev/null +++ b/files/ja/web/css/counter()/index.html @@ -0,0 +1,140 @@ +--- +title: counter() +slug: Web/CSS/counter() +tags: + - CSS + - CSS Counter + - CSS Function + - Function + - Reference +translation_of: Web/CSS/counter() +--- +

{{CSSRef}}

+ +

counter() は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。擬似要素において用いるのが多いものの、理論的には<string>に対応するすべての箇所で用いることができます。

+ +
/* 単純な使用法 */
+counter(countername);
+
+/* カウンターの表示の変更 */
+counter(countername, upper-roman)
+ +

カウンター自身には視覚的効果が何もありません。 counter() 関数 (および {{cssxref("counters", "counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

+ +
+

注: counters() 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

+ +

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

+
+ +

構文

+ +

値

+ +
+
{{cssxref("<custom-ident>")}}
+
カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また none, unset, initial, inherit という名前は禁止です。
+
<counter-style>
+
カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

既定値と upper-roman との比較

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}
+ +

結果

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero と lower-alpha との比較

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}
+ +

結果

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.counter")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/counter-increment/index.html b/files/ja/web/css/counter-increment/index.html new file mode 100644 index 0000000000..52058c8293 --- /dev/null +++ b/files/ja/web/css/counter-increment/index.html @@ -0,0 +1,120 @@ +--- +title: counter-increment +slug: Web/CSS/counter-increment +tags: + - CSS + - CSS Counter + - CSS Lists + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/counter-increment +--- +
{{CSSRef}}
+ +

CSS の counter-increment プロパティは、指定された値によって CSS カウンターの値を増加又は減少させるためのプロパティです。

+ +
{{EmbedInteractiveExample("pages/css/counter-increment.html")}}
+ + + +
+

注: カウンターの値は CSS の {{cssxref("counter-reset")}} プロパティを使用して任意の値にリセットすることができます。

+
+ +

構文

+ +
/* "my-counter" を 1 増加 */
+counter-increment: my-counter;
+
+/* "my-counter" を 1 減少 */
+counter-increment: my-counter -1;
+
+/* "counter1" を 1 増加、 "counter2" を 4 減少 */
+counter-increment: counter1 counter2 -4;
+
+/* 増加又は減少させない。より詳細度が低い規則を上書きするために使用 */
+counter-increment: none;
+
+/* グローバル値 */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+
+ +

counter-increment プロパティは、以下の値のうちの一つで指定します。

+ +
    +
  • カウンターの名前を指定する <custom-ident> と、その後に任意で <integer>。名前又は名前と数値の組み合わせを空白で区切ることで、数を増減させるカウンターを好きなだけ指定することができます。
    • +
  • キーワード値 none。
    • +
+ +

値

+ +
+
{{cssxref("<custom-ident>")}}
+
増加の対象となる、カウンターの名前です。
+
{{cssxref("<integer>")}}
+
カウンタに加える値です。指定されない場合は既定値の 1 になります。
+
none
+
カウンターは増加しません。これは既定値として、またはより詳細な規則によって増加を取り消すために使用することができます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

名前付きカウンターの増加

+ +
h1 {
+  counter-increment: chapter section 2 page;
+  /* chapter と page カウンタの値を 1 、
+     section カウンタの値を 2 増加させます。 */
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.counter-increment")}}

+ +

関連情報

+ +
    +
  • CSS カウンターの利用
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • {{cssxref("counter")}} および {{cssxref("counters")}} 関数
    • +
diff --git a/files/ja/web/css/counter-reset/index.html b/files/ja/web/css/counter-reset/index.html new file mode 100644 index 0000000000..3a0ac5be80 --- /dev/null +++ b/files/ja/web/css/counter-reset/index.html @@ -0,0 +1,115 @@ +--- +title: counter-reset +slug: Web/CSS/counter-reset +tags: + - CSS + - CSS プロパティ + - CSS リスト + - リファレンス +translation_of: Web/CSS/counter-reset +--- +
{{CSSRef}}
+ +

CSS の counter-reset プロパティは、 CSS カウンターを、与えられた値に初期化します。

+ +
{{EmbedInteractiveExample("pages/css/counter-reset.html")}}
+ + + +
+

メモ: カウンターの値は CSS の {{cssxref("counter-increment")}} プロパティを使用して増加させたり減少させたりすることができます。

+
+ +

構文

+ +
/* "my-counter" を 0 に設定 */
+counter-reset: my-counter;
+
+/* "my-counter" を -1 に設定 */
+counter-reset: my-counter -1;
+
+/* "counter1" を 1 に、 "counter2" を 4 に設定 */
+counter-reset: counter1 1 counter2 4;
+
+/* より詳細度が低い規則による値の初期化をキャンセル */
+counter-reset: none;
+
+/* グローバル値 */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+
+ +

counter-reset プロパティは、以下のうちの一つで指定します。

+ +
    +
  • カウンターの名前を指定する <custom-ident> と、その後に任意で <integer>。名前又は名前と数値の組み合わせを空白で区切ることで、初期化させるカウンターを好きなだけ指定することができます。
    • +
  • キーワード値 none。
    • +
+ +

値

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
初期化の対象となる、カウンターの名前です。
+
{{cssxref("<integer>")}}
+
要素が出現するごとに、カウンターを初期化するための値です。与えられない場合、初期値の 0 なります。
+
none
+
カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された counter-reset を上書きするために使用することができます。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +
h1 {
+  counter-reset: chapter section 1 page;
+  /* chapter と page カウンターを 0 に、
+     section カウンターを 1 に設定します。 */
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}{{Spec2('CSS3 Lists')}}変更なし
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.properties.counter-reset")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/counter-set/index.html b/files/ja/web/css/counter-set/index.html new file mode 100644 index 0000000000..aa081fcccf --- /dev/null +++ b/files/ja/web/css/counter-set/index.html @@ -0,0 +1,109 @@ +--- +title: counter-set +slug: Web/CSS/counter-set +tags: + - CSS + - CSS Counter + - CSS Lists + - CSS Property +translation_of: Web/CSS/counter-set +--- +
{{CSSRef}}
+ +

CSS属性counter-setは，CSS計数を指定した値に設定します。当属性は存在する計数を操作し，新しい計数を作成するのは指定された名前の計数が要素に未だ存在しない場合のみです。

+ +
+

注意: 計数値の増減分にはCSS属性{{cssxref("counter-increment")}}を用いることもできます。

+
+ +

構文

+ +
/* "my-counter"を0に設定 */
+counter-set: my-counter;
+
+/* "my-counter"を-1に設定 */
+counter-set: my-counter -1;
+
+/* "counter1"を1に，"counter2"を4に設定 */
+counter-set: counter1 1 counter2 4;
+
+/* これより詳細度が低い規則で設定される全計数を消去する */
+counter-set: none;
+
+/* 大域値 */
+counter-set: inherit;
+counter-set: initial;
+counter-set: unset;
+
+ +

counter-set属性には次の内どれかを指定します。

+ +
    +
  • 計数名<custom-ident>に引き続く任意の<integer>。指定できる計数の個数に制限はなく，それぞれを空白で区切って指定します。
    • +
  • 予約語none。
    • +
+ +

値

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
設定する計数名。
+
{{cssxref("<integer>")}}
+
この値が，〔当CSSが規則を適用する〕要素が現れる度に計数を設定します。指定なき場合の既定値は0です。指定した名前の計数が現在要素に存在しない場合，その要素に指定された名前の計数を初期値0で新たに作成します（ただし，作成の後，速やかに他の値に設定又は増分されます）。
+
none
+
いかなる計数の設定も行いません。より詳細度の低い規則で定めたcounter-setを上書きするのに使えるでしょう。
+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

事例

+ +
h1 {
+  counter-set: chapter section 1 page;
+  /* "chapter"及び"page"計数を0に，
+     "section"計数を1に設定 */
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Lists', '#propdef-counter-set', 'counter-set')}}{{Spec2('CSS3 Lists')}}初期定義
+ +

{{cssinfo}}

+ +

ブラウザ互換性

+ +
+ + +

{{Compat("css.properties.counter-set")}}

+
+ +

関連項目

+ +
    +
  • CSSカウンタの使用
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • {{cssxref("counter")}}及び{{cssxref("counters")}}関数
    • +
  • {{cssxref("content")}}属性
    • +
diff --git a/files/ja/web/css/counters()/index.html b/files/ja/web/css/counters()/index.html new file mode 100644 index 0000000000..3c7412b968 --- /dev/null +++ b/files/ja/web/css/counters()/index.html @@ -0,0 +1,183 @@ +--- +title: counters() +slug: Web/CSS/counters() +tags: + - CSS + - CSS Counter + - CSS Function + - Function + - Reference +translation_of: Web/CSS/counters() +--- +

{{CSSRef}}

+ +

counter() は CSS の関数で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 counters() 関数には counters(name, string) と counters(name, string, style) の二つの形式があります。一般的には擬似要素と一緒に使用されますが、理論的には <string> 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で decimal で表示されます。

+ +
/* 単純な使用法 - スタイルは既定で decimal */
+counters(countername, '-');
+
+/* カウンターの表示の変更 */
+counters(countername, '.', upper-roman)
+ +

カウンター自身には視覚的効果が何もありません。 counters() 関数 (および {{cssxref("counter", "counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

+ +
+

注: counters() 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

+ +

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

+
+ +

構文

+ +

値

+ +
+
{{cssxref("<custom-ident>")}}
+
カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また none, unset, initial, inherit という名前は禁止です。
+
<counter-style>
+
カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。
+
{{cssxref("<string>")}}
+
任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば \000A9 は著作権記号を表します。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

既定値と upper-roman との比較

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}
+ +

結果

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero と lower-alpha との比較

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+}
+ +

結果

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.counters")}}

+ +

関連情報

+ +
    +
  • CSS カウンターの使用
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • CSS の counters() 関数
    • +
  • {{cssxref("::marker")}}
    • +
diff --git a/files/ja/web/css/cross-fade()/index.html b/files/ja/web/css/cross-fade()/index.html new file mode 100644 index 0000000000..c3144141f5 --- /dev/null +++ b/files/ja/web/css/cross-fade()/index.html @@ -0,0 +1,153 @@ +--- +title: cross-fade() +slug: Web/CSS/cross-fade() +tags: + - CSS + - CSS Function + - CSS-4 Images + - Experimental + - Function + - Reference + - Web +translation_of: Web/CSS/cross-fade() +--- +

{{CSSRef}}

+ +

CSS の cross-fade() 関数は、2枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。

+ +

構文

+ +

重要: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。

+ +

仕様書上の構文

+ +

cross-fade() 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、 “%” 記号を含め、 0% から 100% までの間である必要があります。

+ +

この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。

+ +

cross-fade のパーセント値

+ +

Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.

+ +
cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */
+cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
+cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
+cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
+cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */
+cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
+ +

If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.

+ +

In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.

+ +

The above could also have been written as:

+ +
cross-fade( url(white.png) 0%,   url(black.png)); /* fully black */
+cross-fade( url(white.png) 25%,  url(black.png)); /* 25% white, 75% black */
+cross-fade( url(white.png),      url(black.png)); /* 50% white, 50% black */
+cross-fade( url(white.png) 75%,  url(black.png)); /* 75% white, 25% black */
+cross-fade( url(white.png) 100%, url(black.png)); /* fully white */
+cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
+ +

If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages.

+ +

In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.

+ +

If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:

+ +
cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
+cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
+ +

Older, implemented syntax

+ +
cross-fade( <image, <image>, <percentage> )
+ +

The specification for the cross-fade() function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The original syntax, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the -webkit- prefix in Chrome, Opera, and other blink-based browsers.

+ +
cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
+cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
+cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
+cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
+cross-fade(url(white.png), url(black.png), 100%); /* fully white */
+
+ +

In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image.

+ +

The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.

+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。

+ + + +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

cross-fade の古い構文

+ +

HTML

+ +
<div class="crossfade"></div>
+ +

CSS

+ +
.crossfade {
+    width: 300px;
+    height: 300px;
+    background-image: -webkit-cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+    background-image: cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+}
+ +

結果

+ +

{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}{{Spec2('CSS4 Images')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.image.cross-fade")}}

+ +

関連情報

+ +
    +
  • {{cssxref("image")}}
    • +
  • {{cssxref("url")}}
    • +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("image-set")}}
    • +
  • {{cssxref("element")}}
    • +
  • CSS グラデーションの使用
    • +
  • グラデーション関数: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},
    • +
diff --git a/files/ja/web/css/css_animated_properties/index.html b/files/ja/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..db600908d3 --- /dev/null +++ b/files/ja/web/css/css_animated_properties/index.html @@ -0,0 +1,21 @@ +--- +title: アニメーション可能な CSS プロパティ +slug: Web/CSS/CSS_animated_properties +tags: + - CSS + - CSS Animations + - CSS Transitions + - CSS アニメーション + - CSS トランジション + - Guide + - Reference + - ガイド +translation_of: Web/CSS/CSS_animated_properties +--- +
{{CSSRef}}
+ +

CSS アニメーションまたは CSS トランジションを使用すると、特定の CSS プロパティをアニメーションさせることができます。アニメーションとは、それらの値を所定の時間をかけて徐々に変化させることができることを意味します。

+ +

アニメーション可能なプロパティは次の通りです。

+ +

{{CSSAnimatedProperties}}

diff --git a/files/ja/web/css/css_animations/detecting_css_animation_support/index.html b/files/ja/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..8ef15c0236 --- /dev/null +++ b/files/ja/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,99 @@ +--- +title: CSS アニメーション対応の検出 +slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +tags: + - Advanced + - CSS + - CSS アニメーション + - Guide + - JavaScript + - Junk + - Reference +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +
{{CSSRef}}
+ +

CSS アニメーションでは CSS だけを使用してコンテンツの創造的なアニメーションを行うことができます。しかし、この機能が利用できないことがよくあり、この場合には同様の効果を JavaScript コードで実現したいと思うかもしれません。この記事では、このブログ投稿 (Chris Heilmann 著) に基づいて、これを行うためのテクニックを紹介します。

+ +

CSS アニメーションへの対応の検査

+ +

このコードは、 CSS アニメーション対応があるかどうかをチェックします。

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

最初にいくつかの変数を定義します。アニメーションに対応していないと仮定して、 animation に false を設定します。 animationstring を後で設定するプロパティである animation に設定します。ループ用にブラウザーの接頭辞の配列を生成して、 pfx を空文字列に設定します。

+ +

それから、 CSS の {{cssxref("animation-name")}} プロパティが変数 elem で指定された要素のスタイルコレクションに設定されていることを確認します。これは、ブラウザーが CSS アニメーションを接頭辞なしで対応していることを意味するので、その際は何もしません。

+ +

ブラウザーが接頭辞なしのアニメーションに対応していなければ、 animation はまだ false ですが、主要なブラウザー全てがこのプロパティに接頭辞を付けているので、可能性のある接頭辞をすべて試して、名前が AnimationName に変化するかを調べます。

+ +

このコードの実行が終了したとき、値が false であれば CSS アニメーション対応が有効ではなく、そうでなければ true となります。 true であった場合、 animation プロパティの名前とキーフレームの接頭辞は正しいものになります。よって、新しい Firefox を使用している場合は、プロパティは MozAnimation となってキーフレームの接頭辞は -moz- となり、 Chrome ではそれぞれ WebkitAnimation および -webkit- になります。なお、ブラウザーではキャメルケースとハイフンを簡単に切り替えることはできません。

+ +

様々なブラウザーで正しい構文を使用したアニメーション

+ +

CSS アニメーションに対応しているかどうか分かったところで、アニメーションを行うことができます。

+ +
if( animation === false ) {
+
+  // JavaScript によるアニメーションの代替
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

このコードは animation の値を見ます。もし false ならば、アニメーションを実行するために JavaScript の代替コードを使う必要があることが分かります。そうでなければ、求められる CSS アニメーション効果を生成するために JavaScript を使用することができます。

+ +

animation プロパティの設定は簡単です。単にスタイルコレクションの値を更新するだけです。しかし、 keyframe の追加は、従来の CSS の構文を使用して定義されていないため、より困難です (より柔軟性がありますが、スクリプトの定義がより難しくなります)。

+ +

JavaScript を用いて keyframe を定義するには、それを CSS 文字列に書き出す必要があります。行うことは、 keyframes 変数を設定し、構築されるそれぞれの属性に接頭辞を付けることです。この変数は、いったん構築されれば、一連のアニメーションシーケンスで必要なすべてのキーフレームの完全な記述を含んでいます。

+ +

次の仕事は、ページの CSS に実際にキーフレームを追加することです。最初に行うことは、文書に既にスタイルシートがあるかどうかを確認することです。もしあれば、単にそのスタイルシートにキーフレームの記述を挿入するだけです。これは13-15行目で行っています。

+ +

スタイルシートがないのであれば、新しい {{HTMLElement("style")}} 要素を生成し、その内容をキーフレームの値のセットとします。それから新しい {{HTMLElement("style")}} 要素を文書の {{HTMLElement("head")}} に追加し、それによって新しいスタイルシートが文書に追加されます。/p>

+ +

JSFiddle で見る

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_animations/index.html b/files/ja/web/css/css_animations/index.html new file mode 100644 index 0000000000..e75719617a --- /dev/null +++ b/files/ja/web/css/css_animations/index.html @@ -0,0 +1,85 @@ +--- +title: CSS アニメーション +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS アニメーション + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +
{{CSSRef}}
+ +

CSS アニメーション (CSS Animations) は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。

+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

CSS @-規則

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

ガイド

+ +
+
CSS アニメーション対応の検出
+
ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。
+
CSS アニメーションの使用
+
CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティと @-規則、それに互いにどのように関係するのかを説明します。
+
CSS アニメーションのコツとトリック
+
CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}初回定義
+ +

ブラウザーの対応

+ +

animation プロパティ

+ +
+ + +

{{Compat("css.properties.animation")}}

+
+ +

関連情報

+ +
    +
  • CSS アニメーションに関連して、 CSS トランジションはユーザーの操作に基づいてアニメーションを起動することができます。
    • +
diff --git a/files/ja/web/css/css_animations/tips/index.html b/files/ja/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..4d2fa03e26 --- /dev/null +++ b/files/ja/web/css/css_animations/tips/index.html @@ -0,0 +1,156 @@ +--- +title: CSS アニメーションのヒントとコツ +slug: Web/CSS/CSS_Animations/Tips +tags: + - CSS + - CSS Animations + - Example + - Guide + - Reference +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{cssref}}
+ +

CSS アニメーションはドキュメントとアプリを構成する要素を使って驚くべき事を行うことを可能にします。 しかしながら、行いたくても理解しやすくないことがあったり、すぐに思いつかないであろう巧妙な方法があります。 この記事は停止したアニメーションをどのように再び実行するのかを含む、あなたの仕事を楽にするかもしれない私達が見つけた秘訣やトリックを集めたものになります。

+ +

再度アニメーションを実行する

+ +

CSS アニメーションの仕様書では再度アニメーションを実行する方法を提示していません。 要素に魔法の関数 resetAnimation() というものはなく、要素の {{cssxref("animation-play-state")}} を再び "running" に設定することさえもできません。その代わりに、停止したアニメーションをリプレイするための巧妙なトリックを使う必要があります。

+ +

ここでの私達が考える停止したアニメーションのリプレイを行う方法はあなたに提案することに対して十分に信頼、安定しています。

+ +

HTML の内容

+ +

はじめに、HTML にアニメーションしてほしい {{HTMLElement("div")}} と、アニメーションを再生(またはリプレイ)するためのボタンを定義しましょう。

+ +
<div class="box">
+</div>
+
+<div class="runButton">Click me to run the animation</div>
+ +

CSS の内容

+ +

次に CSS を使ってアニメーションそのものを定義しましょう。 簡潔さのためにいくつかの重要ではない CSS (”Run” ボタンそのもののスタイル) はここではお見せしません。

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

ここに2つのクラスがあります。 ”box” クラスはアニメーション情報を含まない box の外見の基本的な記述です。 アニメーションの詳細は ”changing” クラスに含まれており、その中で ”colorchange” と名付けられた {{cssxref("@keyframes")}} は box をアニメーションするために2秒間を使うべきだと書いてあります。

+ +

このため、box は所定の位置でアニメーション効果を開始しないので、アニメーションすることはないでしょう。

+ +

JavaScript の内容

+ +

次にアニメーションを行うための JavaScript を見ていきます。 このテクニックの内容は play() 関数にあり、ユーザーが "Run" ボタンをクリックした時に呼ばれます。

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

これは奇妙に見受けられるでしょうか？ 再度アニメーションを実行する唯一の方法はアニメーション効果を取り除くことであるため、あなたが行いたいことをドキュメントに知らせてあげて、ドキュメントにスタイルの再計算させてあげましょう。 その時要素に戻るためのアニメーション効果を追加します。 それを実現するためには、私達は創造的でなければなりません。

+ +

play() 関数が呼び出された時に起きることは以下のものです。

+ +
    +
  1. box の CSS クラスのリストを単純な "box" にリセットします。 これは、その box に現在適用されている他のどのクラスを取り除く効果を持ちます。 これにはアニメーションを扱う "changing" クラスが含まれます。 言い換えると、box からアニメーション効果を取り除きます。 しかしながら、クラスのリストを変更することはそのスタイルの再計算が完了するまで効果を持たず、更新はその変更を反映するために発生し続けます。
    2. +
  2. スタイルが確実に再計算されるように、{{domxref("window.requestAnimationFrame()")}} を使用し、コールバックを指定します。 コールバックは次のドキュメントの再描画の前に適切に実行されます。 問題はそのコールバックの呼び出しが再描画の前であるゆえに、スタイルの再計算はまだ実際に起きてはいないのです。
    3. +
  3. コールバックは巧妙でもう一度 requestAnimationFrame() を呼びます！ 今回は、スタイルの再計算が行われた後の次の再描画の前に、コールバックが実行されます。 このコールバックは box クラスの後ろに "changing" クラスを追加し、そのためクラスを追加したことによる再描画はもう一度要素のアニメーションを始めることでしょう。
    4. +
+ +

もちろん、実際に動作するために "Run" ボタンにイベントハンドラーを追加することは必要です。

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

結果

+ +

{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}

+ +

アニメーションの停止

+ +

単純に、要素に適用した {{cssxref("animation-name")}} を取り除くことはそれの次の状態にジャンプまたは割り込ませます。 代わりに、アニメーションを完了して停止する場合は、別のアプローチを試す必要があります。 主要なトリックは次のものです。

+ +
    +
  1. 可能なら自身を含めるようアニメーションさせること。 これは animation-direction: alternate を信頼するべきではないことを意味します。 代わりに一回の繰り返しの中で完全なアニメーションを経過するキーフレームアニメーションを明示的に書くべきです。
    2. +
  2. JavaScript を使用し、animationiteration イベントが発生した時に使われるアニメーションをクリアーすること。
    3. +
+ +

次のデモは前述の JavaScript テクニックをどのように利用するかを示します。

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +
<h1 id="watchme">Click me to stop</h1>
+
+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

デモ https://jsfiddle.net/morenoh149/5ty5a4oy/

+ +

関連項目

+ + diff --git a/files/ja/web/css/css_animations/using_css_animations/index.html b/files/ja/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..1c38fe8147 --- /dev/null +++ b/files/ja/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,376 @@ +--- +title: CSS アニメーションの使用 +slug: Web/CSS/CSS_Animations/Using_CSS_animations +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{CSSRef}}

+ +

CSS アニメーションは、ある CSS のスタイル設定を別の設定へ遷移させることを可能にします。 アニメーションは、2 種類の要素で構成されています。 それは、アニメーションについて記述するスタイルと、アニメーションの始めと終わりの CSS スタイルを示すキーフレームです。 同様に、アニメーション途中の通過点となるスタイルを示すこともできます。

+ +

CSS アニメーションは、従来のスクリプトによるアニメーションに比べて 3 つの長所があります。

+ +
    +
  1. 単純なアニメーションには使いやすくできています。 つまり、 JavaScript を知らない場合でもアニメーションを作ることができます。
    2. +
  2. アニメーションは中程度以下のシステム負荷で、良く動作します。 JavaScript では、 (上手に作成しなければ) 単純なアニメーションでもシステムの負荷を高めてしまうことがあります。 レンダリングエンジンは可能な限りパフォーマンスをなめらかに保つため、フレームを省略するなどの技術を用いることができます。
    3. +
  3. ブラウザーはアニメーションの流れを制御して、パフォーマンスや効率を最適化します。 例えば、アクティブではないタブで動作しているアニメーションは、更新の頻度を減らします。
    4. +
+ +

アニメーションの設定

+ +

CSS アニメーションの流れ (シーケンス) を作成するには、アニメーションさせたい要素に {{cssxref("animation")}} プロパティまたはそのサブプロパティを付加します。 このプロパティはアニメーションのタイミングと長さを設定します。 同様に、アニメーションをどのように進めるかの詳細も設定できます。 なお、このプロパティはアニメーションの外見を指定するものではありません。 それらは、後述のキーフレームを用いたアニメーションの流れの定義で説明する {{cssxref("@keyframes")}} @ 規則で定義します。

+ +

{{cssxref("animation")}} プロパティのサブプロパティは以下のとおりです:

+ +
+
{{cssxref("animation-name")}}
+
アニメーションのキーフレームを示す {{cssxref("@keyframes")}} @ 規則の名前を指定します。
+
{{cssxref("animation-duration")}}
+
1 回のアニメーションサイクルに要する時間の長さを設定します。
+
{{cssxref("animation-timing-function")}}
+
アニメーションの進め方を設定します。 これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。
+
{{cssxref("animation-delay")}}
+
要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。
+
{{cssxref("animation-iteration-count")}}
+
アニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには infinite を指定してください。
+
{{cssxref("animation-direction")}}
+
アニメーションのシーケンス完了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。
+
{{cssxref("animation-fill-mode")}}
+
アニメーションの実行前後に、指定したスタイルを適用するかを設定します。
+
{{cssxref("animation-play-state")}}
+
アニメーションを一時停止したり、再開したりすることができます。
+
+ +

キーフレームを用いたアニメーションの流れの定義

+ +

アニメーションのタイミングを指定した後は、アニメーションの外見を定義することが必要です。 これは、{{cssxref("@keyframes")}} @ 規則を用いて 2 つまたはそれ以上のキーフレームを定義することです。 各キーフレームは、アニメーションの流れの中で要素がどのように表現されるかを記述します。

+ +

CSS スタイルでアニメーションのタイミングを定義するため、キーフレームを {{cssxref("percentage")}} で指定し、アニメーションの流れの中でいつそのスタイルが適用されるかを示します。 0% はアニメーションの始点、100% はアニメーションが終点を表します。 これら始点と終点はとても重要なため、それぞれ、0% は from、100% は to の別名でも代替できます。 両者の指定は任意ですが、from/0% と to/100% の両方が指定されていない場合、ブラウザーは、すべての属性から計算された値を用いてアニメーションを開始または終了します。

+ +

また、任意でアニメーションの始まりと終わりの中間地点を定義する追加のキーフレームを含めることも可能です。

+ +

例

+ +
メモ: (2017年以前の) 古いブラウザーでは接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、-webkit 接頭辞を付加したプロパティも含まれています。
+ +

文字列がブラウザーのウィンドウを横切る

+ +

この例では文字列がブラウザーのウィンドウ右端の外側からすべり込むように、 {{HTMLElement("p")}} 要素へスタイルを設定しています。

+ +

このようなアニメーションは、ページ幅がブラウザーウィンドウの幅よりも広くなる原因になるので注意してください。 これは、アニメーションする要素をコンテナ内に置き、そのコンテナのスタイルに {{cssxref("overflow")}}:hidden を指定することで回避できます。

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

{{HTMLElement("p")}} 要素では、アニメーションの始まりから終わりまでの実行に 3 秒かけることを {{cssxref("animation-duration")}} プロパティで定義しています。 また、アニメーションのキーフレームを定義する {{cssxref("@keyframes")}} @ 規則の名前が "slidein" であることを定義しています。

+ +

{{HTMLElement("p")}} 要素に CSS アニメーションに対応していないブラウザーでのスタイルを設定したい場合は、この部分にそれらのスタイルを含めてください。 ただし、この例ではアニメーション効果以外のスタイル付けは必要ありません。

+ +

キーフレームは {{cssxref("@keyframes")}} @ 規則で定義します。 この例には、2 つのキーフレームがあります。 1 番目のキーフレームは 0% (代替表記の from を使用しています) です。 ここでは、要素の左マージンを 100% (包含要素の右端を示します) に、要素の幅を 300% (包含要素の幅の 3 倍) に設定しています。 これによりアニメーションの始まりの時点では、見出しがブラウザーのウィンドウの右端の外側に描画されます。

+ +

2 番目 (かつ最後) のキーフレームは、100% (代替表記の to を使用しています) です。 要素の左マージンを 0% に、幅を 100% に設定しています。 これにより、見出しがコンテンツエリアの左端へすべり込むことでアニメーションが終わります。

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +
+

注: アニメーションを見るにはページを再読み込みするか、 CodePen 環境では CodePen ボタンをクリックしてください。

+
+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

キーフレームの追加

+ +

先ほどのアニメーション例に、他のキーフレームを追加してみましょう。 例えば、見出しが右から左へ動くのにあわせて文字サイズを大きくしてゆき、その後元のサイズへ戻るようにしたいとします。 これには、単純に以下のキーフレームを追加します:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ +

コード全体は次のようなものです。

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

これはブラウザーに、アニメーションの流れの 75% 経過時点で見出しの左マージンを 25% に、また幅を 150% にするよう設定します。

+ +
+

注: アニメーションを見るにはページを再読み込みするか、 CodePen 環境では CodePen ボタンをクリックしてください。

+
+ +

{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

+ +

アニメーションの繰り返し

+ +

アニメーションを繰り返すためには {{cssxref("animation-iteration-count")}} を用いて、アニメーションを何回繰り返すかを設定します。 以下の例では、infinite を指定してアニメーションを無期限に繰り返します。

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ +

これを既存のコードの追加してください。

+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

{{EmbedLiveSample("Making_it_repeat","100%","250")}}

+ +

前後の移動

+ +

アニメーションを繰り返すようにしましたが、毎回始めの状態にジャンプしてアニメーションが始まるのはとても不自然です。 画面上を前後に移動するようにしたいでしょう。 これは、{{cssxref("animation-direction")}} プロパティに alternate を設定することで簡単に実現できます:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

そしてコードの残りは次の通りです。

+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

+ +

animation 一括指定の利用

+ +

{{cssxref("animation")}} 一括指定はスペースの節約に便利です。 例として、この記事を通して使用してきているルールがあります。

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

このように置き換えることができます。

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+
+ +
+

メモ: 詳しくは、 {{cssxref("animation")}} のリファレンスページをご覧ください。

+
+ +

複数のアニメーションプロパティ値の設定

+ +

CSS アニメーションの個別指定値は、コンマで区切って複数の値を受け付けることができます。 — この機能は複数のアニメーションに一つの規則を適用したり、別々なアニメーションに別々の期間、繰り返し回数などを適用したい時に使うことができます。 別々な変化を説明するために、いくつか簡単な例を見てみましょう。

+ +

この例では、三つのアニメーション名を設定していますが、期間と繰り返し回数は1つしか設定していません。 この場合、3つのアニメーションはすべて同じ期間と繰り返し回数になります。

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

第二の例では、三つの値を三つのプロパティ全てに設定しました。この場合、それぞれのアニメーションはそれぞれのプロパティの同じ位置で対応する値で実行されますので、例えば fadeInOut の長さは 2.5s で、繰り返し回数は 2 のようになります。

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

第三の例では、三つのアニメーションが指定されていますが、期間と繰り返し回数は二つしかありません。 この場合、それぞれのアニメーションに個別の値が不足するので、値は最初から最後まで繰り返して使用されます。 ですから例えば、fadeInOut の長さは 2.5s で moveLeft300px の長さは 5s となります。 これで妥当な期間の値の最後に来たので、最初からまた始まります。 — 従って bounce の長さは 2.5s になります。 繰り返し回数 (および指定した他のプロパティ) は、同様に割り当てられます。

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

アニメーションイベントの利用

+ +

アニメーションイベントを用いることで、アニメーションをさらに制御したり、アニメーションの有用な情報を得たりすることができます。 これらのイベントは {{domxref("event/AnimationEvent", "AnimationEvent")}} オブジェクトに集められており、アニメーションの開始・終了・繰り返しの始まりを検出することができます。 それぞれのイベントには発生した時間や、イベントが発生したアニメーションの名前が含まれています。

+ +

文字列がすべり込むアニメーションの例を、アニメーションがいつ発生したかの情報を出力するように変更して、イベントがどのように働くかを見てみましょう。

+ +

CSS の追加

+ +

アニメーションの CSS を作成することから始めます。 このアニメーションは、"slidein" が呼び出されて 3 秒後に終わり、3 回繰り返されます。 繰り返すたびに、逆方向へアニメーションします。 {{cssxref("@keyframes")}} 内で、要素が画面を横切るようにするため、 width と margin-left を操作します。

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

アニメーションイベントのリスナーの追加

+ +

使用することができる 3 つのアニメーションイベントを取得するため、 JavaScript のコードを用います。 setup() 関数は、イベントのリスナーになります。 この関数は文書が読み込まれたとき、最初に呼び出します。

+ +
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+
+ +

これは一般的なコードです。 このコードがどのように働くかについて、詳しくは {{domxref("element.addEventListener()")}} の文書を参照してください。 最後に setup() 関数では要素の class 属性を、アニメーションを設定したクラス "slidein" に設定しています。 これによりアニメーションを開始させています。

+ +

なぜこのような処理を行うのでしょうか？ それは、 animationstart イベントはアニメーションが始まるとすぐに発生するので、この例ではコードを実行する前にイベントが発生してしまうためです。 そこでコードの実行後に要素の class 属性をアニメーションのスタイルを記述したものに設定することで、アニメーションを開始させるようにしています。

+ +

イベントを受け取る

+ +

イベントは、以下の listener() 関数に送られます。

+ +
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

こちらのコードも、非常に単純です。 単純に {{domxref("event.type")}} を見てどのイベントが発生したかを判断して、発生したイベントの記録として、{{HTMLElement("ul")}} (順序なしリスト) で適切な情報を出力しています。

+ +

その出力は、最終的に以下のようになります:

+ +
    +
  • Started: elapsed time is 0
    • +
  • New loop started at time 3.01200008392334
    • +
  • New loop started at time 6.00600004196167
    • +
  • Ended: elapsed time is 9.234000205993652
    • +
+ +

表示された時間が、アニメーションの設定時に指定した時間から予測されるものにとても近く、しかし厳密に一致はしていないことに注意してください。 また、最終の繰り返しの後に animationiteration イベントが発生していないことにも注意してください。 ただし、animationend イベントは発生しています。

+ +

HTML

+ +

この例を完成させるために、コンテンツの表示と受信したイベントの情報をスクリプトが挿入するために用いる HTML 文書を以下に掲載します:

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.
+</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+
+ +

そしてこちらはライブ出力です。

+ +
+

注: アニメーションを見るにはページを再読み込みするか、 CodePen 環境でアニメーションを見るには CodePen ボタンをクリックしてください。

+
+ +

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..fa4aa48cdf --- /dev/null +++ b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2629 @@ +--- +title: 境界画像作成ツール +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +tags: + - CSS + - CSS 背景と境界 + - ツール +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。

+ +
+

Border Image Generator

+ +

HTML Content

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +
{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}
+ +

 

diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..7ec4cab13e --- /dev/null +++ b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1602 @@ +--- +title: Border-radius ジェネレーター +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +tags: + - CSS + - CSS Borders + - CSS 境界と背景 + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。

+ +
+

border-radius

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> 丸いコーナー </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> 境界の単位を選択 </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{ EmbedLiveSample('border-radius-generator', 700, 900) }}
diff --git a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..8baafa448c --- /dev/null +++ b/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,73 @@ +--- +title: CSS での複数の背景の利用方法 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +

{{CSSRef}}

+ +

CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

+ +

複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。

+ +
.myclass {
+  background: 背景1, 背景2, ..., 背景N;
+}
+ +

この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。

+ +

例

+ +

次の例では、上位レイヤーから

+ +
    +
  1. Firefox のロゴ
    2. +
  2. 線形グラデーション
    3. +
  3. 花の画像
    4. +
+ +

の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。

+ +
.multi_bg_example {
+  background-image:
+    url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */
+    linear-gradient( to right, rgba(255,255,255,0),  #fff ),
+    url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg");
+
+  background-repeat:
+    no-repeat, /* 最前面の背景レイヤーに対応 */
+	no-repeat,
+	repeat;
+
+  background-position:
+    bottom right, /* 最前面の背景レイヤーに対応 */
+	left,
+	right;
+}
+ + + + + + + + + + +
スクリーンショット
css_multibg.png
+ +

スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ background-image で記述した各値に対し、同じ順番で適用されます。つまり、background-image の最初の値として指定した FireFox のアイコンの画像に対し、
+ {{cssxref("background-repeat")}} は "bottom left"、
+ {{cssxref("background-position")}} は "no-repeat"
+ が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの右下に、ひとつだけ 表示されるのです。

+ +

関連記事

+ + diff --git a/files/ja/web/css/css_backgrounds_and_borders/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..6e43c5ab15 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,112 @@ +--- +title: CSS 背景と境界 +slug: Web/CSS/CSS_Backgrounds_and_Borders +tags: + - CSS + - CSS 背景と境界 + - Reference + - 概要 +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +
{{CSSRef}}
+ +

CSS 背景と境界モジュールでスタイル付けをすると、背景を色や画像で埋めたり (クリッピングや寸法の変更も) 他の加工を行ったりすることができます。これらのスタイルでは、境界を線や画像で装飾したり、四角くしたり丸くしたりすることもできます。(さらに、要素ボックスに影をつけて装飾することもできます)。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
+
+ +

ツール

+ +
+
複数の背景の使用
+
要素に1つまたは複数の背景を設定する方法を説明します。
+
背景画像の拡縮
+
背景画像の拡大縮小や繰り返しを変更する方法を説明します。
+
CSS を使った HTML の要素への色の適用
+
CSS の色が境界を含む HTML でどのように使われるかを概観します。
+
境界画像作成ツール
+
境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。
+
境界角丸作成ツール
+
角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。
+
ボックスの影作成ツール
+
要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }}
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}}
diff --git a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html new file mode 100644 index 0000000000..dde72afbab --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html @@ -0,0 +1,143 @@ +--- +title: 背景画像の拡大縮小 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate + - Reference + - Scale + - Scaling + - Web + - dimensions + - height + - resize + - width +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +
{{cssref}}
+ +

{{cssxref("background-size")}} は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。

+ +

巨大な画像を並べて表示

+ +

巨大な画像、2982x2808の Firefox のロゴ画像を想像してください。この画像を300x300ピクセルの要素の中に4枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 background-size に固定値の150ピクセルの値を使用すると、このようにすることができます。

+ +

HTML

+ +
<div class="tiledBackground">
+</div>
+ +

CSS

+ +
.tiledBackground {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}

+ +

画像の拡大縮小

+ +

以下のように、画像の水平と垂直の両方の寸法を指定することもできます。

+ +
background-size: 300px 150px;
+
+ +

結果は以下のようになります。

+ +

引き伸ばされた新しい Firefox のロゴ

+ +

画像の拡大

+ +

一方で、背景の画像を拡大することができます。ここでは32x32ピクセルのファビコンを300x300ピクセルに拡大します。

+ +

拡大された MDN ロゴ

+ +
.square2 {
+  background-image: url(favicon.png);
+  background-size: 300px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

見てのとおり、 CSS は実際には基本的に同一で、画像ファイルの名前を保存してください。

+ +

特殊な値: "contain" と "cover"

+ +

{{cssxref("<length>")}} の値以外に、 CSS の {{ cssxref("background-size") }} プロパティは contain と cover という二つの特殊な寸法の値を提供しています。これらを見てみましょう。

+ +

contain

+ +

contain の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。

+ +

HTML

+ +
<div class="bgSizeContain">
+  <p>この要素の寸法を変更してみてください！</p>
+</div>
+ +

CSS

+ +
.bgSizeContain {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

結果

+ +

{{ EmbedLiveSample('contain', 250, 250) }}

+ +

cover

+ +

cover の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。

+ +

HTML

+ +
<div class="bgSizeCover">
+  <p>この要素の寸法を変更してみてください！</p>
+</div>
+ +

CSS

+ +
.bgSizeCover {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

結果

+ +

{{ EmbedLiveSample('cover', 250, 250) }}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..e5a24c51d9 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,62 @@ +--- +title: 複数の背景画像の利用 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +
{{CSSRef}}
+ +

複数の背景画像を要素に適用できます。これらは、最初に記述した背景が一番上になり、後に記述した背景がその下になるように重ね合わされます。最後の背景にだけ、背景色を指定できます。

+ +

複数の背景の指定は、下記のように簡単です。

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

{{ cssxref("background-color") }} を除いて、短縮プロパティの {{ cssxref("background") }} と個々のプロパティの両方で指定できます。つまり、下記のプロパティは背景ひとつずつに対して指定できます。
+{{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

例

+ +

この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして linear-gradient です。

+ +

HTML

+ +
<div class="multi-bg-example"></div>
+ +

CSS

+ +
.multi-bg-example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat,
+      no-repeat,
+      no-repeat;
+  background-position: bottom right,
+      left,
+      right;
+}
+ +

結果

+ +

(CodePen で画像が表示されない場合、CSS 部分の「Tidy CSS」をクリックしてください)

+ +

{{EmbedLiveSample('Example','600','400')}}

+ +

ご覧のように、Firefox のロゴ ({{ cssxref("background-image") }} で最初に記載) が一番上になり、泡の画像がそれに続き、グラデーション (最後に記述) が前述の全ての画像の下に配置されています。後に続くプロパティ ({{ cssxref("background-repeat") }} と {{ cssxref("background-position") }}) はそれぞれの背景に対応して適用されています。つまり、{{ cssxref("background-repeat") }} の最初の値は最初(最前面)の画像に適用され、後に続くものも順番に適用されます。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_basic_user_interface/index.html b/files/ja/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..c8e3a80d85 --- /dev/null +++ b/files/ja/web/css/css_basic_user_interface/index.html @@ -0,0 +1,74 @@ +--- +title: CSS 基本ユーザーインターフェイス +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - CSS + - CSS 基本ユーザーインターフェイス + - Reference + - 概要 +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +
{{CSSRef}}
+ +

CSS 基本ユーザーインターフェイス (CSS Basic User Interface) は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("box-sizing")}}
    • +
  • {{CSSxRef("cursor")}}
    • +
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("outline")}}
    • +
  • {{CSSxRef("outline-width")}}
    • +
  • {{CSSxRef("outline-style")}}
    • +
  • {{CSSxRef("outline-color")}}
    • +
  • {{CSSxRef("outline-offset")}}
    • +
  • {{CSSxRef("resize")}}
    • +
  • {{CSSxRef("text-overflow")}}
    • +
  • {{CSSxRef("user-select")}} {{Experimental_Inline}}
    • +
+
+ +

ガイド

+ +
+
cursor プロパティでの URL 値の使用
+
カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}} 
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}} 
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}初回定義
diff --git a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..98b56ee788 --- /dev/null +++ b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,119 @@ +--- +title: cursor プロパティでの URL 値の使用 +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +tags: + - CSS + - Gecko + - Guide + - NeedsUpdate + - Reference +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +
{{cssref}}
+ +

Gecko 1.8 は CSS の{{CSSxRef("cursor")}} プロパティで、 URL の値を Windows と Linux で対応しています。 Mac の対応は Gecko 2 (Firefox 4) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。

+ +

構文

+ +

基本 (CSS 2.1) の基本的な記述は次の通りです。

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
+ +

つまり、0個以上の URL が (カンマ区切りで) 指定されることがありますが、 auto や pointer などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。

+ +

例えば次のような値が有効です。

+ +
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+ +

始めに foo.cur を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、 bar.gif を読み込もうとし、どちらも利用できない場合は auto が使用されます。

+ +

Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
+
+ +

これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。

+ +
.foo  {
+  cursor: auto;
+  cursor: url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+  cursor: pointer;
+  cursor: url(cursor2.png) 2 2, pointer;
+}
+
+/* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */
+
+ +

初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。

+ +

制限

+ +

Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。

+ +
+

Note: Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。

+
+ +

Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。

+ +

(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)

+ +

Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。

+ +

カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。

+ +

ブラウザーの互換性

+ +

Microsoft Internet Explorer 6.0 も cursor プロパティに対応しています。しかし、次の制限があります。

+ +
    +
  • IE は CUR と ANI 形式のみに対応。
    • +
  • IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザー最初期バージョン形式 (例)X-Y座標有効範囲
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows および Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 から、 Safari (Mac) は .cur に対応しています。
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html new file mode 100644 index 0000000000..2cb47a5709 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html @@ -0,0 +1,80 @@ +--- +title: ブロック、絶対配置、表レイアウトのブロック配置 +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +tags: + - CSS + - ブロックレイアウト + - ボックス配置 + - 絶対配置 + - 表 +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +--- +

ボックス配置仕様書は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となるボックス配置ページを併せて読んでください。

+ +
+

Note: At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.

+
+ +

align-content と justify-content

+ +

The {{cssxref("justify-content")}} property does not apply to block containers or table cells.

+ +

The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject.

+ +

justify-self

+ +

The {{cssxref("justify-self")}} property is used to align an item inside its containing block on the inline axis.

+ +

This property does not apply to floated elements or table cells.

+ +

絶対配置要素

+ +

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

+ +

align-self

+ +

The {{cssxref("align-self")}} property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.

+ +

絶対配置要素

+ +

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

+ +

Aligning in these layout methods today

+ +

As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.

+ +

Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A {{cssxref("margin")}} of auto will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:

+ +
.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

In table layout, you have access to the {{cssxref("vertical-align")}} property to align the contents of a cell inside that cell.

+ +

For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

リファレンス

+ +

CSS プロパティ

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
+ +

用語集の項目

+ + + +

{{CSSRef}}

diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html new file mode 100644 index 0000000000..5435419fac --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -0,0 +1,119 @@ +--- +title: フレックスボックスでのボックス配置 +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +tags: + - CSS + - CSS ボックス配置 + - フレックスボックス +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +--- +
{{CSSRef}}
+ +

ボックス配置の仕様書は、さまざまなレイアウト方法で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方法の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

+ +

基本的な例

+ +

この例では、３つのフレックスアイテムが {{cssxref("justify-content")}} を使用して主軸に、 {{cssxref("align-items")}} を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された align-items の値を上書きし、 {{cssxref("align-self")}} で center に設定しています。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

軸と flex-direction

+ +

フレックスボックスは文書の書字方向を尊重しますので、英語の場合で {{cssxref("justify-content")}} が flex-end に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 {{cssxref("flex-direction")}} が row に設定されていた場合、この配置はインライン方向になります。

+ +

しかし、フレックスボックスでは flex-direction を column に設定することで、主軸を変更することができます。この場合、 justify-content はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差じっくについて次のように考えると最も簡単です。

+ +
    +
  • 主軸 = flex-direction で設定された向き = justify-content で配置
    • +
  • 交差軸 = 主軸と交差 = align-content, align-self/align-items で配置
    • +
+ +

主軸の配置

+ +
    +
  • {{cssxref("justify-content")}}
    • +
+ +

交差軸の配置

+ +
    +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

フレックスボックスには justify-self はない

+ +

主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。 justify-content プロパティは、どのように残りの領域を使用するかを制御します。 justify-content: flex-end に設定すると、余分な領域はアイテムの前に配置され、 justify-content: space-around に設定すると、その大きさアイテムの両側に配置される、などです。

+ +

つまり、常にアイテムのグループ全体が動き回るよう配分されるため、 justify-self プロパティはフレックスボックスでは意味を持ちません。

+ +

交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 align-self は意味を持ちます。

+ +

alignment および auto のマージン

+ +

justify-self プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに auto を使用することができます。 auto に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを auto に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。

+ +

開始点に配置された一連のフレックスアイテムのうち、１つのアイテムで {{cssxref("margin")}} を auto に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、スペースに収まるように縮小します。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

+ +

gap プロパティ

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

アイテム間における固定幅の間隔の作成

+ +

主軸では、 column-gap プロパティは兄弟アイテムの間に固定幅の間隔を作成します。

+ +

交差軸では、 row-gap プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには flex-wrap を wrap に設定する必要があります。

+ +
+

メモ: Firefox 63 時点で、 Firefox がフレックスボックスで gap プロパティを実装している唯一のブラウザーです。

+
+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

用語集の項目

+ +
+
    +
  • {{Glossary("Cross axis", "交差軸")}}
    • +
  • {{Glossary("Main axis", "主軸")}}
    • +
+
+ +

ガイド

+ + + +

外部リソース

+ + diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html new file mode 100644 index 0000000000..569a5e52af --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html @@ -0,0 +1,51 @@ +--- +title: 段組みレイアウトでのボックス配置 +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +tags: + - CSS + - CSS ボックス配置 + - CSS 段組みレイアウト + - 段組み +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +--- +

{{CSSRef}}

+ +

ボックス配置仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、段組みレイアウトのコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となるボックス配置ページと併せて読んでください。

+ +

段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。

+ +
+

メモ: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。

+
+ +

align-content と justify-content

+ +

{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。

+ +

justify-content に normal または stretch 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。

+ +

column-gap

+ +

段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。

+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("column-gap")}}
    • +
+
+ +

用語集

+ +
+ +
diff --git a/files/ja/web/css/css_box_alignment/index.html b/files/ja/web/css/css_box_alignment/index.html new file mode 100644 index 0000000000..a220b68112 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/index.html @@ -0,0 +1,253 @@ +--- +title: CSS ボックス配置 +slug: Web/CSS/CSS_Box_Alignment +tags: + - CSS + - CSS ボックス配置 + - alignment + - box alignment + - グリッドレイアウト + - フレックスボックス + - 段組みレイアウト +translation_of: Web/CSS/CSS_Box_Alignment +--- +
{{CSSRef}}
+ +

CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。

+ +
+

メモ: ボックス配置がどのように適用されるかは、各レイアウト方法のドキュメントに詳しく記載されています。

+
+ +

古い配置方法

+ +

CSS は伝統的に、配置機能がとても制約されていました。 {{cssxref("text-align")}} を使用してテキストの配置を指定したり、 {{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、 {{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置はインラインレイアウトおよび CSS テキストモジュールによってカバーされるようになり、ボックス配置の最初で、完全な水平方向と垂直方向の配置の機能を持ちました。

+ +

先にフレックスボックスを学んでいるのであれば、これらのプロパティはフレックスボックスの使用の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル1に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。

+ +

基本的な例

+ +

次の例は、ボックス配置のプロパティの一部がグリッドとフレックスボックスにどのように適用されるかを示しています。

+ +

CSS グリッドレイアウトの配置の例

+ +

グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナ内に余分な空白が残っています。この空白は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を center に設定して、グループに設定された align-items 値を上書きしています。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

フレックスボックスの配置の例

+ +

この例では、3 つのフレックスアイテムが justify-content を使用して主軸上に配置され、 align-items を使用して交差軸上に配置されています。 最初のアイテムはalign-self を center に設定して、グループに設定された align-items を上書きしています。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

主要概念と用語

+ +

この仕様書では、個別のレイアウト方法の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方法に共通する、いくつかの重要な概念もあります。

+ +

書字方向との関連

+ +

配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の距離の開始と終了によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。

+ +

二次元の配置

+ +

ボックス配置プロパティを使用すると、コンテンツは二本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの一本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。

+ +

+ +

インライン軸上でアイテムを整列するときは、 justify- で始まるプロパティを使用します。

+ +
    +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
+ +

ブロック軸上でアイテムを整列するときは、 align- で始まるプロパティを使用します。

+ +
    +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

フレックスボックスはさらに複雑であり、 {{cssxref("flex-direction")}} が row に設定されている場合に上記のものが当てはまります。フレックスボックスが column に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。 justify- プロパティは常に主軸上で、 align- プロパティは交差軸上で配置するために使用されます。

+ +

配置対象物

+ +

配置対象物 (alignment subject) とは、配置が行われるもののことです。 justify-self または align-self の場合、あるいは justify-items または align-items によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。 justify-content および align-content プロパティはレイアウト方法ごとに異なります。

+ +

配置コンテナー

+ +

配置コンテナー (alignment container) は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を内包するブロックになります。配置コンテナーには一つまたは多数の配置対象物を含めることができます。

+ +

下の画像は、内側に2つの整列対象がある配置コンテナーの例です。

+ +

+ +

代替配置

+ +

実現できない配置を設定した場合、代替配置が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方法ごとに個別に定義されており、それぞれのページで詳しく説明されています。

+ +

配置の種類

+ +

この仕様書が詳述している配置には、3つの異なる種類があります。これらはキーワード値を使用します。

+ +
    +
  • 位置指定配置 (Positional alignment): 配置対象物の位置を、配置コンテナーからの相対で指定します。
    • +
  • ベースライン配置 (Baseline alignment): これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。
    • +
  • 分配配置 (Distributed alignment): これらのキーワードは、配置対象物間の空白の分配で配置を定義します。
    • +
+ +

位置指定配置のキーワード値

+ +

以下の値は位置指定配置のために定義されており、 justify-content および align-content による内容の配置、そして justify-self および align-self による自己配置の値として使用することができます。

+ +
    +
  • center
    • +
  • start
    • +
  • end
    • +
  • self-start
    • +
  • self-end
    • +
  • flex-start フレックスボックスのみ
    • +
  • flex-end フレックスボックスのみ
    • +
  • left
    • +
  • right
    • +
+ +

画面の物理的な属性に関連する left と right の物理値を除いて、他のすべての値は論理値であり、内容の書字方向に関連します。

+ +

たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて justify-content に start を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ start の値は、アラビア語の文がページの右側から始まるので、右に移動します。

+ +

どちらの例も justify-content: start ですが、開始位置は書字方向によって異なります。

+ +

+ +

ベースライン配置

+ +

ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは justify-content および align-content による内容の配置、そして justify-self および align-self による自己配置の値として使用することができます。

+ +
    +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

justify-content または align-content のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方法で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。

+ +

ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は justify-self または align-self を使用する場合、あるいは justify-items または align-items を使用してこれらの値をグループとして設定する場合に行われます。

+ +

分配配置

+ +

分配配置キーワード は align-content および justify-content で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。

+ +
    +
  • stretch
    • +
  • space-between
    • +
  • space-around
    • +
  • space-evenly
    • +
+ +

たとえばフレックスレイアウトでは、初期値の場合アイテムを flex-start で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 flex-direction が row のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。

+ +

+ +

フレックスコンテナーに justify-content: space-between を設定すると、余白はアイテム間に分配されます。

+ +

+ +

これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。

+ +

配置があふれた場合

+ +

safe および unsafe キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 safe キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 start で配置します。

+ +

unsafe を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。

+ +

ボックス間のギャップ

+ +

ボックス配置仕様書には、 gap, row-gap, column-gap も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方法で、行または列内のアイテム間で一貫したギャップを設定します。

+ +

gap プロパティは row-gap と column-gap の一括指定で、両プロパティを一度に設定することができます。

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

以下の例では、グリッドレイアウトで gap の一括指定を使用して、行トラック間に 10px のギャップと列トラック間に 2em のギャップを設定します。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

+ +

この例では、 {{cssxref("gap")}} に加えて {{cssxref("grid-gap")}} プロパティを使用しています。 gap プロパティはもともとグリッドレイアウト仕様書の中で grid- という接頭辞をつけられていました。ブラウザーによってはこれらの接頭辞がついたバージョンにしか対応していません。

+ +
    +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+ +

接頭辞がついたバージョンは接頭辞がないバージョンの別名として保持されています。 grid-gap プロパティの次に gap を同じ値で追加すれば、ベンダー接頭辞と同じように使用できます。

+ +

また、スペース配分キーワードを使用した場合やアイテムにマージンを追加したりした場合など、表示される視覚的なギャップが広がることもあります。

+ +

レイアウト別の配置詳細ページ

+ +

CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。

+ + + +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

用語集の項目

+ +
+
    +
  • {{Glossary("Cross axis", "交差軸")}}
    • +
  • {{Glossary("Main axis", "主軸")}}
    • +
  • {{Glossary("Alignment container", "配置コンテナー")}}
    • +
  • {{Glossary("Alignment subject", "配置対象物")}}
    • +
  • {{Glossary("Fallback alignment", "代替配置")}}
    • +
+
+ +

ガイド

+ + + +

外部リソース

+ + diff --git a/files/ja/web/css/css_box_model/index.html b/files/ja/web/css/css_box_model/index.html new file mode 100644 index 0000000000..64fc11ed1d --- /dev/null +++ b/files/ja/web/css/css_box_model/index.html @@ -0,0 +1,114 @@ +--- +title: CSS 基本ボックスモデル +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - CSS 基本ボックスモデル + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS 基本ボックスモデルは CSS のモジュールの1つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。視覚整形モデルによって配置されます。

+ +

リファレンス

+ +

プロパティ

+ +

ボックス内のコンテンツの流れを制御するプロパティ

+ +
+
    +
  • {{CSSxRef("overflow")}}
    • +
  • {{CSSxRef("overflow-x")}}
    • +
  • {{CSSxRef("overflow-y")}}
    • +
+
+ +

ボックスの寸法を制御するプロパティ

+ +
+
    +
  • {{CSSxRef("height")}}
    • +
  • {{CSSxRef("width")}}
    • +
  • {{CSSxRef("max-height")}}
    • +
  • {{CSSxRef("max-width")}}
    • +
  • {{CSSxRef("min-height")}}
    • +
  • {{CSSxRef("min-width")}}
    • +
+
+ +

ボックスのマージンを制御するプロパティ

+ +
+
    +
  • {{CSSxRef("margin")}}
    • +
  • {{CSSxRef("margin-bottom")}}
    • +
  • {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("margin-right")}}
    • +
  • {{CSSxRef("margin-top")}}
    • +
  • {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
    • +
+
+ +

ボックスのパディングを制御するプロパティ

+ +
+
    +
  • {{CSSxRef("padding")}}
    • +
  • {{CSSxRef("padding-bottom")}}
    • +
  • {{CSSxRef("padding-left")}}
    • +
  • {{CSSxRef("padding-right")}}
    • +
  • {{CSSxRef("padding-top")}}
    • +
+
+ +

その他のプロパティ

+ +
+
    +
  • {{CSSxRef("visibility")}}
    • +
+
+ +

ガイド

+ +
+
CSS ボックスモデルの紹介
+
CSS の基礎的概念の1つである、ボックスモデルを説明します。このモデルは CSS が要素とその内容、パディング、境界線、マージン領域をどのように配置するかを定義します。
+
マージンの相殺の理解
+
2つの隣接するマージンが1つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。
+
視覚整形モデル
+
視覚整形モデルを説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}初回定義
diff --git a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..80bf608f4f --- /dev/null +++ b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,79 @@ +--- +title: CSS 基本ボックスモデル入門 +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - CSS 基本ボックスモデル + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な CSS ボックスモデルに基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界線の太さなど）を決定します。

+ +

それぞれのボックスは4つの部品 (または領域) から構成され、それぞれの辺についてコンテンツ境界 (content edge)、パディング境界 (padding edge)、ボーダー境界 (border edge)、マージン境界 (margin edge) が定義されています。

+ +

CSS ボックスモデル

+ +

コンテンツ領域は、コンテンツ境界に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法はコンテンツ幅（またはコンテンツボックスの幅）とコンテンツの高さ（またはコンテンツボックスの高さ）です。背景色や背景画像を持っていることがあります。

+ +

{{cssxref("box-sizing")}} プロパティが content-box (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{cssxref("height")}}、 {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティによって正確に定義することができます。

+ +

パディング領域は、パディング境界に囲まれた領域で、コンテンツ領域に要素のパディングを含めて拡張したものです。寸法はパディングボックスの幅とパディングボックスの高さです。

+ +

パディングの幅は、 {{cssxref("padding-top")}}、 {{cssxref("padding-right")}}、 {{cssxref("padding-bottom")}}、 {{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。

+ +

ボーダー領域は、ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。寸法はボーダーボックスの幅とボーダーボックスの高さ になります。

+ +

境界線の幅は、 {{cssxref("border-width")}} および一括指定プロパティの {{cssxref("border")}} で決定されます。 {{cssxref("box-sizing")}} プロパティが border-box に設定されていた場合、ボーダー領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{ cssxref("height") }}, {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティで正確に定義することができます。ボックスに背景（{{cssxref("background-color")}} 又は {{cssxref("background-image")}}）が設定されている場合、背景はボーダー境界の外枠まで拡張されます（つまり、 Z 順で境界線の下にまで拡張されます）。これは既定の振る舞いで、 CSS の {{cssxref("background-clip")}} プロパティで変更することができます。

+ +

マージン領域は、マージン境界に囲まれた領域で、ボーダー領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の大きさは、マージンボックスの幅とマージンボックスの高さになります。

+ +

マージン領域の寸法は、 {{cssxref("margin-top")}}、 {{cssxref("margin-right")}}、 {{cssxref("margin-bottom")}}、 {{cssxref("margin-left")}} の各プロパティおよび一括指定プロパティである {{cssxref("margin")}} で決定されます。マージンの相殺 (margin collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。

+ +

置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界線とパディングは、コンテンツの周囲に視覚的に現れます。

+ +

関連情報

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}言葉遣いをより正確にしたが、有意な変更点はなし
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}初回定義
+ +

関連情報

+ +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..1e62749980 --- /dev/null +++ b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,89 @@ +--- +title: マージンの相殺 +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - CSS ボックスモデル + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

ブロックの先頭と末尾のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか1つ) の単一のマージンに結合される (折り畳まれる (collapsed)) ことがあり、マージンの相殺という動作として知られています。なお、浮動要素と絶対位置指定要素では折り畳まれません。

+ +

マージンの相殺は、基本的に3つの場合に発生します。

+ +
+
隣接兄弟要素
+
隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を 解除 (clear) する必要がある場合を除く)。
+
親と子孫を隔てるコンテンツがない場合
+
あるブロックの {{cssxref("margin-top")}} と、1つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 ブロック整形コンテキストの生成、浮動の解除 (clear) のいずれもがない場合、もしくは、あるブロックの {{cssxref("margin-bottom")}} と1つ以上の子孫ブロックの {{cssxref("margin-bottom")}} を隔て境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。
+
空ブロック
+
あるブロックの {{cssxref("margin-top")}} を {{cssxref("margin-bottom")}} と隔てる境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}} のいずれもがない場合、上端と下端のマージンは相殺されます。
+
+ +

注意すべきことがいくつかあります。

+ +
    +
  • これらのケースが組み合わさると、もっと複雑な (3つ以上の) マージンの相殺が発生します。
    • +
  • このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、 (上のルールに従って) その親要素より外側に出ます。
    • +
  • 負のマージンが含まれる場合には、相殺されるマージンの大きさは、一番大きな正のマージンと一番小さな (もっともマイナス寄りの) マージンの合計値になります。
    • +
  • すべてのマージンが負の場合、折りたたまれたマージンのサイズは、最小の (最もマイナス寄りの) マージンとなります。これは、隣接する要素と入れ子になった要素の両方に適用されます。
    • +
+ +

例

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

例

+ +

{{EmbedLiveSample('Examples', 'auto', 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

+ +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/ja/web/css/css_charsets/index.html b/files/ja/web/css/css_charsets/index.html new file mode 100644 index 0000000000..95b28d4558 --- /dev/null +++ b/files/ja/web/css/css_charsets/index.html @@ -0,0 +1,53 @@ +--- +title: CSS 文字セット +slug: Web/CSS/CSS_Charsets +tags: + - CSS + - CSS 文字セット + - CSS 構文 + - Reference + - 概要 +translation_of: Web/CSS/CSS_Charsets +--- +
{{CSSRef}}
+ +

CSS 文字セット (CSS Charsets) は CSS のモジュールの一つで、スタイルシート内で使用される文字セットを指定します。

+ +

リファレンス

+ +

@-規則

+ +
+
    +
  • {{cssxref("@charset")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの対応

+ +

@charset 規則

+ +
+ + +

{{Compat("css.at-rules.charset")}}

+
diff --git a/files/ja/web/css/css_color/index.html b/files/ja/web/css/css_color/index.html new file mode 100644 index 0000000000..d1da1fd638 --- /dev/null +++ b/files/ja/web/css/css_color/index.html @@ -0,0 +1,117 @@ +--- +title: CSS 色 +slug: Web/CSS/CSS_Color +tags: + - CSS + - CSS 色 + - HTML 色 + - Reference + - スタイル + - 概要 + - 色 +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

CSS 色 (CSS Color) は、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱う CSS のモジュールです。 {{cssxref("<color>")}} を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("color-adjust")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

データ型

+ +
+
    +
  • {{cssxref("<color>")}}
    • +
+
+ +

ガイド

+ +
+
CSS を使った HTML 要素への色の適用
+
様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。
+
+ +

ツール

+ +
+
色選択ツール
+
このツールは独自の色を簡単に作成、調整、実験することができます。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Colors')}}{{Spec2('CSS4 Colors')}} 
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの対応

+ +

color プロパティ

+ +
+ + +

{{Compat("css.properties.color")}}

+
+ +

color-adjust プロパティ

+ +
+ + +

{{Compat("css.properties.color-adjust")}}

+
+ +

opacity プロパティ

+ +
+ + +

{{Compat("css.properties.opacity")}}

+
+ +

関連情報

+ +
    +
  • 他の仕様書で定義されている色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • +
  • CSS では、グラデーションは色ではなく画像です。
    • +
diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..7375e00046 --- /dev/null +++ b/files/ja/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3241 @@ +--- +title: 色選択ツール +slug: Web/CSS/CSS_Colors/Color_picker_tool +tags: + - CSS + - CSS 色 + - CSS 色選択 + - CSS 色選択ツール + - HTML 色 + - HTML 色選択 + - HTML 色選択ツール + - color + - ツール + - 色選択 +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

色選択ツール

+ +

HTML

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS 色 </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+ +

{{CSSRef}}

+ +

このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。 HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 CSS で対応している様々な色形式に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。

+ +

色を定義するパラメーターを調整すると、３つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。

+ +

このツールは HTML に適用する完全な CSS 色を識別するのに役立ちます。

+ +
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
+ +

上記で作成した色は、特に注意書きがない限り、 CSS や HTML のどこの色でも使用することができます。

+ +

関連情報

+ +

色の使用について詳しくは、以下を参照してください。

+ + diff --git a/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html new file mode 100644 index 0000000000..fdc6e3f42c --- /dev/null +++ b/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -0,0 +1,94 @@ +--- +title: 段組みの基本概念 +slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +tags: + - CSS + - CSS 段組みレイアウト + - Guide + - レイアウト +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +--- +
{{CSSRef}}
+ +

段組みレイアウト (Multiple-column Layout) は、内容物を新聞のように複数の段ボックスにレイアウトする仕様です。このガイドでは、この仕様がどのように働くかを、いくつかのよくある使用例と共に説明します。

+ +

主要概念と用語

+ +

段組みは他のレイアウト方法とは異なり、 CSS でコンテンツを分割し、すべての子孫要素を段に含めます。これは、印刷スタイルシートを作成するのに使われる CSS ページ付きメディアがコンテンツをページに分割するのと同様のことを行います。

+ +

仕様書で定義されているプロパティは次の通りです。

+ +
    +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("columns")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
+ +

column-count 又は column-width を要素に追加することで、要素は段組みコンテナーになります。段は無名のボックスになり、仕様書上では段ボックスと呼ばれます。

+ +

段の定義

+ +

段組みコンテナーを作成するには、少なくとも一つの column-* プロパティ、つまり column-count か column-width を使用する必要があります。

+ +

column-count プロパティ

+ +

column-count プロパティは、内容物を表示したい段数を指定します。ブラウザーは要求された数の段を生成するために、それぞれの段ボックスに適正な大きさの空間を割り当てます。

+ +

以下の例では、 column-count プロパティを使用して .container 要素に3つの段を生成します。その内容は、 .container の子も含めて3つの段に分割されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

上記の例では、内容物は既定のスタイルの段落 p タグで囲まれています。従って、それぞれの段落の上にはマージンがあります。マージンが働いてテキストの最初の行を押し下げているのが分かるでしょう。これは、段組みコンテナーは新しいブロック整形文脈 (BFC) を作成し、つまり子要素のマージンはコンテナーのマージンと相殺されないからです。

+ +

column-width プロパティ

+ +

column-width プロパティは、それぞれの段ボックスの最適な幅を設定するために使用されます。 column-width を宣言すると、ブラウザーは段組みコンテナー内にその幅の段と、段間の均等の空間が収まる数を計算します。従って、段の幅は最小幅として扱われ、段ボックスはふつう、追加の空間があるためにより広くなります。

+ +

段ボックスは、利用できる幅が column-width の値よりも狭い一段組の場合に限り、宣言された段の幅よりも狭くなることがあります。

+ +

以下の例では、 column-width の値を 200px にして使用しています。コンテナーに合うように200ピクセルの段が確保され、残りの空間は均等に割り当てられます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+ +

column-count と column-width の併用

+ +

段組みコンテナーに両方のプロパティを指定すると、 column-count は最大の段数として動作します。従って、 column-count の段数に達するまでは、 column-width で宣言された通りに動作します。これを超えると、 column-width で指定された寸法の段を追加する余裕があっても、段は追加されず、余った空間は既存の段に均等に割り当てられます。

+ +

両方のプロパティを併用すると、 column-count の値で指定されたよりも少ない数の段数になることがあります。

+ +

次の例では、 column-width を 200px で column-count を 2 で使用しています。３段以上の空間があっても２段になります。しかし、 200px の段を２つ設置する空間の余裕がなければ、１段になります。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+ +

columns 一括指定

+ +

columns 一括指定で column-count と column-width を設定することができます。長さの単位を設定すると、 column-width に使用され、整数値を設定すると、 column-count に使用されます。２つの値を空白で区切って両方を設定することができます。

+ +

この CSS は例１と同じ結果で、 column-count を 3 に設定します。

+ +
.container {
+  columns: 3;
+}
+ +

この CSS は例２と同じ結果で、 column-width を 200px に設定します。

+ +
.container {
+  columns: 200px;
+}
+ +

この CSS は例３と同じ結果で、 column-count と column-width の両方に設定します。

+ +
.container {
+  columns: 2 200px;
+}
+ +

次のステップ

+ +

このガイドでは、段組みレイアウトの基本的な利用を学びました。次のガイドでは、 段のスタイル付けがどれだけできるかを見てみます。

diff --git a/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html new file mode 100644 index 0000000000..d1a397801f --- /dev/null +++ b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html @@ -0,0 +1,74 @@ +--- +title: 段組みにおける内容の分割の扱い +slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +tags: + - CSS + - CSS 段組みレイアウト + - Guide + - レイアウト +translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +--- +
{{CSSRef}}
+ +

段組みレイアウトでは段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。

+ +

断片化の基本

+ +

CSS Fragmentation specification は、断片化コンテナー間、または fragmentainer の間でどのように内容を分割するかを詳述しています。段組みでは、 fragmentainer は段ボックスです。

+ +

段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。

+ +

分割を制御したくなる場所は様々なものがあります。

+ +
    +
  • 例えば figure 要素の内部などの、ボックス内での分割。
    • +
  • 上記の見出しの例のような、ボックスの前後の分割。
    • +
  • 行間の分割。
    • +
+ +

ボックス内での分割

+ +

ボックス内での分割を制御するには、 {{cssxref("break-inside")}} プロパティを使用します。このプロパティは以下の値を取ります。

+ +
    +
  • auto
    • +
  • avoid
    • +
  • avoid-page
    • +
  • avoid-column
    • +
  • avoid-region
    • +
+ +

以下の例では、 break-inside を figure 要素に適用して、キャプションが画像から分割されることを防ぎます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

+ +

ボックスの前後の分割

+ +

{{cssxref("break-before")}} および {{cssxref("break-after")}} プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。

+ +
    +
  • auto
    • +
  • avoid
    • +
  • avoid-column
    • +
  • column
    • +
+ +

次の例では、 h2 要素の前で強制的に改段しています。

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

+ +

行間での分割

+ +

{{cssxref("orphans")}} および {{cssxref("widows")}} プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。

+ +

orphans および widows プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。

+ +

以下の例では、 orphans プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

+ +

期待通りに動作しない場合

+ +

内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。

+ +

上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できないフォールバックにより、美しくない分割が発生することが次善の策であり、レイアウトが崩れるよりましです。

diff --git a/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html new file mode 100644 index 0000000000..0840b1ef0c --- /dev/null +++ b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -0,0 +1,44 @@ +--- +title: 段組みでのはみ出しの扱い +slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +--- +
{{CSSRef}}
+ +

このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。

+ +

段ボックス内でのはみ出し

+ +

はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が column-width の幅、または column-count で宣言された段数に基づく段の幅よりも広い場合に発生します。

+ +

この場合、内容は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+ +

+ +

画像を段ボックスに合うよう縮小したい場合は、 max-width: 100% を設定する標準的なレスポンシブ画像の解決方法で実現することができます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+ +

より多くの段が生成される場合

+ +

印刷のような断片化メディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。

+ +

断片化メディアでは、1つの断片 (例えば1ページ) が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、これはスクロールバーが出現することを意味します。

+ +

以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+ +

将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。

+ +

垂直メディアクエリの使用

+ +

ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなります。これを防ぐ一つの方法が、十分な高さがあると分かった時に段組みプロパティを適用することです。

+ +

以下の例では、 min-height クエリを使用して、段組みプロパティを適用する前に高さを検査します。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+ +

このシリーズの最後のガイドでは、段組みが断片化仕様でどのように動作するかを見て、段をまたいで内容が分割される方法を制御します。

diff --git a/files/ja/web/css/css_columns/index.html b/files/ja/web/css/css_columns/index.html new file mode 100644 index 0000000000..e3354ed01b --- /dev/null +++ b/files/ja/web/css/css_columns/index.html @@ -0,0 +1,100 @@ +--- +title: CSS 段組みレイアウト +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS 分割 + - CSS 段組みレイアウト + - Reference + - レイアウト + - 概要 + - 段組み +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef("CSS3 Multicol")}}
+ +

CSS 段組みレイアウトは CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。

+ +

基本的な例

+ +

以下の例では、 {{cssxref("column-count")}} プロパティをコンテナーのクラスの要素に適用しています。 column-count の値が 3 なので、内容物は同じ寸法の３つの段に並べられます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

分割との関連

+ +

段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、ページ付きメディアに密接に関連します。従って、 CSS 分割仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。

+ +

リファレンス

+ +

段組みレイアウトのプロパティ

+ +
+
    +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ + + +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
+
+ +

ガイド

+ +
+
段組みの基本概念
+
段組みレイアウト仕様の概要です。
+
段のスタイル付け
+
段間罫と段間の空間の使い方です。
+
段抜きと段の均衡
+
すべての段にまたがる要素の作り方と、段を埋める方法の制御です。
+
段組みでのはみ出しの扱い
+
アイテムが段をあふれたときに起こることと、段内のコンテンツが多すぎてコンテナーに収まらない場合に起こることです。
+
段組みにおける内容の分割の扱い
+
分割の仕様とどこで内容を区切るかの制御方法です。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

関連情報

+ +

他の CSS レイアウト技術には以下のようなものがあります。

+ + diff --git a/files/ja/web/css/css_columns/spanning_columns/index.html b/files/ja/web/css/css_columns/spanning_columns/index.html new file mode 100644 index 0000000000..c3f25e6453 --- /dev/null +++ b/files/ja/web/css/css_columns/spanning_columns/index.html @@ -0,0 +1,65 @@ +--- +title: 段抜きと段の均衡 +slug: Web/CSS/CSS_Columns/Spanning_Columns +tags: + - CSS + - CSS 段組みレイアウト + - Guide + - レイアウト +translation_of: Web/CSS/CSS_Columns/Spanning_Columns +--- +
{{CSSRef}}
+ +

このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。

+ +
+

このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。

+
+ +

段抜き

+ +

アイテムを段抜きする場合は、 {{cssxref("column-span")}} プロパティの値を all に設定してください。これで、要素はすべての段にまたがります。

+ +

段組みコンテナーの子孫要素は、直接の子でも間接の子でも段抜き (spanner) になることができます。例えば、コンテナーの中に直接含まれる見出しは段抜きになることができ、段組みコンテナーの中のセクションに含まれる見出しも同様です。

+ +

以下の例では、 h2 要素が column-span: all に設定され、すべての段に段抜きされます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

+ +

次の例では、見出しが {{HTMLElement("article")}} 要素の中にありますが、期待通りにコンテンツが段抜きになります。

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

+ +

段抜きが導入されると、段組みの流れが中断され、段抜きの後で実際に新しい一連の段ボックスを作成して段組みが再開します。内容が段抜き要素をまたぐことはありません。

+ +

column-span の制約

+ +

現在の Level 1 仕様書では、 column-span に許可されている値は二つしかありません。 none の値は初期値で、アイテムを段抜きせず、段の中に収めます。 all の値はアイテムがすべての段を段抜きすることを意味します。例えばアイテムを3段中2段に段抜きすることはできません。

+ +

注意すべきこと

+ +

段抜き要素がマージン、パディング、境界、背景色を持つ他の要素の中にあった場合、次の例に示すように、ボックスの上端が段抜きの上に現れ、残りの部分が段抜きの下に表示されることがあります。このため、要素を段抜きにするときにはいくらか注意が必要で、このシナリオに注意する必要があります。

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

+ +

加えて、コンテンツの後方に段抜き要素が現れる場合は、段組みをするのに十分なコンテンツが段抜きの後にないと、予期しない挙動または望まない挙動をすることがあります。段抜きは注意深く使用し、様々な分割点になったときに望み通りの結果が得られるかを検査してください。

+ +

段の充足と均衡

+ +

均衡の取れた段組みは、すべての段のコンテンツの量がほぼ同じになっているものです。充足と均衡は、コンテンツの量が提供された空間の量に一致しない場合、例えばコンテナーの高さが宣言されている場合に発生します。

+ +

{{cssxref("column-fill")}} の段組みでの初期値は balance です。 balance の値は、可能な限りすべての段で均衡を取ることを意味します。ページ付きメディアのような断片化されたコンテキストにおいては、最後の断片のみで均衡が取られます。つまり、最後のページにおいて一連の段ボックスの均衡が取られます。

+ +

均衡を取るための第二の値は balance-all で、断片化されたコンテキストにおいて、最後の断片における段だけでなく、すべての段の均衡を取ろうとします。

+ +

この例には、画像とテキストを含む均衡の取れた段があります。画像は分割できないので最初の段に入り、他の段はテキストの量が同じになるように充足されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

+ +

column-fill の他の値として auto があります。この場合、すべての段を同じ量で充足して高さの均衡を図るのではなく、段を順番に充足させます。以下の例では column-fill を auto に変更し、段を段組みコンテナーの高さまで順番に充足させ、最後のいくつかの段は空のままにします。

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

+ +

なお、段の均衡はすべてのブラウザーが対応しているわけではありません。対応させるブラウザーで期待通りの効果が得られるかをチェックしてください。

+ +

次のガイドでは、段組みがはみ出しをどう扱うかを、段の中とコンテナーに合う数よりも多くの段ができる場合の両方について学習します。

diff --git a/files/ja/web/css/css_columns/styling_columns/index.html b/files/ja/web/css/css_columns/styling_columns/index.html new file mode 100644 index 0000000000..1f9e2b7803 --- /dev/null +++ b/files/ja/web/css/css_columns/styling_columns/index.html @@ -0,0 +1,52 @@ +--- +title: 段のスタイル付け +slug: Web/CSS/CSS_Columns/Styling_Columns +tags: + - CSS + - CSS Multi-column Layout + - CSS 段組みレイアウト + - Guide + - Layout + - レイアウト + - 日本語処理 +translation_of: Web/CSS/CSS_Columns/Styling_Columns +--- +
{{CSSRef}}
+ +

段組みコンテナー内に作られた段ボックスは無名ボックスなので、スタイル付けできることはわずかです。しかし、できることは少数ながらあります。このガイドは、段同士の間隔および段間罫をスタイル付けする方法を説明します。

+ +

段ボックスにスタイル付けできるか

+ +

残念ながら、現在はできません。段を構成する無名ボックスはスタイル付けの対象にする方法がないため、ボックスの背景色を変更したり、一段だけを他よりも広くしたりすることはできません。おそらく将来の版の仕様書でできるようになるでしょう。しかし現時点で、段同士の間隔と段間罫を変更することはできます。

+ +

column-gap プロパティ

+ +

段同士の間隔 (段間) は、 column-gap プロパティで制御されます。このプロパティはもともと段組みレイアウト仕様書で定義されていました。しかし、現在はボックス配置仕様書で定義され、 CSS グリッドレイアウトなどの他の仕様書におけるボックス同士の間隔と統合されました。

+ +

段組みにおける column-gap の初期値は 1em です。つまり、段同士は互いに接しません。他のレイアウト方法では、 column-gap の初期値は 0 です。キーワード値 “normal” を使用した場合、間隔は 1em に設定されます。

+ +

段間は column-gap の値として任意の単位を使用して変更することができます。以下の例では、 column-gap は 40px に設定されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

+ +

column-gap に許されている値は <length-percentage> であり、つまりパーセント値を使用することができます。 column-gap のパーセント値は、段組みコンテナーの幅に対するパーセント値として計算されます。

+ +

段間罫

+ +

仕様書では column-rule-width, column-rule-style column-rule-color と、一括指定する column-rule を定義しています。これらのプロパティは、 border プロパティとまったく同じように動作します。 border-style で有効な値が column-rule-style で使用できます。

+ +

これらのプロパティは段組みコンテナーである要素に適用されるため、すべての段に同じ段間罫が引かれます。段間罫は段同士の間にのみ引かれ、外の辺には引かれません。段間罫は内容のある段の間にのみ引かれます。

+ +

次の例は、幅 5px の点線の段間罫を rebeccapurple の色で、個別指定を使用して作成しています。

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

+ +

なお、段間罫自体は空間を占有しません。段間罫が太くなっても、段間が広がることはありません。そうではなく、段間罫が段間と重なります。

+ +

次の例では、とても太い 40px の段間罫を 10px の段間に引いています。段間罫は段の内容の下に表示されます。段間罫の両側に間隔を作るには、 gap を 40px より大きくする必要があるでしょう。

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

+ +

まとめ

+ +

ここでは、現在段ボックスに対してスタイル付けすることができるすべての方法を説明しました。次のガイドでは、コンテナー内ですべての段をまたがる要素の作成を見てみましょう。

diff --git a/files/ja/web/css/css_columns/using_multi-column_layouts/index.html b/files/ja/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..f0ae1440c7 --- /dev/null +++ b/files/ja/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,243 @@ +--- +title: 段組みレイアウトの使用 +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +tags: + - Advanced + - CSS + - CSS Multi-column Layout + - Guide + - Layout + - Web +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +
{{CSSRef}}
+ +

CSS の段組みレイアウト (Multi-column Layout) は、ブロックレイアウトモードを拡張して、文章の段組みを定義しやすくするものです。行が長すぎると、文章が読みづらくなるものです。行末から次の行の先頭まで目を移動する距離が長すぎると、どの行を読んでいたか見失ってしまうことがあります。したがって、大きな画面を最大限に活用するためには、新聞のように幅が狭い段を並べた方が適切です。

+ +

残念ながら、 CSS と HTML では位置を指定してで段を区切ったり、文章に許されるマークアップを厳重に制限したり、大げさなスクリプトを使用したりしなければ実現できません。この制限は、従来のブロックレイアウトモードを拡張する新しい CSS プロパティを追加することで解決します。

+ +

段組みの使用

+ +

段の数と幅

+ +

2つの CSS プロパティ、 {{cssxref("column-count")}} と {{cssxref("column-width")}} で、段組みをするかどうか、段数をいくつにするかを制御します。

+ +

column-count プロパティで、段数を特定の数に設定します。例えば以下のようにします。

+ +

例1

+ +

HTML

+ +
+
<div id="col">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  </p>
+  <p>
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+  <p>
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  </p>
+  <p>
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</div>
+
+ +

CSS

+ +
#col {
+  column-count: 2;
+}
+
+
+ +

結果

+ +

コンテンツが（段組み対応のブラウザーを使用していれば）2段で表示されます。

+ +

{{EmbedLiveSample("column_count", "100%")}}

+ +

column-width プロパティは最小限ほしい段の幅を設定します。 column-count の値が一緒に設定されていない場合は、ブラウザーは有効な幅に収まるできるだけ多くの段を自動的に作成します。

+ +

例2

+ +

HTML

+ +
+
<div id="wid">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#wid {
+  column-width: 100px;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample("column_width", "100%")}}

+ +

より厳密な詳細については、 CSS3 仕様書で説明されています。

+ +

段組みをしたブロックでは、コンテンツは必要に応じてある段から次の段に流れます。 HTML、 CSS、 DOM 機能はすべて段組みでの編集や印刷に対応しています。

+ +

一括指定の columns

+ +

たいていの場合、ウェブデザイナーは {{cssxref("column-count")}} と {{cssxref("column-width")}} の2つのうち1つを使用します。これらのプロパティの値は重複しないので、一括指定の {{cssxref("columns")}} を使うのがふつうは便利です。例えば以下のようにします。

+ +

CSS 宣言の column-width: 12em は columns: 12em に置き換えることができます。

+ +

例3

+ +

HTML

+ +
+
<div id="col_short">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#col_short {
+  columns: 12em;
+}
+
+
+ +

{{EmbedLiveSample("column_short", "100%")}}

+ +

CSS 宣言 の column-count: 4 は columns: 4 に置き換えられます。

+ +

例4

+ +

HTML

+ +
+
<div id="columns_4">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#columns_4 {
+  columns: 4;
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample("example_4_columns", "100%")}}

+ +

column-width: 8em と column-count: 12 の2つの CSS 宣言は、 columns: 12 8em で置き換えることができます。

+ +

例5

+ +

HTML

+ +
+
<div id="columns_12">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#columns_12 {
+  columns: 12 8em;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample("example_12_columns", "100%")}}

+ +

高さの均衡

+ +

CSS3 の段組みの仕様書では、段の高さが揃っていなければならないと規定されています。つまり、ブラウザーは自動的に段の高さの最大値を設定し、各段のコンテンツの高さはおよそ同じになります。 Firefox はこれを行っています。

+ +

しかし、場合によっては段の高さの最大値を明示的に設定し、コンテンツを最初の段から配置して必要に応じていくつもの段を作成し、右に流れることができるようにすることが有用であることもあります。従って、段組みブロックに CSS の {{cssxref("height")}} または {{cssxref("max-height")}} プロパティを設定することで高さを制限すると、それぞれの段は新しい段を追加する前にその高さまで伸びていきます。このモードはレイアウトではるかに効率的です。

+ +

段間

+ +

段と段の間には隙間があります。推奨される既定値は 1em です。この寸法は段組みブロックに {{cssxref("column-gap")}} プロパティを適用することで変更することができます。

+ +

例6

+ +

HTML

+ +
+
<div id="column_gap">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample("col_gap", "100%")}}

+ +

グレイスフルデグラデーション

+ +

段組みのプロパティは、段組みに対応していないブラウザーでは単に無視されます。従って、そのようなブラウザーでは一列で表示し、対応しているブラウザーでは段組みを行うというレイアウトが比較的簡単に作成できます。

+ +

まとめ

+ +

CSS3 の段組みは、ウェブ開発者が画面の資産を最大限に活用できるようにするためのレイアウト方法です。想像的な開発者は、特に自動的に高さを調整する機能を利用して、様々な利用方法を見つけるでしょう。

diff --git a/files/ja/web/css/css_conditional_rules/index.html b/files/ja/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..2272921aa2 --- /dev/null +++ b/files/ja/web/css/css_conditional_rules/index.html @@ -0,0 +1,79 @@ +--- +title: CSS 条件付き規則 +slug: Web/CSS/CSS_Conditional_Rules +tags: + - CSS + - CSS 条件付き規則 + - Reference + - 概要 +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

CSS 条件付き規則 (CSS Conditional Rules) は CSS のモジュールの一つで、プロセッサーの能力やスタイルシートが適用される文書の条件に基づいて一連の規則を定義することができます。

+ +

リファレンス

+ +

@-規則

+ +
+
    +
  • {{cssxref("@document")}}
    • +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
  • {{cssxref("@import")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}初回定義
+ +

ブラウザーの対応

+ +

@document 規則

+ +
+ + +

{{Compat("css.at-rules.document")}}

+
+ +

@import 規則

+ +
+ + +

{{Compat("css.at-rules.import")}}

+
+ +

@media 規則

+ +
+ + +

{{Compat("css.at-rules.media")}}

+
+ +

@supports 規則

+ +
+ + +

{{Compat("css.at-rules.supports")}}

+
diff --git a/files/ja/web/css/css_containment/index.html b/files/ja/web/css/css_containment/index.html new file mode 100644 index 0000000000..f06dce4200 --- /dev/null +++ b/files/ja/web/css/css_containment/index.html @@ -0,0 +1,122 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +

{{CSSRef}}
+ CSS Containment という仕様の目的は、開発者に Web ページの任意のサブツリーをそれ以外から独立させることでサイトパフォーマンスを向上させることです。もしブラウザがページの一部が独立していることを知っていれば、レンダリング時に最適化し、パフォーマンスを向上させることができます。この仕様は単一の CSS プロパティ {{cssxref("contain")}} を定義しています。この文書ではその仕様の基本的な目的を説明しています。

+ +

基本例

+ +

多くの Web ページでは、互いに独立したいくつかのセクションで構成されています。例えば記事の見出しと内容が並んだ以下のようなマークアップで紹介します。

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <p>More content here.</p>
+</article>
+ +

各 <article> の CSS には {{cssxref("contain")}} プロパティに content という値が設定されています。

+ +
article {
+  contain: content;
+}
+ +

各 <article> は他の article タグとは独立しており、 この時 contain: content はブラウザにそのことを伝えるために設定されています。ブラウザは次にこの情報をコンテンツのレンダリング方法の決定に用います。例えば、表示可能な領域の外側の記事はレンダリングしない場合があります。

+ +

各 <article> に contain プロパティが与えられた場合、新しい要素が追加されると、ブラウザは contain プロパティが設定された要素のサブツリーの外側については再レイアウトや再描画を行う必要がないと判断します。ただし、もし <article> が ( height: auto が設定されている時のように) そのコンテンツによってサイズが変わるようスタイリングされている場合は、ブラウザがサイズの変化に対応する必要があるかもしれません。

+ +

contain プロパティについて、各 <article> の要素が独立である例を用いて説明しました。

+ +

この content という値は contain: layout paint の省略記法です。ブラウザに対して、内部で行われるレイアウト時にその他の要素と完全に区別するよう伝え、要素に関する全てがその境界の内側で描画されます。どの要素も視覚的にオーバーフローしません。

+ +

ある要素のスタイルがその外側に影響しないようにすべきということは、web 開発者側にとってはよく知られており、実際ページを作るときにはそうします。しかし、ブラウザはそういった意図は分かりませんし、記事のスタイルがその中で閉じるように描画されるということは最初から分かりません。このプロパティはそのことをブラウザに伝えるのに有用なのです。これを使うことで、こうした知見に基づいたパフォーマンス最適化を行うことができます。

+ +

主な概念と用語

+ +

この仕様は {{cssxref("contain")}} というプロパティのみを定義しています。このプロパティの値には、封じ込めの種類を指定します。

+ +

レイアウトの封じ込め

+ +
article {
+  contain: layout;
+}
+ +

レイアウトは通常、ドキュメント全体がスコープになっています。つまり、ドキュメント全体の中からたった１つの要素を動かしただけで、様々なところが動かされたかのように扱われます。contain: layout を使うことで、ブラウザに対して必要な要素のみを伝えることができます。このプロパティを指定した要素の中の全てがその要素によって封じ込められ、その他の要素には影響せず、そしてその包含ブロックは独立したフォーマッティングコンテキストになります。

+ +

加えて、以下の点に注意する必要があります。

+ +
    +
  • float レイアウトはこのプロパティとは独立して作用します。
    • +
  • マージンはレイアウトによる封じ込めの境界によって崩れることはありません。
    • +
  • レイアウトの封じ込めは position: absolute/fixed が指定されたブロックの子孫要素の包含ブロックになります。
    • +
  • この包含ブロックはスタッキングコンテキストを作ります。なので {{cssxref("z-index")}} を使うことができます。
    • +
+ +

ペイントの封じ込め

+ +
article {
+  contain: paint;
+}
+ +

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint containment as layout containment (see above).

+ +

Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

+ +

サイズの封じ込め

+ +
article {
+  contain: size;
+}
+ +

Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

+ +

If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.

+ +

スタイルの封じ込め

+ +
article {
+  contain: style;
+}
+ +

Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM. The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree. 

+ +

Using contain: style would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.

+ +
+

Note: style containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).

+
+ +

特殊な値

+ +

There are two special values of contain:

+ +
    +
  • content
    • +
  • strict
    • +
+ +

We encountered the first in the example above. Using contain: content turns on layout and paint containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

+ +

To gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it:

+ +
contain: strict;
+contain: strict style;
+ +

参考リンク

+ +

CSS プロパティ

+ +
    +
  • {{cssxref("contain")}}
    • +
+ +

外部リンク

+ + diff --git a/files/ja/web/css/css_counter_styles/index.html b/files/ja/web/css/css_counter_styles/index.html new file mode 100644 index 0000000000..26e031f13e --- /dev/null +++ b/files/ja/web/css/css_counter_styles/index.html @@ -0,0 +1,97 @@ +--- +title: CSS カウンタースタイル +slug: Web/CSS/CSS_Counter_Styles +tags: + - CSS + - CSS カウンタースタイル + - Reference + - 概要 +translation_of: Web/CSS/CSS_Counter_Styles +--- +
{{cssref}}
+ +

CSS カウンタースタイル (CSS Counter Styles) は CSS のモジュールの一つで、独自のカウンタースタイルを定義することができます。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
+
+ +

@-規則

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

ガイド

+ +
+
CSS カウンターの使用
+
カウンターを使用して HTML 要素に番号を振る方法や、複雑なカウンターを実行する方法を説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Counter Styles')}}{{Spec2('CSS3 Counter Styles')}}初回定義
+ +

ブラウザーの対応

+ +

@counter-style 規則

+ +
+ + +

{{Compat("css.at-rules.counter-style")}}

+ +

counter-increment プロパティ

+ +
+ + +

{{Compat("css.properties.counter-increment")}}

+ +

counter-reset プロパティ

+ +
+ + +

{{Compat("css.properties.counter-reset")}}

+
+
+
diff --git a/files/ja/web/css/css_device_adaptation/index.html b/files/ja/web/css/css_device_adaptation/index.html new file mode 100644 index 0000000000..c26a684631 --- /dev/null +++ b/files/ja/web/css/css_device_adaptation/index.html @@ -0,0 +1,52 @@ +--- +title: CSS 端末適合 +slug: Web/CSS/CSS_Device_Adaptation +tags: + - CSS + - CSS 端末適合 + - リファレンス + - 概要 +translation_of: Web/CSS/CSS_Device_Adaptation +--- +
{{CSSRef}}
+ +

CSS 端末適合 (CSS Device Adaptation) は CSS モジュールの一つで、ビューポートの寸法、拡大率、方向を定義することができるものです。

+ +

リファレンス

+ +

@-規則

+ +
+
    +
  • {{cssxref("@viewport")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}}初回定義
+ +

ブラウザーの対応

+ +

@viewport 規則

+ +
+ + +

{{Compat("css.at-rules.viewport")}}

+
diff --git a/files/ja/web/css/css_display/index.html b/files/ja/web/css/css_display/index.html new file mode 100644 index 0000000000..cbb02a5f07 --- /dev/null +++ b/files/ja/web/css/css_display/index.html @@ -0,0 +1,115 @@ +--- +title: CSS 表示方法 +slug: Web/CSS/CSS_Display +tags: + - CSS + - CSS 表示方法 + - Overview + - Reference +translation_of: Web/CSS/CSS_Display +--- +
{{CSSRef}}
+ +

CSS 表示方法は CSS のモジュールの一つで、 CSS 整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。

+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{CSSxRef("display")}}
    • +
+
+ +

CSS データ型

+ +
+
    +
  • {{CSSxRef("<display-outside>")}}
    • +
  • {{CSSxRef("<display-inside>")}}
    • +
  • {{CSSxRef("<display-listitem>")}}
    • +
  • {{CSSxRef("<display-box>")}}
    • +
  • {{CSSxRef("<display-internal>")}}
    • +
  • {{CSSxRef("<display-legacy>")}}
    • +
+
+ +

ガイド

+ +

CSS フローレイアウト (display: block, display: inline)

+ + + +

display: flex

+ + + +

display: grid

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Display", "#the-display-properties", "display")}}{{Spec2("CSS3 Display")}}run-in, flow, flow-root, contents および複数キーワードの値を追加。
{{SpecName("CSS2.1", "visuren.html#display-prop", "display")}}{{Spec2("CSS2.1")}}テーブルモデルの値と inline-block を追加。
{{SpecName("CSS1", "#display", "display")}}{{Spec2("CSS1")}}初回定義。基本的な値: none, block, inline, list-item
+ +

CSS Display 仕様書 Level 3 に加え、他の仕様書でも display の様々な値の動作を定義しています。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.display", 10)}}

diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..7e8574e143 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,223 @@ +--- +title: フレックスコンテナー内のアイテムの配置 +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +tags: + - Align + - CSS + - Flex + - Guide + - align-content + - align-items + - align-self + - alignment + - flexbox + - justify + - justify-content + - フレックスボックス + - 配置 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。

+ +

ボックスを中央寄せするには、 align-items プロパティを使って交差軸 (今回の場合は縦軸) 上の位置合わせをし、 justify-content プロパティで主軸 (今回の場合は横軸) 上の位置合わせをします。

+ +

中央寄せされたボックスをもつコンテナ要素

+ +

以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

配置を制御するプロパティ

+ +

本ガイドで扱うプロパティは以下のとおりです。

+ +
    +
  • {{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御する。
    • +
  • {{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御する。
    • +
  • {{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御する
    • +
  • {{cssxref("align-content")}} — 仕様では「フレックス行のパッキング (packing flex lines) 」と説明されている。交差軸上でのフレックス行間の余白を制御する。
    • +
+ +

また、 auto マージンがフレックスボックスでの位置合わせにどのように使えるかについても触れます。

+ +
+

メモ: フレックスボックスにおける各種の配置プロパティは、そのプロパティ定義専用の仕様である CSS Box Alignment Level 3 にも記載されています。この仕様が最終的には Flexbox Level 1 仕様で定義しているプロパティの定義を置き換えることが想定されています。

+
+ +

交差軸

+ +

align-items プロパティと align-self プロパティは、交差軸 (cross axis: flex-direction が row のときは列に沿った、または flex-direction が column のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。

+ +

もっとも単純なフレックスの例で、交差軸上の位置合わせを試してみましょう。display: flex をコンテナに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナの高さまでアイテムが伸張します。

+ +

３つのアイテム中１つのアイテムにはほかのアイテムより高くなる要因となる追加のテキストが設定されている。

+ +

３つのアイテムとも 200 ピクセルの高さをもつ

+ +

アイテムが同じ高さになるのは、交差軸での配置を制御する align-items プロパティの初期値が stretch となっているためです。

+ +

アイテムの配置をコントロールするために、以下の値を使うことができます。

+ +
    +
  • align-items: flex-start
    • +
  • align-items: flex-end
    • +
  • align-items: center
    • +
  • align-items: stretch
    • +
  • align-items: baseline
    • +
+ +

以下の例では、align-items の値は stretch に設定されています。他の値についても試し、flex コンテナの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}

+ +

align-self で個別のアイテムを位置合わせ

+ +

align-items プロパティはすべてのアイテムの align-self プロパティをまとめて設定します。つまり、align-self プロパティでは１つずつ個別のアイテムを対象として指定できます。align-self プロパティには、align-items プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための auto を使うことができます。

+ +

次の例では、フレックスコンテナーには align-items: flex-start を設定していて、これはアイテムを交差軸上の始点に揃えます。first-child セレクタを使って最初のアイテムを対象として、 align-self: stretch を設定しており、また別のアイテムを selected クラスで選択して align-self: center を設定してます。 align-items の値を変更したり、個別のアイテムの align-self の値を変更して、どのように動作するかを試してみてください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}

+ +

主軸の変更

+ +

ここまでは、 flex-direction が row で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。

+ +

３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。

+ +

flex-direction を column に変更した場合、align-items と align-self はアイテムの左右方向での位置合わせを行うようになります。

+ +

３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。水平方向の軸上で位置合わせされている。

+ +

次の例では flex-direction: column を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

+ +

交差軸上の位置合わせ — align-content プロパティ

+ +

ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、align-content プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「フレックス行のパッキング (packing flex lines)」として説明されています。

+ +

align-content が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。

+ +

align-content プロパティには以下の値を設定できます。

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly (フレックスボックス仕様には含まれていない)
    • +
+ +

以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 align-content の値は space-between で、この場合は残る分配可能スペース (available space) はフレックス行の間に分配され、フレックス行自体はコンテナの交差軸上の始点と終点に密着して配置されます。

+ +

align-content プロパティがどのように働くか、ほかの値を設定して確認してください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}

+ +

列に沿った軸の時にこのプロパティの効果がどのように変わるか、flex-direction を column に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}

+ +
+

注: space-evenly はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。

+
+ +

上述の値についての詳細とブラウザー対応状況については MDN の justify-content のページを参照してください。

+ +

主軸上での位置合わせ

+ +

ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは justify-content の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 justify-content では、アイテムを表示するのに必要な分よりも大きいスペースがある場合の分配可能スペースの扱いを制御できます。

+ +

コンテナに display: flex を設定した最初の例では、アイテムはコンテナの始点に一行に整列して表示されます。これは justify-content の初期値が flex-start であるためです。すべての分配可能スペースはアイテムの後ろに置かれます。

+ +

３つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナ内にある。分配可能スペースはアイテムの後ろに置かれる。

+ +

justify-content プロパティは align-content と同じ値を受け付けます。

+ +
    +
  • justify-content: flex-start
    • +
  • justify-content: flex-end
    • +
  • justify-content: center
    • +
  • justify-content: space-between
    • +
  • justify-content: space-around
    • +
  • justify-content: stretch
    • +
  • justify-content: space-evenly (フレックスボックス仕様書には含まれていない)
    • +
+ +

次の例では、 justify-content の値は space-between となっています。アイテムを表示した後に余った分配可能スペースは、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と終点に揃えて並びます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}

+ +

flex-direction が column に設定されて主軸がブロック方向となっているとき、justify-content はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

+ +

配置と書字方向

+ +

上述の配置方法において、flex-start と flex-end はいずれも writing mode に対応したものとなります。justify-content の値が flex-start で、書字方向が英語のように左から右であれば、アイテムはコンテナーの左端から並べられます。

+ +

３つのアイテムは左側に並んでいる

+ +

一方で writing mode がアラビア語のように右から左であれば、アイテムはコンテナの右端から並べられます。

+ +

３つのアイテムは右側から並んでいる

+ +

以下の例ではフレックスアイテムを右から左に並べるために direction プロパティを rtl を設定しています。この設定を削除したり justify-content の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}

+ +

配置と flex-direction

+ +

flex-direction プロパティを変更した場合にも、始点は変わります。例えばrow の代わりに row-reverse を設定した場合などがこれにあたります。

+ +

次の例では、flex-direction: row-reverse と justify-content: flex-end を設定してアイテムをレイアウトしています。左から右の言語では、すべてのアイテムは左側に並びます。flex-direction: row-reverse の値を flex-direction: row に変更してみてください。アイテムが右側に移動することがわかります。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}

+ +

こうした動作はすこし紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸・行方向の軸に沿ってフレックスアイテムが配置されます。flex-start は文の中でテキストが始まる側を示すことになります。

+ +

左から始まり右で終わることを示す図

+ +

flex-direction: column を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は flex-start は段落が始まる先頭を示すことになります。

+ +

上から始まり下で終わることを示す図

+ +

flex-direction を逆方向に設定した場合、軸の終点側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。flex-start はその軸の終点側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。

+ +

右から始まり左で終わることを示す図

+ +

下から始まり上で終わることを示す図

+ +

主軸上での位置合わせに auto マージンを使う

+ +

主軸上ではアイテムは一つのグループとして扱われるため、justify-items プロパティや justify-self プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。

+ +

よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは justify-self プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。３つのアイテムが片方にあり、もう一方に２つのアイテムがあります。もし仮に justify-self がアイテム d に対して使えたとすると、意図したものであってもそうでなくても、それに続くアイテム e の配置も変わってしまうでしょう (訳註: プロパティ名で self = 自分自身と言っているのに他のアイテムにも影響を与えてしまう)。

+ +

２つのグループに分かれた５つのアイテム。３つは左側にあり、２つは右側にある。

+ +

4 つめのアイテムに対して justify-content ではなく margin-left に auto を設定すれば、先頭の３つから分離できます。auto マージンはマージンの方向に沿ったスペースをすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央そろえするときと同じです。両側のマージンが取れるだけのスペースをとろうとするために、ブロックが中央に押し出されることになります。

+ +

以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、margin-left: auto を設定した push クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}

+ +

フレックスボックスの配置機能の将来

+ +

この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 align-content と justify-content プロパティに space-evenly が導入されていることも紹介しました。

+ +

ボックス配置モジュールは、他にも column-gap や row-gap といった、アイテムの間にスペースを作るための方法を含んでいます (CSS Grid Layout にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に column-gap や row-gap がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。

+ +

フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 グリッドレイアウトでのボックス配置を参照してください。また、筆者 (訳注: 英語版の作成者 rachelandrew) は各仕様における位置合わせの動作について Box Alignment Cheatsheet で比較しています。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..a93b005b5c --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,123 @@ +--- +title: フレックスボックスの後方互換性 +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +tags: + - '@supports' + - CSS + - CSS Tables + - Flexible Boxes + - Floats + - Guide + - fallbacks + - feature queries + - flexbox + - inline-block +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +
{{CSSRef}}
+ +

フレックスボックスは最新のブラウザーではとてもよく対応されていますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策やフォールバックを作成するための方法を見ていきます。

+ +

フレックスボックスの歴史

+ +

すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。

+ +

過去、フレックスボックスはいくつかのブラウザーで実験的に実装されました。その際にはベンダー接頭辞が使われました。このような接頭辞は、他の実装と衝突することなく、仕様の実装をブラウザーエンジニアやウェブ開発者がテストして調査するためのものであり、本番で使うためのものではありませんでした。しかし、結局は本番で使用され、実験的な仕様が変更されるたびに本番のサイトを修正しなければなりませんでした。

+ +

2009 年の仕様は、今とはだいぶ異なります。フレックスコンテナーの生成するには display: box を使い、数々の box-* プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。

+ +

仕様変更によって構文が display: flexbox へと変わりました。これもベンダー接頭辞つきでした。

+ +

最終的には、フレックスコンテナーの作成には display: flex を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。

+ +

古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 display: box や display: flexbox ならば、それは古い情報です。

+ +

ブラウザーの状況

+ +

フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。ただし、下記の 2 つのブラウザーでは、ブラウザー間の互換性にまだ注意が必要です。

+ +
    +
  • Internet Explorer 10。display: flexbox の仕様で実装されていて、-ms- の接頭辞が必要です。
    • +
  • UC Browser。2009 年の display: box の仕様のままで、-webkit- の接頭辞が必要です。
    • +
+ +

また、Internet Explorer 11 は最新の display: flex の仕様に対応していますが、その実装に多くのバグがあることにも注意してください。

+ +

よくある問題

+ +

フレックスボックスの問題の大部分は、開発中だった頃の仕様の変更や、実験段階の仕様を本番で使おうとすることに関連しています。IE10 や IE11 のような古いブラウザーへの後方互換性を確保したいなら、Flexbugs のサイトが役に立ちます。そこで挙げられているバグの多くが古いバージョンのブラウザーのものであり、現行のバージョンでは解決していることが分かると思います。バグにはそれぞれ回避策が示されているので、長い試行錯誤から救ってくれることでしょう。

+ +

非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、Can I Use では、ブラウザーで接頭辞が削除された時期を調べることができます。

+ +

有用なフォールバック方法

+ +

フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることでフォールバックとすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。

+ +

浮動アイテム

+ +
+

「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - 3. Flex Containers

+
+ +

下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナに display: flex を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。

+ +

フォールバックの挙動を試すには、ラッパーから display: flex を削除してください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

inline-block のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に空白が保持されるような display: inline-block の効果が現れなくなります。

+ +

display: flex を削除してフォールバックの挙動を確認してください。アイテム間に空白が追加されるはずです。これはインライン要素や display: inine-block を指定した要素の挙動と同じです。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

CSS のテーブル表示のプロパティは、フォールバックとしてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばすことや、縦方向の中央揃えなどのデザインパターンが可能であり、しかもそれが Internet Explorer 8 のような古いブラウザーでも動作するからです。

+ +

アイテムに display: table-cell を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS は 2 種類の無名のボックスを作ります。ひとつは <tr> の、もうひとつは <table> の役割を果たします。このおかげで、アイテムを実際の HTML 要素で包む必要はありません。これら無名ボックスは不可視でスタイルを指定することもできません。単にツリー構造を補うためのものなのです。

+ +

親要素に display: flex を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。

+ +
+

「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - 4. Flex Items

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

vertical-align プロパティ

+ +

下記のライブサンプルでは、display: inline-block の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、display: table-cell と display: inline-block のどちらにも指定できます。vertical-align による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスには無視されるので、フォールバックとして display: table-cell や display: inline-block とともに使用できます。それによってフレックスボックスの整列系のプロパティが悪影響を受けることはありません。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

機能クエリとフレックスボックス

+ +

下記のように、フレックスボックスに対応しているかどうかを機能クエリで検査できます。

+ +
@supports (display: flex) {
+  // 対応しているブラウザー向けのコード
+}
+ +

Internet Explorer 11 は機能クエリに対応していませんが、フレックスボックスには対応していることに注意してください。IE11 のフレックスボックスの実装にはバグが多いため、フォールバックを採用することもあるでしょう。その場合は機能クエリを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリは UC Browser を含みます。UC Browser は機能クエリと接頭辞付きの古い構文に対応しています。

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // 対応しているブラウザー向けのコード
+}
+ +

機能クエリについて詳しく知りたい場合は、Mozilla Hacks ブログの Using Feature Queries in CSS をご覧ください。

+ +

終わりに

+ +

このガイドで潜在的な問題やフォールバックについて学んだことで、フレックスボックスを本番で使う準備が整いました。このガイドは、問題に遭遇した場合、または古いブラウザーに対応する必要がある場合に役立ちます。

diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..d73d12b7d4 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,237 @@ +--- +title: フレックスボックスの基本概念 +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +tags: + - CSS + - Flex + - Guide + - axes + - concepts + - container + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間でスペースの分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。

+ +

フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは CSS グリッドレイアウトが行と列の二次元を同時に制御するモデルであることと対照的です。

+ +

フレックスボックス 2 つの軸

+ +

フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作ではつねにこの軸について参照することになるので、最初にその動きを理解しましょう。

+ +

主軸

+ +

主軸は flex-direction によって定義され、4 種類の値をとることができます。

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

row または row-reverse を選択した場合、主軸はインライン要素の並ぶ方向に伸びる軸となります。

+ +

flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。

+ +

column または column-reverse を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。

+ +

flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。

+ +

交差軸

+ +

交差軸は主軸に垂直に交わる軸です。したがって、flex-direction (主軸) が row または row-reverse なら、交差軸は列に沿ったものになります。

+ +

flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。

+ +

主軸が column または column-reverse であれば、交差軸は行の方向になります。

+ +

flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。

+ +

フレックスアイテムの整列と位置合わせを検討する際には、どの軸が重要なのかを理解することが重要です。フレックスボックスには、コンテンツを一方の軸または他方の軸に沿って揃えたり、位置合わせしたりするプロパティが用意されています。

+ +

行の先頭と末尾

+ +

理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。

+ +

フレックスボックスと書字方向の仕様の関係については、後に別の記事でくわしく触れますが、ここではフレックスアイテムを流し込む方向について、上下左右という言葉を使わない理由について説明します。

+ +

もし flex-direction が row で言語が英語の場合、主軸の先頭は左で末尾は右になります。

+ +

英語の場合、先頭は左

+ +

一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。

+ +

右から左に書く言語では、先頭は右

+ +

いずれの場合でも、両言語ともに書字方向が横書きであるため、交差軸の先頭側は上で末尾側が下になります。

+ +

こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。

+ +

フレックスコンテナー

+ +

フレックスボックスを使ってレイアウトされる文書の領域は、フレックスコンテナーと呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を flex もしくは inline-flex に設定します。またこれにより、このコンテナー直下の子要素が フレックスアイテムとなります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。

+ +
    +
  • フレックスアイテムは行に沿って並んで表示されます (flex-direction プロパティの既定値は row)。
    • +
  • フレックスアイテムは主軸の先頭側を先頭に並びます。
    • +
  • フレックスアイテムは、主軸方向に伸張されませんが、収縮する場合があります。
    • +
  • フレックスアイテムは、交差軸の大きさを埋めるように伸張されます。
    • +
  • {{cssxref("flex-basis")}} プロパティは auto に設定されます。
    • +
  • {{cssxref("flex-wrap")}} プロパティは nowrap に設定されます。
    • +
+ +

その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより大きい場合には、すべてのアイテムが交差軸方向にその全高を埋めるように伸張されます。

+ +

この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}}

+ +

flex-direction の変更

+ +

フレックスコンテナーに {{cssxref("flex-direction")}} プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 flex-direction: row-reverse と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。

+ +

flex-direction を column に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 column-reverse では、さらに先頭と末尾が入れ替わります。

+ +

次の例では、flex-direction が row-reverse に設定されています。他の値である row, column, cokumn-reverse で何が起こるか確かめてみてください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

flex-wrap による複数行のフレックスコンテナー

+ +

フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。スペースの分配はその行の中でのみ発生し、隣の行については参照されません。

+ +

折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として wrap を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返しされます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるような幅をアイテムに設定しています。 flex-wrap を wrap に設定すると、アイテムが折り返します。初期値である nowrap に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 nowrap はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

フレックスアイテムの折り返しについての詳細は、フレックスアイテムの折り返しのマスターを参照してください。

+ +

flex-flow 一括指定プロパティ

+ +

flex-direction と flex-wrap の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が flex-direction で、2 つ目の値が flex-wrap です。

+ +

以下の例で、1 つ目の値を flex-direction に使える値 (row, row-reverse, column, column-reverse のいずれか) に変更してみてください。また、2 つ目の値を wrap か nowrap に変更してみてください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

フレックスアイテムに適用されるプロパティ

+ +

フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

本ページでは、これらのプロパティについて簡単に触れます。主軸におけるフレックスアイテムの比率の制御のガイドで、より完全な情報を得られます。

+ +

上述のプロパティについて理解する前に、分配可能スペース (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能スペースの分配のしかたを変えるということです。この分配可能スペースについての考え方は、アイテムの位置合わせについて考える時に重要になります。

+ +

たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能スペースが残っています。初期値を変更しなかった場合フレックスボックスは、スペースを最後のアイテムの後ろに配置します。

+ +

このフレックスコンテナーは、アイテムを配置した後に分配可能スペースがある。

+ +

そうではなく、アイテムを拡大してスペースを埋めたいときには、余っているスペースをアイテムに分配する方法が必要となります。それがアイテム自体に設定する flex プロパティが提供する機能です。

+ +

flex-basis プロパティ

+ +

flex-basis は、そのアイテムの寸法を、使用しないスペースは分配可能スペースとして残すように定義します。このプロパティの初期値は auto で、この設定ではブラウザーはアイテムにサイズが設定されているかを確認します。上述の例では、すべてのアイテムが100ピクセルの幅に設定されているため、これが flex-basis として使われます。

+ +

アイテムにサイズが設定されていない場合は、その内容のサイズが flex-basis として使われます。display: flex を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要なスペースのみを使用して行の中に整列していたのは、この挙動のためです。

+ +

flex-grow プロパティ

+ +

flex-grow プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って flex-basis 以上に伸張することができます。これによって、アイテムが主軸に沿った分配可能スペースをすべて使うまで伸張するか、ほかのアイテムにも flex-grow が設定されていたときには一定の割合を使うように伸張するようになります。

+ +

先ほどの例で、すべてのアイテムの flex-grow に 1 を設定すると、分配可能スペースはアイテム間で均等に分配され、主軸に沿ってコンテナーを埋めるように伸張されます。

+ +

flex-grow プロパティは割合で余白を配分するために使うことができます。最初のアイテムの flex-grow に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに2/4 (先ほどの例では 200px 中の 100px ) が与えられ、残りの 2 つのアイテムに 1/4 (200px 中の 50px ) ずつが与えられます。

+ +

flex-shrink プロパティ

+ +

flex-grow プロパティが主軸上のスペースの追加を扱う一方で、flex-shrink はスペースの取りあげ方をコントロールします。 アイテムを配置するのに十分なスペースがコンテナーになく、flex-shrink に正の整数が設定されていれば、アイテムは flex-basis よりも小さくなります。flex-grow と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまりより大きな値が flex-shrink に設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも速く収縮します。

+ +

実際の収縮幅の計算にはアイテムの最小サイズが考慮されるため、flex-shrink の動作は flex-grow に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、主軸に沿ったフレックスアイテムの比率の制御 の記事に書かれています。

+ +
+

注意: flex-grow や flex-shrink に指定する値は割合です。一般的には、たとえばあるアイテムを他の flex: 1 1 200px に設定したアイテムより２倍速く拡大させたいときには、flex: 2 1 200px を設定します。しかし、望むならば flex: 10 1 200px と flex: 20 1 200px という書き方もできます。

+
+ +

flex プロパティの一括指定

+ +

flex-grow、flex-shrink、flex-basis の各プロパティを個別に使うケースはとても珍しく、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。flex 一括指定プロパティは、flex-grow、flex-shrink、flex-basis の順に３つの値を設定できます。

+ +

以下の例では、flex 一括指定プロパティの様々な値を試せるようになっています。 最初の値が flex-grow であり、正の値を指定することでアイテムが伸張できるようになります。２番目の値は flex-shrink です。正の値によりアイテムが収縮できるようになりますが、アイテムの合計サイズが主軸からはみ出す場合のみ起こります。最後の値が flex-basis となり、アイテムが伸張・収縮する際の基準値となります。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

また、ほとんどのユースケースをカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <正の数>
    • +
+ +

flex: initial はフレックスボックスの初期値にリセットします。これは flex: 0 1 auto に設定することと同じです。この場合 flex-grow は 0 となるため、アイテムが flex-basis よりも大きくなることはありません。flex-shrink は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。flex-basis の値は auto です。アイテムに設定されている主軸に沿ったサイズか、またはアイテムの内容のサイズがフレックスアイテムのサイズとして使用されます。

+ +

flex: auto では、flex: 1 1 auto に設定することと等しくなります。flex: initial とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。

+ +

flex: none は、全く伸縮性の無い flex アイテムを作成します。これは flex: 0 0 auto と同じです。アイテムは伸張も収縮もせずに、flex-basis: auto のフレックスボックスとして配置されます。

+ +

チュートリアル内では、flex: 1 や flex: 2 のような設定をよく目にするでしょう。これは flex: 1 1 0 を使うのと同様、flex-basis が 0 の状態から伸び縮みします。

+ +

これらの短縮値について、以下の例でためしてみてください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

アイテム間での位置合わせ、端揃え、スペース分配

+ +

フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間でのスペースの分配ができる点にあります。

+ +

align-items

+ +

{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。

+ +

このプロパティの初期値は stretch であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。

+ +

アイテムをフレックスコンテナーの先頭側に揃えるためには align-items に flex-start を設定し、末尾側に揃えるためには flex-end を、中央揃えにするには center を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。align-items に以下の値を設定したときにそれぞれ何が起こるか確認してください。

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり flex-direction で設定された方向における位置合わせを行います。初期値は flex-start で、コンテナーの先頭側からアイテムが並べられます。flex-end を設定することで末尾から、center を設定することで中央に並べることもできます。

+ +

また、space-between を使用して、アイテムを配置したあとの残りのスペースのすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけのスペースを空けるには、space-around を使用します。space-around では、コンテナーの両端には、アイテム間の半分のサイズのスペースが設けられます。両端にも同じだけのスペースを設けるには、space-evenly を使用します。この場合はコンテナの両端にフルサイズ (アイテム間と同じサイズ) のスペースが設けられます。

+ +

例で、以下の justify-content の値を試してみましょう。

+ +
    +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

フレックスコンテナー内でのアイテムの配置の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどのユースケースで役に立つでしょう。

+ +

次のステップ

+ +

この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事ではこの仕様が他の CSS レイアウトメソッドとどのような関係にあるかを見ていきます。

diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html new file mode 100644 index 0000000000..379eb2ab8d --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -0,0 +1,204 @@ +--- +title: 主軸に沿ったフレックスアイテムの比率の制御 +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +tags: + - Basis + - CSS + - Flex + - Guide + - flexbox + - free space + - grow + - max-content + - min-content + - shrink + - space +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
{{CSSRef}}
+ +

このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティを見ていきます。 — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} です。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。

+ +

最初に見てみる

+ +

三つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。

+ +
    +
  • flex-grow: このアイテムがどれだけ余白を得るか。
    • +
  • flex-shrink: このアイテムからどれだけ余白を削除できるか。
    • +
  • flex-basis: 伸長や縮小が発生する前のアイテムの寸法はいくつか。
    • +
+ +

プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは flex-grow プロパティを 2 に、 flex-shrink を 1 に、 flex-basis を auto に設定します。

+ +
.item {
+  flex: 2 1 auto;
+}
+ +

すでにフレックスボックスの基本概念の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。

+ +

主軸に合わせて動作する重要概念

+ +

There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space.

+ +

フレックスアイテムの寸法の変更

+ +

In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?

+ +

There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are defined in the CSS Intrinsic and Extrinsic Sizing Specification, and can be used in place of a length unit.

+ +

In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of min-content. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the min-content size of that string. Essentially, the longest word in the string is dictating the size.

+ +

The second paragraph has a value of max-content and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+ +

If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.

+ +

The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow.

+ +

Remember this behaviour and what effects min-content and max-content have as we explore flex-grow and flex-shrink later in this article.

+ +

正と負のフリースペース

+ +

To talk about these properties we need to understand the concept of positive and negative free space. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is row, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.

+ +

Image showing space left over after items have been displayed.

+ +

We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.

+ +

The items overflow the container

+ +

It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.

+ +

In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with flex-direction: column. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.

+ +

flex-basis プロパティ

+ +

The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is auto. If flex-basis is set to auto then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case 200px would be the flex-basis for this item.

+ +

If your item is instead auto-sized, then auto resolves to the size of its content. At this point your knowledge of min- and max-content sizing becomes useful, as flexbox will take the max-content size of the item as the flex-basis. The following live example can help to demonstrate this.

+ +

In this example I have created a series of inflexible boxes, with both flex-grow and flex-shrink set to 0. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a flex-basis of 150px, whereas the other two items have no width and so are sized according to their content width.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+ +

In addition to the auto keyword, you can use the content keyword as the flex-basis. This will result in the flex-basis being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using auto as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.

+ +

If you want flexbox to completely ignore the size of the item when doing space distribution then set flex-basis to 0. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at flex-grow.

+ +

flex-grow プロパティ

+ +

The {{CSSxRef("flex-grow")}} property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.

+ +

If all of your items have the same flex-grow factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use 1 as the value, however you could give them all a flex-grow of 88, or 100, or 1.2 if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.

+ +

flex-grow と flex-basis を組み合わせる

+ +

Things can get confusing in terms of how flex-grow and flex-basis interact. Let's consider the case of three flex items of differing content lengths and the following flex rules applied to them:

+ +

flex: 1 1 auto;

+ +

In this case the flex-basis value is auto and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the max-content size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:

+ +

Images shows the positive free space as a hatched area

+ +

We are working with a flex-basis equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:

+ +

The positive space is distributed between items

+ +

If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:

+ +

flex: 1 1 0;

+ +

Here we are saying that the size of the item for the purposes of our space distribution calculation is 0 — all the space is up for grabs and as all of the items have the same flex-grow factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.

+ +

Try changing the flex-grow factor from 1 to 0 in this live example to see the different behavior:

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+ +

アイテムに別の flex-grow 要素を与える

+ +

Our understanding of how flex-grow works with flex-basis allows us to have further control over our individual item sizes by assigning items different flex-grow factors. If we keep our flex-basis at 0 so all of the space can be distributed, we could assign each of the three flex items a different flex-grow factor. In the example below I am using the following values:

+ +
    +
  • 1 for the first item.
    • +
  • 1 for the second item.
    • +
  • 2 for the third item.
    • +
+ +

Working from a flex-basis of 0 this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+ +

Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to .25, .25, and .50 — you should see the same result.

+ +

flex-shrink プロパティ

+ +

The {{CSSxRef("flex-shrink")}} property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

+ +

This property deals with situations where the browser calculates the flex-basis values of the flex items, and finds that they are too large to fit into the flex container. As long as flex-shrink has a positive value the items will shrink in order that they do not overflow the container.

+ +

So where flex-grow deals with adding available space, flex-shrink manages taking away space to make boxes fit into their container without overflowing.

+ +

In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With flex-shrink set to 0 the items are not allowed to shrink and so they overflow the box.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+ +

Change the flex-shrink value to 1 and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.

+ +

flex-shrink と flex-basis を組み合わせる

+ +

You could say that flex-shrink works in pretty much the same way as flex-grow. However there are two reasons why it isn’t quite the same.

+ +

While it is usually subtle, defined in the specification is one reason why flex-shrink isn’t quite the same for negative space as flex-grow is for positive space:

+ +
+

“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”

+
+ +

The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their min-content size — the size that they become if they take advantage of any soft wrapping opportunities available to them.

+ +

You can see this min-content flooring happen in the below example, where the flex-basis is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that min-content size. As the box gets smaller space is then just removed from the third item.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+ +

In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.

+ +

アイテムに別の flex-shrink 要素を与える

+ +

In the same way as flex-grow, you can give flex-items different flex-shrink factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.

+ +

In the following live example the first item has a flex-shrink factor of 1, the second 0 (so it won’t shrink at all), and the third 4. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for flex-grow you can use decimals or larger numbers here. Choose whatever makes most sense to you.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+ +

flex アイテムのサイズ設定をマスターする

+ +

The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:

+ +

アイテムの基本サイズを何がセットするか？

+ +
    +
  1. Is flex-basis set to auto, and does the item have a width set? If so, the size will be based on that width.
    2. +
  2. Is flex-basis set to auto or content (in a supporting browser)? If so, the size is based on the item size.
    3. +
  3. Is flex-basis a length unit, but not zero? If so this is the size of the item.
    4. +
  4. Is flex-basis set to 0? if so then the item size is not taken into consideration for the space-sharing calculation.
    5. +
+ +

利用できるスペースが残っているか？

+ +

Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.

+ +
    +
  1. If we took all of the items and added up their widths (or heights if working in a column), is that total less than the total width (or height) of the container? If so, then you have positive free space and flex-grow comes into play.
    2. +
  2. If we took all of the items and added up their widths (or heights if working in a column), is that total more than the total width (or height) of the container? If so, you have negative free space and flex-shrink comes into play.
    3. +
+ +

スペースを配分する別の方法

+ +

If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.

+ +

With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.

diff --git a/files/ja/web/css/css_flexible_box_layout/index.html b/files/ja/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..efe2e9fa39 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS フレックスボックスレイアウト +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - Guide + - Overview + - Reference + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

CSS フレックスボックスレイアウト (CSS Flexible Box Layout) は CSS のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。

+ +

基本的な例

+ +

以下の例では、コンテナーに display: flex に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 justify-content の値は、主軸上に均等に配置するため、 space-between に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 align-items の既定値は stretch なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

配置プロパティ

+ +

align-content, align-self, align-items, justify-content の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

用語集の項目

+ +
+
    +
  • {{Glossary("Flexbox", "フレックスボックス", 1)}}
    • +
  • {{Glossary("Flex Container", "フレックスコンテナー", 1)}}
    • +
  • {{Glossary("Flex Item", "フレックスアイテム", 1)}}
    • +
  • {{Glossary("Main Axis", "主軸", 1)}}
    • +
  • {{Glossary("Cross Axis", "交差軸", 1)}}
    • +
  • {{Glossary("Flex", "フレックス", 1)}}
    • +
+
+ +

ガイド

+ +
+
フレックスボックスの基本概念
+
フレックスボックスの機能の概要
+
フレックスボックスと他のレイアウト方法の関係
+
フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか
+
フレックスコンテナーにおけるアイテムの配置
+
ボックス配置プロパティがどのようにフレックスボックスに働くか
+
フレックスアイテムの順序
+
アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。
+
主軸に沿ったフレックスアイテムの比率の操作
+
flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。
+
フレックスアイテムの折り返しのマスター
+
複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。
+
典型的なフレックスボックスの用途
+
典型的なフレックスボックスの用途の一般的なデザインパターン。
+
フレックスボックスの後方互換性
+
フレックスボックスのブラウザーの互換性状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}初回定義
+ +

関連情報

+ +
+
Flexbugs
+
コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧
+
ブラウザーに依存しないフレックスボックスのミックスイン
+
この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。
+
diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html new file mode 100644 index 0000000000..ef3f6ed3d9 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -0,0 +1,92 @@ +--- +title: フレックスアイテムの折り返しのマスター +slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が row の場合は新しい行を、 flex-direction が column の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより CSS グリッドレイアウトが必要になるかを説明します。

+ +

折り返しを行う

+ +

The initial value of the {{cssxref("flex-wrap")}} property is nowrap. This means that if you have a set of flex items that are too wide for their container, they will overflow it. If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap, or use the shorthand {{cssxref("flex-flow")}} with values of row wrap or column wrap.

+ +

Items will then wrap in the container. In the next example I have ten items all with a flex-basis of 160px and the ability to grow and shrink. Once the first row gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed. As the items can grow, they will expand larger than 160 px in order to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+ +

We can see the same thing happening with columns. The container will need to have a height in order that the items will start wrapping and creating new columns, and items will stretch taller to fill each column completely.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+ +

折り返しと flex-direction

+ +

Wrapping works as you might expect when combined with flex-direction. If flex-direction is set to row-reverse then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+ +

Note that the reversing is only happening in the inline, row direction. We start on the right then go onto the second line and again start from the right. We aren’t reversing in both directions, starting from the bottom coming up the container!

+ +

一次元のレイアウトの説明

+ +

As we have seen from the above examples if our items are allowed to grow and shrink, when there are fewer items in the last row or column then those items grow to fill the available space.

+ +

There is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. It deals with space distribution across the main axis. If there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container.

+ +

If you want layout in two dimensions then you probably want Grid Layout. We can compare our wrapped row example above with the CSS Grid version of that layout to see the difference. The following live sample uses CSS Grid Layout to create a layout that has as many columns of at least 160 pixels as will fit, distributing the extra space between all columns. However, in this case the items stay in their grid and don’t stretch out when there are fewer of them on the final row.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+ +

This is the difference between one and two-dimensional layout. In a one dimensional method like flexbox, we only control the row or column. In two dimensional layout like grid we control both at the same time. If you want the space distribution row by row, use flexbox. If you don’t, use Grid.

+ +

フレックスボックスベースのグリッドシステムはどのように動作するか

+ +

Typically flexbox-based grid systems work by taking flexbox back to the familiar world of float-based layouts. If you assign percentage widths to flex items — either as flex-basis or by adding a width to the item itself leaving the value of flex-basis as auto — you can get the impression of a two dimensional layout. You can see this working in the example below.

+ +

Here I have set flex-grow and flex-shrink to 0 to make inflexible flex items and am then controlling flexibility using percentages, just like we used to do in float layouts.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ +

If you need flex items to line up in the cross axis, controlling the width in this way will achieve that. In most cases however, adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layout for that component.

+ +

アイテム間の溝の作成

+ +

When wrapping flex items, the need to space them out is likely to arise. At the current time we do not have any implementations of the gap properties from the Box Alignment module for Flexbox. In the future we will be able to simply use row-gap and column-gap for flexbox as we do for CSS Grid. At the current time you will need to use margins to achieve this.

+ +

You can see from the live example below that in order to create gaps that do not also create a gap at the edges of the container, we need to use negative margins on the flex container itself. Any border on the flex container is then moved to a second wrapper in order that the negative margin can pull the items up to that wrapper element.

+ +

It is this requirement that the gap properties, once implemented, will solve for us. Proper gaps only happen on the inside edges of items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+ +

アイテムの折りたたみ

+ +

The flexbox specification details what should happen if a flex item is collapsed by setting visibility: collapse on an item. See the MDN documentation for the {{cssxref("visibility")}} property. The specification describes the behaviour as follows:

+ +
+

“Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - Collapsed items

+
+ +

This behaviour is useful if you want to target flex items using JavaScript to show and hide content for example. The example in the specification demonstrates one such pattern.

+ +

In the following live example I have a non-wrapped flex container. The third item has more content than the others yet is set to visibility: collapse and therefore the flex container is retaining a strut of the height required to display this item. If you remove visibility: collapse from the CSS or change the value to visible, you will see the item disappear and the space redistribute between non-collapsed items; the height of the flex container should not change.

+ +
+

Note: Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden.

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+ +

When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done after collapsing. So the browser needs to re-do the wrapping behaviour to account for the new space that the collapsed item has left in the inline direction.

+ +

This means that items might end up on a different line to the one they started on. In the case of an item being shown and hidden it could well cause the items to end up in a different row.

+ +

I have created this behaviour in the next live example. You can see how the stretching changes row based on the location of the collapsed item. If you add more content to the second item, it changes row once it gets long enough. That top row then only becomes as tall as a single line of text.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+ +

If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can’t shift rows.

+ +

visibility: hidden と display: none の違い

+ +

When you set an item to display: none in order to hide it, the item is removed from the formatting structure of the page. What this means in practice is that counters ignore it, and things like transitions do not run. Using visibility: hidden keeps the box in the formatting structure which is useful in that it still behaves as if it were part of the layout even though the user can’t see it.

+ +

{{CSSRef}}

diff --git a/files/ja/web/css/css_flexible_box_layout/mixins/index.html b/files/ja/web/css/css_flexible_box_layout/mixins/index.html new file mode 100644 index 0000000000..42426babe4 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/mixins/index.html @@ -0,0 +1,368 @@ +--- +title: クロスブラウザのフレックスボックスのミックスイン +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - CSS フレックスボックス + - ミックスイン + - リファレンス +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +
{{cssref}}
+ +

この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。

+ +

このセットは次のものを使用します。

+ +
    +
  • 2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)
    • +
  • 最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)
    • +
+ +

原文:

+ + + +

参考文献:

+ + + +
メモ: ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。
+ +

フレックスボックスのコンテナー

+ +

{{cssxref("display")}} プロパティに flex の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 inline-flex の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。

+ + + +
@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+//Using this mixin
+%flexbox { @include flexbox; }
+ +
+
@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+ +

フレックスボックスの方向

+ +

The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.

+ + + +
+
@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Shorter version:
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+ +

フレックスボックスの折り返し

+ +

The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.

+ + + +
+
@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+ +

フレックスボックスのフロー (一括指定)

+ +

The {{cssxref("flex-flow")}} property is shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes.

+ + + +
+
@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+ +

フレックスボックスの順序

+ +

The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

+ + + +
+
@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+ +

フレックスボックスの伸長

+ +

The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.

+ + + +
+
@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}
+
+ +

フレックスボックスの縮小

+ +

The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.

+ + + +
+
@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}
+
+ +

フレックスボックスの basis

+ +

The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.

+ + + +
+
@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+ +

フレックスボックスの "flex" (一括指定)

+ +

The {{cssxref("flex")}} property specifies the components of a flexible length; flex-grow factor, flex-shrink factor, and the flex-basis. When an element is a flex item, flex is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, flex has no effect.

+ + + +
+
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // Box-Flex only supports a flex-grow value so lets grab the
+  // first item in the list and just return that.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flexbox: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+ +

フレックスボックスのコンテンツの位置揃え

+ +

The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

+ +
+

Note: space-* values not supported in older syntaxes.

+
+ + + +
+
@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Shorter version:
+  @mixin flex-just($args...) { @include justify-content($args...); }
+
+ +

フレックスボックスの項目の配置

+ +

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

+ + + +
+
@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+ +

フレックスボックスの自己配置

+ +

Values: auto (default) | flex-start | flex-end | center | baseline | stretch

+ +

Spec: https://drafts.csswg.org/css-flexbox/#align-items-property

+ +
+
@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+ +

フレックスボックスのコンテンツの配置

+ +

The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.

+ + + +
+
@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..8a2a488baa --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,144 @@ +--- +title: フレックスアイテムの並べ替え +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +tags: + - Accessibility + - CSS + - Flex + - Guide + - direction + - flexbox + - order + - reverse +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

フレックスボックスやグリッドといった新しいレイアウト方法には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法についてみていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。

+ +

アイテムを逆順に表示する

+ +

{{cssxref("flex-direction")}} プロパティは以下の４つの値から一つを設定できます。

+ +
    +
  • row
    • +
  • column
    • +
  • row-reverse
    • +
  • column-reverse
    • +
+ +

上２つの値は、アイテムの順序を文書のソースに現れる順と同じ順序で、始点から連続して表示します。

+ +

左から始まり一行に表示されるアイテム

+ +

上から始まり一列に表示されるアイテム

+ +

下２つの値は始点と終点を入れ替えて、アイテムを逆順に表示します。

+ +

右側から逆順に表示されるアイテム

+ +

下側から逆順に一列に表示されるアイテム

+ +

始点は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、row と row-reverse が英語のような左から右の言語においてどのように作用するかを示しています。アラビア語のような右から左の言語を使用している場合には、row では右から始まり row-reverse では左から始まります。

+ +

アラビア文字の場合に row が右から始まり、 row-reverse では左から始まることを示すフレックスコンテナー

+ +

これは、アイテムが表示上でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。

+ +
+

“Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.” - Ordering and Orientation

+ +

(注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。 Ordering and Orientation より引用)

+
+ +

仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。

+ +

逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。

+ +
+

“Authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.”

+ +

(文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の -reverse 値をソース順序の修正の代用として利用してはいけません。)

+
+ +
+

注: 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。

+
+ +

以下の例ではリンクからリンクにタブ移動した際に、どれがハイライトされているかわかりやすいように focus スタイルを加えています。flex-direction を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

flex-direction の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。

+ +

order プロパティ

+ +

フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。

+ +

order プロパティはアイテムのレイアウトを数字で順序づけたグループにレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。

+ +

例として、５つのアイテムに対して以下のように order を割り当てます。

+ +
    +
  • ソース上で１番目のアイテム: order: 2
    • +
  • ソース上で２番目のアイテム: order: 3
    • +
  • ソース上で３番目のアイテム: order: 1
    • +
  • ソース上で４番目のアイテム: order: 3
    • +
  • ソース上で５番目のアイテム: order: 1
    • +
+ +

このときアイテムは以下の順序でページ上に表示されます。

+ +
    +
  • ソース上で３番目のアイテム: order: 1
    • +
  • ソース上で５番目のアイテム: order: 1
    • +
  • ソース上で１番目のアイテム: order: 2
    • +
  • ソース上で２番目のアイテム: order: 3
    • +
  • ソース上で４番目のアイテム: order: 3
    • +
+ +

ソース上の順序を示す番号を表示している順序変更されたアイテム

+ +

以下の例で値を変更して、表示順がどのように変わるか試してみてください。また flex-direction を row-reverse に変えたときに何が起こるか、つまり始点が変わるために反対側から並べられることを確かめましょう。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+ +

フレックスアイテムのデフォルトの order は 0 です。したがって 0 より大きい order をもつアイテムは、明示的に order を指定されていないアイテムの後ろに表示されます。

+ +

order には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに order: -1 を設定することで、0 より小さい order のこのアイテムが常に先頭に表示されるようになります。

+ +

以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている active クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

アイテムは仕様の中で order-modified document order として述べられているものに従って表示されます。アイテムが表示される前に、order プロパティの値が考慮されます。

+ +

order はアイテムの描画順についても変更します。order の値が小さいものから先に描画され、大きくなる順に描画されていきます。

+ +

order プロパティとアクセシビリティ

+ +

order プロパティの使用は、flex-direction による方向の変更と同様のアクセシビリティに対する影響があります。order は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。

+ +

この記事中の例でタブ移動を試すことで、order がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。

+ + + +

order の利用場面

+ +

フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば order プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。

+ +

例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。

+ +

日付が先頭にあり、見出しと本文がそれに続いているデザインコンポーネント

+ +

表示上では日付が見出しの上に現れています。しかしスクリーンリーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを order プロパティで実現することができます。

+ +

カードをフレックスコンテナーとして、flex-direction を column に設定します。そして、日付に order: -1 を設定します。これによって見出しの上に日付を引き上げることができます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

この例のような細かな調整は order プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして order プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチスクリーンではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。

diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html new file mode 100644 index 0000000000..1eeaa99bbb --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -0,0 +1,137 @@ +--- +title: フレックスボックスと他のレイアウト方法の関係 +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +tags: + - CSS + - CSS フレックスボックス + - Guide + - Writing Mode + - box alignment + - contents + - display + - flexbox + - grid + - フレックスボックス + - ボックス配置 + - 書字方向 +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。

+ +
+

メモ: CSS のバージョン 1 とバージョン 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。

+
+ +

ボックス配置モジュール

+ +

多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。

+ +

これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では Box Alignment Specification の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿ったスペースの分配についても扱っています。

+ +

ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。

+ +
+

メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。

+ +

(訳注: https://www.w3.org/TR/css-flexbox-1/#alignment より引用)

+
+ +

このガイドの後の記事「フレックスコンテナーでのアイテムの配置」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。

+ +

gap プロパティ

+ +

ボックス配置仕様書に最近追加されたものが、 {{cssxref("row-gap")}} プロパティ と {{cssxref("column-gap")}} プロパティ、およびこれらの一括指定プロパティ {{cssxref("gap")}} です。これらのプロパティは、はじめは CSS Grid 仕様の中で、それぞれ grid-row-gap, grid-column-gap, grid-gap として定義されていましたが、フレックスボックスを含めたすべてのレイアウト方法で使用できるように名前が変更され Box Alignment に移動されました。各ブラウザーがフレックスボックスの gap プロパティを実装するまでは、アイテム間にギャップを作るには {{cssxref("margin")}} プロパティを使うことになります。

+ +

書字方向

+ +

「フレックスボックスの基本概念」の記事で、フレックスボックスが書字方向対応であることに触れました。書字方向については CSS の Writing Modes specification で詳細に記されており、国によって異なる様々な書字方向をどのように CSS がサポートしているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。 block 方向と inline 方向について理解することが、新しいレイアウト方法の鍵となります。

+ +

コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、この記事を参照してください。

+ +

書字方向

+ +

Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

sideways-rl と sideways-lr の対応は現時点では Firefox のみということに注意してください。また writing-mode とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については MDN の書字方向のドキュメントに情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。

+ +

CSS の writing-mode プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で html 要素に dir 属性と lang 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。

+ +

フレックスボックスと他のレイアウト方法

+ +

フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に起こることの定義が含まれています。例えば float 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。

+ +

display: flex に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。

+ +

フレックスアイテムについては、ある要素は浮動 (float) や解除 (clear) が設定されていて、その上で親要素に display: flex が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。inline-block やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。

+ +

次の例では、子要素は浮動設定されており、コンテナーには display: flex が設定されています。display: flex を削除すると、解除が適用されていないため .box が折りたたまれます。再度 display: flex を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

フレックスボックとグリッドレイアウト

+ +

CSS グリッドレイアウトとフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている flex プロパティは無視されるようになります。

+ +

ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。

+ +

フレックスとグリッドの違いは？

+ +

フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜ所々同じことをしているように見える２つの仕様がわざわざあるのか？というのはよくある疑問です。

+ +

この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。スペースの分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。

+ +

場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。

+ +

経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。

+ +

グリッドとフレックスボックスのさらに詳しい比較については「グリッドレイアウトと他レイアウト方法との関係」の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。

+ +

フレックスボックスと display: contents

+ +

{{cssxref("display")}} プロパティの値 contents は、仕様書の中で以下のように述べられている新しい値です。

+ +
+

「要素自体はボックスを生成しませんが、その子要素や疑似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や疑似要素によって置き換えられたように扱わなければなりません」

+ +

(訳注: https://www.w3.org/TR/css-display-3/#box-generation より引用)

+
+ +

display のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。

+ +

以下の例では、フレックスコンテナーに３つの子要素があります。そのうちの１にはさらに２つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。

+ +

ここで display: contents をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、２つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。display: contents を削除してみると元に戻ることを確認できます。

+ +

レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。

+ +
+

警告: display: contents を利用すると、要素がアクセシビリティツリーからも削除されます。 – 読み上げソフトは中身を見ず、 display: none を使用したのと同様になります。 contents は表示のためだけのものであり、コンテンツや要素ではありません。

+
+ +

また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において display: contents を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

display:contents のブラウザー対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに display: contents をサポートしており、 Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。

diff --git a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..4c3c468afc --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,142 @@ +--- +title: フレックスボックスの典型的な使用例 +slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +tags: + - CSS + - Flexible Box + - Guide + - common uses + - flexbox + - patterns +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

このガイドでは、フレックスボックスの一般的な使用例を紹介します。 — 他のレイアウト方法よりも適した使い方です。

+ +

なぜフレックスボックスを選ぶのか？

+ +

ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては フレックスボックスと他のレイアウト方法の関係 をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。

+ +

現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、Box Alignment がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。

+ + + +

ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。

+ +

アイテムを水平に表示する際に、空白が必要になる場合があります。その空白をどうするか。2 つの選択肢があります。アイテムの外側に置く場合は、アイテム同士の間やアイテムの周囲に空白を配置することになります。アイテムの内側に入れる場合は、アイテムが空白を受け入れてサイズが広がるようにする方法が必要です。

+ +

空白を外側に配置

+ +

アイテム間や周囲に空白を置くには、フレックスボックスの整列系のプロパティと {{cssxref("justify-content")}} プロパティを使います。このプロパティの詳細については フレックスコンテナにおけるアイテムの位置合わせ をご覧ください。そこでは、主軸 (横軸) でのアイテムの整列について説明しています。

+ +

下記のライブサンプルでは、アイテムをそれぞれ本来のサイズで表示しています。また、justify-content: space-between によって、同じ幅の空白をアイテム同士の間に配置しています。値に space-around や、ブラウザーが対応している場合は space-evenly を指定することで、空白の配置方法を変えることができます。flex-start で空白をアイテム群の後ろに配置し、flex-end で空白をアイテム群の前に配置し、center でアイテム群をナビゲーションの中央に配置することもできます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

空白を内側に配置

+ +

ナビゲーションでの別のパターンは、空白をアイテム同士の間ではなく、アイテム自身の内部に配置することです。この場合は、Flex アイテムを主軸に沿わせる時の制御割合 に書かれているように、{{cssxref("flex")}} プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮できます。

+ +

ナビゲーションのアイテムの幅を同じにしたいなら、flex: auto を指定します。これは flex: 1 1 auto の短縮版です。すべてのアイテムは自動の flex-basis をもとに伸縮します。つまり、他よりも中身が多いアイテムは、占める領域も他より多くなります。

+ +

下記のライブサンプルの flex: auto を flex: 1 に変えてみてください。これは flex: 1 1 0 の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって領域が均等に配分されるからです。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

ナビゲーションの分割

+ +

主軸 (横軸) でアイテムを整列するもうひとつの方法は、自動マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。

+ +

下記の例では、主軸上での位置合わせに auto マージンを使う に書かれている自動マージンの技法を使っています。アイテムは flex-start によって主軸上に揃えられます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に揃えられます。分割される地点を変えるには、CSSクラス "push-right" を別のアイテムに移してください。

+ +

下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空白を作っています。また、フレックスコンテナにネガティブマージンを指定して、コンテナの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある gap プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

アイテムの中央揃え

+ +

フレックスボックスの登場以前、開発者たちは「Webデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。今では、下記のライブサンプルのとおり、フレックスボックスの整列系のプロパティで簡単にできます。

+ +

下記のコード内の center の代わりに、先頭に揃える flex-start や末尾に揃える flex-end を指定して、整列の挙動を試してみてください。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナをフレックスコンテナとして扱ってフレックスコンテナに align-items を指定するか、フレックスアイテム自身に align-self を指定してください。

+ + + +

フレックスボックスや CSS グリッドを使ってコンテナ内のカード状の部品を並べて配置する場合、それらの制御はコンテナの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッドエリアやフレックスコンテナの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。

+ +

Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

フレックスボックスはこれを解決できます。カード自身もフレックスコンテナにして、{{cssxref("flex-direction")}}: column を指定します。そしてカードの本文エリアに flex: 1 を指定します。これは flex: 1 1 0 の短縮版です。アイテムは 0 の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文エリアだけの場合、本文エリアはフレックスコンテナ内の空白をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから flex プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

メディアオブジェクト

+ +

メディアオブジェクトはWebデザインの一般的なパターンです。このパターンは画像などを左側に持ち、文章をもう右側に持ちます。理想的には、メディアオブジェクトを反転させて画像を左から右へ移すことができるようにすべきでしょう。

+ +

このようなパターンはどこでも見かけます。コメント欄や、画像とその説明を表示する場合などです。フレックスボックスならば、メディアオブジェクトの画像エリアには画像の寸法そのままの領域を確保させて、余った領域はすべて文章エリアに使わせるという柔軟な指定ができます。

+ +

下記のライブサンプルはメディアオブジェクトの例です。整列系のプロパティを使ってアイテムを交差軸 (縦軸) の flex-start に揃えて、.content を指定したフレックスアイテムに flex: 1 を指定しています。先述のカード内の縦方向の配置と同じく、flex: 1 はその要素を引き伸ばせることを意味します。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

下記のような、メディアオブジェクトの実用でよくある場面を、上記のライブサンプルで試してみたくなりませんか？

+ +

画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像エリアのフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では flex-basis は auto なので、画像の {{cssxref("width")}} や max-width が flex-basis となります。

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

両方のエリアの比率を維持したまま伸縮させることもできます。両者に flex: 1 を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。両者の比率を中身の量で決めるために flex: auto を指定することもできます。その場合は、中身のサイズに応じて、または画像の width ようにフレックスアイテムに直接適用されるサイズに応じて伸縮します。

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像エリアには flex: 1、文章エリアには flex: 3 というように。これは、両者に 0 の flex-basis が適用されますが、指定された flex-grow に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、Flex アイテムを主軸に沿わせる時の制御割合 で詳しく説明されています。

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

メディアオブジェクトを反転させる

+ +

画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、flex-direction プロパティに row-reverse を指定します。下記のライブサンプルでは、.flipped のクラスを .media の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

フォームコントロール

+ +

フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはマークアップと小さな要素がたくさんあり、それらを整列させたいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。

+ +

フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、枠線と display: flex を指定したラッパーの中に <button> と <input> フィールドを入れています。<input> フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。

+ +

終わりに

+ +

上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。

+ +

コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。

diff --git a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html new file mode 100644 index 0000000000..83ec871366 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html @@ -0,0 +1,190 @@ +--- +title: Web アプリケーションのレイアウトに flexbox を使用する +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +tags: + - Advanced + - CSS + - CSS Flexible Boxes + - Example + - Guide + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +
{{CSSRef}}
+ +

flexbox は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、絶対位置指定、JavaScript による細工をなくして、数行の CSS だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:

+ +
    +
  • ページの中央に要素を置きたい場合。
    • +
  • コンテナを垂直方向へ次々に並べて配置したい場合。
    • +
  • スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。
    • +
+ +

この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで flexbox を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、CSS flexible box の使用に関する、より一般的なガイドをご覧ください。

+ +

基本

+ +

任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに flex を、また {{cssxref("flex-flow")}} に row (要素を水平に並べたい場合) または column (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 wrap も指定します。

+ +

そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:

+ +
    +
  • ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、flex: none を使用します。この値は 0 0 auto に展開されます。
    • +
  • 要素のサイズを明示したい場合は、flex: 0 0 size を使用します。例: flex 0 0 60px
    • +
  • 使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、flex: auto を使用します。この値は 1 1 auto に展開されます。
    • +
+ +

もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。

+ +

ページ内の中央に要素を配置する

+ +

このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。

+ +

CSS コンテンツ

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

HTML コンテンツ

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

結果

+ +

{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}

+ +

複数のコンテナを垂直方向に並べる

+ +

ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを auto に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを none にすることで実現できます。

+ +

CSS コンテンツ

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

HTML コンテンツ

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
+</div>
+
+ +

Javascript コンテンツ

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

結果

+ +

{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}

+ +

この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。

+ +

折り返される水平方向のコンテナを作成する

+ +

スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 wrap を追加すると実現できます。

+ +

CSS コンテンツ

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

HTML コンテンツ

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Element 1</div>
+  <div class="fixed-size">Element 2</div>
+  <div class="fixed-size">Element 3</div>
+</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
+
+ +

Javascript コンテンツ

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html new file mode 100644 index 0000000000..71f345c3d8 --- /dev/null +++ b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -0,0 +1,128 @@ +--- +title: 通常フローでのブロック及びインラインレイアウト +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +tags: + - CSS + - CSS Flow Layout + - CSS フローレイアウト + - Guide + - Intermediate + - Layout + - Margins + - flow + - ガイド + - マージン + - レイアウト + - 中級者 +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +
{{CSSRef}}
+ +

このガイドでは、通常フローの中でブロック及びインライン要素がどのように動作するかの基本を見てみます。

+ +

通常フローは CSS 2.1 仕様書で定義されており、通常フロー内のあらゆるボックスが整形コンテキストの一部になることを説明しています。ブロックかインラインのどちらかになることができますが、同時に両方になることはできません。ブロック整形コンテキストに参加するものをブロックレベルボックス、インライン整形コンテキストに参加するものをインラインレベルボックスと呼んでいます。

+ +

ブロックまたはインライン整形コンテキストを持つ要素の動作は、この仕様書でも定義されています。ブロック整形コンテキストを持つ要素については、仕様書では以下にように言っています。

+ +
+

“ブロック整形コンテキストでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。二つの兄弟ボックスの間の垂直距離は、 'margin' プロパティで指定されます。ブロック整形コンテキストにおいて、隣り合うブロックレベルボックスの間の垂直マージンは相殺されます。
+
+ ブロック整形コンテキストの中では、それぞれのボックスの左外側の端は、包含ブロックの左端に接します (右書きの整形では、右端が接します)。” - 9.4.1

+
+ +

インライン整形コンテキストを持つ要素については以下の通りです。

+ +
+

“インライン整形コンテキストでは、ボックスは包含ブロックの上から次々と水平に、レイアウトされます。これらのボックスの間では、水平マージン、境界、パディングが尊重されます。ボックスは垂直方向には様々な方法で配置されます。下や上に配置されたり、テキストのベースラインに配置されたりします。1行を形成するボックスを含む矩形の領域は行ボックスと呼ばれます。” - 9.4.2

+
+ +

なお、 CSS 2.1 仕様書では、横書きで上から下へ向かう書字方向の文書を説明しています。例えば、ブロックボックス間を垂直距離によって説明しています。ブロックおよびインライン要素の動作は、縦書きの書字方向でも同様に動作するものであり、今後のフローレイアウトと書字方向のガイドで明らかにする予定です。

+ +

ブロック整形コンテキストに参加する要素

+ +

英語のように書字方向が横書きのブロック要素は、垂直方向に、1つずつ下方向にレイアウトされます。

+ +

+ +

書字方向が縦書きである場合は、水平方向にレイアウトされるでしょう。

+ +

+ +

このガイドでは、英語、すなわち横書きモードでの作業となります。しかし、文書が縦書きの場合でも、説明したことはすべて同じように動作するはずです。

+ +

仕様書で定義されているように、2つのブロックボックスの間のマージンは、要素間に区切りを作るものです。2つの段落から成るとても単純なレイアウトで、境界を追加したところに見ることができます。既定ののブラウザースタイルシートでは、上下にマージンを追加することで、段落間の間隔が追加されています。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

段落要素のマージンを 0 にすると、境界線が接触します。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

既定では、ブロック要素はインライン方向の空間をすべて消費するので、段落は広がり、包含ブロックの中で可能な限り大きくなります。ブロック要素に幅を設定した場合、段落が横に並ぶ空間があったとしても、段落は下へ下へと配置されます。それぞれは包含ブロックの先頭側の反対側から始まりますので、その書字方向で文章が始まる場所になります。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

マージンの相殺

+ +

仕様書では、ブロック要素間のマージンは相殺されると説明されています。つまり、上マージンを持つ要素がに下マージンを持つ要素の直後に来た場合、空間の合計はこれら2つのマージンの合計になるのではなく、マージンが相殺され、本質的には2つのマージンのうち大きい方のマージンと同じくらいの大きさになるということです。

+ +

下記の例では、段落の上マージンが 20px、下マージンが 40px となっています。段落間のマージンの大きさは、2段落目の小さい上マージンが1段目の大きい下マージンで相殺されるため、 40px になります。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

マージンの相殺については、マージンの相殺の記事で詳しく解説しています。

+ +
+

注: マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。

+ +

+
+ +

インライン整形コンテキストに参加する要素

+ +

インライン要素は、その特定の書字方向で文章が進む方向に次々と表示されます。インライン要素がボックスを持っていると考えることはあまりありませんが、 CSS のすべての要素と同様にボックスを持っています。これらのインラインボックスは、次から次へと配置されています。すべてのボックスを含むブロックに十分な空間がない場合、ボックスは新しい行に分割されます。生成された行は行ボックスと呼ばれています。

+ +

以下の例では、段落の内部に {{HTMLElement("strong")}} 要素があることで生成された3つのインラインボックスがあります。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

<strong> 要素の前と <strong> 要素の後の言葉の周りのボックスは無名ボックスと呼ばれ、すべてがボックスに含まれていることを保証するために導入されていますが、私たちが直接ターゲットにすることはできません。

+ +

行ボックスのブロック方向の寸法 (すなわち英語で作業しているときは高さ) は、その中の最も高さが高いボックスによって定義されます。次の例では、 <strong> 要素に 300% に設定しました。その内容がその行の行ボックスの高さを定義するようになります。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

ブロックボックスとインラインボックスの動作についての詳細は、視覚整形モデルのガイドを参照してください。

+ +

display プロパティとフローレイアウト

+ +

CSS 2.1 に存在する規則に加えて、新しい水準の CSS では、ブロックボックスとインラインボックスの動作がさらに記述されています。 {{cssxref("display")}} プロパティは、ボックスとその中のボックスの動作を定義します。 CSS Display Model Level 3 では、 display プロパティがどのようにボックスや生成されるボックスの動作を変えるのかを知ることができます。

+ +

要素の表示種別は、外部表示型として、ボックスが同じ整形コンテキスト内の他の要素とどのように並んで表示されるかを定義します。また、内部表示型として、この要素内のボックスがどのように動作するかを決定します。フレックスボックスレイアウトを考えると、このことがよくわかります。下の例には {{HTMLElement("div")}} があり、それに display: flex を指定しています。フレックスコンテナーはブロック要素のように動作しており、新しい行に表示されてインライン方向に取ることができるすべての空間を取っています。これは外部表示型が block であるということです。

+ +

フレックスアイテムはフレックス整形コンテキストに参加しています。これは、その親は display: flex を持つ要素であり、これは flex の内部表示型を持っているため、直接の子にフレックス整形コンテキストを確立しているためです。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

したがって、 CSS のすべてのボックスはこのように動作していると考えることができます。ボックス自体は外部表示型を持っているので、どのように他のボックスと並ぶよう動作するかを知っています。次に、ボックスは内部表示型を持ち、子ボックスの動作を変更します。これらの子も、外部と内部の表示型を持っています。前の例でフレックスアイテムはフレックスレベルのボックスになるので、フレックス整形コンテキストの一部として外部表示型が指定されます。しかし、これらのアイテムの内部表示型はフローであり、子アイテムは通常フローに参加します。フレックスアイテムの内部に含まれているアイテムは、何か表示型が変更されない限り、ブロックおよびインライン要素として配置されます。

+ +

外部と内部の表示型というこの概念は、フレックスボックス (display: flex) やグリッドレイアウト (display: grid) などのレイアウト方法を使用しているコンテナーも、外部表示型が block であるために、ブロックとインラインのレイアウトに参加しているということを教えてくれるので重要です。

+ +

要素が参加する整形コンテキストの変更

+ +

ブラウザーはアイテムを、その要素が通常ブロックやインラインの整形コンテキストの一部としての意味を持つものとして表示します。例えば、 {{HTMLElement("strong")}} 要素は単語を強調するために使用され、ブラウザーでは太字で表示されます。一般には、 <strong> 要素がブロックレベルの要素として表示され、改行して表示されるという意味は持ちません。すべての <strong> 要素をブロック要素として表示したい場合は、 <strong> に display: block を設定することで実現できます。これは、コンテンツのマークアップにほとんど意味に応じて HTML 要素を使用し、表示方法を変更するのに CSS を使用することができることを意味します。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

まとめ

+ +

このガイドでは、通常のフローで要素がブロック要素やインライン要素として、どのように表示されるかを見てきました。これらの要素の既定の動作により、 CSS のスタイリングが全くない HTML 文書は、読みやすい形で表示されます。通常のフローがどのように機能するかを理解することで、要素の表示方法を変更するための出発点を理解し、レイアウトを容易にすることができるようになります。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html new file mode 100644 index 0000000000..bb13c91fb5 --- /dev/null +++ b/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -0,0 +1,73 @@ +--- +title: フローレイアウトとオーバーフロー +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +tags: + - CSS + - overflow + - text-overflow + - ガイド + - フローレイアウト + - レイアウト + - 中級者 + - 可視性 +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +

コンテナーに収まらない量のコンテンツがある場合、オーバーフローが発生します。どのようにオーバーフローが動作するかを理解することは、 CSS で制約された寸法で要素を扱うのに重要です。このガイドでは、通常フローで作業中にオーバーフローがどのように起こるかを説明します。

+ +

オーバーフローとは

+ +

Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the overflow property which has an initial value of visible. This is why we can see the overflow content.

+ +

オーバーフローの制御

+ +

There are other values that control how overflow content behaves. To hide overflowing content use a value of hidden. This may cause some of your content to not be visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

Using a value of scroll contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

Using a value of auto will display the content with no scrollbars if the content fits inside the box. If it doesn’t fit then scrollbars will be added. Comparing the next example with the example for overflow: scroll you should see overflow scroll has horizontal and vertical scrollbars when it only needs vertical scrolling. The auto example below only adds the scrollbar in the direct we need to scroll.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

As we have already learned, using any of these values, other than the default of visible, will create a new Block Formatting Context.

+ +

Note: In the Working Draft of Overflow Level 3, there is an additional value overflow: clip. This will act like overflow: hidden however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.

+ +

The overflow property is in reality a shorthand for the overflow-x and overflow-y properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for overflow-x and therefore the horizontal direction, and the second for overflow-y and the vertical direction. In the below example, I have only specified overflow-y: scroll so we do not get the unwanted horizontal scrollbar.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

フロー関係のプロパティ

+ +

In the guide to Writing Modes and Flow Layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - overflow-block and overflow-inline. These correspond to overflow-x and overflow-y but the mapping depends on the writing mode of the document.

+ +

These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.

+ +

オーバーフローの指示

+ +

In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.

+ +

インライン軸のオーバーフロー

+ +

The text-overflow property deals with text overflowing in the inline direction. It takes one of two values clip, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. We also have ellipsis which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

ブロック軸のオーバーフロー

+ +

There is also a proposal for a block-overflow property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.

+ +

This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.

+ +

まとめ

+ +

Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.

+ +
{{QuickLinksWithSubpages("/ja/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html new file mode 100644 index 0000000000..56ef206cbd --- /dev/null +++ b/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -0,0 +1,93 @@ +--- +title: フローレイアウトと書字方向 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +tags: + - CSS 書字方向 + - ガイド + - フローレイアウト + - 方向 + - 日本語処理 + - 書字方向 +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +

通常フローの動きについて詳細を説明している CSS 2.1 仕様書は、横書きを想定しています。レイアウトプロパティは縦書きモードでも同様に動作するべきです。このガイドでは、異なる文書の書字方向が使われた場合のフローレイアウトの動作を見てみましょう。

+ +

これは CSS での書字方向の使用に関する包括的なガイドではなく、ここでの目的は、フローレイアウトと書字方向の起こりうる相互作用が予想できないような領域を文書化することです。この文書の外部リソースや関連情報の節で、書字方向に関するより多くのリソースを紹介します。

+ +

書字方向の仕様書

+ +

CSS Writing Modes Level 3 仕様書では、フローレイアウトで文書の書字方向が変更された時の影響を定義しています。仕様書の書字方向の導入部では、以下のように書かれています。

+ +
+

“CSS の書字方向は {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} プロパティによって決められます。これは主にインラインベース方向とブロックフロー方向から決まります。”

+
+ +

仕様書ではインラインベース方向を、行内でコンテンツが並べられる方向として定義しています。ここでは、インライン方向の始点と終点を定義しています。始点は文が始まるところであり、終点はテキストの行が終わり、新しい行への折り返しが始まる前です。

+ +

ブロックフロー方向は、段落などのボックスが、その書字方向で積み重なる方向です。 CSS の writing-mode プロパティは、ブロックフロー方向を制御します。ページまたはページの一部を vertical-lr に変更したい場合、要素に writing-mode: vertical-lr と設定し、これがブロックの方向を変更して、従ってインライン方向も同様に変更します。

+ +

特定の言語では書字方向やテキストの方向が使用されますが、これらの方向を創造的な効果として、例えば見出しを縦書きにするために使用することができます。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

writing-mode プロパティとブロックフロー

+ +

{{cssxref("writing-mode")}} プロパティは horizontal-tb, vertical-rl, vertical-lr の値を受け入れます。これらの値はページのブロックフローの方向を制御します。初期値は horizontal-tb で、ブロックフロー方向は上から下で、インライン方向は横書きとなります。英語のような左書きの言語、アラビア語のような右書きの言語は、すべて horizontal-tb です。

+ +

以下の例は horizontal-tb を使用したブロックを示しています。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

vertical-rl の値は、次の例に見られるように、ブロックフロー方向は右から左で、インライン方向は縦書きになります。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

最後の例では writing-mode の第三の値である vertical-lr を紹介します。ブロックフロー方向は左から右で、インライン方向は縦書きになります。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

書字方向が親と異なるボックス

+ +

親とは書字方向が異なる内部のボックスを作成した場合、インラインレベルボックスは display: inline-block であるかのように表示されます。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

ブロックレベルボックスは新しいブロック整形コンテキストを生成し、つまり内部の display 種別が flow であれば、 display 種別の計算値は flow-root になります。次の例では、親が新しいブロック整形コンテキストを確立するため、 horizontal-tb で表示される浮動要素を含むボックスがどこに表示されるかを確認できます。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

置換要素

+ +

画像などの置換要素は、 writing-mode プロパティによって方向が変更されません。しかし、テキストを含むフォームコントロールのような置換要素は、使用中の書字方向に一致するでしょう。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

論理プロパティと値

+ +

書字方向を horizontal-tb 以外にして作業をすると、画面の物理的な寸法に合わせられた多くのプロパティと値はおかしく見えます。例えば、 horizontal-tb の中でボックスの幅を 100px に設定すると、インライン方向の寸法を制御することになります。 vertical-lr では、ブロック方向の寸法を制御することになり、テキストに合わせて回転するわけではありません。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

従って、新しいプロパティ {{cssxref("block-size")}} および {{cssxref("inline-size")}} ができました。ブロックの inline-size を 100px に設定すると、書字方向が横書きか縦書きかに関わらず、 inline-size は常にインライン方向の寸法を意味します。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

CSS 論理プロパティと値の仕様書は、マージン、パディング、境界の制御や、その他の通常は物理的な方向を使用して指定するものの論理バージョンのプロパティを含んでいます。

+ +

まとめ

+ +

多くの場合、フローレイアウトは文書や文書の一部の書字方向を変更したときに、期待通りに動作するでしょう。これはふつう、縦書きの言語や創造的な理由で使用することができます。 CSS は論理プロパティと値を導入することで、縦書き時にインラインやブロック方向に基づいて寸法を決めやすくしています。これはどの書字方向でも動作するコンポーネントを作成するのに便利です。

+ +

関連情報

+ + + +

外部リソース

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html new file mode 100644 index 0000000000..cdccf842c6 --- /dev/null +++ b/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -0,0 +1,64 @@ +--- +title: フロー内とフローの外 +slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +
{{CSSRef}}
+ +

前のガイドでは、通常フロー内でのブロック及びインラインレイアウトを説明しました。フロー内のすべての要素は、この方法を使用して配置されます。

+ +

以下の例では、見出し、段落、リスト、そして strong 要素を含む最後の段落があります。見出しと段落はブロックレベルで、 strong 要素はインラインです。リストはフレックスボックスを使用してアイテムを1行に配置していますが、ブロックレイアウトとインラインレイアウトの両方に対応しています。 - コンテナーは外側で display が block になっています。

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

すべての要素がフローの中にあるといえます。ページ上にはソース内にある順序で出現しています。

+ +

項目のフローの外への持ち出し

+ +

以下のものを除いて、すべての要素がフロー内にあります。

+ +
    +
  • 浮動アイテム
    • +
  • position: absolute のアイテム (同様に機能する position: fixed を含む)
    • +
  • ルート要素 (html)
    • +
+ +

フローの外のアイテムは、新しいブロック整形コンテキスト (BFC) を作成するので、その中のものはページの残りから独立して、小さなレイアウトのように見えます。したがってルート要素はフローの外で、文書内のすべてのコンテナーとして、文書のブロック整形コンテキストを確立します。

+ +

浮動アイテム

+ +

この例では1つの div と、それから2つの段落があります。段落には背景色を塗っており、 div を左側に浮動させました。 div はフローの外になりました。

+ +

浮動アイテムとして、最初は通常のフローであるようにレイアウトされますが、そのあとでフローから取り出され、左側のできるだけ遠くに移動されました。

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

次の段落の背景色が下層に表示されているのが見えます。その段落の行ボックスだけが短縮され、浮動アイテムの周りでコンテンツを折り返す効果があります。段落のボックスは、通常のフローの規則に従って表示されます。このため、行ボックスから距離を置くために浮動アイテムの周りに間隔を作るには、アイテムにマージンを追加する必要があります。このために以下のフロー内のコンテンツに追加することができるものはありません。

+ +

絶対位置指定

+ +

アイテムに position: absolute または position: fixed を与えると、アイテムをフローから外し、アイテムが占めるはずだった空間も除去されます。次の例では、3つの段落要素を用い、2番目の要素は position を absolute にし、オフセット値を top: 30px および right: 30px としています。アイテムは文書フローから除去されています。

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

position: fixed を使用しても、アイテムをフローから除去しますが、オフセットは包含ブロックではなくビューポートからのものになります。

+ +

位置指定してアイテムをフローの外に持ち出す場合、コンテンツが重複する可能性を管理する必要があります。フローの外ということは、基本的にページ内の他の要素が、その要素が存在することを知ることがなく、従って影響を与えないことを意味します。

+ +

相対位置指定とフロー

+ +

アイテムに position: relative によって相対位置を与えた場合、フロー内には残りますが、周囲を押し広げるためにオフセット値を使用することができます。しかし、以下の例のように、通常フローで配置するはずだった空間は予約されます。

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

アイテムを除去するために何かをしたり、アイテムを通常フローで配置される場所からずらしたりした場合は、重ならないようにコンテンツやコンテンツの周囲を管理する必要が出てくる可能性があります。浮動をクリアしたり、要素に position: absolute を設定して他のコンテンツの上に来ないようにします。このため、フロー内の要素を除去する方法は、このような影響を理解したうえで使用する必要があります。

+ +

まとめ

+ +

このガイドでは、特定の種類の位置指定を実現するために、要素をフローの外に持ち出す方法を紹介しました。次のガイドでは、 Formatting Contexts Explained の中で、ブロック整形コンテキストを作成する上での関連する問題を見てみます。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..a16c0cbd4f --- /dev/null +++ b/files/ja/web/css/css_flow_layout/index.html @@ -0,0 +1,51 @@ +--- +title: CSS フローレイアウト +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS + - Reference + - ガイド + - フロー + - フローレイアウト + - レイアウト + - 中級者 +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +

通常フロー (Normal Flow) 、またはフローレイアウトは、レイアウトに変更が加えられる前にブロック要素やインライン要素がページに表示される方法です。このフローは本質的に、共に動作するすべてのものの組み合わせで、レイアウトの中で互いについてを知っています。いったん何かがフローの外に出ると、独立して動作します。

+ +

通常フローでは、インライン要素はインライン方向、つまり文書の書字方向に従って、文の中で言葉が表示される方向に表示されます。ブロック要素は、文書の書字方向の中で、段落として一つが他の物の後に表示されます。従って英語では、インライン要素は左から始まり、一つが他の物の後に表示され、ブロック要素は上から始まり、ページの下に向かいます。

+ +

基本的な例

+ +

以下の例はブロック及びインラインレベルボックスの例を示します。緑色の枠線がある二つの要素がブロックレベルで、他の物の下に表示されます。

+ +

最初の文は青い背景をもつ span 要素を含んでいます。これはインラインレベルで、文の中に表示されます。

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

ガイド

+ + + +

リファレンス

+ +

用語集の記事

+ +
    +
  • {{Glossary("Block/CSS", "ブロック (CSS)")}}
    • +
+ + diff --git a/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html new file mode 100644 index 0000000000..fcdc556b13 --- /dev/null +++ b/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -0,0 +1,100 @@ +--- +title: 整形コンテキストの紹介 +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +tags: + - BFC + - Block Formatting Context + - CSS + - Formatting contexts + - Guide + - Intermediate + - Layout + - flow + - ガイド + - ブロック整形コンテキスト + - 中級者 + - 整形コンテキスト +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +
{{CSSRef}}
+ +

この記事では整形コンテキストの概念を紹介します。ブロック整形コンテキスト、インライン整形コンテキスト、フレックス整形コンテキストなど、いくつかの種類があります。どのように動作するのか、これらの動作をどのように利用できるのかについても紹介します。

+ +

ページ上のすべてのものが整形コンテキスト、またはコンテンツを特定の方法でレイアウトする際に定義されている領域の一部です。ブロック整形コンテキスト (BFC) は、子要素をブロックレイアウトの規則に則って配置し、フレックス整形コンテキストは、子要素を{{Glossary("flex item", "フレックスアイテム")}}として配置するなどです。それぞれの整形コンテキストは、そのコンテキストにあるときにどのようにレイアウトを行うかの特定の規則を持っています。

+ +

ブロック整形コンテキスト

+ +

ブロックレイアウト規則を使用する文書の中で一番外側の要素は、最初の、あるいは初期ブロック整形コンテキストを確立します。これは、 <html> 要素のブロック内のすべての要素が、ブロックおよびインラインレイアウトの規則に従って、通常のフローに従ってレイアウトされることを意味します。ブロック整形コンテキスト (BFC) に参加する要素は、 CSS ボックスモデルによって概説された規則を使用します。これは、要素のマージン、境界、パディングが同じコンテキスト内の他のブロックとどのように相互作用するかを定義します。

+ +

新しいブロック整形コンテキストの生成

+ +

{{HTMLElement("html")}} 要素がブロック整形コンテキストを生成できる唯一の要素ではありません。どのブロックレベルの要素でも、特定の CSS プロパティを適用することで BFC を生成することができます。

+ +

新しい BFC は以下のような場面で生成されます。

+ +
    +
  • {{cssxref("float")}} を使用して浮動状態になった要素
    • +
  • 絶対位置指定の要素 ({{cssxref("position", "position: fixed", "#fixed")}} または {{cssxref("position", "position: sticky", "#sticky")}} を含む)
    • +
  • {{cssxref("display", "display: inline-block", "#inline-block")}} の要素
    • +
  • 表のセル、または display: table-cell が指定された要素で、 display: table-* プロパティを使用して生成された無名の表のセルを含む
    • +
  • テーブルのキャプション、または display: table-caption が付いた要素
    • +
  • overflow が visible 以外の値であるブロック要素
    • +
  • display: flow-root または display: flow-root list-item の要素
    • +
  • {{cssxref("contain", "contain: layout", "#layout")}}, content, strict のいずれかの要素
    • +
  • {{Glossary("flex item", "フレックスアイテム")}}
    • +
  • グリッドアイテム
    • +
  • 段組みコンテナー
    • +
  • {{cssxref("column-span")}} が all に設定された要素
    • +
+ +

これは、新しい BFC がメインレイアウトの中でミニレイアウトとなり、一番外側の文書のように動作するので便利です。 BFC はその中にすべてを含み、 {{cssxref("float")}} と {{cssxref("clear")}} は同じ整形コンテキスト内の項目にのみ適用され、マージンは同じ書式設定コンテキスト内の要素間でのみ相殺されます。

+ +

BFC が生成される例

+ +

新しい BFC を生成する効果を見るために、いくつかの例を見てみましょう。

+ +

下の例では、境界が適用された <div> の中に浮動要素があります。その <div> の内容は、その浮動要素の横に並んでいます。その浮動要素の内容は、その横にある内容よりも高さが高いため、 <div> の境界線がその浮動要素を通過するようになりました。フロー内とフローの外のガイドで説明されているように、浮動要素はフローから外れているので、 <div> の背景と境界には内容だけが含まれ、浮動要素は含まれません。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

新しい BFC を生成すると浮動要素が収まります。これまでよく使われてきた方法は、 overflow: auto または初期値である overflow: visible 以外の値を設定することでした。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

+ +

overflow: auto を設定することで、浮動要素を含む新しい BFC を生成しました。 <div> はレイアウト内のミニレイアウトになりました。すべての子要素はその中に収まります。

+ +

overflow を使って新しい BFC を生成する場合の問題点は、 overflow プロパティは、あふれた内容をどのように処理したいかをブラウザーに伝えるためのものだということです。このプロパティを純粋に BFC を作成するために使用した場合、意図せずにスクロールバーが現れたり、影がクリッピングされたりすることに気づくこともあるでしょう。さらに、 overflow を使用した理由が明らかにならないこともあるかもしれないので、将来の開発者からは理解しやすくない可能性があります。このような場合は、コードにコメントをつけて説明するのが良いでしょう。

+ +

display: flow-root を使用した明示的な BFC の生成

+ +

包含ブロックに display: flow-root (または display: flow-root list-item) を使用すると、問題を起こす副作用が発生することなく新しい BFC を生成することができます。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

display: flow-root を {{HTMLElement("div")}} に指定すると、コンテナー内のすべてのものがそのコンテナーのブロック整形コンテキストに参加し、浮動要素が要素の底から飛び出すことはなくなります。

+ +

flow-root キーワードの名前は、新しいコンテキストがどのように作成され、そのフローレイアウト機能がどのように機能するかを考えると、本質的には ({{HTMLElement("html")}} にように) 新しいルート要素のような役割を果たすものを生成しているという事実を示しています。

+ +

インライン整形コンテキスト

+ +

インライン整形コンテキストは、他の整形コンテキストの中に存在する、段落のコンテキストと考えることができます。段落は、テキスト上で {{HTMLElement("strong")}}, {{HTMLElement("a")}}, {{HTMLElement("span")}} などの要素が使われた場合のようなインライン整形コンテキストを作成します。

+ +

ボックスモデルは、インライン整形コンテキストに参加している項目には完全には適用されません。横書きモードの行では、水平方向のパディング、境界、マージンが要素に適用され、テキストを左右に押しのけます。ただし、要素の上下のマージンは適用されません。水平のパディングや境界は適用されますが、インライン整形コンテキストでは、ラインボックスがパディングや境界によって押し広げられることはないため、上下の内容が重なる可能性があります。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

その他の整形コンテキスト

+ +

このガイドはフローレイアウトを対象としているため、他のありうる整形コンテキストについては言及していません。そのため、どのような種類の整形コンテキストを作成しても、その整形コンテキスト内の要素の動作が変わることを理解しておくと便利です。この動作は常に仕様書に記述されており、ここ、 MDN にも記述されています。

+ +

まとめ

+ +

このガイドでは、ブロックおよびインライン整形コンテキストにおける詳細と、ブロック整形コンテキスト (BFC) を生成することの重要な目的を見てきました。次のガイドでは、通常フローがどのように様々な所持方向に対応するかを見ていきます。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_fonts/index.html b/files/ja/web/css/css_fonts/index.html new file mode 100644 index 0000000000..c1584ac37f --- /dev/null +++ b/files/ja/web/css/css_fonts/index.html @@ -0,0 +1,141 @@ +--- +title: CSS フォント +slug: Web/CSS/CSS_Fonts +tags: + - CSS + - CSS フォント + - Reference + - 概要 +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS フォントは CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリ、寸法、太さ、行の高さ、グリフの種類を定義することができます。

+ +

基本的な例

+ +

以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。

+ +
p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}
+ +
<p>Three hundred years ago<br>
+  I thought I might get some sleep<br>
+  I stretched myself out onna antique bed<br>
+  An' my spirit did a midnite creep</p>
+ +

結果は以下のようになります。

+ +

{{EmbedLiveSample('Basic_example', '100%', '200')}}

+ +

可変フォントの例

+ +

たくさんの可変フォントの例を v-fonts.com および axis-praxis.org で見ることができます。詳しい情報と使い方の情報は、可変フォントガイドも参照してください。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-feature-settings")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
  • {{cssxref("font-language-override")}}
    • +
  • {{cssxref("font-optical-sizing")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-size-adjust")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-variation-settings")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+
+ +

@-規則

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

ガイド

+ +
+
テキストとフォントのスタイル付けの基礎
+
この初心者向けの学習記事で、基本的なテキストやフォントのスタイル付けを、ウェイト、ファミリとスタイル、 font 一括指定、テキスト配置とその他の効果、行、字間など、詳細にわたって全て通します。
+
OpenType フォント特性ガイド
+
フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準制御プロパティ — {{cssxref("font-feature-settings")}} を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。
+
可変フォントガイド
+
可変フォントは OpenType フォント仕様書が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts')}}{{Spec2('CSS4 Fonts')}}font-variation-settings (および関連する高水準プロパティ) および font-optical-sizing を追加。
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}}font-feature-settings (および関連する高水準プロパティ)
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの対応

+ +

({{cssxref("font-weight")}} や {{cssxref("font-style")}} など) 基本フォントプロパティの多くはブラウザー間で良く対応されていますが、もっと新しいもののいくつかは対応が限られています。全体としてはそれぞれのリファレンスページにあるブラウザーの対応情報を見る必要があります。

diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html new file mode 100644 index 0000000000..bdc63c3739 --- /dev/null +++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html @@ -0,0 +1,235 @@ +--- +title: OpenTypeフォント機能の手引き +slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide +tags: + - CSS + - Fonts + - Text +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +--- +

{{CSSRef}}

+ +

フォントの機能及び派生とは，OpenTypeフォントに含まれる異なるグリフや文字様式を指します。これらには合字（「fi」又は「ffl」といった文字を組み合わせた特殊なグリフ），文字詰め（特定の字形の組の間隔の調整），分数，数字様式，及びその他多数が含まれます。これらは全てOpenType機能と呼ばれており，Web上での利用には特定のプロパティ郡及び低級制御プロパティの一つを介します――{{cssxref("font-feature-settings")}}。本稿ではCSSにおけるOpenTypeフォント機能の利用について，知っていなければならない全てを提供します。

+ +

幾つかのフォントでは，前述の機能の内一つ又は複数個が既定で有効です（一般的な例: 字詰め及び既定合字）が，他の機能については，デザイナー又は開発者に，個別の事案で有効にするか否かの選択肢が委ねられています。

+ +

In addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for East Asian languages. In the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other OpenType features.

+ +
+

注意: There are many CSS attributes defined to leverage font features, but unfortunately many are not fully implemented. They are all defined and shown here, but many will only work using the lower-level {{cssxref("font-feature-settings")}} property. It's possible to write CSS to work both ways but this can become cumbersome. The issue with simply using font-feature-settings for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with {{cssxref("font-variation-settings")}}).

+
+ +

フォント機能の可用性を知る

+ +

This is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type designers and foundries will provide sample pages and CSS just for this very reason). But there are some sites that make it easier to figure out. You can visit wakamaifondue.com, drop your font file on the circle where instructed and in a few moments you'll have a full report on all the capabilities and features of your font. Axis-praxis.org also offers a similar capability, with the ability to click on the features to turn them on or off in a given text block.

+ +

機能を利用する理由

+ +

Given that these features take a bit of work to discover and use, it may seem a fair question to ask why one would bother to use them. The answer lies in the specific features that will make a site more useful, readable, and polished:

+ +
    +
  • Ligatures like 'ff' or 'fi' make letter spacing and reading more even and smooth.
    • +
  • Fractions can make home improvement and recipe sites much easier to read and understand.
    • +
  • Numerals within paragraphs of text set as 'oldstyle' sit more comfortably between lower-case letters, and likewise setting them as 'tabular numbers' will make them line up better when setting a list of costs in a table say. 'lining' figures on the other hand sit more uniformly on their own or in front of capitalized words.
    • +
+ +

While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.

+ +
+

OpenType 機能は、フォント内の隠し部屋にたとえられます。隠し部屋の扉を開ければ、フォントの外観や振る舞いを少し、あるいは劇的に変えるための方法がわかります。すべての OpenType 機能が常に利用に適しているわけではありませんが、一部の機能は優れたタイポグラフィを実現するために不可欠です。――OpenType機能の使用 - アドビ

+
+ +

単なる様式ではなく，意味が丸ごと変わる場合も

+ +

時として――{{cssxref("font-variant-east-asian")}}のように――OpenType機能は或る種のグリフ異形を用いるのに直接結び付いており，意味や可読性に影響を与える可能性があります。そのような場合，OpenType機能は単に細かな見栄えを調整する以上の，寧ろ内容そのものに不可欠な部分を役めます。

+ +

フォント機能

+ +

There are a number of different features to consider. They are grouped and explained here according to the main attributes and options covered in the W3C specifications.

+ +
+

Note: The examples below show the properties and some example combinations, along with the lower-level syntax equivalents. They may not match exactly due to browser implementation inconsistencies, but in many cases the first example will match the second. The typefaces shown are Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script, and Kokoro (all available and free to use, most are on Google Fonts and other services).

+
+ +

字詰め ({{cssxref("font-kerning")}})

+ +

This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if {{cssxref("letter-spacing")}} is also set on your text, that is applied after kerning.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
+ +

代替 ({{cssxref("font-variant-alternates")}})

+ +

Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied.The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
+ +

In this case, @stylistic(alternates) will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying @styleset(alt-a) only changes the lower case 'a'.

+ +

Try changing the line

+ +
font-variant-alternates: styleset(alt-a);
+ +

to

+ +
font-variant-alternates: styleset(alt-g);
+
+ +

and notice that the lower case 'a' reverts to its regular form and the lower case 'g' changes instead.

+ +

代替フォントについての詳細

+ + + +

合字 ({{cssxref("font-variant-ligatures")}})

+ +

Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together.

+ +

While more common in script typefaces, in the below example they are used to create arrows:

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
+ +

位置 ({{cssxref("font-variant-position")}})

+ +

Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is one of the key benefits over using the {{htmlelement("sub")}} or {{cssxref("sup")}} elements.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
+ +

大・小文字 ({{cssxref("font-variant-caps")}})

+ +

OpenType機能のより一般的な使用例の一つに，小英大文字の適切な使用があります。小英大文字とは，大文字を，小文字列の内でより適切に収まるような大きさにしたものであり，一般に頭文字及び略語に対して用います。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
+ +

数字 ({{cssxref("font-variant-numeric")}})

+ +

フォントに一般的に含まれる数字には，幾つか異なる様式があります。

+ +
    +
  • 'Lining'〔線引き〕数字は，全ての数字の高さと基底線が揃っています。
    • +
  • 'Oldstyle'〔旧式の〕数字は高さが揃っておらず，周囲の小文字と同様のアセンダ及びディセンダを外見に持つよう設計されています。原稿の行内での使用を目的に設計されている為，数字と周囲のグリフとが，小英大文字と似た方式で，視覚的に融和します。
    • +
+ +

There is also the notion of spacing. Proportional spacing is the normal setting, whereas tabular spacing lines up numerals evenly regardless of character width, making it more appropriate for lining up tables of numbers in financial tables.

+ +

本プロパティは二種類の分数に対応しています:

+ +
    +
  • 斜線分数
    • +
  • 縦積み分数
    • +
+ +

序数にも対応しており（「1st」や「3rd」など），斜線付きゼロがフォントに存在するならば数字のゼロはそれになります。

+ +

線引き及び旧式の数字

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
+ +

分数・序数・及び斜線付きゼロ

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
+ +

東亜 ({{cssxref("font-variant-east-asian")}})

+ +

この機能を使ってフォント内の種々の代替形式グリフを参照できます。次の例ではOpenType文字集合'jis78'のみが有効化されたグリフの文字列を示しています。チェック欄のチェックを外すとより多くの文字が表示されます。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
+ +
+

注意: これらのグリフはフォント見本から複製したものであり，意味を成す文を意図していません。

+
+ +

フォント変種（簡略構文）({{Cssxref("font-variant")}})

+ +

This is the shorthand syntax for defining all of the above. Setting a value of normal resets all properties to their initial value. Setting a value of none sets font-variant-ligatures to none and all other properties to their initial value. (Meaning that if kerning is on by default, it will still be on even with a value of none being supplied here.)

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
+ +

フォント機能の設定

+ +

{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using CSS custom properties to set the values). Because of this, it's best to use the standard properties shown above wherever possible.

+ +

There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.

+ +

The general syntax looks like this:

+ +
.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+
+ +

According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off, like so:

+ +
.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}
+ +

font-feature-settingsプロパティの詳細

+ + + +

実装に対してCSS機能検出を用いる

+ +

Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with {{cssxref("font-feature-settings")}} as the fallback.

+ +

For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with font-feature-settings versus a single property value using {{cssxref("font-variant-caps")}}.

+ +
.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+
+ +

関連項目

+ +

CSSによるCSSのOpenType機能の実演

+ + + +

Webフォント解析ツール

+ + + +

W3C標準:

+ + + +

その他の文献

+ + diff --git a/files/ja/web/css/css_fonts/variable_fonts_guide/index.html b/files/ja/web/css/css_fonts/variable_fonts_guide/index.html new file mode 100644 index 0000000000..f5be8ef59b --- /dev/null +++ b/files/ja/web/css/css_fonts/variable_fonts_guide/index.html @@ -0,0 +1,262 @@ +--- +title: バリアブルフォントガイド +slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +tags: + - CSS + - Fonts + - Guide + - Text + - variable fonts + - web fonts +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +--- +
{{CSSRef}}
+ +

バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、バリアブルフォントの使用を開始するために知っておく必要があるすべての内容を説明します。

+ +
+

警告: OS でバリアブルフォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS はバリアブルフォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できません。

+
+ +

バリアブルフォント: 何であるか、何が違うのか

+ +

バリアブルフォントの違いをよりよく理解するためには、バリアブルでないフォントが何であり、どのように比較するかを確認するのがいいでしょう。

+ +

標準 (または静的) フォント

+ +

以前は、一つの書体がいくつもの個別のフォントとして作成され、それぞれのフォントが特定の幅/太さ/スタイルの組み合わせを表していました。したがって 'Roboto Regular'、'Roboto Bold'、'Roboto Bold Italic' のように個別のファイルがありました。— すなわち、完全な書体を表すのに 20～30 に及ぶ異なるフォントファイルで表していました (幅の異なる大きな書体の数倍になる場合もありました)。

+ +

このようなシナリオでは、サイトで一般的に使用される書体を本文に使用するためには、少なくとも通常、イタリック、太字、太字イタリックの 4 つのファイルが必要になります。キャプションには細字を、強調には太字を、といったように、より多くの太さをを追加したい場合は、さらにいくつかのファイルが必要になります。その結果、HTTP リクエストが多くなり、ダウンロードされるデータも多くなります (通常は 1 ファイルあたり約 20k 以上)。

+ +

バリアブルフォント

+ +

バリアブルフォントでは、それらのすべての組み合わせを 1 つのファイルに収めることができます。そのファイルは単一のフォントよりも大きくなりますが、たいていの場合は、本文の表示用に読み込んだ 4 つのファイルよりも小さいか、同じくらいのサイズになります。バリアブルフォントを選択する利点は、以前は別々に読み込んでいたものをいくつかだけに制限されるのではなく、利用可能な太さや幅、スタイルの全範囲にアクセスできることです。

+ +

これにより、各サイズでの読みやすさを高めるために異なるサイズの見出しを異なる太さで設定したり、データの多い表示には幅をやや狭くしたりするなど、一般的な書体技術が可能になります。比較のために、雑誌の書体システムでは、出版物全体で10～15種類以上の異なる太さと幅の組み合わせを使用するのが一般的で、現在のウェブ上の一般的なスタイルよりもはるかに幅広いスタイルを提供しています (実際にはパフォーマンスの理由だけで実用的です)。

+ +

フォントファミリ、太さ、バリアントについての注意

+ +

それぞれの太さやスタイル (太字、イタリック、太字イタリックなど) をブラウザーが合成することに頼るのではなく、個別に特定のフォントファイルを持つという話をしてきたことに気づくかもしれません。その理由は、ほとんどの書体は太字と斜体についてとても特殊なデザインを持っており、その中にはまったく異なる文字が含まれていることが多いからです (例えば、小文字の 'a' と 'g' は斜体ではかなり異なることが多いです)。書体デザインを最も正確に反映させ、ブラウザーによる違いや、異なるスタイルを合成するかどうかの違いを避けるためには、バリアブルではないフォントを使用する場合には、必要な場所に具体的なフォントファイルを読み込む方が正確です。

+ +

また、バリアブルフォントによっては 2 つのファイルに分割されていることに気づくかもしれません。 1 つは直立とそのすべての変化形、もう 1 つはイタリックの変化形を含むファイルです。これは、イタリック体を必要としない場合や使用しない場合に、全体のファイルサイズを小さくするために行われることがあります。いずれの場合も、共通の {{cssxref("font-family")}} 名でそれらをリンクさせることができるので、同じ font-family と適切な {{cssxref("font-style")}} を使ってそれらを呼び出すことができます。

+ +

「バリエーション軸」の紹介

+ +

新しい可変フォントフォーマットの中核をなすのは、書体デザインの特定の側面の許容範囲を記述するバリエーション軸の概念です。すなわち、「太さ軸」は書体の太さや細さを表し、「幅軸」は書体の幅が広いか狭いかを表し、「イタリック軸」はイタリック体の書体であるかどうかを表し、それに応じてオン/オフを切り替えることができます。軸は範囲またはバイナリの選択が可能であることに注意してください。重みは 1-999 の範囲ですが、イタリックは単純に 0 か 1 (オフかオンか) です。

+ +

As defined in the specification, there are two kinds of axes: registered and custom:

+ +
    +
  • +

    Registered axes are simply those that are most frequently encountered, and common enough that the authors of the specification felt it was worth standardizing. The five currently registered axes are weight, width, slant, italic, and optical size. The W3C has undertaken mapping them to existing CSS attributes, and in one case introduced a new one, which you'll see below.

    +
    • +
  • +

    Custom axes are in fact limitless: the typeface designer can define and scope any axis they like, and are just required to give it a four-letter tag to identify it within the font file format itself. You can use these four-letter tags in CSS to specify a point along that axis of variation, as will be show in the code examples below.

    +
    • +
+ +

登録済みの軸と既存の CSS 属性

+ +

In this section we'll demonstrate the five registered axes defined with examples and the corresponding CSS. Where possible, both the standard and lower-level syntax are included. The lower-level syntax ({{cssxref("font-variation-settings")}}) was the first mechanism implemented in order to test the early implementations of variable font support, and is necessary to utilize new or custom axes beyond the five registered ones. However, the W3C’s intent was for this syntax not to be used when other attributes are available. Therefore wherever possible, the appropriate property should be used, with the lower-level syntax of font-variation-settings only being used to set values or axes not available otherwise.

+ +

注

+ +
    +
  1. +

    When using font-variation-settings it is important to note that axis names are case-sensitive. The registered axis names must be in lower case, and custom axes must be in upper case. For example:

    + + 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    + +

    wght (weight) is a registered axis, and GRAD (grade) is a custom one.

    +
    2. +
  2. +

    If you have set values using font-variation-settings and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using CSS Custom Properties (CSS variables) for the individual values, and simply modifying the value of an individual custom property. Example code follows at the end of the guide.

    +
    3. +
+ +

太さ

+ +

Weight (represented by the wght tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can be. For a long time in CSS there has existed the ability to specify this via the {{cssxref("font-weight")}} property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like normal or bold, which are simply aliases for their corresponding numeric values (400 and 700 in this case). These are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid.

+ +

It should be noted that at this point there is no way in the @font-face declaration to 'map' a specific point on the variation axis of a variable font to the keyword bold (or any other keyword). This can generally be resolved fairly easily, but does require an extra step in writing your CSS:

+ +
font-weight: 375;
+
+font-variation-settings: 'wght' 375;
+ +

The following live example's CSS can be edited to allow you to play with font weight values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

幅

+ +

Width (represented by the wdth tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. This is typically set in CSS using the {{cssxref("font-stretch")}} property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%. If a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed.

+ +
+

注: The % symbol is not used when utilizing font-variation-settings.

+
+ +
font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+
+ +

The following live example's CSS can be edited to allow you to play with font width values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
+ +

イタリック

+ +

The Italic (ital) axis works differently in that it is either on or off; there is no in-between. Italic designs often include dramatically different letterforms from their upright counterparts, so in the transition from upright to italic, a number of glyph (or character) substitutions usually occur. Italic and oblique are often used somewhat interchangeably, but in truth are actually quite different. Oblique is defined in this context with the term slant (see the below section), and a typeface would typically have one or the other, but not both.

+ +

In CSS, both italic and oblique are applied to text using the {{cssxref("font-style")}} property. Also note the introduction of font-synthesis: none;—which will prevent browsers from accidentally applying the variation axis and a synthesized italic. This can be used to prevent faux-bolding as well.

+ +
font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;
+ +

The following live example's CSS can be edited to allow you to play with font italics.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
+ +

傾き

+ +

Slant (represented by the slnt tag), or as it's often referred to, 'oblique' — is different to true italics in that it changes the angle of the letterforms but doesn’t perform any kind of character substitution. It is also variable, in that it is expressed as a numeric range. This allows the font to be varied anywhere along that axis. The allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. However, any value from -90–90 degrees is valid.

+ +
+

注: The deg keyword is not used when utilizing font-variation-settings.

+
+ +
font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;
+ +

The following live example's CSS can be edited to allow you to play with font slant/oblique values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

Optical size

+ +

This is something new to digital fonts and CSS, but is actually a centuries-old technique in designing and creating metal type. Optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. If the size was very small (such as an equivalent to 10 or 12px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that it would reproduce and be readable at a physically smaller size. Conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.

+ +

While this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.

+ +

Optical size values are generally intended to be automatically applied corresponding to font-size, but can also be manipulated using the lower-level font-variation-settings syntax.

+ +

There is a new attribute, {{cssxref("font-optical-sizing")}}, created to support variable fonts in CSS. When using font-optical-sizing, the only allowed values are auto or none — so this attribute only allows for turning optical sizing on or off. However when using font-variation-settings: 'opsz' <num>, you can supply a numeric value. In most cases you would want to match the font-size (the physical size the type is being rendered) with the opsz value (which is how optical sizing is intended to be applied when using auto). The option to provide a specific value is provided so that should it be necessary to override the default — for legibility, aesthetic, or some other reason — a specific value can be applied.

+ +
font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;
+ +

The following live example's CSS can be edited to allow you to play with optical size values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
+ +

カスタム軸

+ +

Custom axes are just that: they can be any axis of design variation that the typeface designer imagines. There may be some that become fairly common — or even become registered — but only time will tell.

+ +

グレード

+ +

Grade may become one of the more common custom axes as it has a known history in typeface design. The practice of designing different grades of a typeface was often done in reaction to intended use and printing technique. The term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it. This makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself.

+ +
font-variation-settings: 'GRAD' 88;
+ +

The following live example's CSS can be edited to allow you to play with font grade values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
+ +

バリアブルフォントの使用: @font-face の変更

+ +

The syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional {{cssxref("@font-face")}} syntax now available in modern browsers.

+ +

The basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like font-weight and font-stretch can be supplied, rather than named according to the font file being loaded.

+ +

標準の直立の (ローマン) フォントの例

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+
+ +

Example for a font that includes both upright and italics:

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}
+ +
+

注: there is no set specific value for the upper-end degree measurement in this case; they simply indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off)

+
+ +

Example for a font that contains only italics and no upright characters:

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}
+ +

Example for a font that contains an oblique (slant) axis:

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}
+ +
+

注: Not all browsers have implemented the full syntax for font format, so test carefully. All browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. woff2 instead of woff2-variations), but it’s best to use the proper syntax if possible.

+
+ +
+

注: Supplying value ranges for font-weight, font-stretch, and font-style will keep the browser from attempting to render an axis outside that range if you are using the appropriate attribute (i.e. font-weight or font-stretch), but will not block you from supplying an invalid value via font-variation-settings, so use with care.

+
+ +

古いブラウザーでの作業

+ +

Variable font support can be checked with CSS Feature Queries (see {{cssxref("@supports")}}), so it's possible to use variable fonts in production and scope the CSS calling the variable fonts inside a feature query block.

+ +
h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}
+ +

サンプルページ

+ +

The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a font-variation-settings string, and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the h2, which only alters the grade axis custom property value.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
+ +

リソース

+ + diff --git a/files/ja/web/css/css_fragmentation/index.html b/files/ja/web/css/css_fragmentation/index.html new file mode 100644 index 0000000000..be4cb944d8 --- /dev/null +++ b/files/ja/web/css/css_fragmentation/index.html @@ -0,0 +1,47 @@ +--- +title: CSS 分割 +slug: Web/CSS/CSS_Fragmentation +tags: + - CSS + - CSS 分割 + - Overview + - リファレンス +translation_of: Web/CSS/CSS_Fragmentation +--- +
{{cssref}}
+ +

CSS 分割は CSS のモジュールの一つで、コンテンツがページ、領域、段をまたがって分割された (断片化が発生した) ときにどのように表示するかを定義します。

+ +

分割が発生するのは、インラインボックスが複数の行に渡る場合です。また、ブロックが段組みレイアウトコンテナーの中で複数の段にまたがる場合や、印刷時にページにまたがる場合です。いずれの要素の表示される断片も分割と呼ばれています。

+ +

リファレンス

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}}初回定義。
diff --git a/files/ja/web/css/css_functions/index.html b/files/ja/web/css/css_functions/index.html new file mode 100644 index 0000000000..6e50bcb257 --- /dev/null +++ b/files/ja/web/css/css_functions/index.html @@ -0,0 +1,255 @@ +--- +title: CSS 関数表記法 +slug: Web/CSS/CSS_Functions +tags: + - CSS + - CSS Data Type + - CSS Function + - Functional Notation + - Functions + - Reference + - Types + - data types +translation_of: Web/CSS/CSS_Functions +--- +
{{CSSRef}}
+ +

CSS 関数表記法は CSS 値の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。

+ +

構文

+ +
selector {
+  property: functional-notation( [argument]? [, argument]! );
+}
+ +

構文は、関数表記の名前から始まり、左括弧 ( で始まります。次に記法の引数が続き、関数は閉じ括弧 ) で終わります。

+ +

関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によって、複数の引数がカンマで区切られていたり、空白を使用していたりします。

+ +

索引

+ +

一連の CSS 仕様書で定義されている関数表記は以下のとおりです。

+ +
A + +
    +
  • {{CSSxRef("abs", "abs()")}} (math)
    • +
  • {{CSSxRef("acos", "acos()")}} (math)
    • +
  • {{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)
    • +
  • {{CSSxRef("asin", "asin()")}} (math)
    • +
  • {{CSSxRef("atan", "atan()")}} (math)
    • +
  • {{CSSxRef("atan2", "atan2()")}} (math)
    • +
  • {{CSSxRef("attr")}}
    • +
+B + +
    +
  • {{CSSxRef("filter-function/blur", "blur()")}} (filter)
    • +
  • {{CSSxRef("filter-function/brightness", "brightness()")}} (filter)
    • +
+C + +
    +
  • {{CSSxRef("calc")}} (math)
    • +
  • {{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)
    • +
  • {{CSSxRef("circle", "circle()")}} (shape)
    • +
  • {{CSSxRef("clamp")}} (math)
    • +
  • {{CSSxRef("color()")}} (colors)
    • +
  • {{CSSxRef("conic-gradient")}}
    • +
  • {{CSSxRef("cos", "cos()")}} (math)
    • +
  • {{CSSxRef("counter")}}
    • +
  • {{CSSxRef("counters")}}
    • +
  • {{CSSxRef("filter-function/contrast", "contrast()")}} (filter)
    • +
  • {{CSSxRef("cross-fade")}}
    • +
  • {{CSSxRef("cubic-bezier", "cubic-bezier()")}}
    • +
+D + +
    +
  • {{CSSxRef("device-cmyk", "device-cmyk()")}} (colors)
    • +
  • {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)
    • +
+E + +
    +
  • {{CSSxRef("element")}}
    • +
  • {{CSSxRef("env")}}
    • +
  • {{CSSxRef("ellipse", "ellipse()")}} (shape)
    • +
  • {{CSSxRef("exp", "exp()")}} (math)
    • +
+F + +
    +
  • {{CSSxRef("fit-content")}}
    • +
  • {{CSSxRef("format", "format()")}}
    • +
+G + +
    +
  • {{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)
    • +
+H + +
    +
  • {{CSSxRef("hsl", "hsl()")}} (colors)
    • +
  • {{CSSxRef("hsla", "hsla()")}} (colors)
    • +
  • {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)
    • +
  • {{CSSxRef("hwb", "hwb()")}} (colors)
    • +
  • {{CSSxRef("hypot", "hypot()")}} (math)
    • +
+I + +
    +
  • {{CSSxRef("imagefunction", "image()")}}
    • +
  • {{CSSxRef("image-set")}}
    • +
  • {{CSSxRef("inset()")}} (shape)
    • +
  • {{CSSxRef("filter-function/invert", "invert()")}} (filter)
    • +
+L + +
    +
  • {{CSSxRef("lab", "lab()")}} (colors)
    • +
  • {{CSSxRef("lch", "lch()")}} (colors)
    • +
  • {{CSSxRef("leader", "leader()")}}
    • +
  • {{CSSxRef("linear-gradient")}}
    • +
  • {{CSSxRef("local", "local()")}}
    • +
  • {{CSSxRef("log", "log()")}} (math)
    • +
+M + +
    +
  • {{CSSxRef("transform-function/matrix", "matrix()")}} (transform)
    • +
  • {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)
    • +
  • {{CSSxRef("max")}} (math)
    • +
  • {{CSSxRef("min")}} (math)
    • +
  • {{CSSxRef("minmax")}} (math)
    • +
  • {{CSSxRef("mod", "mod()")}} (math)
    • +
+O + +
    +
  • {{CSSxRef("filter-function/opacity", "opacity()")}} (filter)
    • +
  • {{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)
    • +
+P + +
    +
  • {{CSSxRef("paint")}}
    • +
  • {{CSSxRef("path", "path()")}} (shape)
    • +
  • {{CSSxRef("transform-function/perspective", "perspective()")}} (transform)
    • +
  • {{CSSxRef("polygon", "polygon()")}} (shape)
    • +
  • {{CSSxRef("pow", "pow()")}} (math)
    • +
+R + +
    +
  • {{CSSxRef("radial-gradient")}}
    • +
  • {{CSSxRef("rem", "rem()")}} (math)
    • +
  • {{CSSxRef("repeat")}}
    • +
  • {{CSSxRef("repeating-linear-gradient")}}
    • +
  • {{CSSxRef("repeating-radial-gradient")}}
    • +
  • {{CSSxRef("repeating-conic-gradient")}}
    • +
  • rgb() (colors)
    • +
  • rgba() (colors)
    • +
  • {{CSSxRef("transform-function/rotate", "rotate()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)
    • +
  • {{CSSxRef("round", "round()")}} (math)
    • +
+S + +
    +
  • {{CSSxRef("filter-function/saturate", "saturate()")}} (filter)
    • +
  • {{CSSxRef("transform-function/scale", "scale()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)
    • +
  • {{CSSxRef("filter-function/sepia", "sepia()")}} (filter)
    • +
  • {{CSSxRef("sign", "sign()")}} (math)
    • +
  • {{CSSxRef("sin", "sin()")}} (math)
    • +
  • {{CSSxRef("transform-function/skew", "skew()")}} (transform)
    • +
  • {{CSSxRef("transform-function/skewX", "skewX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/skewY", "skewY()")}} (transform)
    • +
  • {{CSSxRef("sqrt", "sqrt()")}} (math)
    • +
  • {{CSSxRef("steps", "steps()")}}
    • +
  • {{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)
    • +
  • {{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)
    • +
  • {{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)
    • +
  • {{CSSxRef("symbols", "symbols()")}}
    • +
+T + +
    +
  • {{CSSxRef("tan", "tan()")}} (math)
    • +
  • {{CSSxRef("target-counter", "target-counter()")}}
    • +
  • {{CSSxRef("target-counters", "target-counters()")}}
    • +
  • {{CSSxRef("target-text", "target-text()")}}
    • +
  • {{CSSxRef("toggle", "toggle()")}}
    • +
  • {{CSSxRef("transform-function/translate", "translate()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translateX", "translateX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translateY", "translateY()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)
    • +
+U + +
    +
  • {{CSSxRef("url()", "url()")}}
    • +
+V + +
    +
  • {{CSSxRef("var")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}toggle(), attr(), calc(), min(), max(), clamp(), round(), mod(), rem(), mod(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs(), sign() の関数表記を追加。
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}calc() の関数表記を追加。
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}rgb(), rgba(), hsl(), hsla() の関数表記にカンマなしの構文を追加。
+ rgb() と hsl() にアルファ値を許可し、 rgba() と hsla() をそれらの (非推奨の) 別名とした。
+ hwb(), device-cmyk(), color() 関数を追加。
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}rgba(), hsl(), hsla() の関数表記を追加。
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}element(), image(), image-set(), conic-gradient() の関数表記を追加。
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_generated_content/index.html b/files/ja/web/css/css_generated_content/index.html new file mode 100644 index 0000000000..a3b5e37910 --- /dev/null +++ b/files/ja/web/css/css_generated_content/index.html @@ -0,0 +1,62 @@ +--- +title: CSS 生成コンテンツ +slug: Web/CSS/CSS_Generated_Content +tags: + - CSS + - CSS Generated Content + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Generated_Content +--- +

{{CSSRef}}

+ +

CSS 生成コンテンツ (CSS Generated Content) は CSS のモジュールの一つで、要素にコンテンツを追加する方法を定義します。生成されたコンテンツは、無名で置換された要素にコンテンツを追加したり、非常に限られた状況で DOM ノードのコンテンツを生成された値で置き換えたりするために使用することができます。

+ +

詳しくは生成コンテンツのハウツーガイドや、実装情報については {{cssxref("content")}} および {{cssxref("quotes")}} プロパティをご覧ください。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("content")}}
    • +
  • {{cssxref("quotes")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Content")}}{{Spec2("CSS3 Content")}}
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..b6a71891c9 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,613 @@ +--- +title: CSS グリッドレイアウトでの自動配置 +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +

CSS グリッドレイアウト仕様書には、作成したグリッド上にアイテムを正確に配置する機能に加えて、グリッドを作成したときに子アイテムの一部またはすべてを配置しなかった場合の動作を制御するルールが含まれています。一連のアイテムでグリッドを作成することで、最も簡単な方法で自動配置を確認することができます。アイテムに配置情報を与えない場合、アイテムはグリッド上の各セルに1つずつ配置されます。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_1', '500', '230') }}

+
+ +

自動配置の既定のルール

+ +

上記の例でわかるように、グリッドを作成すると、すべての子アイテムが各グリッドセルに1つずつ配置されます。既定のフローでは、行ごとにアイテムを配置します。グリッドは、それぞれのアイテムを1行目のそれぞれのセルに配置します。 grid-template-rows プロパティを使用して追加の行を作成した場合は、グリッドはこれらの行にアイテムを配置し続けます。明示的なグリッドにすべてのアイテムを配置するのに十分な行がない場合は、新たに暗黙の行が作成されます。

+ +

暗黙のグリッド内での行の大きさ

+ +

暗黙のグリッドで自動的に作成される行の既定値は、大きさが自動になっています。これは、あふれることなく、それらに追加されたコンテンツを含むことを意味します。

+ +

しかし、grid-auto-rowsプロパティを使用することで、これらの行の大きさを制御することができます。例えば、全ての作成された行を100ピクセルの高さにするには、次のように使います:

+ +
+ + +
<div class="wrapper">
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+    <div>Four</div>
+    <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{ EmbedLiveSample('placement_2', '500', '330') }}

+
+ +

You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.

+ +
+ + +
<div class="wrapper">
+     <div>One</div>
+     <div>Two</div>
+     <div>Three</div>
+     <div>Four
+     <br>This cell
+     <br>Has extra
+     <br>content.
+     <br>Max is auto
+     <br>so the row expands.
+     </div>
+     <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{ EmbedLiveSample('placement_3', '500', '330') }}

+
+ +

You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as 200px. This will continue for as long as content is added to the implicit grid.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{ EmbedLiveSample('placement_4', '500', '330') }}

+
+ +

Auto-placement by column

+ +

You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of column. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.

+ +

In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.

+ +
+
.wrapper {
+    display: grid;
+    grid-template-rows: repeat(3, 200px);
+    grid-gap: 10px;
+    grid-auto-flow: column;
+    grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_5', '500', '640') }}

+
+ +

The order of auto placed items

+ +

A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the Grid item placement algorithm, however for most of us we just need to remember a few simple rules for our items.

+ +

Order modified document order

+ +

Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the order property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.

+ +

Items with placement properties

+ +

The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_6', '500', '450') }}

+
+ +

Deal with items that span tracks

+ +

You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to span 2. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.

+ +

You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_7', '500', '770') }}

+
+ +

Filling in the gaps

+ +

So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.

+ +

To do this, add the property {{cssxref("grid-auto-flow")}} with a value of dense to the container. This is the same property you use to change the flow order to column, so if you were working in columns you would add both values grid-auto-flow: column dense.

+ +

Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{ EmbedLiveSample('placement_8', '500', '730') }}

+
+ +

Anonymous grid items

+ +

There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of grid to display: grid. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.

+ +
<div class="grid">
+  I am a string and will become an anonymous item
+  <div>A grid item</div>
+  <div>A grid item</div>
+</div>
+
+ +

Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.

+ +

Use cases for auto-placement

+ +

Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of landscape to span two column tracks. I then use grid-auto-flow: dense to create a densely packed grid.

+ +
+
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    list-style: none;
+    margin: 1em auto;
+    padding: 0;
+    max-width: 800px;
+}
+.wrapper li {
+    border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+    grid-column-end: span 2;
+}
+.wrapper li img {
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+}
+
+ +
<ul class="wrapper">
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{ EmbedLiveSample('placement_9', '500', '1300') }}

+
+ +

Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of dt and dd items. In my example I am allowing auto-placement to place the items, however I have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.

+ +
+ + +
<div class="wrapper">
+   <dl>
+       <dt>Mammals</dt>
+       <dd>Cat</dd>
+       <dd>Dog</dd>
+       <dd>Mouse</dd>
+       <dt>Fish</dt>
+       <dd>Guppy</dd>
+       <dt>Birds</dt>
+       <dd>Pied Wagtail</dd>
+       <dd>Owl</dd>
+   </dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+   grid-column: 2;
+ }
+
+ +

{{ EmbedLiveSample('placement_10', '500', '230') }}

+
+ +

What can’t we do with auto-placement (yet)?

+ +

There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is an issue raised about this on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.

+ +

It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.

+ + diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..0037394932 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,734 @@ +--- +title: グリッドレイアウトの基本概念 +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +tags: + - CSS + - CSS Grids + - Guide + - Layout +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +
{{CSSRef}}
+ +

CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェース要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、その概要を紹介し、この一連のガイドの残りで詳細を説明します。

+ +

グリッドとは何か？

+ +

グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。

+ +

固定と可変のトラックサイズ

+ +

例えばピクセル単位を使って固定トラックサイズのグリッドを作成することができます。これであるグリッドに所望のレイアウトに合うようなピクセルを設定できます。また、可変サイズのグリッドを作成する為にパーセントやこの目的で新たに制定された fr 単位を使用することができます。

+ +

アイテムの配置

+ +

グリッドの線の番号や名前を使ってグリッドのある位置を指定してアイテムを配置することができます。グリッドには、位置が明示されていないアイテムの配置を制御するアルゴリズムも含まれています。

+ +

コンテンツを保持する為の追加のトラックの作成

+ +

グリッドレイアウトでは、明快にグリッドを定義することができます。グリッドレイアウトの仕様では必要に応じて柔軟に行や列を追加できるようになっています。「コンテナーに収まるだけ多い数の列」を追加するような機能もあります。

+ +

整列の制御

+ +

グリッドには整列機能が含まれており、あるグリッドエリア内でアイテムがどのように整列するのかと、グリッド全体がどのように整列するかを制御できます。

+ +

オーバーラップコンテンツの制御

+ +

グリッドセルやグリッドエリア内には複数のアイテムも配置でき、それらはお互いに部分的にオーバーラップできます。この階層化は、 {{cssxref("z-index")}} プロパティで制御できます。

+ +

グリッドは強力な仕様であり、フレックスボックスなど CSS の他の部品と組み合わせると、以前は CSS での構築が不可能であったレイアウトを作成できます。これはすべて、グリッドコンテナーにグリッドを作成することから始まります。

+ +

グリッドコンテナー

+ +

グリッドコンテナーを作成するには、要素に対して display: grid か display: inline-grid を指定します。グリッドコンテナーを作成すると、すべての直接の子要素がグリッドアイテムへと変わります。

+ +

この例では、 wrapper クラスの div を親要素として、その内部には 5 個の子要素が含まれます。

+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

.wrapper をグリッドコンテナー化します。

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('The_Grid_container', '200', '330') }}

+ +

すべての直接の子要素がグリッド要素になりました。それらの要素をグリッドにする前とウェブブラウザー上での見た目に変化は無いでしょう。グリッドには単一列のグリッドが作成されただけだからです。この時点で、 Firefox の開発者ツールの一つである Grid Inspector 機能が便利であることを確認できます。上記の例を Firefox で表示してグリッドを調査すると、grid 値の隣に小さなアイコンが表示されているでしょう。これをクリックすると、その要素上のグリッドがブラウザーウィンドウ内にオーバーレイ表示されます。

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

CSS グリッドレイアウトについて学び、使っていく中で、このツールは、グリッドに何が起こっているかを視覚的に理解する助けになるでしょう。

+ +

この例をさらにグリッドらしくする為には、列トラックを追加する必要があります。

+ +

グリッドトラック

+ +

ここでは、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} プロパティを使用してグリッド上に行と列を定義します。これらはグリッドトラックを定義します。グリッドトラックは、グリッド上の任意の2本の線の間にあるスペースです。下の画像で、グリッド内の最初の行トラックががハイライトされているのを確認できるでしょう。

+ +

+ +

先述の例に対して grid-template-columns プロパティを追加すると、列トラックのサイズが定義できます。

+ +

3本の200ピクセル幅の列トラックを持つグリッドを作成しましょう。子要素はこのグリッドの各グリッドセルに 1 個ずつ配置されます。

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

fr 単位

+ +

トラックは、どの長さの単位でも定義できます。グリッドには、柔軟なグリッドトラックを作成できるようにするため、追加の長さの単位が導入されています。新しい fr 単位は、グリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します。次のグリッド定義は、利用可能なスペースに応じて伸縮する、幅が 3 等分されたトラックを作成します。

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

+
+ +

この次の例では、1 つの 2fr トラックと 2 つの 1fr トラックの定義を作成します。利用可能な空間は、4 つに分割されます。そのうち 2 つが最初のトラックに与えられ、残りはそれぞれ次の 2 トラックに与えられます。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

最後の例では、絶対サイズのトラックを分数単位と混ぜて使用します。最初のトラックは 500px なので、この固定幅は利用可能な空間から除外されます。残りの領域は 3 つに分割され、比率に応じて 2 つの変動幅のトラックに割り当てられます。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

repeat() 記法によるトラック列挙

+ +

多くのトラックを持つ大きなグリッドのため、repeat() 記法を使用して、トラック列挙のすべてまたは一部を繰り返すことができます。例えば、以下のグリッド定義は:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

次のように書くこともできます。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

繰り返し記法は、トラック列挙の一部にも使えます。この次の例では、はじめに 20px のトラックを持ち、続けて 6 つの 1fr トラックのセクション、最後に 20px のトラックを持つグリッドを作成します。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

繰り返し記法はトラック列挙も取るので、トラック列挙の繰り返しパターンの作成にも利用できます。この次の例で、グリッドは10 のトラックで構成されており、それは1fr トラックに 2fr トラックが続くパターンを5回繰り返したものです。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

暗黙的と明示的なグリッド

+ +

上でグリッドの例を作成した時、私達は列トラックを {{cssxref("grid-template-columns")}} プロパティで具体的に定義しましたが、グリッドは勝手に行も作っていました。これらの行は暗黙的のグリッドの一部です。一方、明示的なグリッドは、{{cssxref("grid-template-columns")}} または {{cssxref("grid-template-rows")}} で定義された行と列から構成されます。

+ +

定義されたグリッドの外側に何かを配置した場合（またはコンテンツの量のために、より多くのグリッドトラックが必要な場合）、グリッドは暗黙的なグリッドに行と列を作成します。これらのトラックは、デフォルトで自動サイズ調整されるため、サイズはトラック内のコンテンツに基づいて決まります。

+ +

{{cssxref("grid-auto-rows")}} と {{cssxref("grid-auto-columns")}} プロパティで、暗黙的なグリッドに作成されたトラックのセットサイズを定義することもできます。

+ +

下の例では、grid-auto-rows を使用して、暗黙的なグリッド内に作成されたトラックが 200px の高さになることを保証しています。

+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}

+ +

トラックのサイズ指定と minmax()

+ +

明示的なグリッドのセットアップ時または自動生成された行や列のサイズを定義する時、最小サイズのトラックを与えておき、追加されたコンテンツに合わせて広げられるようにしたいでしょう。例えば、行を 100 px より小さくしたくないが、コンテンツの高さが 300 px に引き伸ばされた場合は行の高さをそのサイズに引き伸ばしたい場合です。

+ +

グリッドでは、それを {{cssxref("minmax", "minmax()")}} 関数で解決できます。この次の例では、{{cssxref("grid-auto-rows")}} の値に minmax() を使用しています。自動生成された行の高さの最小値は 100px、最大値は auto になります。値に auto を使うと、この行のセルがコンテンツのサイズに応じて空間が引き伸ばされ、その高さに合わせられます。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+    <p>I have some more content in.</p>
+    <p>This makes me taller than 100 pixels.</p>
+  </div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Track_sizing_and_minmax', '240', '470') }}

+ +

グリッド線

+ +

私たちがグリッドを定義する時、グリッドトラックを定義するのであり、グリッド線ではないことに注意しなければなりません。グリッドには、アイテムの配置時に使用する番号の付いた線が与えられます。3 列 2 行のグリッドには、4 本の縦線があります。

+ +

Diagram showing numbered grid lines.

+ +

グリッド線の番号は、ドキュメントの書字方向に従って付けられます。左から右 (left-to-right) に書く言語では、線 1 はグリッドの左手側にあり、右から左 (right-to-left) に書く言語では、グリッドの右手側にあります。グリッド線には名前を付けることもできます。この方法については後のガイドで解説します。

+ +

グリッド線に対するアイテムの配置

+ +

グリッド線を基にした配置の詳細は、後の記事で解説します。次の例は、その簡単な方法のデモンストレーションです。アイテムの配置する時、私たちはトラックではなくグリッド線を対象にします。

+ +

以下の例では、最初の 2 つのアイテムを、{{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} および {{cssxref("grid-row-end")}} の各プロパティを使用して 3 列トラックのグリッド上に配置します。左から右へ向かって、最初のアイテムは列の線 1 から列の線 4 に対して、右端のグリッド線まで配置されます。また、行の線 1 から始まり、行の線 3 で終わる 2 行のトラックに及びます。

+ +

2 番目のアイテムは、グリッド列の線 1 から始まり、1 トラックの幅になります。これはデフォルトであるため、終わりの線を指定する必要がありません。また、行の線 3 から 5 まで、2 行トラックに及びます。他のアイテムは、それぞれグリッド上の空スペースに配置されます。

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}

+ +

Firefox の開発者ツールで Grid Inspector が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。

+ +

グリッドセル

+ +

グリッドセル は、グリッド上の最も小さな単位です。コンセプトとしては、表のセルのようなものです。先述の例で、親要素のグリッドが定義されると、子アイテムが定義されたグリッドの各セルにレイアウトされる様を見てきました。下の画像では、グリッドの最初のセルをハイライトしています。

+ +

The first cell of the grid highlighted

+ +

グリッドエリア

+ +

アイテムは、行と列の複数のセルにまたがって配置でき、グリッドエリア を作ることができます。グリッドエリアは四角形でなければなりません。例えば L 字型の領域は作れません。ハイライトされた領域は、2 行と 2 列にまたがるトラックです。

+ +

A grid area

+ +

セル間隔

+ +

グリッドセル間の 溝 (Gutters) または 小路 (alleys) は、 {{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティを使用するか、短縮プロパティの {{cssxref("gap")}} で作成できます。下の例では、列間 10px、行間 1em の溝を作っています。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 10px;
+  row-gap: 1em;
+}
+
+ +
+

メモ: グリッドが最初にブラウザーに実装されたとき、 {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} に grid- の接頭辞がつき、それぞれ {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}} のようになっていました。

+ +

ブラウザーは接頭辞を外すよう更新されつつありますが、接頭辞付きの版も安全に利用できるよう保守されるでしょう。

+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Gutters') }}

+ +

領域の前に占める溝による空間は、柔軟な長さの fr トラックに割り当てられ、通常のグリッドトラックのようにサイズ設定のために用いられます。しかしながら、溝の内側に何かを配置することはできません。グリッド線を基準にした配置では、溝は太線のように扱われます。

+ +

入れ子状のグリッド

+ +

グリッドアイテムはグリッドコンテナーにもなります。次の例は以前作成したもので、2 個のアイテムが配置指定された 3 列のグリッドです。この例では、最初のアイテムにサブアイテムが含まれています。これらのアイテムはグリッドの直接の子ではないので、グリッドレイアウトに関係しない通常のドキュメントフローで表示されています。

+ +
+
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

この box1 に display: grid を設定すると、トラック定義を与えてグリッドにすることができます。これらは新しいグリッド上にレイアウトされます。

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('nesting', '600', '340') }}

+ +

この場合の入れ子状のグリッドは、親グリッドと関係しません。例で表示されているように、親グリッドの {{cssxref("grid-gap")}} を継承せず、入れ子状のグリッド内の線は親グリッドの線に沿いません。

+ +

サブグリッド

+ +

Level 2 のグリッド仕様書の草稿では、サブグリッド (subgrid) と呼ばれる機能があり、親グリッドのトラック定義を利用した入れ子状のグリッドを作成できます。

+ +
+

メモ: この機能は Firefox 71 で初めて搭載され、これがサブグリッドを実装している唯一のブラウザーです。

+
+ +

現在の仕様書では、入れ子上のグリッドの例を編集して、 grid-template-columns: repeat(3, 1fr) のトラック定義を grid-template-columns: subgrid へ変更します。入れ子状のグリッドは親グリッドのトラックを利用してアイテムをレイアウトします。

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+ +

z-index による項目のレイヤー化

+ +

グリッドアイテムは、同じセルを占有できます。行番号によるアイテム配置の例に戻り、2 個のアイテムがオーバーラップするように変更しましょう。

+ +
+
<div class="wrapper">
+  <div class="box box1">One</div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

アイテム box2 が box1 に重なり、ソースコードに書かれた順に、後のものが先のものの上に表示されます。

+ +

順序の制御

+ +

アイテムを上に積む順序は、配置が指定されたアイテムと同様に、z-index プロパティを使用して制御できます。box2 に box1 より下位の z-index 値を与えると、box1 の奥に表示されるようになります。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}

+ +

次のステップへ

+ +

この記事では、グリッドレイアウト仕様の要点だけを見てきました。コードの例を試してみてから、 CSS グリッドレイアウトの詳細を掘り下げることの本当のスタートである、このガイドの次のステップへ進んでください。

+ + + + diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..2ca01d4bc6 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,713 @@ +--- +title: CSS グリッドレイアウトのボックス配置 +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +tags: + - CSS グリッド +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +

CSS グリッドレイアウトは Box Alignment Level 3 仕様を実装します。これはそのフレックスコンテナの中でアイテム配置のために使う flexbox (ブレックスボックス)  と同じ仕様です。この仕様には、異なるレイアウトメソッドすべての配置方法の詳細があります。レイアウトメソッドは、可能なら仕様に準拠し、その違い（機能と制約）に基づいて個々の振る舞いを実装します。現在、仕様書にはすべてのレイアウトメソッドの詳細がありますが、ブラウザーの実装は完全ではありません。しかしながら、CSS グリッドレイアウトメソッドは広く実装されています。

+ +

このガイドでは、グリッドレイアウトにおけるボックス配置がどのように機能するのか説明します。フレックスボックスのプロパティと値の機能と多くの類似点があります。しかし、グリッドは二次元、フレックスボックスは一次元であるため、いくつか小さな違いがあることに気をつけてください。それではグリッド内のものを配置するときに使う 2 つの軸について見ていきましょう。

+ +

グリッドレイアウトの 2 つの軸

+ +

グリッドレイアウトでは、ブロック軸とインライン軸という 2 つの軸を利用できます。ブロック軸は、ブロックレイアウトでブロックが配置される軸です。ページ内に 2 つのパラグラフがある場合、上から下に向かって並べられますので、この方向がブロック軸となります。

+ +

+ +

インライン軸はブロック軸に交差する軸です。通常、テキストはインライン方向に向かって並べられます。

+ +

+ +

中身はグリッドエリアの中に並べることができ、グリッドトラック自体が 2 つの軸の上にあります。

+ +

ブロック軸上でのアイテムの配置

+ +

{{cssxref("align-self")}} と {{cssxref("align-items")}} プロパティは、ブロック軸上の配置をコントロールします。これらはグリッドエリアの中のアイテムの配置を変更します。

+ +

以下の例には、4 つのグリッドエリアがあります。グリッドコンテナ上で {{cssxref("align-items")}} プロパティと次の値の一つを使い、アイテムを配置しています。

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_1', '500', '450') }}

+
+ +

align-self: start を設定すると、それぞれの子 <div> の高さは <div> の中身によって決定されることを覚えておいてください。対照的に、align-items を完全に省略すると、それぞれの子 <div> の高さはグリッドエリアを満たすように広がります。

+ +

{{cssxref("align-items")}} プロパティはすべての子グリッドアイテムに {{cssxref("align-self")}} プロパティを設定します。これは、グリッドアイテム上で align-self を使えばプロパティを個別に設定できるということです。

+ +

次の例では、align-self プロパティを使い、様々な配置の値を実験します。最初のエリアで見られるのは align-self のデフォルトの振る舞いで、引き伸ばされています。2 つ目のアイテムは align-self が start 値を持っており、3 つ目は end 、4 つ目は center です。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_2', '500', '450') }}

+
+ +

固有のアスペクト比を持つアイテム

+ +

デフォルトでは、{{cssxref("align-self")}} の振る舞いはアイテムを広げます。しかし、固有のアスペクト比を持つアイテムの振る舞いは start になります。固有のアスペクト比を持つアイテムにデフォルトで stretch を設定するとアイテムを歪めるからです。

+ +

この振る舞いは現在、仕様で明確になっていますが、ブラウザーへの実装はまだ途上です。それまでの間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を start に設定することによって、グリッドの直接の子である画像などのアイテムが、デフォルトで広がらないことを保証できます。これは正しい動作を模倣します。

+ +

インライン軸上のアイテムの位置揃え

+ +

{{cssxref("align-items")}} と {{cssxref("align-self")}} がブロック軸上でアイテムの配置を処理するように、{{cssxref("justify-items")}} と {{cssxref("justify-self")}} は、インライン軸上で同じ動作をします。選べる値は align-self と同じです。

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

以下では、{{cssxref("align-items")}} と同様の例を見ることができます。今回は {{cssxref("justify-self")}} を適用しています。

+ +

ここでもデフォルトは、固有のアスペクト比を持つアイテム以外、stretch です。配置の設定を変更しない場合、グリッドアイテムはグリッドエリアをカバーします。例の最初のアイテムはデフォルトの配置を表しています。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_3', '500', '450') }}

+
+ +

{{cssxref("align-self")}} と {{cssxref("align-items")}} と同様に、グリッドコンテナに {{cssxref("justify-items")}} を適用することで、すべてのアイテムに {{cssxref("justify-self")}} の値を設定できます。

+ +

{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティはフレックスボックスに実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを両端揃えすることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。

+ +

ショートハンドプロパティ

+ +

{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-self")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。

+ +

エリア内のアイテムを中央に揃える

+ +

align プロパティと justify プロパティを組み合わせると、グリッドエリアの中でアイテムを簡単に中央揃えすることができます。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Item 1</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_4', '500', '480') }}

+
+ +

ブロック軸上のグリッドトラックの配置

+ +

グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸上のトラックを配置し、{{cssxref("justify-content")}} はインライン軸上の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。

+ +
    +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも空間があることを意味します。

+ +

align-content プロパティはグリッド全体のグリッドコンテナに適用されます。グリッドレイアウトでのデフォルトの振る舞いは start で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドラインの始まりに対して整列しています。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_5', '500', '520') }}

+ +

コンテナに align-content を追加し、値を end に設定すると、トラックは、すべてブロック方向の中でグリッドコンテナが終わるラインに移動します。

+
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_6', '500', '520') }}

+
+ +

フレックスボックスのようにスペース配分する値、space-between 、space-around 、space-evenly を使うこともできます。{{cssxref("align-content")}} を space-between に更新すると、グリッド上の要素がどう配置されるかを確認できます。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_7', '500', '520') }}

+
+ +

スペース配分の値を使用すると、グリッド上のアイテムが大きくなる可能性があることに注意してください。アイテムが複数のグリッドトラックにまたがる場合、トラック間にさらにスペースを追加すると、アイテムはその分大きくなる必要があります。グリッドは常に厳密です。したがって、これらの値を使用する場合は、トラックの内容が追加のスペースに対応できるようにするか、整列プロパティを使用して引き伸ばさず始点に置くようにします。

+ +

下の図では、align-content と start で配置したグリッドの隣に、align-content を space-between に設定して配置したグリッドがあります。2 つのトラックの間にスペースを取るとき、2 つの行トラックにまたがる Item 1 と 2 が どのように余分な高さを確保しているか見てください。

+ +

space-between を使用したときアイテムがどのように大きくなるかのデモ。

+ +

インライン軸上のグリッドトラックの位置揃え

+ +

ブロック軸で {{cssxref("align-content")}} を使うのと同様に、インライン軸では {{cssxref("justify-content")}} を使うことができます。

+ +

同じ例を使って、{{cssxref("justify-content")}} に space-around を設定してみましょう。やはり、1 つ以上の列トラックにまたがるトラックが余分なスペースを得ることになります。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_8', '500', '500') }}

+
+ +

配置と自動マージン

+ +

エリアの中でアイテムを配置する別の方法は、自動マージンを使用することです。コンテナブロックの左右のマージンを auto に設定すると、ビューポート内でレイアウトを中央に配置できます。既に知っているように、自動マージンは空きスペースのすべてを吸収します。両側のマージンを auto に設定すると、両マージンはスペースのすべてを取るよう試みるため、ブロックは中央に押し込まれます。

+ +

次の例では、Item 1 に auto の左マージンを与えます。自動マージンは、そのアイテムのコンテンツ用の空間が割り当てられた後に残りのスペースを取るため、コンテンツがエリアの右側に押し出されます。どのように押し出されるか見てみましょう。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_9', '500', '500') }}

+
+ +

Firefox Grid Highlighter を使って、どのようにアイテムが整列されるか見てみましょう。

+ +

Grid Highlighter を使って自動マージンを見ている画像。

+ +

整列と書字方向

+ +

ここまでのすべての例は英語を使ったものであり、これは左から右へ書く言語です。物理方向で考えるとき、行の始点はグリッドの左上になります。

+ +

CSS グリッドレイアウトとボックス配置の仕様は、CSS の書字方向と共に機能するようデザインされています。アラビア語などの右から左へ書く言語で作業する場合、グリッドの始点は右上になり、justify-content: start のデフォルトはグリッドトラックがグリッドの右手側から始まるようになるでしょう。

+ +

margin-right または margin-left で自動マージンを使用した場合、および top 、right 、bottom 、left を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。

+ + diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..77237096cf --- /dev/null +++ b/files/ja/web/css/css_grid_layout/index.html @@ -0,0 +1,271 @@ +--- +title: CSS グリッドレイアウト +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - Guide + - Layout + - Overview + - Reference +translation_of: Web/CSS/CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

CSS グリッドレイアウトは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

+ +

表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。

+ +

基本的な例

+ +

次の例では、最小値100ピクセル、最大値 auto で作成された列を含む、3つの行を表示します。要素は line-based placement に従ってグリッド上に配置されます。

+ + + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{EmbedLiveSample("Basic_example", "100%", "440")}}

+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{CSSxRef("grid-template-columns")}}
    • +
  • {{CSSxRef("grid-template-rows")}}
    • +
  • {{CSSxRef("grid-template-areas")}}
    • +
  • {{CSSxRef("grid-template")}}
    • +
  • {{CSSxRef("grid-auto-columns")}}
    • +
  • {{CSSxRef("grid-auto-rows")}}
    • +
  • {{CSSxRef("grid-auto-flow")}}
    • +
  • {{CSSxRef("grid")}}
    • +
  • {{CSSxRef("grid-row-start")}}
    • +
  • {{CSSxRef("grid-column-start")}}
    • +
  • {{CSSxRef("grid-row-end")}}
    • +
  • {{CSSxRef("grid-column-end")}}
    • +
  • {{CSSxRef("grid-row")}}
    • +
  • {{CSSxRef("grid-column")}}
    • +
  • {{CSSxRef("grid-area")}}
    • +
  • {{CSSxRef("row-gap")}}
    • +
  • {{CSSxRef("column-gap")}}
    • +
  • {{CSSxRef("gap")}}
    • +
  • {{CSSxRef("masonry-auto-flow")}}
    • +
  • {{CSSxRef("align-tracks")}}
    • +
  • {{CSSxRef("justify-tracks")}}
    • +
+
+ +

CSS 関数

+ +
+
    +
  • {{CSSxRef("repeat", "repeat()")}}
    • +
  • {{CSSxRef("minmax", "minmax()")}}
    • +
  • {{CSSxRef("fit-content", "fit-content()")}}
    • +
+
+ +

CSS データ型

+ +
+
    +
  • {{CSSxRef("<flex>")}}
    • +
+
+ +

用語集

+ +
+ +
+ +

ガイド

+ +
+ +
+ +

外部リソース

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Grid 2")}}{{Spec2("CSS Grid 2")}}サブグリッドの追加
{{SpecName("CSS3 Grid")}}{{Spec2("CSS3 Grid")}}初回定義
+ + + + diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..6358de6b22 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,495 @@ +--- +title: 名前付きグリッド線を使用したレイアウト +slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +

前のガイドでは、グリッドトラックを定義することによって作られた線に沿ってアイテムを配置する様子と、名前の付いたテンプレート領域を使用してアイテムを配置する方法を見てきました。このガイドでは、名前付きの線を使用したときにこれら2つが共にどのように動作するかを見てみます。線に名前をつけるととても便利ですが、名前とトラックの寸法の組み合わせではもっと難解なグリッドの構文になります。いくつかの例を使ってみることで、動作がより明確かつ易しくなるでしょう。

+ +

グリッドを定義した場合の線の名前付け

+ +

You can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. To demonstrate I’ll use the simple layout created in the guide on line-based placement. This time I’ll create the grid using named lines.

+ +
+ + +

When defining the grid, I name my lines inside square brackets. Those names can be anything you like. I have defined a name for the start and end of the container, both for rows and columns. Then defined the centre block of the grid as content-start and content-end again, both for columns and rows although you do not need to name all of the lines on your grid. You might choose to name just some key lines for your layout.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+
+ +

Once the lines have names, we can use the name to place the item rather than the line number.

+ +
.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_named_lines', '500', '330') }}

+
+ +

Everything else about line-based placement still works in the same way and you can mix named lines and line numbers. Naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.

+ +

線に複数の名前を付ける

+ +

You may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. To do this add the names inside the square brackets with whitespace between them [sidebar-end main-start]. You can then refer to that line by either of the names.

+ +

名前付きの行の暗黙的なグリッド領域

+ +

When naming the lines, I mentioned that you can name these anything you like. The name is a custom ident, an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as span. Idents are not quoted.

+ +

While you can choose any name, if you append -start and -end to the lines around an area, as I have in the example above, grid will create you a named area of the main name used. Taking the above example, I have content-start and content-end both for rows and for columns. This means I get a grid area named content, and could place something in that area should I wish to.

+ +
+ + +

I’m using the same grid definitions as above, however this time I am going to place a single item into the named area content.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+
+ +
<div class="wrapper">
+  <div class="thing">I am placed in an area named content.</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}

+
+ +

We don’t need to define where our areas are with grid-template-areas as our named lines have created an area for us.

+ +

名前付き領域からの暗黙のグリッド線

+ +

We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to Grid Template Areas, we can use the lines created by our areas to see how this works.

+ +

In this example I have added an extra div with a class of overlay. We have named areas created using the grid-area property, then a layout created in grid-template-areas. The area names are:

+ +
    +
  • hd
    • +
  • ft
    • +
  • main
    • +
  • sd
    • +
+ +

This gives us column and row lines:

+ +
    +
  • hd-start
    • +
  • hd-end
    • +
  • sd-start
    • +
  • sd-end
    • +
  • main-start
    • +
  • main-end
    • +
  • ft-start
    • +
  • ft-end
    • +
+ +

You can see the named lines in the image, note that some lines have two names - for example sd-end and main-start refer to the same column line.

+ +

An image showing the implicit line names created by our grid areas.

+ +

To position overlay using these implicit named lines is the same as positioning an item using lines that we have named.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+.header {
+  grid-area: hd;
+}
+
+.footer {
+  grid-area: ft;
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper > div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+
+ +
<div class="wrapper">
+  <div class="header">Header</div>
+  <div class="sidebar">Sidebar</div>
+  <div class="content">Content</div>
+  <div class="footer">Footer</div>
+  <div class="overlay">Overlay</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}

+
+ +

Given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. By selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily.

+ +

repeat() による同じ名前を持つ複数の線

+ +

If you want to give all of the lines in your grid a unique name then you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. If you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too.

+ +

In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of [col-start]. This means that we will end up with a grid that has 12 column lines all named col-start before a 1fr width column.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+ +

Once you have created the grid you can place items onto it. As we have multiple lines named col-start if you place an item to start after line col-start grid uses the first line named col-start, in our case that will be the far left line. To address another line use the name, plus the number for that line. To place our item from the first line named col-start to the 5th, we can use:

+ +
.item1 {
+  grid-column: col-start / col-start 5
+}
+
+ +

You can also use the span keyword here. My next item will be placed from the 7th line named col-start and span 3 lines.

+ +
.item2 {
+  grid-column: col-start 7 / span 3;
+}
+
+ +

+ +
<div class="wrapper">
+  <div class="item1">I am placed from col-start line 1 to col-start 5</div>
+  <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
+</div>
+ +

{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}

+
+ +

If you take a look at this layout in the Firefox Grid Highlighter you can see how the column lines are shown, and how our items are placed against these lines.

+ +

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

+ +

The repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower 1fr width column named col1-start followed by a wider 3fr column named col2-start.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+
+ +

If your repeating syntax puts two lines next to each other then they will be merged, and create the same result as giving a line multiple names in a non-repeating track definition. The following definition, creates four 1fr tracks, which each have a start and end line.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+
+ +

If we write this definition out without using repeat notation it would look like this.

+ +
.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+
+ +

If you have used a track list then you can use the span keyword not just to span a number of lines but also to span a number of lines of a certain name.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div>
+  <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div>
+</div>
+
+ +

{{ EmbedLiveSample('span_line_number', '500', '330') }}

+
+ +

Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don’t need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.

+ +

If working with a strict multiple column layout for example the named lines demonstration in the last part of this guide works very well. If you consider grid systems such as those found in frameworks like Foundation or Bootstrap, these are based on a 12 column grid. The framework then imports the code to do all of the calculations to make sure that the columns add up to 100%. With grid layout the only code we need for our grid “framework” is:

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+
+ +

We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might have the following markup.

+ + + +
<div class="wrapper">
+  <header class="main-header">I am the header</header>
+  <aside class="side1">I am sidebar 1</aside>
+  <article class="content">I am the main article</article>
+  <aside class="side2">I am sidebar 2</aside>
+  <footer class="main-footer">I am the footer</footer>
+</div>
+
+ +

I could then place this on my grid layout framework like this.

+ +
.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+
+ +

{{ EmbedLiveSample('three_column', '500', '330') }}

+ +

Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.

+ +

The layout with the grid highlighted.

+
+ +

That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the 1fr column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!

+ + diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..2650339665 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,633 @@ +--- +title: グリッドレイアウトと他のレイアウト方法との関係 +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS グリッドレイアウトはレイアウトを行うための完全なシステムの一部として、 CSS の他の機能と一緒に動作するよう設計されました。このガイドでは、既に使われている他の技術と、どうのようにグリッドが適合するかを説明します。

+ +

グリッドとフレックスボックス

+ +

CSS グリッドレイアウトとCSS フレックスボックスレイアウトの基本的な違いは、フレックスボックスは一次元 - 一列又は一行 - のレイアウトのために設計されたという点です。グリッドは二次元 - 行と列が同時 - のレイアウトのために設計されました。しかし、２つの仕様書はいくつかの共通の機能を共有しており、すでにフレックスボックスの使い方を学んでいるのであれば、類似性がグリッドの手がかりを助けるでしょう。

+ +

一次元 vs. ニ次元レイアウト

+ +

一次元と二次元のレイアウトの違いを示すことができる単純な例です。

+ +

最初の例では、一連のボックスを配置するためにフレックスボックスを使用しています。コンテナーの中には五つの子項目があり、 flex プロパティ値を与えて150ピクセルの flex-basis から伸縮できるようにしています。

+ +

{{cssxref("flex-wrap")}} プロパティを wrap に設定して、コンテナーの大きさが細くなりすぎて flex basis を維持することができなくなったら、項目が次の行へ折り返されるようにしています。

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  width: 500px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 150px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

図では、2つの項目が新しい行へ折り返されているのがわかると思います。これらの項目は利用可能なスペースを共有していますが、上記の項目の下には整列してはいません。フレックスアイテムが折り返しをした時、新しい行（もしくは列として機能している時は列）のそれぞれがフレックスコンテナーになるからです。スペースの配分は行をまたがって起こります。

+ +

よくある質問はそれらのアイテムをどのようにして並べるかです。2次元レイアウトメソッドが必要な場所では、行またはカラムによるアラインメントのコントロールが必要で、グリッドが得意な場面です。

+ +

CSS グリッドによる同様のレイアウト

+ +

次の例では、グリッドを使って同様のレイアウトを構築します。今回は3つの 1fr 列トラックを持ちます。項目自体には何もセットする必要はりません。構築されたグリッドのセルそれぞれに項目を一つずつ配置していきます。厳格なグリッドに項目が配置されているため、行と列は整列しています。5つの項目があるので、二つ目の行にある終わりには隙間があります。

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

グリッドとフレックスボックスのどちらを使うかを決めるシンプルな質問です。

+ +
    +
  • 行又は列のみによってレイアウトを制御する必要がありますか。 – フレックスボックスを使いましょう
    • +
  • 行及び列によりレイアウトを制御する必要がありますか。 - グリッドを使いましょう
    • +
+ +

コンテンツ外かレイアウト内か？

+ +

1次元 vs 2次元の区別に加えて、レイアウトのためにフレックスボックス又はグリッドを使わなければならないかどうかを決める別の方法があります。フレックスボックスはコンテンツ外から機能します。フレックスボックスの理想的な使用例は、コンテナー内で項目に等しくスペースを設定したいような場合です。コンテンツのサイズはそれぞれの項目がどのくらい個々のスペースを占めるかにより決定されます。もし項目が新しい行へ折り返されたら、行のサイズと利用可能なスペースをもとに項目の間隔が算出されます。

+ +

グリッドはレイアウトの外から機能します。 CSS グリッドレイアウトを使ってレイアウトを作った際、自動配置ルールでアイテムを厳格なグリッドによるセルへ配置させることができます。それらはコンテンツのサイズに応じたトラックを作ることができます。しかしながら、全体のトラックも変わるでしょう。

+ +

もしフレックスボックスを使っていていくつかの柔軟性が欠けていたら、おそらく CSS グリッドレイアウトを使う必要性を感じるでしょう。例えばフレックスアイテムの幅をパーセンテージで設定し、ある行へその他の項目とともに整列させていたら、その場合にはグリッドはより良い選択肢になるでしょう。

+ +

ボックス配置

+ +

フレックスボックスの最も素晴らしい特徴は、我々に適切な配置制御を与えてくれる最初のものということでした。これによりページの真ん中にボックスを置くことが簡単になりました。フレックス要素はフレックスコンテナーの高さに引き伸ばすことができ、これはつまり、同じ高さの列が可能ということです。これらは私たちが長い間求めてきたもので、少なくとも視覚効果を実現するためのさまざまな種類のハックが考え出されてきました。

+ +

フレックスボックスの仕様による配置プロパティは Box Alignment Level 3 と呼ばれる新しい仕様に追加されました。これはつまり、グリッドレイアウトを含む他の仕様でも使用できるということです。将来的には、他のレイアウト手法にも適用できるようになるでしょう。

+ +

この一連のガイドの後、ボックス配置と、それがグリッドレイアウトの中でどのように動作するのかを見ていきます。今回の場合、フレックスボックスと grid の簡単な比較例を挙げます。

+ +

一つ目のフレックスボックスを利用する例では、３つの要素を持つコンテナがあります。コンテナであるwrapperには{{cssxref("min-height")}}が設定され、これはフレックスコンテナーの高さを決めています。コンテナには {{cssxref("align-items")}} を flex-end に設定してコンテナの終端に要素が並ぶようにしました。また、box1の{{cssxref("align-self")}}プロパティをcontainerの高さに合わせるようstreachへ上書きし、box2もコンテナの始まりから整列するにように上書きしています。

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

+ +

CSSグリッド上でのアラインメント

+ +

二つ目の例ではグリッドを使って同じレイアウトを作りましょう。今回はグリッドレイアウトを使うため、ボックスアラインメントプロパティを使います。従って、flex-startとflex-endではなくstartとendを使ってアラインメントします。グリッドレイアウトのケースでは、グリッド領域の中にアイテムをアラインメントしていきます。今回のケースでは単一のグリッドセルを作成していますが、これは複数のグリッドセルで構成された領域にもなることが可能です。

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

+ +

fr 単位と flex-basis

+ +

We have already seen how the fr unit works to assign a proportion of available space in the grid container to our grid tracks. The fr unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the flex properties in flexbox while still enabling the creation of a layout in two dimensions.

+ +

If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.

+ +

In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.

+ +

Auto-filling grid tracks

+ +

We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties.

+ +

In this next example, I have used the auto-fill keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

柔軟なトラック数

+ +

This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining auto-fit and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with minmax. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be 1fr. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the 1fr maximum as an instruction to share out the remaining space between the items.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

+ +

We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.

+ +

グリッドと絶対位置指定された要素

+ +

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

+ +

含有ブロックとしてのグリッドコンテナ

+ +

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

+ +

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+ +

{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}

+ +

You can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usual for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.

+ +

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

+ +

親としてのグリッドコンテナ

+ +

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

+ +

Image of grid container as parent

+ +

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

+ +

With a grid area as the parent

+ +

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

+ +

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}

+ +

グリッドと display: contents

+ +

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and display: contents. The contents value of the display property is a new value that is described in the Display specification as follows:

+ +
+

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

+
+ +

If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.

+ +

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.

+ +

See Also

+ + + + diff --git a/files/ja/web/css/css_grid_layout/subgrid/index.html b/files/ja/web/css/css_grid_layout/subgrid/index.html new file mode 100644 index 0000000000..386ce3ca83 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/subgrid/index.html @@ -0,0 +1,120 @@ +--- +title: Subgrid +slug: Web/CSS/CSS_Grid_Layout/Subgrid +tags: + - CSS + - CSS Display + - CSS Grid + - Guide + - subgrid +translation_of: Web/CSS/CSS_Grid_Layout/Subgrid +--- +

{{CSSRef}}

+ +

CSS Grid Layout の Level 2 は、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} に subgrid 値を含みます。このガイドでは、サブグリッドでできること、いくつかの使用例、この機能で解決されるデザインパターンを詳述します。

+ +
+

重要: この機能は Firefox 71 で使用可能になりますが、今のところ、これがサブグリッドを実装する唯一のブラウザーです。

+
+ +

サブグリッドの導入

+ +

グリッドコンテナーに display: grid を追加する場合、その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。これらグリッドアイテムの子要素は通常フローで表示されます。

+ +

グリッドアイテムをグリッドコンテナーにすることにより、グリッドを「入れ子」にできます。しかし、これらのグリッドは互いの親グリッドに依存し、親グリッドのサイズ変更に追従しません。これでは、入れ子のグリッドアイテムをメイングリッドで整列させることが難しくなります。

+ +

grid-template-columns および grid-template-rows の両方またはどちらかに subgrid 値を設定すると、新しいトラックリストを作成するのではなく、入れ子のグリッドが親要素上で定義されたトラックを利用します。

+ +

例えば、grid-template-columns: subgrid を使用し、入れ子のグリッドが親のトラック 3 列にまたがる場合、入れ子のグリッドは、親グリッドのサイズと同じトラック 3 列分になります。その列の間隔は継承されますが、異なる {{cssxref("gap")}} 値で上書きすることもできます。ライン名は親からサブグリッドへ渡されますが、サブグリッドが独自のライン名を定義することもできます。

+ +

列のサブグリッド

+ +

以下の例では、幅 1fr の 9 列のトラックで高さが最低 100px の 4 行のグリッドレイアウトを定義しています。

+ +

このグリッドの 2 から 7 番の列ライン、2 から 4 番の行ラインに .item を置き、これをグリッドアイテムからグリッドコンテナーにします。これをサブグリッドである列トラックに与え、通常の行を定義します。アイテムの幅が 5 列のトラックにまたがるので、サブグリッドも 5 列のトラックを持ちます。次に、このグリッド上に .subitem を置きます。

+ +

この例の行はサブグリッドではないため、通常の入れ子のグリッドとして振る舞います。親グリッド領域は、この入れ子のグリッドが十分入る大きさに拡張されます。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}

+ +

サブグリッド内のライン番号は再び 1 番から始まるので注意してください。サブグリッド内の列ライン 1 番は、サブグリッドの最初のラインです。サブグリッド化された要素は親グリッドのライン番号を継承しません。これは、メイングリッド上の異なる位置に置かれるコンポーネントを安全に配置できることを意味し、このコンポーネント上のライン番号が常に同じであることが分かります。

+ +

行のサブグリッド

+ +

次の例は、上記と同じ設定で、grid-template-rows の値に subgrid を使用し、明示的に列トラックを定義しています。このため、列トラックが通常の入れ子のグリッドとして振る舞い、行が子スパンの 2 トラックに紐づけられます。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}

+ +

列と行のサブグリッド

+ +

もちろん、以下の例のように、行と列の両方をサブグリッドとして定義できます。これは、サブグリッドが親グリッドの行と列両方のトラックの数に紐づけられることを意味します。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}

+ +

サブグリッド化された範囲に暗黙のグリッドはありません

+ +

アイテムを自動配置する必要があり、そのアイテムが何個になるか分からないときは、サブグリッドの作成時に、それらのアイテムを保持する追加の行が作成されないように注意してください。

+ +

次の例を見てください。これは上記の例と同様に、同じ親グリッドと子グリッドを使用していますが、サブグリッド内の 10 個のグリッドセルに 12 個のアイテムを自動配置しようとしています。このサブグリッドには行と列どちらにも追加の 2 個のアイテムを置く場所がないため、仕様で定義されている通りに、これらはグリッドの最後のトラック内に置かれることになります。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}

+ +

grid-template-rows の値を削除すると、通常の明示的なトラックが作成できるようになります。とはいえ、これらは親のトラックに沿って並ばないため、その数に応じて作成する必要があります。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}

+ +

gap プロパティとサブグリッド

+ +

親グリッドに {{cssxref("gap")}} または {{cssxref("column-gap")}}, {{cssxref("row-gap")}} が指定されている場合、これらはサブグリッドにも渡され、トラックの間隔が親と同じになります。状況によっては、サブグリッドのトラックの間隔を親と異なるものに設定したい場合があるでしょう。これは、サブグリッドのグリッドコンテナーに gap-* プロパティを使用することにより達成できます。

+ +

これは以下の例で確認できます。親グリッドは 20px の行間隔と列間隔を持ち、サブグリッドは row-gap の値に 0 を設定しています。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}

+ +

これを Firefox のグリッドインスペクターで調査すると、グリッドのラインが gap の中央に正しく描かれていることが分るでしょう。gap の値を 0 に設定した場合、同様の動作で要素に負のマージンが適用され、gap からアイテムまでのスペースが与えられます。

+ +

The smaller item displays in the gap as row-gap is set to 0 on the subgrid.

+ +

名付けられたグリッドライン

+ +

CSS のグリッドを利用する時、そのグリッドのラインに名前を付けて、ライン番号ではなく、これらの名前でアイテムを配置できます。親グリッドのライン名がサブグリッドに渡されるので、それらを使用してアイテムを配置できます。以下の例では、親のラインに col-start および col-end という名前を付けました。これらはサブアイテムの配置に使用されます。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}

+ +

また、サブグリッドにもライン名を指定できます。subgrid キーワードの後のラインのリストに、角括弧で囲まれたライン名を追加します。サブグリッドに 4 本のラインがある場合、次の構文ですべてのラインに名前を付けられます: grid-template-columns: subgrid [line1] [line2] [line3] [line4]

+ +

サブグリッドに指定されたラインは親で指定された任意のラインに追加されるため、そのライン名を親とサブグリッドのどちらでも利用できます。デモンストレーションするため、以下の例で、アイテムの一つは親ラインを利用して配置し、もう一つはサブグリッドのラインを利用しています。

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}

+ +

サブグリッドの利用

+ +

サブグリッド内にうまく収まらないアイテムを心配する必要なく、サブグリッドは入れ子のグリッドにとてもよく似た動作をします。ただ一つ違うところは、サブグリッドのトラックのサイズ変更が親グリッドで設定されることです。どの入れ子のグリッドでもそうであったように、サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。

+ +

subgrid 値は、通常の入れ子のグリッドとほとんど同じ方法で動作するため、これらを切り替えるのは簡単です。例えば、暗黙的な行のグリッドが必要になったときにすべきことは、grid-template-rows の subgrid 値を削除し、あるいは暗黙的なトラックのサイズ変更を制御するために grid-auto-rows に値を与えることだけです。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Grid 2")}}{{Spec2("CSS Grid 2")}}サブグリッドの初回定義。
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..acef249aad --- /dev/null +++ b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,56 @@ +--- +title: CSS での画像スプライトの実装 +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +tags: + - Advanced + - CSS + - CSS Images + - Graphics + - Guide + - NeedsContent + - Sprites + - Web +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +

{{cssRef}}

+ +

画像スプライトは、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1枚の画像として送信した方が、メモリや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。

+ +
+

注: HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。

+
+ +

実装

+ +

例えば、 toolbtn クラスを持つすべてのアイテムに画像が与えられるとします。

+ +
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の2つの値として、または {{cssxref("background-position")}} として追加できます。

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には toolbtn クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。

+ +

同様に、ホバー状態にすることもできます。

+ +
#btn:hover {
+  background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px;
+}
+ +

関連記事

+ + diff --git a/files/ja/web/css/css_images/index.html b/files/ja/web/css/css_images/index.html new file mode 100644 index 0000000000..a55ff99d7d --- /dev/null +++ b/files/ja/web/css/css_images/index.html @@ -0,0 +1,106 @@ +--- +title: CSS 画像 +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS 画像 + - Reference + - 概要 +translation_of: Web/CSS/CSS_Images +--- +
{{CSSRef}}
+ +

CSS 画像 (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("<image>")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{CSSxRef("image-orientation")}}
    • +
  • {{CSSxRef("image-rendering")}}
    • +
  • {{CSSxRef("image-resolution")}}
    • +
  • {{CSSxRef("object-fit")}}
    • +
  • {{CSSxRef("object-position")}}
    • +
+
+ +

関数

+ +
+
    +
  • {{CSSxRef("linear-gradient", "linear-gradient()")}}
    • +
  • {{CSSxRef("radial-gradient", "radial-gradient()")}}
    • +
  • {{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}
    • +
  • {{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • +
  • {{CSSxRef("conic-gradient")}}
    • +
  • {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}
    • +
  • {{CSSxRef("url", "url()")}}
    • +
  • {{CSSxRef("element", "element()")}}
    • +
  • {{CSSxRef("_image", "image()")}}
    • +
  • {{CSSxRef("cross-fade", "cross-fade()")}}
    • +
+
+ +

データ型

+ +
+
    +
  • {{CSSxRef("<gradient>")}}
    • +
  • {{CSSxRef("<image>")}}
    • +
+
+ +

ガイド

+ +
+
CSS グラデーションの使用
+
特殊な CSS 画像型であるグラデーションと、その作り方や使い方を紹介します。
+
CSS での画像スプライトの実装
+
単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}{{CSSxRef("image-resolution")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("_image", "image()")}} を追加
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}{{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加
{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}{{Spec2("Compat")}}-webkit の接頭辞が付いたグラデーション値の関数を標準化
{{SpecName("CSS3 Values", "#urls", "<url>")}}{{Spec2("CSS3 Values")}} 
{{Specname("CSS2.1", "syndata.html#uri", "<uri>")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#url", "<url>")}}{{Spec2("CSS1")}}初回定義
diff --git a/files/ja/web/css/css_images/using_css_gradients/index.html b/files/ja/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..1136b5077b --- /dev/null +++ b/files/ja/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,750 @@ +--- +title: CSS グラデーションの使用 +slug: Web/CSS/CSS_Images/Using_CSS_gradients +tags: + - Advanced + - CSS + - CSS Images + - Example + - Gradients + - Guide + - Web +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +
{{CSSRef}}
+ +

CSS グラデーションは {{cssxref("<gradient>")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("<image>")}} の特殊型です。グラデーションは3種類から選択することができます。線形 (linear) ({{cssxref("linear-gradient")}} 関数によって生成)、放射 (radial) ({{cssxref("radial-gradient")}} 関数によって生成)、扇形 (conic) ({{cssxref("conic-gradient")}} 関数によって生成) の3種類です。 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} の各関数によって、反復グラデーションを生成することもできます。

+ +

グラデーションは、例えば背景など、 <image> が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。

+ +

最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。

+ +

線形グラデーションの使用

+ +

線形グラデーションは、直線に沿った色の帯の変化を生成します。

+ +
+

基本的な線形グラデーション

+ +

グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは色経由点 (color stops) と呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。

+ + + +
.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}

+
+ +
+

方向の変更

+ +

既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。

+ + + +
.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}

+
+ +
+

対角グラデーション

+ +

グラデーションを角から角へ、対角に作成することもできます。

+ + + +
.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}

+
+ +
+

角度の指定

+ +

方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。

+ + + +
.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Using_angles', 120, 120) }}

+ +

角度を指定した場合、 0deg は下から上への垂直グラデーションを生成し、 90deg は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。

+ +

linear_redangles.png

+
+ +

色の宣言と効果の生成

+ +

すべてのCSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、二つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。

+ +
+

3つ以上の色の使用

+ +

2つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。

+ + + +
.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+ +

{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}

+
+ +
+

色経由点の配置

+ +

色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 0% が開始点を示し、 100% が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は 0% に、最後の色経由点は 100% になり、他の色経由点は隣の色経由点の間の中間点になります。

+ + + +
.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+
+ +

{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}

+
+ +
+

不連続線の生成

+ +

2つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、二つの色がグラデーションの中央である 50% の色経由点を共有しています。

+ + + +
.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}
+ +

{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}

+
+ +
+

グラデーションのヒント

+ +

既定では、グラデーションは1つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中央点をグラデーションの特定の位置に移動することができます。この例では、変化の中央点を 50% の位置から 10% の位置へ移動します。

+ + + +
.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('Gradient_hints', 120, 120) }}

+
+ +
+

色の帯と縞の生成

+ +

グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に2つの位置を含めます。色経由点には2つの位置を設定することができ、これは、異なる位置に同じ色を持つ2つの連続した色経由点に相当します。色は、第1の色経由点で完全な彩度に達し、第2の色経由点までその彩度を維持し、隣接する色経由点の第1の位置を介して隣接する色経由点の色に遷移します。

+ + + +
.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+
+ +

{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}

+ +

上記の第1の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。

+ +

第2の例では、各色の2番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。

+ +

いずれの例でも、グラデーションは2回書かれます。第1の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第2の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが2つずつ含まれています。

+
+ +
+

グラデーションの進行の制御

+ +

既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、 50% の割合ではなく、 20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。

+ + + +
.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+
+ +

{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}

+
+ +

グラデーションの重ね合わせ

+ +

グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。

+ + + +
.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+ +

{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}

+ +

グラデーションの積み重ね

+ +

グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。

+ + + +
.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+ +

{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}

+ +

放射グラデーションの使用

+ +

放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。

+ +

基本的な放射グラデーション

+ +

線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。

+ + + +
.simple-radial {
+  background: radial-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}

+ +

放射色経由点の配置

+ +

ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。

+ + + +
.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}

+ +

グラデーションの中心の配置

+ +

グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が1つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。

+ + + +
.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}

+ +

放射グラデーションの大きさの変更

+ +

線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、 closest-corner, closest-side, farthest-corner, farthest-side があり、 farthest-corner が既定値です。

+ +

例: 楕円の closest-side

+ +

This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

+ + + +
.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}

+ +

例: 楕円の farthest-corner

+ +

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

+ + + +
.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}

+ +

例: 縁の closest-side

+ +

This example uses closest-side, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.

+ + + +
.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}

+ +

放射グラデーションの積み重ね

+ +

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

+ + + +
.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+
+ +

{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}

+ +

扇形グラデーションの使用

+ +

conic-gradient() は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。

+ +

扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。

+ +

In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.

+ +
+

基本的な扇形グラデーション

+ +

As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:

+ + + +
.simple-conic {
+  background: conic-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}

+
+ +
+

扇形の中央の配置

+ +

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

+ + + +
.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}

+
+ +
+

角度の変更

+ +

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

+ + + +
.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+
+ +

{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}

+
+ +

反復グラデーションの使用

+ +

The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.

+ +

The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.

+ +
+

反復線形グラデーション

+ +

This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.

+ + + +
.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+
+ +

{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}

+
+ +
+

複数の反復線形グラデーション

+ +

Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image. We are using transparency.

+ +

In this case the gradient lines are 300px, 230px, and 300px long.

+ + + +
.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+
+ +

{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}

+
+ +

格子縞のグラデーション

+ +

To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:

+ + + +
.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+
+ +

{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}

+ +

反復放射グラデーション

+ +

この例は {{cssxref("repeating-radial-gradient")}} を使用して、中央店から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。

+ + + +
.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}

+ +

複数の反復放射グラデーション

+ + + +
.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+
+ +

{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}

+ +

関連記事

+ +
    +
  • グラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
    • +
  • グラデーション関連の CSS データ型: {{cssxref("<gradient>")}}, {{cssxref("<image>")}}
    • +
  • グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}}
    • +
  • CSS Gradients Patterns Gallery, by Lea Verou
    • +
  • CSS3 Gradients Library, by Estelle Weyl
    • +
  • Gradient CSS Generator
    • +
diff --git a/files/ja/web/css/css_lists_and_counters/index.html b/files/ja/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..465a46e0a0 --- /dev/null +++ b/files/ja/web/css/css_lists_and_counters/index.html @@ -0,0 +1,59 @@ +--- +title: CSS リスト +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS リスト + - Reference + - 概要 +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS リスト (CSS List) は CSS モジュールの一つで、リストのレイアウトとスタイル付け方法を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
  • {{cssxref("list-style")}}
    • +
+
+ +

ガイド

+ +
+
一貫したリストのインデント
+
異なるブラウザー同士でも一貫したリストのインデントを実現する方法を説明します。
+
CSS カウンターの使用
+
リストのカウンターを制御するために CSS カウンタープロパティを使用する方法を説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}}
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}初回定義
diff --git a/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..aae2a7cc94 --- /dev/null +++ b/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,147 @@ +--- +title: CSS カウンターの使用 +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +tags: + - Advanced + - CSS + - CSS Counter Styles + - Guide + - Layout + - Reference + - Web +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。

+ +

カウンターの使用

+ +

カウンターの値の操作

+ +

カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は 0)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。

+ +

カウンターの表示

+ +

カウンターの値は、 {{cssxref("content")}} の中で {{cssxref("counter", "counter()")}} または {{cssxref("counters", "counters()")}} 関数を使用して表示することができます。

+ +

counter() には 'counter(name)' または 'counter(name, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は decimal です)。

+ +

counters() 関数にも、 'counters(name, string)' または 'counters(name, string, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は decimal です)。

+ +

基本的な例

+ +

この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。

+ +

CSS

+ +
body {
+  counter-reset: section;                     /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
+}
+
+h3::before {
+  counter-increment: section;                 /* section カウンターの値に1を加算 */
+  content: counter(section);                  /* section カウンターの値を表示 */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+<h3>Body</h3>
+<h3>Conclusion</h3>
+ +

結果

+ +

{{EmbedLiveSample("Basic_example", "100%", 150)}}

+ +

カウンターの入れ子

+ +

CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。

+ +

入れ子になったカウンターの例

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* それぞれの ol 要素に、 section
+                                            カウンターの新しいインスタンスを
+                                            生成 */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* section カウンターのこのインスタンス
+                                            のみを加算 */
+  content: counters(section, ".") " ";   /* section カウンターのすべての
+                                            インスタンスの値を、ピリオドで区切って
+                                            結合 */
+}
+
+ +

HTML

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+ +

結果

+ +

{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/index.html b/files/ja/web/css/css_logical_properties/basic_concepts/index.html new file mode 100644 index 0000000000..e190281ba3 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/basic_concepts/index.html @@ -0,0 +1,77 @@ +--- +title: 論理的プロパティと値の基本概念 +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - 書字方向 + - 概念 +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +
{{CSSRef}}
+ +

「論理的プロパティと値」仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。

+ +

なぜ論理的プロパティが必要なのか

+ +

CSS は従来、画面の物理的な方向に沿って寸法を取っていました。従って、ボックスを {{CSSxRef("width")}} および {{CSSxRef("height")}} を用いて記述したり、アイテムを top および left で配置したり、 left で浮動させたり、境界、マージン、パディングを top, right, bottom, left で割り当てたりします。論理的プロパティと値仕様書はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。 — 例えば start と end は left と right/top と bottom に対応します。

+ +

なぜこれらの対応付けが必要なのかは以下の通りです。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために {{CSSxRef("align-self")}} および {{CSSxRef("justify-self")}} を使用していたとします。これらのプロパティはフローに相対的です。 — justify-self: start はインライン方向の始点にアイテムを配置し、 align-self: start はブロック方向の始点にアイテムを配置します。

+ +

横書きモードでのグリッド

+ +

このコンポーネントの書字方向を、 vertical-rl を {{CSSxRef("writing-mode")}} プロパティに設定することで変更すると、配置は同様の方向で動作し続けます。インライン方向は垂直になり、ブロック方向は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。

+ +

縦書きモードでのグリッド

+ +

width プロパティの代わりに論理的プロパティである {{CSSxRef("inline-size")}} を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。

+ +

縦書きモードでのグリッドレイアウト

+ +

以下のライブデモを試してみることができます。 .box の writing-mode を vertical-rl から horizontal-tb へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

+ +

When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.

+ +

ブロック方向とインライン方向

+ +

A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of block and inline rather than right and left/top and bottom when aligning items.

+ +

The inline dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is horizontal. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now vertical, as lines in that writing mode run vertically.

+ +

The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.

+ +

The below diagram shows the inline and block directions in a horizontal writing mode:

+ +

diagram showing the inline axis running horizontally, block axis vertically.

+ +

This diagram shows block and inline in a vertical writing mode:

+ +

Diagram showing the block axis running horizontally the inline axis vertically.

+ +

ブラウザーの互換性

+ +

Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example {{CSSxRef("inline-size")}} for {{CSSxRef("width")}} or {{CSSxRef("margin-inline-start")}} rather than {{CSSxRef("margin-left")}}. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the reference here on MDN you will see that Edge is the only modern browser currently missing these.

+ +

There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be {{CSSxRef("margin-block")}}, which is a shorthand setting for {{CSSxRef("margin-block-start")}} and {{CSSxRef("margin-block-end")}}. These currently have no browser support.

+ +
+

Note: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the {{CSSxRef("margin")}} property. We would need some kind of modifier if we were to reuse margin for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is #1282.

+
+ +

ブラウザーの互換性のテスト

+ +

You can test for support of logical properties and values using feature queries. For example you could set a {{CSSxRef("width")}}, test for {{CSSxRef("inline-size")}} and, if it is supported, set the width to auto and the inline-size to the original width value.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html new file mode 100644 index 0000000000..c245570080 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html @@ -0,0 +1,139 @@ +--- +title: 浮動と位置指定の論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - ガイド + - 位置指定 + - 浮動 +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +
{{CSSRef}}
+ +

論理的プロパティと値仕様書 (Logical Properties and Values specification) には、 {{cssxref("float")}} および {{cssxref("clear")}} の物理的な値の論理的な対応付けと、位置指定レイアウトで使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。

+ +

マッピングされるプロパティと値

+ +

以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の {{cssxref("writing-mode")}} は、左書きを想定しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
論理的プロパティまたは値物理的プロパティまたは値
{{cssxref("float")}}: inline-start{{cssxref("float")}}: left
{{cssxref("float")}}: inline-end{{cssxref("float")}}: right
{{cssxref("clear")}}: inline-start{{cssxref("clear")}}: left
{{cssxref("clear")}}: inline-end{{cssxref("clear")}}: right
{{cssxref("inset-inline-start")}}{{cssxref("left")}}
{{cssxref("inset-inline-end")}}{{cssxref("right")}}
{{cssxref("inset-block-start")}}{{cssxref("top")}}
{{cssxref("inset-block-end")}}{{cssxref("bottom")}}
{{cssxref("text-align")}}: start{{cssxref("text-align")}}: left
{{cssxref("text-align")}}: end{{cssxref("text-align")}}: right
+ +

これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは {{cssxref("inset")}} プロパティを除いて物理的なプロパティに対応付けられていません。

+ + + + + + + + + + + + + + + + + + + + + + +
論理的プロパティ目的
{{cssxref("inset-inline")}}上記のインライン方向における両方の inset 値を同時に設定します。
{{cssxref("inset-block")}}上記のブロック方向における両方の inset 値を同時に設定します。
{{cssxref("inset")}}4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。
+ +

浮動と解除の例

+ +

{{cssxref("float")}} および {{cssxref("clear")}} プロパティで用いられる物理的な値 left, right, both です。論理的プロパティの仕様書は、 inline-start および inline-end の値を left および right に対応付けて定義しています。

+ +

下記の例では、二つのボックスがあります。 — 一つ目は float: left で、二つ目は float: inline-start で浮動させています。 writing-mode を vertical-rl に変更したり、 direction を rtl に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 inline-start で浮動させたアイテムは direction や writing-mode に従います。

+ +

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

+ +

例: 位置指定レイアウトにおける inset プロパティ

+ +

一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} の物理的なプロパティを使用してきました。

+ +

これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面寸法に関連します。

+ +

論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} になります。

+ +

以下の例では、 inset-block-start と inset-inline-end プロパティを使用して、青枠を灰色の点線で囲まれた領域 (position: relative) の内側に絶対位置を使用して配置しています 。 writing-mode プロパティを vertical-rl に変更するか、 direction: rtl を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。

+ +

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

+ +

新しい2または4値の一括指定

+ +

仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。

+ +
    +
  • {{cssxref("inset")}} — 物理的な対応付けを使用して四辺をすべて設定します。
    • +
  • {{cssxref("inset-inline")}} — 論理的なインライン方向の内側の距離を両方設定します。
    • +
  • {{cssxref("inset-block")}} — 論理的なブロック方向の内側の距離を両方設定します。
    • +
+ +
+

注: 論理的プロパティ仕様書をを実装しているブラウザーは、これまでのところ直接マッピングを実装しており、新しい一括指定は実装していません。詳細については、各プロパティページのリファレンスにあるブラウザーの互換性データの節を参照してください。

+
+ +

例: text-align の論理値

+ +

{{cssxref("text-align")}} プロパティは、テキストの方向に関連する論理値を持っています。 left と right に代わり、 start と end を使用することができます。以下の例では、最初のブロックで text-align: right、2番目のブロックで text-align: end を設定しています。

+ +

direction の値を rtl に変更すると、最初のブロックでは配置が右に留まりますが、2番目のブロックでは論理的な末尾が左になることがわかります。

+ +

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

+ +

これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。

diff --git a/files/ja/web/css/css_logical_properties/index.html b/files/ja/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..71c78974aa --- /dev/null +++ b/files/ja/web/css/css_logical_properties/index.html @@ -0,0 +1,178 @@ +--- +title: CSS 論理的プロパティと値 +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - CSS Logical Properties + - CSS 論理的プロパティ + - Landing + - Reference + - 概要 +translation_of: Web/CSS/CSS_Logical_Properties +--- +

{{CSSRef}}

+ +

CSS 論理的プロパティと値 (CSS Logical Properties and Values) は CSS のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。

+ +

このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。

+ +

ブロックとインライン

+ +

論理プロパティと値は、ブロックとインラインという抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、書字方向に依存します。

+ +
+
ブロック方向
+
行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。
+
インライン方向
+
行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。
+
+ +

リファレンス

+ +

寸法のプロパティ

+ +
+
    +
  • {{CSSxRef("block-size")}}
    • +
  • {{CSSxRef("inline-size")}}
    • +
  • {{CSSxRef("max-block-size")}}
    • +
  • {{CSSxRef("max-inline-size")}}
    • +
  • {{CSSxRef("min-block-size")}}
    • +
  • {{CSSxRef("min-inline-size")}}
    • +
+
+ +

マージン、境界、パディングのプロパティ

+ +
+
    +
  • {{CSSxRef("border-block")}}
    • +
  • {{CSSxRef("border-block-color")}}
    • +
  • {{CSSxRef("border-block-end")}}
    • +
  • {{CSSxRef("border-block-end-color")}}
    • +
  • {{CSSxRef("border-block-end-style")}}
    • +
  • {{CSSxRef("border-block-end-width")}}
    • +
  • {{CSSxRef("border-block-start")}}
    • +
  • {{CSSxRef("border-block-start-color")}}
    • +
  • {{CSSxRef("border-block-start-style")}}
    • +
  • {{CSSxRef("border-block-start-width")}}
    • +
  • {{CSSxRef("border-block-style")}}
    • +
  • {{CSSxRef("border-block-width")}}
    • +
  • {{CSSxRef("border-color")}} (logical {{Experimental_Inline}} キーワード)
    • +
  • {{CSSxRef("border-inline")}}
    • +
  • {{CSSxRef("border-inline-color")}}
    • +
  • {{CSSxRef("border-inline-end")}}
    • +
  • {{CSSxRef("border-inline-end-color")}}
    • +
  • {{CSSxRef("border-inline-end-style")}}
    • +
  • {{CSSxRef("border-inline-end-width")}}
    • +
  • {{CSSxRef("border-inline-start")}}
    • +
  • {{CSSxRef("border-inline-start-color")}}
    • +
  • {{CSSxRef("border-inline-start-style")}}
    • +
  • {{CSSxRef("border-inline-start-width")}}
    • +
  • {{CSSxRef("border-inline-style")}}
    • +
  • {{CSSxRef("border-inline-width")}}
    • +
  • {{CSSxRef("border-start-start-radius")}}
    • +
  • {{CSSxRef("border-start-end-radius")}}
    • +
  • {{CSSxRef("border-end-start-radius")}}
    • +
  • {{CSSxRef("border-end-end-radius")}}
    • +
  • {{CSSxRef("border-style")}} (logical {{Experimental_Inline}} キーワード)
    • +
  • {{CSSxRef("border-width")}} (logical {{Experimental_Inline}} キーワード)
    • +
  • {{CSSxRef("margin")}} (logical {{Experimental_Inline}} キーワード)
    • +
  • {{CSSxRef("margin-block")}}
    • +
  • {{CSSxRef("margin-block-end")}}
    • +
  • {{CSSxRef("margin-block-start")}}
    • +
  • {{CSSxRef("margin-inline")}}
    • +
  • {{CSSxRef("margin-inline-end")}}
    • +
  • {{CSSxRef("margin-inline-start")}}
    • +
  • {{CSSxRef("padding")}} (logical {{Experimental_Inline}} キーワード)
    • +
  • {{CSSxRef("padding-block")}}
    • +
  • {{CSSxRef("padding-block-end")}}
    • +
  • {{CSSxRef("padding-block-start")}}
    • +
  • {{CSSxRef("padding-inline")}}
    • +
  • {{CSSxRef("padding-inline-end")}}
    • +
  • {{CSSxRef("padding-inline-start")}}
    • +
+
+ +

浮動と位置指定のプロパティ

+ +
+
    +
  • {{CSSxRef("clear")}} (inline-end および inline-start キーワード)
    • +
  • {{CSSxRef("float")}} (inline-end および inline-start キーワード)
    • +
  • {{CSSxRef("inset")}}
    • +
  • {{CSSxRef("inset-block")}}
    • +
  • {{CSSxRef("inset-block-end")}}
    • +
  • {{CSSxRef("inset-block-start")}}
    • +
  • {{CSSxRef("inset-inline")}}
    • +
  • {{CSSxRef("inset-inline-end")}}
    • +
  • {{CSSxRef("inset-inline-start")}}
    • +
+
+ +

その他のプロパティ

+ +
+
    +
  • {{CSSxRef("caption-side")}} (inline-end および inline-start キーワード)
    • +
  • {{CSSxRef("overflow-block")}}
    • +
  • {{CSSxRef("overflow-inline")}}
    • +
  • {{CSSxRef("overscroll-behavior-block")}}
    • +
  • {{CSSxRef("overscroll-behavior-inline")}}
    • +
  • {{CSSxRef("resize")}} (block and inline keywords)
    • +
  • {{CSSxRef("text-align")}} (end および start キーワード)
    • +
+
+ +

非推奨になったプロパティ

+ +
+
    +
  • {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-block-end")}} {{Experimental_Inline}} に置き換え)
    • +
  • {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-block-start")}} {{Experimental_Inline}} に置き換え)
    • +
  • {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-inline-end")}} {{Experimental_Inline}} に置き換え)
    • +
  • {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} ({{CSSxRef("inset-inline-start")}} {{Experimental_Inline}} に置き換え)
    • +
+
+ +

ガイド

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ +

全般的な対応:

+ +
    +
  • Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。
    • +
  • Chrome はバージョン69から、プロパティの対応付けに対応しました。
    • +
  • Edge はバージョン79から Chrome と同様に対応しています。
    • +
  • Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。
    • +
  • Internet Explorer は対応していません。
    • +
+ +

互換性情報全体は、それぞれのプロパティページを参照してください。

diff --git a/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html new file mode 100644 index 0000000000..cf4cf1ac51 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html @@ -0,0 +1,298 @@ +--- +title: マージン、境界、パディングの論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +tags: + - CSS + - CSS 論理的プロパティ + - ガイド + - 書字方向 + - 概念 +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +

{{CSSRef}}

+ +

論理的プロパティと値仕様書 (Logical Properties and Values specification) では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。

+ +

CSS 論理的プロパティと値のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺についての4つの個別指定値と、すべてを一括指定するものであるためです。

+ +

マージン、境界、パティングの対応付け

+ +

The specification details mappings for each logical value to a physical counterpart. In the table below I have given these mapped values assuming that the {{cssxref("writing-mode")}} in use is horizontal-tb — with a left to right direction. The inline direction therefore runs horizontally — left to right — and {{cssxref("margin-inline-start")}} would be equivalent to {{cssxref("margin-left")}}.

+ +

If you were using a horizontal-tb writing mode with a right-to-left text direction then {{cssxref("margin-inline-start")}} would be the same as {{cssxref("margin-right")}}, and in a vertical writing mode it would be the same as using {{cssxref("margin-top")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
論理的プロパティ物理的プロパティ
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
+ +

There are also some additional shorthands, made possible because we have the ability to target both block or both inline edges of the box simultaneously. These shorthands have no physical equivalent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ目的
{{cssxref("border-block")}}Sets {{cssxref("border-color")}}, {{cssxref("border-style")}}, and {{cssxref("border-width")}} for both block borders.
{{cssxref("border-block-color")}}Sets border-color for both block borders.
{{cssxref("border-block-style")}}Sets border-style for both block borders.
{{cssxref("border-block-width")}}Sets border-width for both block borders.
{{cssxref("border-inline")}}Sets border-color, -style, and -width for both inline borders.
{{cssxref("border-inline-color")}}Sets border-color for both inline borders.
{{cssxref("border-inline-style")}}Sets border-style for both inline borders.
{{cssxref("border-inline-width")}}Sets border-width for both inline borders.
{{cssxref("margin-block")}}Sets all the block {{cssxref("margin")}}s.
{{cssxref("margin-inline")}}Sets all the inline margins.
{{cssxref("padding-block")}}Sets the block {{cssxref("padding")}}.
{{cssxref("padding-inline")}}Sets the inline padding.
+ +

マージンの例

+ +

The mapped margin properties of {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, and {{cssxref("margin-inline-end")}} can be used instead of their physical counterparts.

+ +

In the example below I have created two boxes and added different sized margins to each edge. I have added an extra container with a border in order to make the margin more obvious to see.

+ +

One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to rtl to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.

+ +

You can also try changing the writing-mode from horizontal-tb to vertical-rl. Again, notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.

+ +

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

+ +

マージンの一括指定

+ +

As we can now target both sides of a box — either both inline sides or both block sides — there are new shorthands available, {{cssxref("margin-inline")}} and {{cssxref("margin-block")}}, which accept two values. The first value will apply to the start of that dimension, the second to the end. If you only use one value it is applied to both.

+ +

In a horizontal writing mode this CSS would apply a 5px margin to the top of the box and a 10px margin to the bottom.

+ +
.box {
+  margin-block: 5px 10px;
+}
+ +
+

Note: The shorthand properties margin-inline and margin-block shipped in Firefox 66. As these are new properties check browser support before using.

+
+ +

パディングの例

+ +

The mapped padding properties of {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, and {{cssxref("padding-inline-end")}} can be used instead of their physical counterparts.

+ +

In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a writing-mode of horizontal-tb, both boxes should appear the same.

+ +

Try changing the direction property to rtl to cause the boxes to display in a right-to-left direction. The padding on the first box will stay in the same place, whereas the padding on the inline dimension of the second box will switch.

+ +

You can also try changing the writing-mode from horizontal-tb to vertical-rl. Again, notice how the padding stays in the same place for the first box, but switches around to follow the text direction in the second.

+ +

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

+ +

パディングの一括指定

+ +

As with margin, there are two-value shorthands for padding — {{cssxref("padding-inline")}} and {{cssxref("padding-block")}} — which allow you to set the padding of the two inline, and two block dimensions, respectively.

+ +

In a horizontal writing-mode this CSS would apply 5px of padding to the top of the box and 10px of padding to the bottom:

+ +
.box {
+  padding-block: 5px 10px;
+}
+ +
+

Note: The shorthand properties padding-inline and padding-block shipped in Firefox 66. As these are new properties check browser support before using.

+
+ +

境界の例

+ +

The border properties are the main reason that Logical Properties and Values seems to have so many properties, as we have the longhands for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. As with margin and padding we have a mapped version of each physical property.

+ +

The demo below uses some longhands and three shorthand values. As with the other demos try changing the direction property to rtl to cause the boxes to display in a right-to-left direction, or changing the writing-mode from horizontal-tb to vertical-rl.

+ +

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

+ +

新しい境界の一括指定

+ +

There are two-value shorthands to set the width, style and, color of the block or inline dimension, and two-value shorthands to set all three values in the block or inline dimension. The below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right.

+ +
.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}
+ +
+

Note: these two value shorthands shipped in Firefox 66, check browser support before using as other browsers may not have implemented them yet.

+
+ +

フローに関連した border-radius プロパティ

+ +

The specification has fairly recently added flow-relative values for the {{cssxref("border-radius")}} longhands. These have not yet been implemented by any browser. The below example, in a horizontal writing-mode, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px.

+ +
.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}
+ +

4つの値の一括指定構文についての論理値による指定

+ +

The specification makes a suggestion for the four-value shorthands such as the margin property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in this issue.

+ +

Using any four-value shorthand such as margin, padding, or border will currently use the physical versions, so if following the flow of the document is important, use the longhand properties for the time being.

diff --git a/files/ja/web/css/css_logical_properties/sizing/index.html b/files/ja/web/css/css_logical_properties/sizing/index.html new file mode 100644 index 0000000000..d6cbf58fb6 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/sizing/index.html @@ -0,0 +1,93 @@ +--- +title: 寸法の論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Sizing +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - 寸法 + - 書字方向 +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。

+ +

アイテムの寸法を指定するときに、論理的プロパティと値仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。

+ +

長さへの対応付け

+ +

以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような horizontal-tb の書字方向を想定しており、この場合は {{CSSxRef("width")}} が {{CSSxRef("inline-size")}} に対応付けられます。

+ +

縦書きモードの場合は、 {{CSSxRef("inline-size")}} は {{CSSxRef("height")}} に対応付けられます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
論理的プロパティ物理的プロパティ
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

幅と高さの例

+ +

{{CSSxRef("width")}} と {{CSSxRef("height")}} の論理的な対応付けでは、 {{CSSxRef("inline-size")}} がインライン方向の長さを設定し、 {{CSSxRef("block-size")}} がブロック方向の長さを設定します。英語の場合は、 width を inline-size で、 height を block-size で置き換えると同じレイアウトになります。

+ +

以下のライブデモでは、書字方向を horizontal-tb に設定しました。これを vertical-rl に変更すると、最初の例 — width と height を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — inline-size と block-size を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

最小幅と最小高さの例

+ +

{{CSSxRef("min-width")}} と {{CSSxRef("min-height")}} も、 {{CSSxRef("min-inline-size")}} と {{CSSxRef("min-block-size")}} に対応付けられます。これらは inline-size および block-size プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。

+ +

最初の例のように、以下の例を vertical-rl に変更してみて、その作用を確認してみてください。最初の例では min-height を使用しており、二番目の例では min-block-size を使用しています。

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

最大幅と最大高さの例

+ +

最後に {{CSSxRef("max-inline-size")}} と {{CSSxRef("max-block-size")}} を、 {{CSSxRef("max-width")}} と {{CSSxRef("max-height")}} の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

大きさ変更の論理キーワード

+ +

{{CSSxRef("resize")}} プロパティは、アイテムの大きさが変わるかどうかを物理的な値である horizontal および vertical で指定します。 resize プロパティは論理的なキーワード値にも対応しています。 resize: inline を使用すると、インライン方向の大きさが変わることを許可し、 resize: block を使用すると、ブロック方向の大きさが変わることを許可します。

+ +

both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。

+ + + +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

なお、現在のところ大きさ変更の論理的プロパティは Firefox のみが対応しています。

+
diff --git a/files/ja/web/css/css_masking/index.html b/files/ja/web/css/css_masking/index.html new file mode 100644 index 0000000000..4f61247d07 --- /dev/null +++ b/files/ja/web/css/css_masking/index.html @@ -0,0 +1,77 @@ +--- +title: CSS マスク +slug: Web/CSS/CSS_Masking +tags: + - CSS + - CSS マスク + - Overview + - Reference + - 概要 +translation_of: Web/CSS/CSS_Masking +--- +
{{CSSRef}}
+ +

CSS マスク (CSS Masking) は CSS のモジュールの一つで、マスク、クリップを含め、可視要素の一部または全部のを隠すための方法を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("clip")}} {{deprecated_inline}}
    • +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("clip-rule")}}
    • +
  • {{cssxref("mask")}}
    • +
  • {{cssxref("mask-border")}}
    • +
  • {{cssxref("mask-border-mode")}}
    • +
  • {{cssxref("mask-border-outset")}}
    • +
  • {{cssxref("mask-border-repeat")}}
    • +
  • {{cssxref("mask-border-slice")}}
    • +
  • {{cssxref("mask-border-source")}}
    • +
  • {{cssxref("mask-border-width")}}
    • +
  • {{cssxref("mask-clip")}}
    • +
  • {{cssxref("mask-composite")}}
    • +
  • {{cssxref("mask-image")}}
    • +
  • {{cssxref("mask-mode")}}
    • +
  • {{cssxref("mask-origin")}}
    • +
  • {{cssxref("mask-position")}}
    • +
  • {{cssxref("mask-repeat")}}
    • +
  • {{cssxref("mask-size")}}
    • +
  • {{cssxref("mask-type")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}初回定義
+ +

ブラウザーの対応

+ +

mask プロパティ

+ +
+ + +

{{Compat("css.properties.mask")}}

+
diff --git a/files/ja/web/css/css_miscellaneous/index.html b/files/ja/web/css/css_miscellaneous/index.html new file mode 100644 index 0000000000..2a3fbf6c93 --- /dev/null +++ b/files/ja/web/css/css_miscellaneous/index.html @@ -0,0 +1,37 @@ +--- +title: CSS雑題 +slug: Web/CSS/CSS_Miscellaneous +tags: + - CSS + - Overview + - Reference +translation_of: Web/CSS/CSS_Miscellaneous +--- +
{{CSSRef}}
+ +

このページでは、非常に実験的または他の分類に適合しない CSS プロパティを扱います。

+ + + +

参照

+ +

プロパティ

+ +
+
    +
  • {{cssxref("all")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
+
+ +

手引き

+ +

なし。

+ +

仕様書

+ +

上掲のプロパティは互いにほとんど無関係です。仕様は個々の記事を参照して下さい。

+ +

ブラウザー実装状況

+ +

上掲のプロパティは互いにほとんど無関係です。ブラウザーで利用できるかは個々の記事を参照して下さい。

diff --git a/files/ja/web/css/css_motion_path/index.html b/files/ja/web/css/css_motion_path/index.html new file mode 100644 index 0000000000..c1d5dbeb21 --- /dev/null +++ b/files/ja/web/css/css_motion_path/index.html @@ -0,0 +1,86 @@ +--- +title: CSS モーションパス +slug: Web/CSS/CSS_Motion_Path +tags: + - CSS + - CSS Motion Path + - Experimental + - Guide + - Motion Path + - Overview + - Reference +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{seecompattable}}
+ +

モーションパス (Mortion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。

+ +

この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 {{cssxref("offset-path")}} によって、任意の形状の特定の経路を定義することができます。そして、 {{cssxref("offset-distance")}} により経路に沿って動かすことができ、 {{cssxref("offset-rotate")}} を用いて任意の位置での向きを選択することができます。

+ +

基本的な例

+ +
<div id="motion-demo"></div>
+
+ +
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

{{EmbedLiveSample('Basic_example', '100%', 150)}}

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-anchor")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-path")}}
    • +
  • {{cssxref("offset-position")}}
    • +
  • {{cssxref("offset-rotate")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}初回定義
+ +

ブラウザーの互換性

+ +

offset プロパティ

+ +
+ + +

{{Compat("css.properties.offset-path")}}

+
diff --git a/files/ja/web/css/css_namespaces/index.html b/files/ja/web/css/css_namespaces/index.html new file mode 100644 index 0000000000..e008415c5d --- /dev/null +++ b/files/ja/web/css/css_namespaces/index.html @@ -0,0 +1,55 @@ +--- +title: CSS 名前空間 +slug: Web/CSS/CSS_Namespaces +tags: + - CSS + - CSS 名前空間 + - Reference + - Web + - XML + - ウェブ + - 概要 +translation_of: Web/CSS/CSS_Namespaces +--- +
{{CSSRef}}
+ +

CSS 名前空間 (CSS Namespaces) は、 CSS の中で XML 名前空間を指定できるようにするための CSS モジュールです。

+ +

リファレンス

+ +

@-規則

+ +
+
    +
  • {{cssxref("@namespace")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Namespaces")}}{{Spec2("CSS3 Namespaces")}}初回定義
+ +

ブラウザーの対応

+ +

@namespace 規則

+ +
+ + +

{{Compat("css.at-rules.namespace")}}

+
diff --git a/files/ja/web/css/css_overflow/index.html b/files/ja/web/css/css_overflow/index.html new file mode 100644 index 0000000000..b34d3a40a6 --- /dev/null +++ b/files/ja/web/css/css_overflow/index.html @@ -0,0 +1,87 @@ +--- +title: CSS Overflow +slug: Web/CSS/CSS_Overflow +tags: + - CSS + - Guide + - overflow + - scrollbars + - scrolling +translation_of: Web/CSS/CSS_Overflow +--- +

{{CSSRef}}

+ +

CSS Overflow モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。

+ +

インクオーバーフローとスクロール可能なオーバーフロー

+ +

CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。1つ目はインクオーバーフローと呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出したグリフ、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。

+ +

CSS で時に管理しなければならないオーバーフローをスクロール可能なオーバーフローと呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。

+ +

基本的な例

+ +

次のインタラクティブなデモでは、 overflow プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。

+ +
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+ + + +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{CSSxRef("overflow")}}
    • +
  • {{CSSxRef("overflow-block")}}
    • +
  • {{CSSxRef("overflow-inline")}}
    • +
  • {{CSSxRef("overflow-x")}}
    • +
  • {{CSSxRef("overflow-y")}}
    • +
  • {{CSSxRef("text-overflow")}}
    • +
  • {{CSSxRef("block-overflow")}} {{experimental_inline}}
    • +
  • {{CSSxRef("line-clamp")}} {{experimental_inline}}
    • +
  • {{CSSxRef("max-lines")}} {{experimental_inline}}
    • +
  • {{CSSxRef("continue")}} {{experimental_inline}}
    • +
+
+ +

標準外のプロパティ

+ +
+
    +
  • {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}} +

構文を1つだけでなく1つまたは2つのキーワードに変更した

+
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}初回定義
+ +

関連情報

+ +
    +
  • スクロールバーの外見を制御する {{CSSxRef("scrollbar-width")}} および {{CSSxRef("scrollbar-color")}} プロパティ
    • +
diff --git a/files/ja/web/css/css_pages/index.html b/files/ja/web/css/css_pages/index.html new file mode 100644 index 0000000000..59b983eca7 --- /dev/null +++ b/files/ja/web/css/css_pages/index.html @@ -0,0 +1,75 @@ +--- +title: CSS ページ化メディア +slug: Web/CSS/CSS_Pages +tags: + - CSS + - CSS ページ付きメディア + - CSS ページ化メディア + - Reference + - 概要 +translation_of: Web/CSS/CSS_Pages +--- +
{{CSSRef}}
+ +

CSS ページ化メディア (CSS Paged Media) は、ページ切り替えを扱う方法を定義する CSS のモジュールです。

+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
  •  
    • +
+
+ +

@-規則

+ +
+
    +
  • {{cssxref('@page')}}
    • +
+
+ +

疑似クラス

+ +
+
    +
  • {{cssxref(':blank')}}
    • +
  • {{cssxref(':first')}}
    • +
  • {{cssxref(':left')}}
    • +
  • {{cssxref(':right')}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Paged Media')}}{{Spec2('CSS3 Paged Media')}} 
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}} 
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}} 
diff --git a/files/ja/web/css/css_positioning/index.html b/files/ja/web/css/css_positioning/index.html new file mode 100644 index 0000000000..fbfc022492 --- /dev/null +++ b/files/ja/web/css/css_positioning/index.html @@ -0,0 +1,61 @@ +--- +title: CSS 位置指定レイアウト +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS 位置指定レイアウト + - Reference + - 概要 +translation_of: Web/CSS/CSS_Positioning +--- +
{{CSSRef}}
+ +

CSS 位置指定レイアウト (CSS Positioned Layout) は CSS モジュールの一つで、ページ上での要素の位置指定方法を定義します。

+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

ガイド

+ +
+
CSS の z-index を理解する
+
重ね合わせコンテキストの記述法と Z 順の動作方法の説明を、いくつかの例と共に紹介します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..db4d102e1b --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,164 @@ +--- +title: z-index の使用 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +
{{cssref}}
+ +

この記事の最初の部分、z-index なしの重ね合わせは、既定でどのように重ね合わせが行われるのかを説明します。独自の重ね合わせ順を定義したい場合は、位置指定要素に {{cssxref("z-index")}} プロパティを使用して行うことができます。

+ +

z-index プロパティは整数値 (正の数、ゼロ、負の数) で指定することができ、 Z 軸方向の要素の位置を表します。もし Z 軸になじみがないのであれば、重ね合わされたレイヤーがあって、それぞれに番号が付いていることを想像してください。レイヤーは番号順に、大きな番号は小さな番号の上に描画されます。

+ +
    +
  • 最下位レイヤー (観ている人から一番遠い)
    • +
  • ...
    • +
  • Layer -3
    • +
  • Layer -2
    • +
  • Layer -1
    • +
  • Layer 0 (既定の描画レイヤー)
    • +
  • Layer 1
    • +
  • Layer 2
    • +
  • Layer 3
    • +
  • ...
    • +
  • 最上位レイヤー (観ている人に一番近い)
    • +
+ +
+

注:

+ +
    +
  • z-index プロパティが定義されていなければ、要素は既定の描画レイヤー 0 (ゼロ) に描画されます。
    • +
  • 同じ z-index 値を持つ要素が複数あれば (＝同じレイヤー上にある場合)、 z-index なしの重ね合わせで説明した重ね合わせ規則が当てはまります。
    • +
+
+ +

次の例では、レイヤーの重なり順が z-index を使って決め直されています。#5 の z-index は 、位置指定要素でないため効果を持ちません。

+ +

{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}

+ +

例のソースコード

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

関連情報

+ + + +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2014 年 11 月 3 日
    • +
+
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..cd1337f9a5 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,49 @@ +--- +title: CSS の z-index を理解する +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +
{{cssref}}
+ +

最も基本的な場合では、 HTML のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。 {{cssxref("z-index")}} 属性で、コンテンツの描画時にオブジェクトの重なり合いの順番を調整することができます。

+ +
+

CSS 2.1 では、各ボックスは三次元空間の座標を持ちます。ボックスは、水平方向と垂直方向に加えて、垂直方向の "z 軸" に沿って配置され、その中で一番上の1つが整形されます。 Z 軸の位置は、特にボックス同士が視覚的に重なる場合に関係します。

+
+ +

(CSS 2.1 Section 9.9.1 - Layered presentation より)

+ +

これは、 CSS のスタイル規則によって、ボックスを通常の描画レイヤー (レイヤー 0) 以外のレイヤーに配置できるということです。各レイヤーの Z 位置は、描画処理の重ね合わせ順を示す整数値で表現されます。数値が大きいほど、見ている人に近いことになります。 Z 位置は CSS の z-index プロパティで制御できます。

+ +

z-index を使うのは非常に簡単に見えます。単一のプロパティに、単一の整数値を割り当て、分かりやすい振舞いをします。しかし、 z-index を HTML 要素の複雑な階層に適用するとき、その振舞いは理解や予測がしづらくなることがあります。これは重ね合わせの規則が複雑であるためです。実際、 CSS 仕様書ではこれらの規則をもっと分かりやすく説明するために、専用の章である CSS-2.1 Appendix E が占められています。

+ +

この記事では、単純化といくつかの例によって、こうした規則の説明を行なってみます。

+ +
    +
  1. z-index なしの重ね合わせ: 既定の重ね合わせ規則
    2. +
  2. 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
    3. +
  3. z-index の使用: z-index を使って既定の重ね合わせ変更する方法
    4. +
  4. 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
    5. +
  5. 重ね合わせコンテキストの例 1: 2階層の HTML 構造で、最終階層の z-index
    6. +
  6. 重ね合わせコンテキストの例 2: 2階層の HTML 構造、全レベルの z-index
    7. +
  7. 重ね合わせコンテキストの例 3: 3階層の HTML 構造、第2階層の z-index
    8. +
+ +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2005年7月9日
    • +
+ +

著者のメモ: Wladimir Palant と Rod Whiteley、レビューありがとう。

+
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..375d11f2a4 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,148 @@ +--- +title: 浮動ブロックの重ね合わせ +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

浮動 (floated) ブロックについては、重ね合わせ順序が少し異なります。浮動ブロックは位置指定なしのブロックと位置指定ブロックの間に配置されます。

+ +
    +
  1. ルート要素の背景と境界
    2. +
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
    3. +
  3. 浮動ブロック
    4. +
  4. 位置指定要素、 HTML 内での出現順
    5. +
+ +

実際、以下の例に見られるように、位置指定なしのブロック (DIV #4) の背景と境界は、完全に浮動ブロックの影響を受けませんが、内容は影響を受けます。この挙動は、上記のリストに規則を追加することで示すことができます。

+ +
    +
  1. ルート要素の背景と境界
    2. +
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
    3. +
  3. 浮動ブロック
    4. +
  4. 位置指定なしのインライン要素の子孫
    5. +
  5. 位置指定要素、 HTML 内での出現順
    6. +
+ +

{{EmbedLiveSample("Source_code_for_the_example", 600, 250)}}

+ +
+

注: 位置指定なしのブロック (DIV #4) の opacity の値を変更すると、そのブロックの背景と境界が、浮動ブロックや位置指定ブロックの上に飛び出し、おかしな結果になります。これは、仕様書の中で、 opacity の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです (What No One Told You About Z-Index を参照してください)。

+
+ +

例のソースコード

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+<div id="rel1">
+  <b>DIV #6</b><br />position: relative;</div>
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 80px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+
+#rel1 {
+  position: relative;
+  border: 1px dashed #996;
+  background-color: #cff;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+ +

関連情報

+ + + +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2014 年 11 月 3 日
    • +
+
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..430a63eca1 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,138 @@ +--- +title: 重ね合わせコンテキストの例 1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{cssref}}
+ +

« CSS « CSS の z-index を理解する

+ +

重ね合わせコンテキストの例 1

+ +

基礎的な例から始めましょう。ルートの重ね合わせコンテキストに、2つの DIV (DIV #1 と DIV #3) があって、どちらも relative の位置指定がされていますが、 z-index プロパティの指定はありません。 DIV #1 の中に absolute の位置指定がされた DIV #2 があり、一方 DIV #3 の中には absolute の位置指定がされた DIV #4 があります。どちらも z-index プロパティの指定はありません。

+ +

唯一の重ね合わせコンテキストはルート要素にあります。 z-indexe がなければ要素は出現した順に重なります。

+ +

重ね合わせコンテキストの例 1

+ +

DIV #2 に正の (ゼロでなく auto でもない) z-index 値が代入されれば、他のどの DIV よりも上に描画されます。

+ +

重ね合わせコンテキストの例 1

+ +

さらにまた、DIV #4 に DIV #2 のものより大きな正の z-index が代入されれば、DIV #4 は、DIV #2を含む他のどの要素よりも上に描画されます。

+ +

重ね合わせコンテキストの例 1

+ +

最後に見た例では、 DIV #2 と DIV #4 が兄弟要素ではないことがわかります。これは、HTML 要素の階層構造においては、それぞれ別の親要素を持っているからです。そうだとしても、DIV #4 と DIV #2 間の重なり順は、z-index を使って制御できます。たまたま、DIV #1 と DIV #3 には z-index 値が代入されていなかったため、重ね合わせコンテキストを作らなかったのです。これは、DIV #2 と DIV #3 を含むそれら要素の中身がどれも、同一のルートの重ね合わせコンテキストに含まれるということです。

+ +

重ね合わせコンテキストの見地からは、DIV #1 と DIV #3 は単にルート要素に吸収され、結果の階層構造は次のようになっています:

+ +
    +
  • ルートの重ね合わせコンテキスト +
      +
    • DIV #2 (z-index 1)
      • +
    • DIV #4 (z-index 2)
      • +
    +
    • +
+ +
注: DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。
+ +

例

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

関連情報

+ + + +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2005年7月9日
    • +
+
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..a99befee8d --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,143 @@ +--- +title: 重ね合わせコンテキストの例 2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{cssref}}
+ +

« CSS « CSS の z-index を理解する

+ +

重ね合わせコンテキストの例 2

+ +

これはとても簡単な例ですが、重ね合わせコンテキストの概念を理解するカギになります。前の例には同じ 4 つの DIV 要素がありましたが、今度は両方の階層構造で z-index プロパティが設定されています。

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270') }}

+ +

DIV #2 (z-index: 2) が DIV #3 (z-index: 1) よりも上にあることがわかります。これは、どちらも同じ重ね合わせコンテキスト（ルートのもの）に属していて、z-index 値が要素の重なり方を決めているからです。

+ +

変に思えるかもしれないのは、z-index の値に関わらず、DIV #2 (z-index: 2) が DIV #4 (z-index: 10) よりも上にあることです。この理由は、これらの要素が同一の重ね合わせコンテキストに属していないためです。DIV #4 は DIV #3 によって作られた重ね合わせコンテキストに所属していて、以前の説明にあるように DIV #3 (とその内部にあるものすべて) は DIV #2 よりも下にあります。

+ +

状況をもっとよく理解するために、重ね合わせコンテキストの階層構造をご覧ください:

+ +
    +
  • ルートの重ね合わせコンテキスト +
      +
    • DIV #2 (z-index 2)
      • +
    • DIV #3 (z-index 1) +
        +
      • DIV #4 (z-index 10)
        • +
      +
      • +
    +
    • +
+ +
注: 一般に、 HTML の階層構造は重ね合わせコンテキストの階層構造と異なることを忘れないほうが良いでしょう。重ね合わせコンテキストの階層構造では、重ね合わせコンテキストを作らない要素はその親要素に吸収されます。
+ +

例のソースコード

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

関連情報

+ + + +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2005年7月9日
    • +
+
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..ab325c9242 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,191 @@ +--- +title: 重ね合わせコンテキストの例 3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{cssref}}
+ +

« CSS « CSS の z-index を理解する

+ +

重ね合わせコンテキストの例 3

+ +

この最後の例では、複数の階層を持つ HTML 構造内で、位置指定された要素を組み合わせたときと、 z-index がクラスセレクターを使って設定されたとき、発生する問題を示します。

+ +

位置指定された DIV 要素で作られた、三階層の階層メニューを一例として見てみましょう。第二階層と第三階層の DIV 要素は、マウスが親要素をホバーしたり、クリックしたりすると現れます。通常この種類のメニューはクライアントサイドかサーバーサイドのどちらかでスクリプトにより生成されます。このためスタイルルールは id セレクターではなく、クラスセレクターで割り当てられます。

+ +

もし 3 つのメニュー階層が部分的に重なると、重なりの管理が問題になるかもしれません。

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330') }}

+ +

第一階層のメニューは relative で位置指定されているだけなので、重ね合わせコンテキストは作られません。

+ +

第二階層のメニューは、親要素内で absolute で位置指定されています。これを第一階層のすべてのメニューより上に置くために、z-index が使われています。問題は第二階層のメニューそれぞれに重ね合わせコンテキストが作られることと、第三階層のメニューが自分の親要素に属していることです。

+ +

したがって第三階層のメニューは後ろにある第二階層のメニューより下に重なりますが、これは第二階層のメニューがすべて同一の z-index 値を持っていて、デフォルトの重ね合わせ規則が適用されるからです。

+ +

状況をもっとよく理解できるよう、重ね合わせコンテキストの階層図を用意しました。

+ +
    +
  • ルートの重ね合わせコンテキスト +
      +
    • LEVEL #1 +
        +
      • LEVEL #2 (z-index: 1) +
          +
        • LEVEL #3
          • +
        • ...
          • +
        • LEVEL #3
          • +
        +
        • +
      • LEVEL #2 (z-index: 1)
        • +
      • ...
        • +
      • LEVEL #2 (z-index: 1)
        • +
      +
      • +
    • LEVEL #1
      • +
    • ...
      • +
    • LEVEL #1
      • +
    +
    • +
+ +

この問題を回避するには、異なるレベル間のメニューの重なりを取り除くか、独自 (で異なった) z-index 値を クラスセレクターではなく ID セレクターを通じて設定するか、 HTML の階層構造をなくすかしてください。

+ +
注: ソースコードを見ると、absolute で位置指定されたコンテナーとなる要素内に、第二階層と第三階層のメニューを作る DIV があることがわかります。この方法は、一度にすべてをグループ化し、位置づけするのに便利です。
+ +

例のソースコード

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

関連情報

+ + + +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2005年7月9日
    • +
+
+ +

注: 実は、サンプル画像は間違っているようです。第二階層が第三階層に重複しているのは、第二階層が半透明であるため、新しい重ね合わせコンテキストが作成されるからです。基本的に、このサンプルページ全体が誤っており、誤解を招きます。

diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..b076f8b7c2 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,127 @@ +--- +title: z-index なしの重ね合わせ +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{cssref}}
+ +

どの要素にも {{cssxref("z-index")}} プロパティが指定されていない場合、要素は以下の順序に (下から上に) 重ね合わせられます。

+ +
    +
  1. ルート要素の背景と境界
    2. +
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
    3. +
  3. 位置指定要素、 HTML 内での出現順
    4. +
+ +

{{cssxref("order")}} プロパティによって {{cssxref("flex")}} コンテナーの中の描画を「HTML の中での出現順」から変更したとき、重ね合わせコンテキストの順も同様に影響することを意識しておいて下さい。

+ +

以下の例では、 #1 から #4 までの要素が位置指定要素です。 #5 の要素は static であり、 HTML マークアップの中で後に来ていたとしても、他の4つの要素の下に描かれます。

+ +

{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}

+ +

例のソースコード

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

関連情報

+ + + +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2014 年 11 月 3 日
    • +
+
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..57daec3c78 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,241 @@ +--- +title: 重ね合わせコンテキスト +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - Reference + - z-index + - ガイド +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{cssref}}
+ +

重ね合わせコンテキスト (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は、要素の属性に基づいてこの空間を優先度つきの順序で占有します。

+ +

重ね合わせコンテキスト

+ +

この記事の前の部分である z-index の使用では、ある要素の描画順はそれらの z-index の値に影響を受けていました。これは、要素が重ね合わせコンテキストを生じさせる特別なプロパティを持っていたからです。

+ +

重ね合わせコンテキストは以下のような場面で、文書の随所に様々な要素によって構成されます。

+ +
    +
  • 文書のルート要素 (<html>)
    • +
  • {{cssxref("position")}} の値が absolute または relative であり、かつ {{cssxref("z-index")}} の値が auto 以外の要素
    • +
  • {{cssxref("position")}} の値が fixed または sticky の要素 (sticky はすべてのモバイルブラウザーにありますが、古いデスクトップブラウザーにはありません)。
    • +
  • フレックス ({{cssxref("flexbox")}}) コンテナーの子であり、 {{cssxref("z-index")}} の値が auto 以外の要素。
    • +
  • グリッド ({{cssxref("grid")}}) コンテナーの子であり、 {{cssxref("z-index")}} の値が auto 以外の要素。
    • +
  • {{cssxref("opacity")}} の値が 1 未満である要素 (不透明度の仕様をご覧ください)。
    • +
  • {{cssxref("mix-blend-mode")}} の値が normal 以外の要素
    • +
  • 以下のプロパティ値が none 以外の要素。 +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("filter")}}
      • +
    • {{cssxref("perspective")}}
      • +
    • {{cssxref("clip-path")}}
      • +
    • {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
      • +
    +
    • +
  • {{cssxref("isolation")}} の値が isolate である要素。
    • +
  • {{cssxref("-webkit-overflow-scrolling")}} の値が touch である要素。
    • +
  • {{cssxref("will-change")}} の値が、初期値以外で重ね合わせコンテキストを作成する任意のプロパティを指定している要素 (この記事を参照)。
    • +
  • {{cssxref("contain")}} の値が layout または paint であるか、これらのどちらかを含む複合値 (すなわち contain: strict, contain: content) を持つ要素。
    • +
+ +

重ね合わせコンテキストの内部で、子要素は前に説明した規則に従って重ね合わせられます。重要なのは、子要素の z-index 値は、その親要素に対してのみ意味を持つということです。重ね合わせコンテキストは、その親の重ね合わせコンテキストでは不可分な一つの固まりとして扱われます。

+ +

まとめると、

+ +
    +
  • 重ね合わせコンテキストは他の重ね合わせコンテキストに含めることができ、その結果重ね合わせコンテキストの階層構造ができます。
    • +
  • 重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。
    • +
  • 重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。
    • +
+ +
注: 重ね合わせコンテキストを作れるのが一部の要素に限定されるため、重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。それ自身の重ね合わせコンテキストを作らない要素は、その親の重ね合わせコンテキストに同化される、と言えます。
+ +

例

+ +

Example of stacking rules modified using z-index

+ +

この例では、配置要素はすべて、位置と z-index の値によって、それ自身の重ね合わせコンテキストを作ります。重ね合わせコンテキストの階層構造が、次のように構成されます。

+ +
    +
  • ルート要素 +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

重要なのは、 DIV #4, DIV #5, DIV #6 は DIV #3 の子要素なので、DIV #3 の内側で重なり方が完全に決まることです。一旦 DIV #3 内部の重ね合わせと描画が終われば、DIV #3 はルート要素に丸ごと渡され、兄弟要素との重ね合わせ処理が行われます。

+ +
+

注:

+ +
    +
  • DIV #4 は DIV #1 の下に描画されます。これは、DIV #1 の z-index (5) はルート要素の重ね合わせコンテキストでだけ有効な値で、DIV #4 の z-index (6) は DIV #3 の重ね合わせコンテキストでだけ有効な値だからです。DIV #4 は DIV #3 の内部にあり、DIV #3 は DIV #1 よりも小さな z-index 値を持っているので、DIV #4 は DIV #1 の下になります。
    • +
  • 同じ理由で DIV #2 (z-index 2) は DIV #5 (z-index 1) の下に描画されます。これは DIV #5 が DIV #3 に含まれていて、DIV #3は DIV #2 より高い z-index 値を持っているからです。
    • +
  • DIV #3 の z-index は 4 ですが、この値は DIV #4、DIV #5、DIV #6 の z-index とは独立しています。異なる重ね合わせコンテキストに含まれるためです。
    • +
  • Z軸方向に重なった要素の描画順序の簡単な計算方法は、それがバージョン番号のようなものを持っていると考えることです。親要素のメジャーバージョン番号の下に、子要素のマイナーバージョン番号があるものとします。この方法で、 z-index 1 を持つ要素 (DIV #5) がどうやって z-index 2 を持つ要素 (DIV #2) の上になるのか、そして、 z-index 6 を持つ要素 (DIV #4) がどうやって z-index 5 を持つ要素 (DIV #1) の下になるのか、簡単にわかります。用意した例では次のようになります (以下は最終的な描画順に並べています)。 +
      +
    • ルート要素 +
        +
      • DIV #2 - z-index は 2
        • +
      • DIV #3 - z-index は 4 +
          +
        • DIV #5 - z-index は 1、描画順は 4.1 なので、 z-index が 4 である要素の下に重なる
          • +
        • DIV #6 - z-index は 3、描画順は 4.3 なので、 z-index が 4 である要素の下に重なる
          • +
        • DIV #4 - z-index は 6、描画順は 4.6 なので、 z-index が 4 である要素の下に重なる
          • +
        +
        • +
      • DIV #1 - z-index は 5
        • +
      +
      • +
    +
    • +
+
+ +

例

+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+
+ +

CSS

+ +
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example', '100%', '396') }}

+ +

関連情報

+ + + +
+

原典情報

+ +
    +
  • 原著者: Paolo Lombardi
    • +
  • この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
    • +
  • 最終更新日: 2005年7月9日
    • +
+
diff --git a/files/ja/web/css/css_properties_reference/index.html b/files/ja/web/css/css_properties_reference/index.html new file mode 100644 index 0000000000..bfec5f1653 --- /dev/null +++ b/files/ja/web/css/css_properties_reference/index.html @@ -0,0 +1,312 @@ +--- +title: CSS プロパティリファレンス +slug: Web/CSS/CSS_Properties_Reference +tags: + - CSS + - スタイル +translation_of: Web/CSS/CSS_Properties_Reference +--- +

一般的な CSS プロパティリファレンス

+ +

下記は最も一般的な CSS プロパティと、 JavaScript からアクセスする際に使用される等価な DOM 表記の基本的な一覧です。

+ +
メモ: このリストは完全ではありません。 CSS プロパティについては主要な CSS リファレンスと Mozilla CSS 拡張をご覧ください。リファレンス記事はすべてのプロパティの使い方の例も含んでいます。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex
diff --git a/files/ja/web/css/css_ruby/index.html b/files/ja/web/css/css_ruby/index.html new file mode 100644 index 0000000000..2884e88cd3 --- /dev/null +++ b/files/ja/web/css/css_ruby/index.html @@ -0,0 +1,61 @@ +--- +title: CSS ルビレイアウト +slug: Web/CSS/CSS_Ruby +tags: + - CSS + - CSS ルビレイアウト + - Reference + - 概要 +translation_of: Web/CSS/CSS_Ruby +--- +
{{CSSRef}}
+ +

CSS ルビレイアウト (CSS Ruby Layout) は CSS のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("ruby-align")}}
    • +
  • {{cssxref("ruby-position")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Ruby')}}{{Spec2('CSS3 Ruby')}}初回定義
+ +

ブラウザーの対応

+ +

ruby-align プロパティ

+ +
+ + +

{{Compat("css.properties.ruby-align")}}

+ +

ruby-position プロパティ

+ +
+ + +

{{Compat("css.properties.ruby-position")}}

+
+
diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.html b/files/ja/web/css/css_scroll_snap/browser_compat/index.html new file mode 100644 index 0000000000..e4e1a3473a --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/browser_compat/index.html @@ -0,0 +1,47 @@ +--- +title: ブラウザーの互換性とスクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap/Browser_compat +tags: + - CSS + - CSS Scroll Snap + - CSS スクロールスナップ + - Guide + - browser compat + - compat + - 互換性 +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +
{{CSSRef}}
+ +

Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。

+ +

古い Firefox の実装を使用していた場合はどうすればよいのか

+ +

もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。

+ +

主に以下のようなことに注意してください。

+ +
    +
  • {{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された
    • +
  • {{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 scroll-snap-type:mandatory のような古い一括指定の構文が動作しなくなった
    • +
+ +

フォールバックとして古い実装を使用することができるか

+ +

既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit プリフィックス付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。

+ +

この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。

+ +

この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な y 軸の値を伴い、もう一つは Firefox 68 以前で、 y 値のないプロパティに対応しているもののためです。

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

+ +

両方の仕様書を使用する必要があるか

+ +

スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。この点では、フォールバック版を使用することで利益を享受する膨大な数のユーザーに見せるデータがない限り、新しい仕様のみを実装することをお勧めします。

+ +

新しい仕様書に対応していることを、特性クエリを使用して確認したいのであれば、 {{CSSxRef("scroll-snap-align")}} を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。

+ +

なぜ二つの版があるのか

+ +

最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。

diff --git a/files/ja/web/css/css_scroll_snap/index.html b/files/ja/web/css/css_scroll_snap/index.html new file mode 100644 index 0000000000..57af06183b --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/index.html @@ -0,0 +1,75 @@ +--- +title: CSS スクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS スクロールスナップ + - Reference + - 概要 +translation_of: Web/CSS/CSS_Scroll_Snap +--- +
{{CSSRef}}
+ +

CSS スクロールスナップは CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。

+ +
+

メモ: 以前のバージョンのスクロールスナップはスクロールスナップ点と呼ばれており、非推奨になりました。このバージョンが現行です。

+
+ +

リファレンス

+ +

コンテナーの CSS プロパティ

+ +
    +
  • {{cssxref("scroll-snap-type")}}
    • +
  • {{cssxref("scroll-snap-stop")}}
    • +
  • {{cssxref("scroll-padding")}}
    • +
  • {{cssxref("scroll-padding-top")}}
    • +
  • {{cssxref("scroll-padding-right")}}
    • +
  • {{cssxref("scroll-padding-bottom")}}
    • +
  • {{cssxref("scroll-padding-left")}}
    • +
  • {{cssxref("scroll-padding-inline")}}
    • +
  • {{cssxref("scroll-padding-inline-start")}}
    • +
  • {{cssxref("scroll-padding-inline-end")}}
    • +
  • {{cssxref("scroll-padding-block")}}
    • +
  • {{cssxref("scroll-padding-block-start")}}
    • +
  • {{cssxref("scroll-padding-block-end")}}
    • +
+ +

子の CSS プロパティ

+ +
    +
  • {{cssxref("scroll-snap-align")}}
    • +
  • {{cssxref("scroll-margin")}}
    • +
  • {{cssxref("scroll-margin-top")}}
    • +
  • {{cssxref("scroll-margin-right")}}
    • +
  • {{cssxref("scroll-margin-bottom")}}
    • +
  • {{cssxref("scroll-margin-left")}}
    • +
  • {{cssxref("scroll-margin-inline")}}
    • +
  • {{cssxref("scroll-margin-inline-start")}}
    • +
  • {{cssxref("scroll-margin-inline-end")}}
    • +
  • {{cssxref("scroll-margin-block")}}
    • +
  • {{cssxref("scroll-margin-block-start")}}
    • +
  • {{cssxref("scroll-margin-block-end")}}
    • +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの対応

diff --git a/files/ja/web/css/css_scroll_snap_points/index.html b/files/ja/web/css/css_scroll_snap_points/index.html new file mode 100644 index 0000000000..3a08306114 --- /dev/null +++ b/files/ja/web/css/css_scroll_snap_points/index.html @@ -0,0 +1,61 @@ +--- +title: CSS スクロールスナップ点 +slug: Web/CSS/CSS_Scroll_Snap_Points +tags: + - CSS + - CSS スクロールスナップ点 + - Overview + - Reference + - 概要 +translation_of: Web/CSS/CSS_Scroll_Snap_Points +--- +
{{CSSRef}} {{deprecated_header}}
+ +

CSS スクロールスナップ点 (CSS Scroll Snap Points) は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。

+ +
+

メモ: CSS スクロールスナップがこの機能を定義する最新の仕様書です。

+
+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{cssxref("scroll-snap-coordinate")}}
    • +
  • {{cssxref("scroll-snap-destination")}}
    • +
  • {{cssxref("scroll-snap-points-x")}}
    • +
  • {{cssxref("scroll-snap-points-y")}}
    • +
  • {{cssxref("scroll-snap-type")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの対応

+ +

scroll-snap-coordinate プロパティ

+ +
+ + +

{{Compat("css.properties.scroll-snap-coordinate")}}

+
diff --git a/files/ja/web/css/css_scrollbars/index.html b/files/ja/web/css/css_scrollbars/index.html new file mode 100644 index 0000000000..50285c8342 --- /dev/null +++ b/files/ja/web/css/css_scrollbars/index.html @@ -0,0 +1,98 @@ +--- +title: CSS スクロールバー +slug: Web/CSS/CSS_Scrollbars +tags: + - CSS + - CSS スクロールバー + - Overview + - 概要 +translation_of: Web/CSS/CSS_Scrollbars +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS スクロールバー (CSS Scrollbars) は、2000年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。

+ +

基本的な例

+ +

この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。

+ +
+
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+  scrollbar-width: thin;
+}
+ +

HTML

+ +
<div class="scroller">
+Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
+welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+Dandelion cucumber earthnut pea peanut soko zucchini.
+</div>
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+
+ +

リファレンス

+ +

CSS プロパティ

+ +
+
    +
  • {{CSSxRef("scrollbar-width")}}
    • +
  • {{CSSxRef("scrollbar-color")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scrollbars")}}{{Spec2("CSS Scrollbars")}}初回定義
+ +

アクセシビリティの考慮事項

+ +

スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。

+ + + +

ブラウザーの互換性

+ + + +

scrollbar-width

+ +
{{Compat("css.properties.scrollbar-width")}}
+ +

scrollbar-color

+ +
{{Compat("css.properties.scrollbar-color")}}
+ +

関連情報

+ +
    +
  • {{CSSxRef("::-webkit-scrollbar")}}
    • +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
diff --git a/files/ja/web/css/css_selectors/index.html b/files/ja/web/css/css_selectors/index.html new file mode 100644 index 0000000000..f1b00fa844 --- /dev/null +++ b/files/ja/web/css/css_selectors/index.html @@ -0,0 +1,132 @@ +--- +title: CSS セレクター +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - Guide + - Overview + - Reference + - Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS セレクターは、一連の CSS の規則が適用される要素を定義します。

+ +
+

メモ: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。

+
+ +

基本セレクター

+ +
+
全称セレクター
+
すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。
+ 構文: * ns|* *|*
+ 例: * は文書のすべての要素を選択します。
+
要素型セレクター
+
指定されたノード名を持つすべての要素を選択します。
+ 構文: elementname
+ 例: input はあらゆる {{HTMLElement("input")}} 要素を選択します。
+
クラスセレクター
+
指定された class 属性を持つすべての要素を選択します。
+ 構文: .classname
+ 例: .index は "index" クラスを持つあらゆる要素を選択します。
+
ID セレクター
+
id 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は1つしかないはずです。
+ 構文: #idname
+ 例: #toc は "toc" という ID を持つ要素を選択します。
+
属性セレクター
+
指定された属性を持つ要素をすべて選択します。
+ 構文: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ 例: [autoplay] は autoplay 属性が（どんな値でも）設定されているすべての要素を選択します。
+
+ +

グループ化セレクター

+ +
+
セレクターリスト
+
, はグループ化の手段であり、一致するすべてのノードを選択します。
+ 構文: A, B
+ 例: div, span は {{HTMLElement("span")}} と {{HTMLElement("div")}} の両要素に一致します。
+
+ +

結合子

+ +
+
子孫結合子
+
  (空白) 結合子は、第1の要素の子孫にあたるノードを選択します。
+ 構文: A B
+ 例: div span は {{HTMLElement("div")}} 要素の中にある {{HTMLElement("span")}} 要素をすべて選択します。
+
子結合子
+
> 結合子は、第1の要素の直接の子に当たるノードを選択します。
+ 構文: A > B
+ 例: ul > li は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。
+
一般兄弟結合子
+
~ 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。
+ 構文: A ~ B
+ 例: p ~ span は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。
+
隣接兄弟結合子
+
+ 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。
+ 構文: A + B
+ 例: h2 + p は {{HTMLElement("h2")}} 要素の後にすぐに続く {{HTMLElement("p")}} 要素をすべて選択します。
+
列結合子 {{Experimental_Inline}}
+
|| 結合子は列に所属するノードを選択します。
+ 構文: A || B
+ 例: col || td は {{HTMLElement("col")}} 要素のスコープに所属するすべての {{HTMLElement("td")}} 要素を選択します。
+
+ +

擬似表記

+ +
+
擬似クラス
+
: 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。
+ 例: a:visited はユーザーが訪問済みの {{HTMLElement("a")}} 要素をすべて選択します。
+
疑似要素
+
:: 表記は、 HTML に含まれていないエンティティを表現します。
+
例: p::first-line はすべての {{HTMLElement("p")}} 要素の先頭行を選択します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}|| 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の疑似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}~ 一般兄弟結合子、およびツリー構造の疑似クラスを追加。
+ 疑似要素に二重コロン :: の接頭辞を用いるようにした。追加の属性セレクター。
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}子結合子 > および隣接兄弟結合子 + を追加。
+ 全称セレクターと属性セレクターを追加。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}初回定義
+ +

疑似クラスおよび疑似要素の詳細は、それぞれの仕様書一覧表をご覧ください。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..bec8180372 --- /dev/null +++ b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,68 @@ +--- +title: 'セレクターでの :target 疑似クラスの利用' +slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +tags: + - ':target' + - CSS + - ガイド + - セレクター + - リファレンス +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

URL が文書の特定の部分を指している場合、ユーザーが気づきにくい場合があります。いくつかのシンプルな CSS を使用して URL の対象に注目させ、ユーザーの利便性を向上させる方法を確認しましょう。

+ +

ターゲットの選択

+ +

{{cssxref(":target")}} 疑似クラスは、フラグメント識別子を含む URL のターゲット要素にスタイルを適用するために使用されます。例えば、 http://developer.mozilla.org/ja/docs/Using_the_:target_selector#example という URL はフラグメント識別子 #example を含んでいます。 HTML では、 id 及び name 属性が名前空間を共用しているので、識別子はどちらかの値として見つかります。従って、例の URL はこの文書の「例」の見出しを指すことになります。

+ +

おそらく URL のターゲットになる h2 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単純にこうするだけです。

+ +
h2:target { font-weight: bold; }
+ +

文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 #example フラグメントに枠を追加するには、以下の書きます。

+ +
#example:target { border: 1px solid black; }
+ +

すべての要素を対象にする

+ +

インテントが「ブランケット」スタイルで作成されれば、すべての対象となる要素に適用されますので、ユニバーサルセレクターの代わりになります。

+ +
:target { color: red; }
+
+ +

例

+ +

以下の例には、同じ文書内で要素を指す五つのリンクがあります。例えば「First」のリンクを選択すると、 <h1 id="one"> がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

まとめ

+ +

フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。

+ + + +
    +
  • {{cssxref(":target")}}
    • +
+ +
+

原典情報

+ +
    +
  • Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
    • +
  • Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
  • メモ: この記事はもともと DevEdge サイトの一部だったものを再構成したものです。
    • +
+
diff --git a/files/ja/web/css/css_shapes/basic_shapes/index.html b/files/ja/web/css/css_shapes/basic_shapes/index.html new file mode 100644 index 0000000000..cc24d1ced2 --- /dev/null +++ b/files/ja/web/css/css_shapes/basic_shapes/index.html @@ -0,0 +1,143 @@ +--- +title: 基本シェイプ +slug: Web/CSS/CSS_Shapes/Basic_Shapes +tags: + - CSS + - CSS Shapes + - CSS シェイプ + - Guide + - Reference + - ガイド +translation_of: Web/CSS/CSS_Shapes/Basic_Shapes +--- +

{{CSSRef}}

+ +

CSS のシェイプは {{cssxref("<basic-shape>")}} 型を使用して定義することができ、このガイドでは、この方で受け入れられる様々な値のそれぞれが、どのように動作するかを説明します。単純な円から複雑な多角形までがあります。

+ +

シェイプについて見る前に、これらのシェイプを実現するために一緒に使われる二つの情報を理解しておくことに価値があります。

+ +
    +
  • <basic-shape> 型
    • +
  • 参照ボックス
    • +
+ +

<basic-shape> 型

+ +

<basic-shape> 型は、すべての基本シェイプを値として使用します。この方は関数表記を使用します。シェイプ型の後に括弧が続き、中にシェイプを説明する追加の値があります。

+ +

受け付ける引数は、作成しようとしているシェイプによって様々です。これらは以下の例で説明します。

+ +

参照ボックス

+ +

CSS シェイプで使用される参照ボックスを理解することは、これがそれぞれのシェイプの座標システムを定義するので、基本シェイプを使用するときには重要です。参照ボックスは既にボックス値からシェイプを作成するガイドで、直接参照ボックスを使用してシェイプを作成するのを見たことがありますね。

+ +

The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using shape-outside: circle(50%). The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a Basic Shape the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.

+ +

+ +

You can add the various Box Values after your Basic Shape definition. Therefore the default behaviour is as if you have defined.

+ +
.shape {
+  shape-outside: circle(50%) margin-box;
+}
+
+ +

You can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.

+ +
.shape {
+  shape-outside: circle(50%) border-box;
+}
+
+ +

What is worth noting is that the margin-box will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. We will see this in the following examples of basic shapes.

+ +

For an excellent description of references boxes as they apply to CSS Shapes see Understanding Reference Boxes for CSS Shapes.

+ +

inset()

+ +

The inset() type defines a rectangle, which may not seem very useful as simply floating an item will give you a rectangular shape around it. However the inset() types enables the definition of offsets, thus pulling the content in over the shape.

+ +

Therefore inset() takes four values for the top, right, bottom and left values plus a final value for border-radius. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+
+ +

Using the same rules as we use for the margin shorthand, you can set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. So, the above rules could also be described as:

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}
+ +

In the example below we have an inset() shape used to pull content over the floated element. Change the offset values to see how the shape changes.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}

+ +

You can also add the Box Value that you wish to use as a reference box. In the example below change the reference box from margin-box to border-box, padding-box or content-box to see how the reference box used as the starting point before offsets are calculated changes.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}

+ +

circle()

+ +

The circle() value for shape-outside can accept two possible arguments. The first is the shape-radius.

+ +

Both circle() and ellipse() values for shape-outside are specified as accepting this argument of <shape-radius>. This argument can be a length or percentage but can also be one of the keywords closest-side or farthest-side.

+ +

The keyword closest-side uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.

+ +

The keyword farthest-side uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

+ +

The second argument is a position. If omitted this will be set to center. However you can use any valid position here to indicate the position of the centre of the circle.

+ +

Our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value.

+ +

In the below example I have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. This gives a total width for the reference box of 140 pixels. I have given a value of 50% for the shape-radius value which means that our radius is 70px. I have then set the position value to 30%.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}

+ +

In the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for inset().

+ +

As an additional example, if you use the keywords top left for position, you can make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter circle shape for text to flow around.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}

+ +

シェイプはマージンボックスで切り取られる

+ +

When describing Reference Boxes I explained that the margin-box will clip the shape. You can see this by moving the centre of our circle towards the content by setting the position to 60%. The centre of the circle is now nearer the content and the circle extends past the margin-box. This means that the extension becomes clipped and squared off.

+ +
img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+
+ +

The circle shape is clipped by the margin box

+ +

ellipse()

+ +

An ellipse is essentially a squashed circle and so ellipse() acts in a very similar way to circle() except that we have to specify two radii x and y in that order.

+ +

These may then be followed by position values as with circle() to move the centre of the ellipse around. In the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}

+ +

The keyword values of closest-side and farthest-side are useful to create a quick ellipse based on the size of the floated element reference box.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}

+ +

polygon()

+ +

The final Basic Shape is the most complex and enables the creation of many side shapes by way of creating a polygon(). This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.

+ +

In the example below I have created a shape for text to follow using the polygon(), you can change any of the values to see how the shape is changed.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}

+ +

You may well find the Firefox Shape Inspector very useful here to create your polygon shape. The screenshot below shows the shape highlighted in the tool.

+ +

The polygon basic shape, highlighted with the Shapes Inspector.

+ +

Another useful resource is Clippy - a tool for creating shapes for clip-path, as the values for Basic Shapes are the same as those used for clip-path.

diff --git a/files/ja/web/css/css_shapes/from_box_values/index.html b/files/ja/web/css/css_shapes/from_box_values/index.html new file mode 100644 index 0000000000..d61ef23ffd --- /dev/null +++ b/files/ja/web/css/css_shapes/from_box_values/index.html @@ -0,0 +1,80 @@ +--- +title: ボックス値からのシェイプ +slug: Web/CSS/CSS_Shapes/From_box_values +tags: + - Boundaries + - Boxes + - CSS + - CSS Shapes + - Guide + - Margins + - border-box + - border-radius + - box values + - content-box + - float + - margin-box + - padding-box + - shapes +translation_of: Web/CSS/CSS_Shapes/From_box_values +--- +
{{CSSRef}}
+ +

シェイプを作るのに直接的な方法が、 CSS ボックスモデルの値を使用することです。この記事では、これを行う方法を説明します。

+ +

シェイプの値として許可されているボックス値は次の通りです。

+ +
    +
  • content-box
    • +
  • padding-box
    • +
  • border-box
    • +
  • margin-box
    • +
+ +

border-radius の値にも対応しており、これはページに丸い縁を持った物を作ることができ、シェイプは作成されたシェイプに従うことができます。

+ +

CSS ボックスモデル

+ +

上に挙げた値は CSS ボックスモデルの様々な部分に対応します。 CSS のボックスにはコンテンツ、パディング、境界、マージンがあります。

+ +

ボックスモデルはマージン、境界、パディング、コンテンツの各ボックスから成ります。

+ +

シェイプにボックス値を使用することで、これらの値で定義された辺でコンテンツを折り返すことができます。以下の例で、コンテンツの様々な流れ方が分かるように、パディング、境界、マージンを持つ要素を使用しています。

+ +

margin-box

+ +

margin-box は外側のマージンの縁と、要素の定義で {{cssxref("border-radius")}} を使用することで、シェイプの角の半径によって定義されます。

+ +

以下の例では、高さ、幅、背景色を設定した {{htmlelement("div")}} である紫色の丸いアイテムが表示されます。 border-radius プロパティを使用して丸を作成しており、 border-radius: 50% と設定しています。要素にマージンがあるので、コンテンツは丸いシェイプに回り込み、マージンが適用されています。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

+ +

border-box

+ +

border-box の値は、境界の外側の縁で定義されるシェイプです。このシェイプは通常の、境界の外側におけるすべての角の丸め規則に従います。 CSS の {{cssxref("border")}} プロパティを使用していなくても、境界は存在します。この場合、境界は padding-box と同じになり、シェイプはパディングの縁の外側として定義されます。

+ +

次の例では、テキストが境界線によって作成された線に従うようになったのが分かります。境界寸法を変更すると、コンテンツがそれに従います。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

+ +

padding-box

+ +

padding-box の値は、パディングの縁に囲まれたシェイプを定義します。このシェイプは境界の内側におけるすべての角の丸め規則に従います。パディングがない場合、 padding-box は content-box と同じです。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

+ +

content-box

+ +

content-box の値は、コンテンツの外側の縁で囲まれたシェイプを定義します。このボックスにおけるそれぞれの角の丸めは、0または border-radius − border-width − padding より大きくなります。つまり、ここでは負の数を取ることはできません。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

+ +

ボックス値を使用する場面

+ +

シェイプを作成するのに、ボックス値を使用すると簡単ですが、これはよく対応されている border-radius プロパティを使用して定義することができる簡単なシェイプしか実現することができません。上記の使用例にあるような使い方の一つです。 border-radius を使用して円形のシェイプを作成し、それに沿って文字列をカーブさせます。

+ +

いくらかの面白い効果を作成することができますが、単純なテクニックしか使っていません。この章の最後の例で、左右に2つのフロート状態の要素を作成し、それぞれの文字列寄りの方向に対して、 border-radius を100%に設定しています。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

+ +

もっと複雑なシェイプについては、この章の他のガイドにあるように、基本シェイプのうちの一つを値として使用するか、画像からシェイプを定義するかする必要があります。

diff --git a/files/ja/web/css/css_shapes/index.html b/files/ja/web/css/css_shapes/index.html new file mode 100644 index 0000000000..4cabef851a --- /dev/null +++ b/files/ja/web/css/css_shapes/index.html @@ -0,0 +1,100 @@ +--- +title: CSS シェイプ +slug: Web/CSS/CSS_Shapes +tags: + - CSS + - CSS シェイプ + - Reference + - wrapping + - シェイプ + - リファレンス + - 境界 + - 概要 +translation_of: Web/CSS/CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル１の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。

+ +

基本的な例

+ +

以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("shape-image-threshold")}}
    • +
  • {{cssxref("shape-margin")}}
    • +
  • {{cssxref("shape-outside")}}
    • +
+
+ +

データ型

+ +
+
    +
  • {{cssxref("<basic-shape>")}}
    • +
+
+ +

ガイド

+ + + +

外部リソース

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}初回定義。
+ +

ブラウザーの対応

+ + + +

shape-outside

+ +

{{Compat("css.properties.shape-outside")}}

+ +

shape-margin

+ +

{{Compat("css.properties.shape-margin")}}

+ +

shape-image-threshold

+ +

{{Compat("css.properties.shape-image-threshold")}}

diff --git a/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html new file mode 100644 index 0000000000..419a72fb93 --- /dev/null +++ b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html @@ -0,0 +1,125 @@ +--- +title: CSS シェイプの概要 +slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +tags: + - CSS + - CSS シェイプ + - シェイプ + - 概要 +translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS シェイプレベル１仕様書は、 CSS における幾何学的な図形 (シェイプ) を記述しています。仕様書のレベル１は、浮動状態のアイテムに適用するように設計されています。この記事では、シェイプを使用して何ができるのかの概要を紹介します。

+ +

例えば、アイテムを左にフロートした状態にすると、テキストがアイテムの右と下に矩形に回り込みます。円形のシェイプを適用すると、テキストは円形の線に沿って回り込みます。

+ +

これらのシェイプを作成する方法はいくつもあり、これらのガイドで CSS シェイプの動作や、利用しやすい方法を考えます。

+ +

仕様書は何を定義しているのか

+ +

仕様書では、三つの新しいプロパティを定義しています。

+ +
    +
  • {{cssxref("shape-outside")}} — 基本的なシェイプを定義することができます
    • +
  • {{cssxref("shape-image-threshold")}} — 透過性のしきい値を設定します。画像がシェイプの定義に使用される場合、画像の中で透過度がしきい値以上の部分のみが、シェイプとして定義されます。他の部分は無視されます。
    • +
  • {{cssxref("shape-margin")}} — 定義されたシェイプの周囲のマージンを設定します。
    • +
+ +

基本シェイプの定義

+ +

shape-outside プロパティで、シェイプを定義することができます。これは様々な値を取り、 {{cssxref("<basic-shape>")}} データ型で定義され、すべてが異なるシェイプを定義します。とても簡単なケースから見てみましょう。

+ +

次の例では、左に浮動状態にした画像があります。それから shape-outside プロパティを circle(50%) の値で適用しています。その結果として、コンテンツは画像のボックスで形成された矩形ではなく、丸い形状の周りのカーブになります。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

仕様書のこのレベルでは、要素は <basic-shape> を適用するために浮動状態でなければなりません。これは多くの場合、単純な方法で代替されるという副作用があります。シェイプに対応したブラウザーがない場合、ユーザーは以前のように矩形のボックスの縁をコンテンツが回り込むように見えるでしょう。シェイプの対応がある場合は、見栄えが改善されます。

+ +

基本的なシェイプ

+ +

circle(50%) の値は基本的なシェイプの例の一つです。仕様書では次のように、４つの <basic-shape> 値を定義しています。

+ +
    +
  • inset()
    • +
  • circle()
    • +
  • ellipse()
    • +
  • polygon()
    • +
+ +

inset() の値を使用すると、テキストが矩形のシェイプに回り込みますが、オフセット値を追加すると、周囲のコンテンツの行ボックスを通常よりもオブジェクトに引き寄せて配置することができます。

+ +

すでに circle() が円形のシェイプを作成するのを見てきました。 ellipse() は基本的なつぶれた円です。これらの単純なシェイプで対応できない場合は、 polygon() を作成して好きなだけ複雑なシェイプにすることができます。

+ +

この章の基本シェイプのガイドで、利用できるそれぞれの基本シェイプとその作成方法を紹介します。

+ +

ボックス値からのシェイプの作成

+ +

シェイプはボックス値の周りに作成することができます。従って、次のボックスの上にシェイプを作成することができます。

+ +
    +
  • border-box
    • +
  • padding-box
    • +
  • content-box
    • +
  • margin-box
    • +
+ +

次の例では、 border-box の値を他の取りうる値に変更して、シェイプがボックスに近づいたり離れたりする様子を確認することができます。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

+ +

ボックス値についてより詳しく知るには、ボックス値からのシェイプの作成を参照してください。

+ +

画像からのシェイプの作成

+ +

パスを作成するための面白い方法として、アルファチャネルを持つ画像を使用する方法があります。 — 文字列は画像の不透過な部分に回り込みます。これで画像の周りのコンテンツの回り込みの重ね合わせができたり、画像をページ上に表示させずに、純粋に注意深くポリゴンに変換することなく複雑なシェイプを作成する手段として利用したりすることができます。

+ +

なお、この方法で使用される画像は CORS に互換性がある必要があり、そうでなければ shape-outside は値として none が指定されたかのように動作し、シェイプを得ることはできません。

+ +

次の例では、完全に透過した領域がある画像を用い、この画像を shape-outside の URL 値として使用しています。シェイプは透過しない領域 — つまり、気球の画像の周りに作られます。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

+ +

shape-image-threshold

+ +

shape-image-threshold プロパティは、シェイプに使われる画像の領域を定義する画像の透過性のしきい値を設定するために使用します。 shape-image-threshold が 0.0 (初期値) である場合、領域は完全に透過になります。値が 1.0 である場合は完全に不等価になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。

+ +

シェイプを定義する画像としてグラデーションを使用すると、しきい値が良く見えます。次の例では、しきい値を変更すると、選択した透明度のレベルに基づいてシェイプが変化するパスが変化します。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

+ +

画像からのシェイプの作成については、このガイドの画像からのシェイプでより深く見てみます。

+ +

shape-margin プロパティ

+ +

{{cssxref("shape-margin")}} プロパティは shape-outside にマージンを追加します。これにより、シェイプを囲むコンテンツの行ボックスがシェイプから引き離されるため、短くなります。

+ +

次の例では、基本的なシェイプに shape-margin を追加しました。マージンを変更して、初期値で設定されるシェイプの輪郭からテキストを引き離してみてください。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

+ +

作成されたコンテンツの浮動状態のアイテムとしての使用

+ +

上記の例では、シェイプを定義するために画像や見える要素、つまりページ上にシェイプを見ることができる形でシェイプを定義してきました。しかし、単に矩形ではない見えない線に沿ってテキストを流したい場合があるでしょう。これをシェイプを使って行うことができますが、この場合も浮動状態のアイテムが必要で、これを非表示にすることができます。これは文書に空の {{htmlelement("div")}} 又は {{htmlelement("span")}} のような冗長な要素を挿入することで実現できますが、おすすめは生成コンテンツを使うことです。つまり、 CSS のスタイルを使用して実現することができます。

+ +

次の例では、高さと幅が150pxの要素を挿入するために生成コンテンツを利用します。それから基本シェイプやボックス値、画像のアルファチャネルを使用して、文字列を折り返すシェイプを作成します。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

+ +

clip-path との関係

+ +

シェイプを作成するために使われる基本シェイプとボックス値は、 {{cssxref("clip-path")}} の値として使われているものと同じです。従って、画像を使ってシェイプを作成したい場合や、画像の一部を切り抜きたい場合は、同じ値を使用してください。

+ +

以下の画像は青い背景の四角い画像です。 shape-outside: ellipse(40% 50%); 及び clip-path: ellipse(40% 50%); を使用して、シェイプを定義するのに使われるのと同じ領域で切り取りを行うよう定義しました。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

+ +

シェイプのための開発者ツール

+ +

ブラウザーが CSS シェイプに対応するのと同時に、 Firefox は開発ツール内でシェイプパスエディターを公開しています。このツールはつまり、ページ内にあるシェイプを検査し、値の変更も行います。ポリゴンが正しくない場合は、シェイプエディターを使用して調整してから、新しい値をコピーして CSS に書き戻すことができます。

+ +

シェイプパスエディターは、 Firefox 60 で clip-path から生成されるシェイプと共に既定で有効になる予定です。 shape-outside で生成されるシェイプを使用することもできますが、 layout.css.shape-outside.enabled の設定を有効にした場合のみです。

+ +

将来の CSS シェイプ機能

+ +

当初のシェイプ仕様書には、要素内にシェイプを作成するための shape-inside プロパティが含まれていました。このプロパティは、浮動状態ではないシェイプを作成することができる機能と共に、仕様書のレベル２に移動されました。当初は shape-inside が仕様書のレベル１に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。

diff --git a/files/ja/web/css/css_shapes/shapes_from_images/index.html b/files/ja/web/css/css_shapes/shapes_from_images/index.html new file mode 100644 index 0000000000..843fc47ceb --- /dev/null +++ b/files/ja/web/css/css_shapes/shapes_from_images/index.html @@ -0,0 +1,62 @@ +--- +title: 画像からのシェイプの作成 +slug: Web/CSS/CSS_Shapes/Shapes_From_Images +tags: + - CSS シェイプ +translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images +--- +
{{CSSRef}}
+ +

このガイドでは、アルファチャンネルを含む画像ファイルから、または CSS グラデーションから、シェイプを作成する方法を見ていきます。これはシェイプを作成するためのとても柔軟な方法です。 CSS で複雑なポリゴンを持つパスを描画するのではなく、グラフィックプログラムでシェイプを作成し、しきい値よりも透明度の低いピクセルによって作成されたパスを使用することができます。

+ +

画像をもとにした単純なシェイプ

+ +

シェイプの画像を使用するには、完全に不透明ではない領域があるアルファチャンネルが必要です。 {{cssxref("shape-image-threshold")}} プロパティは、この不透明度のしきい値を設定するために使用されます。この値よりも透明度の低いピクセルは、シェイプの範囲を計算するために使用されます。

+ +

簡単な例として、赤い塗りつぶしの星形の領域と、完全に透明な領域のある画像があります。 {{cssxref("shape-outside")}} プロパティの値として、画像ファイルへのパスを使用します。コンテンツは星形の図形で折り返されるようになりました。

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}

+ +

シェイプからテキストを離すために {{cssxref("shape-margin")}} を使用することができ、作成されたシェイプの周囲と、テキストとの間のマージンを指定します。

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}

+ +

CORS の互換性

+ +

画像からシェイプを作成する際には、使用する画像が CORS 互換である必要があります。サイトと同じドメインにホスティングされている画像は動作しますが、画像が CDN などの別のドメインでホスティングされている場合は、正しいヘッダーを送信してシェイプで利用できるようにする必要があります。この CORS 互換画像の要件のため、ローカルのウェブサーバーを使用せずにローカルでファイルをプレビューすると、シェイプは機能しません。

+ +

CORS の問題かどうか

+ +

開発者ツールは CORS エラーを特定するのに役立ちます。 Chrome では、コンソールから CORS の問題が通知されます。 Firefox では、プロパティを調べると、イメージを読み込めないという警告が表示されます。これは、画像が CORS のためにシェイプのソースとして使用できないという事実を警告するはずです。

+ +

しきい値の設定

+ +

{{cssxref("shape-image-threshold")}} プロパティを使用すると、完全な透明ではない領域からシェイプを作成することができます。 shape-image-threshold の値が 0.0 (初期値) の場合、領域は完全に透明になります。値が 1.0 の場合は完全に不透明です。中間の値は、半透明領域を定義領域として設定できることを意味します。

+ +

次の例では、最初の例と同様の画像を使用していますが、この画像では、星の背景が完全に透明ではなく、グラフィックプログラムで20％の不透明度が作成されています。 shape-image-threshold を 0.3 に設定すると図形が表示され、 0.2 より小さい値に設定すると、図形がなくなります。

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}

+ +

生成されたコンテンツの画像を使用

+ +

上記の例では、画像を {{cssxref("shape-outside")}} の値として使用し、ページにも追加しました。多くのデモでは、従っているシェイプを見せるためにこれを行っていますが、 shape-outside プロパティはページに表示される画像とは関係がないため、画像を使用してシェイプを作成するために、画像を表示する必要はありません。

+ +

何かを浮動状態にする必要がありますが、以下の例のように生成されたコンテンツを使用することもできます。ここでは生成されたコンテンツを浮動状態にし、大きな星形の画像を使ってコンテンツを整形していますが、ページ上には何も画像を表示していません。

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}

+ +

グラデーションを用いたシェイプの作成

+ +

CSS グラデーションは画像として扱われるので、透過や半透過の領域をグラデーションの一部として持つことで、グラデーションを使ってシェイプを作ることができます。

+ +

次の例では、直線グラデーションの背景画像によって与えられた生成された浮動状態のコンテンツを使用しています。 {{cssxref("shape-outside")}} の値と同じ値を使用しています。直線グラデーションは紫色から透明に変化しますので、 {{cssxref("shape-image-threshold")}} の値を変更すると、どれくらいのピクセルがシェイプを作成するのに必要かを決めることができます。以下の例で値を操作することで、その値に応じてシェイプを横切る対角線がどれだけ移動するかを確認することができます。

+ +

背景画像を完全に削除してみることもでき、そうすればグラデーションは純粋にシェイプを作成するために使用され、ページには全く表示されません。

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}

+ +

次の例では、楕円形の放射状のグラデーションを使用し、グラデーションの透過部分を再利用してシェイプを作成しています。

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}

+ +

これらのライブサンプルで直接実験して、グラデーションを変更するとシェイプのパスがどのように変化するかを確認することができます。

diff --git a/files/ja/web/css/css_table/index.html b/files/ja/web/css/css_table/index.html new file mode 100644 index 0000000000..8c1b45c427 --- /dev/null +++ b/files/ja/web/css/css_table/index.html @@ -0,0 +1,47 @@ +--- +title: CSS 表 +slug: Web/CSS/CSS_Table +tags: + - CSS + - CSS 表 + - リファレンス + - 概要 +translation_of: Web/CSS/CSS_Table +--- +
{{CSSRef}}
+ +

CSS 表 (CSS Table) は CSS のモジュールの一つで、表データをレイアウトする方法を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-spacing")}}
    • +
  • {{cssxref("caption-side")}}
    • +
  • {{cssxref("empty-cells")}}
    • +
  • {{cssxref("table-layout")}}
    • +
  • {{cssxref("vertical-align")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}初回定義
diff --git a/files/ja/web/css/css_text/index.html b/files/ja/web/css/css_text/index.html new file mode 100644 index 0000000000..d92efd6b04 --- /dev/null +++ b/files/ja/web/css/css_text/index.html @@ -0,0 +1,70 @@ +--- +title: CSS テキスト +slug: Web/CSS/CSS_Text +tags: + - CSS + - CSS テキスト + - 概要 +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

CSS テキスト (CSS Text) は CSS のモジュールの一つで、どのようにテキストの操作を行うかを定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("hanging-punctuation")}}
    • +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("line-break")}}
    • +
  • {{cssxref("overflow-wrap")}}
    • +
  • {{cssxref("tab-size")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-align-last")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-justify")}}
    • +
  • {{cssxref("text-size-adjust")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}一部のプロパティを、テキストの書字方向から独立するように更新。
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}初回定義
diff --git a/files/ja/web/css/css_text_decoration/index.html b/files/ja/web/css/css_text_decoration/index.html new file mode 100644 index 0000000000..5dd4da31f6 --- /dev/null +++ b/files/ja/web/css/css_text_decoration/index.html @@ -0,0 +1,126 @@ +--- +title: CSS テキスト装飾 +slug: Web/CSS/CSS_Text_Decoration +tags: + - CSS + - CSS Text Decoration + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Text_Decoration +--- +
{{CSSRef}}
+ +

CSS テキスト装飾 (Text Decoration) は CSS のモジュールの一つで、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-decoration")}}
    • +
  • {{cssxref("text-decoration-color")}}
    • +
  • {{cssxref("text-decoration-line")}}
    • +
  • {{cssxref("text-decoration-offset")}}
    • +
  • {{cssxref("text-decoration-skip-ink")}}
    • +
  • {{cssxref("text-decoration-style")}}
    • +
  • {{cssxref("text-decoration-thickness")}}
    • +
  • {{cssxref("text-emphasis")}}
    • +
  • {{cssxref("text-emphasis-color")}}
    • +
  • {{cssxref("text-emphasis-position")}}
    • +
  • {{cssxref("text-emphasis-style")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

ガイド

+ +

なし。

+ +

例

+ +
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+
+ +
<p class="under">This text has a line underneath it.</p>
+<p class="over">This text has a line over it.</p>
+<p class="line">This text has a line going through it.</p>
+<p>This <a class="plain" href="#">link will not be underlined</a>,
+    as links generally are by default. Be careful when removing
+    the text decoration on anchors since users often depend on
+    the underline to denote hyperlinks.</p>
+<p class="underover">This text has lines above <em>and</em> below it.</p>
+<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
+<p class="blink">This text might blink for you,
+    depending on the browser you use.</p>
+
+ +

{{EmbedLiveSample('Examples','auto','320')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}初回定義
diff --git a/files/ja/web/css/css_transforms/index.html b/files/ja/web/css/css_transforms/index.html new file mode 100644 index 0000000000..55de83ba04 --- /dev/null +++ b/files/ja/web/css/css_transforms/index.html @@ -0,0 +1,72 @@ +--- +title: CSS 変形 +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS Transforms + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Transforms +--- +
{{CSSRef}}
+ +

CSS 変形 (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("backface-visibility")}}
    • +
  • {{cssxref("perspective")}}
    • +
  • {{cssxref("perspective-origin")}}
    • +
  • {{cssxref("rotate")}}
    • +
  • {{cssxref("scale")}}
    • +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("transform-box")}}
    • +
  • {{cssxref("transform-origin")}}
    • +
  • {{cssxref("transform-style")}}
    • +
  • {{cssxref("translate")}}
    • +
+
+ +

データ型

+ +
+
    +
  • {{cssxref("<transform-function>")}}
    • +
+
+ +

ガイド

+ +
+
CSS 変形の利用
+
CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Transforms 2') }}{{ Spec2('CSS Transforms 2') }}独立した変形を追加。
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}初回定義
diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.html b/files/ja/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..da27f0240b --- /dev/null +++ b/files/ja/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,89 @@ +--- +title: CSS 変形の使用 +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - Advanced + - CSS + - CSS Transforms + - Graphics + - Guide + - Rotate + - Scale + - Scaling + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

座標空間を編集することで、 CSS 変形 (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。このガイドは変形の使用についての解説を行ないます。

+ +

CSS 変形は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変形には回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) が含まれており、二次元と三次元空間の両方の平行移動 (translation) があります。

+ +
+

ボックスモデルによって配置された要素のみが transform を実行できます。言うまでもなく、 display: block である要素がボックスモデルで配置されます。

+
+ +

CSS 変形のプロパティ

+ +

CSS 変形の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。

+ +
+
{{cssxref("transform-origin")}}
+
原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変形で使用されれます。
+
{{cssxref("transform")}}
+
要素に適用する変形を指定します。変形の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。
+
+ +

例

+ +

これが変形前の MDN ロゴの画像です。

+ +

MDN ロゴ

+ +

回転

+ +

ここでは MDN ロゴを、左下の角から90度回転させます。

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Rotating', 'auto', 240) }}

+ +

傾斜と平行移動

+ +

この例は div 要素を10度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Skewing_and_translating') }}

+ +

3D 特有の CSS プロパティ

+ +

立体空間で CSS 変形 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。

+ +

遠近感

+ +

設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。

+ +

{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

+ +

二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。

+ +

{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

+ +

ここまで完了すれば、 3D 空間で要素に働きかけることができます。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_transitions/index.html b/files/ja/web/css/css_transitions/index.html new file mode 100644 index 0000000000..a179d1d939 --- /dev/null +++ b/files/ja/web/css/css_transitions/index.html @@ -0,0 +1,61 @@ +--- +title: CSS トランジション +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Transitions + - Experimental + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Transitions +--- +
{{CSSRef}}
+ +

CSS トランジション (CSS Transition) は CSS のモジュールの一つで、特定の CSS プロパティの値の間でスムーズな変化を作り出す方法を定義します。タイミング関数を使って、ただ作り出すだけでなく、その進化を定義することもできます。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("transition")}}
    • +
  • {{cssxref("transition-delay")}}
    • +
  • {{cssxref("transition-duration")}}
    • +
  • {{cssxref("transition-property")}}
    • +
  • {{cssxref("transition-timing-function")}}
    • +
+
+ +

ガイド

+ +
+
CSS トランジションの使用
+
CSS を使ってスムーズな変化を作る方法についての、ステップ・バイ・ステップのチュートリアルです。この記事では関連する各 CSS プロパティと、それらがどのように作用するかを解説します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

関連情報

+ +
    +
  • CSS トランジションに関連して、CSS アニメーションでは、より細かいプロパティの動きの制御を提供します。
    • +
diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.html b/files/ja/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..d01fba6005 --- /dev/null +++ b/files/ja/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1072 @@ +--- +title: CSS トランジションの使用 +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +tags: + - Advanced + - CSS + - CSS Transitions + - CSS3 Transitions + - Guide +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +

{{CSSref}}

+ +

CSS トランジションは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。例えば、ある要素の前景色を白色から黒色に変更した場合、通常は即座に前景色が替わります。 CSS トランジションを有効にすると、加速カーブに従った時間間隔で変更が行われ、その変化のすべてをカスタマイズすることができます。

+ +

2つの状態間のトランジションを含むアニメーションは、開始状態と最終状態の間の状態がブラウザーによって暗黙的に定義されるため、暗黙的なトランジションと呼ばれることがあります。

+ +

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

CSS トランジションは、アニメーションを開始する場合 (遅延を設定することで)、トランジションをどの程度持続するか (持続時間を設定することによって)、およびトランジションをどのように実行するか (タイミング関数を定義することによって、例えば、直線的または最初は速く、最後に遅くなど) を、 (明示的にリストすることによって) アニメーションするためのプロパティを決定させます。

+ +

トランジション可能な CSS プロパティとは

+ +

ウェブサイトの作成者はどのプロパティを、どのようにアニメーションさせるのかを定義できます。これにより複雑な遷移を起こすことが可能です。プロパティによってはアニメーションさせることに意味がない場合があるので、アニメーション可能なプロパティは限られています。

+ +
注: アニメーションさせることのできるプロパティは仕様改定により変わっています。
+ +

auto の値はしばしばとても複雑になります。仕様書では開始及び終了値が auto の場合はアニメーションしないよう推奨しています。 Gecko を利用したものなど、一部のユーザーエージェントはこの要件を実装しており、 WebKit を利用したものなどではより制約が少なくなります。 auto でアニメーションを利用すると、ブラウザーやそのバージョンによって予測できない結果になる可能性があるため、避けるべきです。

+ +

トランジションの定義

+ +

CSS トランジションは一括指定の {{cssxref("transition")}} プロパティを使用して制御されます。トランジションを設定する上で最も良い方法で、パラメータを列挙する数がずれてしまって、とってもイライラしながら CSS のデバッグを多大な時間を使って行うことを防いでくれます。

+ +

それぞれのトランジションコンポーネントに対しては以下のサブプロパティを用いてコントロールできます。

+ +

(なお、以下のトランジションは、サンプルをお見せするために無限ループさせています。 CSS のトランジションは、プロパティの変更を始点から終点まで視覚化するだけです。ループさせる必要がある場合は、 CSS の animation プロパティを参照してください。)

+ +
+
{{cssxref("transition-property")}}
+
トランジションを適用する CSS プロパティの名前を指定します。ここに指定したプロパティだけが、トランジションによりアニメーションします。通常、それ以外のプロパティの変更は即座に反映されます。
+
{{cssxref("transition-duration")}}
+
トランジションの実行にかかる所要時間を指定します。単一の値を指定すると、すべてのプロパティのトランジションの所要時間として適用されます。または複数の値を指定すると、プロパティごとにトランジションの所要時間として異なる値を指定することができます。 +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{cssxref("transition-timing-function")}}
+
プロパティの中間の値を計算する方法を定義する関数を指定します。タイミング関数はトランジションの中間の値がどのように計算されるかを定義します。多くのタイミング関数は対応する関数のグラフを提供することで指定され、これは三次ベジェ関数を定義する4つの点で定義されます。 Easing Functions Cheat Sheet からイージングを選択することもできます。. +
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{cssxref("transition-delay")}}
+
プロパティが変化した時点から、トランジションが実際に始まるまでの待ち時間を定義します。 +
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

一括指定の CSS の構文は以下のように書きます。

+ +
div {
+    transition: <property> <duration> <timing-function> <delay>;
+}
+ +

例

+ +

単純な例

+ +

この例では4秒間のフォントの大きさのトランジションを行い、ユーザーがマウスを要素上に移動してからアニメーション効果が始まるまで2秒間の遅延を行います。

+ +
#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}
+
+ +

複数のアニメーションするプロパティの例

+ + + +

CSS Content

+ +
.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+    background-color: #FFCCCC;
+    width: 200px;
+    height: 200px;
+    transform: rotate(180deg);
+}
+
+ +

{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}

+ +

プロパティ値のリストの長さが異なる場合

+ +

何れかのプロパティで、値のリストが他よりも短い場合、以下のように、他と一致するまで繰り返されます。

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

以下ののようであるかのように扱われます。

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

同様に、何れかのプロパティで値のリストが {{cssxref("transition-property")}} のリストよりも長い場合は切り詰められますので、以下の CSS のようになります。

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

これは以下のように解釈されます。

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

メニューのハイライトにトランジションを用いる

+ +

CSS の一般的な使い方として、メニューのアイテムにマウスポインターを乗せたときに、そのアイテムをハイライトさせることがあります。より魅力的な効果を出すためにトランジションを使うことは、簡単にできます。

+ +

コードの断片を見る前に、ライブデモをご覧になるとよいでしょう (ご利用のブラウザーがトランジションに対応している場合)。

+ +

まずは、 HTML でメニューを作成します。

+ +
<nav>
+  <a href="#">Home</a>
+  <a href="#">About</a>
+  <a href="#">Contact Us</a>
+  <a href="#">Links</a>
+</nav>
+ +

そして、メニューのルック＆フィールを実装するために CSS を作成します。関連のある部分を以下に示します。

+ +
a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}
+
+ +

この CSS は、メニューの外見を決めています。また、要素が {{cssxref(":hover")}} および {{cssxref(":focus")}} の状態であるときに、背景色と前景色を変化させています。

+ +

JavaScript の例

+ +
+

次のような場合の直後にトランジションを使用する場合は注意してください。

+ +
    +
  • .appendChild() を使用して DOM に要素を追加したとき
    • +
  • 要素の display: none; プロパティを外したとき
    • +
+ +

この場合、初期の状態が発生せず、要素が常に最後の状態であるかのように扱われます。この制限を会計つする簡単な方法は、トランジションを行いたい CSS プロパティを変更する前に、数ミリ秒の window.setTimeout() を適用することです。

+
+ +

JavaScript の機能をスムーズにするためのトランジション

+ +

トランジションは、 JavaScript による機能に対して何も行うことなしに、よりスムーズにさせることができる素晴らしいツールです。以下の例をご覧ください。

+ +
<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+
+ +

JavaScript を使用して、ある場所にボールを移動させる効果を作ることができます。

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+
+ +

CSS により余分な努力をせずに、上記の効果をスムーズにさせることができます。単に要素へトランジションを追加すると、変化がスムーズに発生するようになります。

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+
+ +

この例は、 http://jsfiddle.net/9h261pzo/291/ で実行することができます。

+ +

トランジションの開始と完了の検出

+ +

{{event("transitionend")}} イベントを使用することでで、アニメーションの実行が終了したことを検出することができます。これは {{domxref("TransitionEvent")}} オブジェクトで、通常の {{domxref("Event")}} オブジェクトに二つのプロパティを追加したものです。

+ +
+
propertyName
+
文字列で、トランジションが完了した CSS プロパティの名前を示します。
+
elapsedTime
+
浮動小数点値で、イベントが発火してからトランジションが実行された時間を示します。この値は {{cssxref("transition-delay")}} の値に影響されません。
+
+ +

通常は、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用してこのイベントを監視することができます。

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +

トランジションの開始は {{event("transitionrun")}} (遅延の前に発火) および {{event("transitionstart")}} (遅延の後に発火) を使用して、同じ形で検出することができます。

+ +
el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);
+ +
注: transitionend イベントは、要素に {{cssxref("display")}}: none が適用されたりアニメーション中のプロパティの値が変更されたりして、トランジションが完了する前に中止された場合は発火しません。
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_types/index.html b/files/ja/web/css/css_types/index.html new file mode 100644 index 0000000000..bbe03843cc --- /dev/null +++ b/files/ja/web/css/css_types/index.html @@ -0,0 +1,171 @@ +--- +title: CSS データ型 +slug: Web/CSS/CSS_Types +tags: + - CSS + - CSS Data Type + - Guide + - Index + - Overview + - Reference + - Syntax + - Types + - data types + - list +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

CSS データ型は、 CSS のプロパティや関数で使用される具体的な値 (キーワードや単位を含む) を定義します。これはコンポーネント値型の特殊な種類です。

+ +

構文

+ +

CSS の形式文法では、データ型は "<" と ">" の不等号で囲まれたキーワードで表記されます。

+ +

索引

+ +

一連の CSS 仕様書で定義されているデータ型には、以下のようなものがあります。

+ +
A + +
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<angular-color-hint>")}}
    • +
  • {{cssxref("<angular-color-stop>")}}
    • +
  • {{cssxref("<attr-fallback>")}}
    • +
  • {{cssxref("<attr-name>")}}
    • +
+B + +
    +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
+C + +
    +
  • {{cssxref("<calc-product>")}}
    • +
  • {{cssxref("<calc-sum>")}}
    • +
  • {{cssxref("<calc-value>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<color-stop>")}}
    • +
  • {{cssxref("<color-stop-angle>")}}
    • +
  • {{cssxref("<counter-style>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
+D + +
    +
  • {{cssxref("<dimension>")}}
    • +
+F + +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<frequency-percentage>")}}
    • +
+G + +
    +
  • {{cssxref("<gradient>")}}
    • +
+I + +
    +
  • {{cssxref("<ident>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
+L + +
    +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<length-percentage>")}}
    • +
+N + +
    +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<number-percentage>")}}
    • +
+P + +
    +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
+Q + +
    +
  • {{cssxref("<quote>")}}
    • +
+R + +
    +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
+S + +
    +
  • {{cssxref("<shape>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<shape-radius>")}}
    • +
  • {{cssxref("<string>")}}
    • +
+T + +
    +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
  • {{cssxref("<timing-function>")}}
    • +
  • {{cssxref("<toggle-value>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<type-or-unit>")}}
    • +
+U + +
    +
  • {{cssxref("<url>")}}
    • +
  • {{cssxref("<url-modifier>")}}
    • +
+Z + +
    +
  • {{cssxref("<zero>")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Values') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_values_and_units/index.html b/files/ja/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..3b8916285b --- /dev/null +++ b/files/ja/web/css/css_values_and_units/index.html @@ -0,0 +1,499 @@ +--- +title: CSS 値と単位 +slug: Web/CSS/CSS_Values_and_Units +tags: + - CSS + - Guide + - Reference + - values and units +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

CSS 宣言はすべて、プロパティと値の組を含みます。プロパティによって、値は単純な整数やキーワードから、一連のキーワードや単位つき・単位なしの値などを含みます。CSS プロパティには受け付けるデータ型の組み合わせ -- 値と単位 -- があります。以下ではデータ型の大部分を概観します。より詳しい情報は、それぞれのデータ型のページを参照してください。

+ +

テキストのデータ型

+ +
    +
  • {{cssxref("<custom-ident>")}}
    • +
  • <ident> として定義済みのキーワード
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+ +

テキストデータ型は、引用符で囲まれた文字の並びである <string> と、引用符で囲まれていない文字列、すなわち「CSS 識別子」である <ident> のどちらかです。 <string> は単一引用符か二重引用符のどちらかで囲まれます。仕様書で <ident> または <custom-ident> として挙げられている CSS 識別子は、引用符で囲んではいけません。

+ +

CSS の仕様では、ウェブ開発者が定義できる値には、アニメーションのキーフレームやフォントファミリーの名前、グリッドエリアなどがあり、これらは {{cssxref("<custom-ident>")}} または {{cssxref("<string>")}} またはその両方の形式で記述します。

+ +

ユーザーが定義するテキスト値のうち、引用符があってもなくてもよい箇所では、仕様書には <custom-ident> | <string> のように記してあります。これは、例えばアニメーション名のように、引用符が任意だということです。

+ +
@keyframe validIdent {
+  /* ここにキーフレーム */
+}
+@keyframe 'validString' {
+  /* ここにキーフレーム */
+}
+ +

引用符で囲んではいけないテキスト値もあります。たとえば {{cssxref("grid-area")}} の値は <custom-ident> なので、もし content という名前のグリッドエリアがあれば、それは引用符なしで書きます。

+ +
.item {
+  grid-area: content;
+}
+
+ +

いっぽう、 {{cssxref("<string>")}} のデータ型、たとえば {{cssxref("content")}} プロパティの文字列値には引用符が必要です。

+ +
.item::after {
+    content: "This is my content.";
+}
+
+ +

どんな名前でも (絵文字を含んでいるものでも) 一般的には作れますが、識別子については none、unset、 initial、inherit にはできず、先頭を数字や二重ダッシュにすることもできません。また、一般的に CSS のそのほかの定義済みキーワードを使用することは避けるのが好ましいです。詳しくは {{cssxref("<custom-ident>")}} と {{cssxref("<string>")}} のリファレンスページを参照してください。

+ +

定義済みキーワード値

+ +

定義済みキーワードは、特定のプロパティ用に仕様で定義されているテキスト値です。これらのキーワードは CSS 識別子でもあるので、引用符なしで使用します。

+ +

CSS の仕様書や MDN のプロパティページで、CSS プロパティの値の構文を見ると、そこに書けるキーワードは次のような形式で列挙されているでしょう。以下の値は、{{cssxref("float")}} で使用できる定義済みキーワードです。

+ +
left | right | none | inline-start | inline-end
+ +

こうした値は引用符なしで使用します。

+ +
.box {
+    float: left;
+}
+
+ +

CSS 全般の値

+ +

プロパティ用に仕様で定められている定義済みキーワードのほかに、すべての CSS プロパティで使える CSS 全般のプロパティ値として、{{cssxref("initial")}}、{{cssxref("inherit")}}、{{cssxref("unset")}} があります。これらは既定値への戻し方を明示するために使用します。

+ +

initial キーワードは、そのプロパティの初期値として指定された値を表します。inherit キーワードは、その要素の親要素のプロパティで計算された値を表し、親の値を継承します。

+ +

unset キーワードは、そのプロパティが継承されているか否かによって、inherit または initial のいずれかと同じ動きになります。

+ +

{{cssxref("revert")}} という 4 つめの値が Cascade Level 4 の仕様で追加されましたが、いまのところブラウザーの対応状況は好ましくありません。

+ +

URL

+ +

{{cssxref("<url>")}} 型は関数ノテーションのように使用します。これは URL である <string> を受け取ります。渡すのは絶対 URL か相対 URL です。例えば、背景画像を読み込みたいときには以下のどちらの使い方でもできます。

+ +
.box {
+  background-image: url("images/my-background.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}
+
+ +

url() の引数は引用符があってもなくてもかまいません。引用符をつけない場合には、<url-token> と同様に読み込まれます。そのため、その場合は <url-token> のように特定の文字のエスケープなどを行う必要があります。詳しくは {{cssxref("<url>")}} を参照してください。

+ +

数値データ型

+ +
    +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<dimension>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
+ +

整数

+ +

整数は 1 桁以上の 0 から 9 の十進数で、1024、-55 など該当します。整数は + や - を先頭に付けることができますが、記号と整数の間に空白を開けないでください。

+ +

数値

+ +

{{cssxref("<number>")}} は実数をあらわします。小数点以下の小数部がなくても構いません。例えば 0.255、128、-1.2 が該当します。数値にも + や - の記号を先頭に付けることができます。

+ +

寸法

+ +

{{cssxref("<dimension>")}} は、<number> に単位が付いたものです。例えば 45deg、100ms、10px が該当します。付けた単位の識別子は大文字小文字が区別されません。数値と単位の間には、空白やその他の文字を入れないでください。例えば、1 cm は無効です。

+ +

CSS では、以下のものをあらわすために寸法を使います。

+ +
    +
  • {{cssxref("<length>")}} (距離の単位)
    • +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
+ +

以下の節で、これらについて説明します。

+ +

距離の単位

+ +

長さのような距離の単位がプロパティの値として使用できるとき、これを {{cssxref("<length>")}} 型と呼びます。CSS の長さには、相対的な長さと絶対的な長さの 2 種類があります。

+ +

相対的な長さの単位は、他のものを基準に長さを表します。例えば、em はその要素のフォントサイズを基準とする値で、vh はビューポートの高さを基準とする値です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

相対的な長さの単位

+
単位基準
emその要素のフォントサイズ
exその要素のフォントの x-height
capその要素のフォントの Cap height (大文字の名目上の高さ)
chその要素のフォントにおける narrow グリフの平均文字送り幅で、“0” (ZERO, U+0030) のグリフを表す
icその要素のフォントにおける full width グリフの平均文字送り幅で、“水” (CJK water ideograph, U+6C34) のグリフを表す
remルート要素のフォントサイズ
lhその要素の行の高さ
rlhルート要素の行の高さ
vwビューポートの幅の 1%
vhビューポートの高さの 1%
viルート要素のインライン軸におけるビューポートの大きさの 1%。
vbルート要素のブロック軸におけるビューポートの大きさの 1%。
vminビューポートの小さい側の 1%。
vmaxビューポートの大きい側の 1%。
+ +

絶対的な長さの単位は物理的な長さであり、インチやセンチメートルなどと決まっています。そのため、これらの単位の多くは、印刷などの固定サイズの媒体への出力に向いています。たとえば、 mm は物理的なミリメートルで、センチメートルの 1/10 です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

絶対的な長さの単位

+
単位名称換算
cmセンチメートル1cm = 96px/2.54
mmミリメートル1mm = 1cm の 1/10
Q1/4 ミリメートル1Q = 1cm の 1/40
inインチ1in = 2.54cm = 96px
pcパイカ1pc = 1in の 1/16
ptポイント1pt = 1in の 1/72
pxピクセル1px = 1in の 1/96
+ +

長さの値を使用する場合、その長さが 0 なら単位をつける必要はありません。そうでないときには、単位は必須で、大文字小文字は区別せず、値の数値部分の直後に空白をはさむことなく付けなければなりません。

+ +

角度の単位

+ +

角度の値は {{cssxref("<angle>")}} 型で表され、以下の値を受け付けます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
単位名前説明
deg角度完全な円は 360 度です。
gradグラディアン完全な円は 400 グラディアンです。
radラジアン完全な円は 2π ラジアンです。
turn周完全な円は 1 周です。
+ +

時間の単位

+ +

時間の値は {{cssxref("<time>")}} 型で表されます。時間の値を含めるときは、単位 -- the s か ms -- の指定が必要です。以下の値を受け付けます。

+ + + + + + + + + + + + + + + + + + + + + +
単位名前説明
s秒
msミリ秒1000 ミリ秒で 1 秒です。
+ +

周期の単位

+ +

周期の値は {{cssxref("<frequency>")}} 型で表されます。以下の値を受け付けます。

+ + + + + + + + + + + + + + + + + + + + + +
単位名前説明
Hzヘルツ一秒間に発生する回数を表します。
kHzキロヘルツ1 キロヘルツは 1000 ヘルツです。
+ +

1Hz は 1hz や 1HZ とも表記でき、一秒あたり一周となります。

+ +

解像度の単位

+ +

解像度の単位は {{cssxref("<resolution>")}} 型で表されます。これらは、CSS のインチ、センチメートル、ピクセルに収まるドット数を示すことで、画面などの視覚表現におけるドット 1 つの大きさを表します。以下の値を受け付けます。

+ + + + + + + + + + + + + + + + + + + + + + +
単位説明
dpiインチ毎ドット。
dpcmセンチメートル毎ドット。
dppx、xピクセル単位毎ドット。
+ +

パーセント

+ +

{{cssxref("<percentage>")}} は他の値の割合を表す型です。

+ +

パーセント値は、常に長さなどの他の量に対する相対的な値です。パーセントにできるプロパティごとに、パーセントが参照する量も定義されています。この量は、同じ要素の別のプロパティの値であったり、祖先要素のプロパティの値であったり、包含ブロックの測定値であったり、何か他のものであったりします。

+ +

例えば、ボックスの {{cssxref("width")}} をパーセントで指定した場合、ボックスの親要素で計算された幅を参照するパーセントになります。

+ +
.box {
+  width: 50%;
+}
+ +

パーセントと寸法の混合

+ +

一部のプロパティでは、2 つの型のいずれかの寸法を受け入れることがあります。<length> または <percentage> といった具合です。この場合の許容値は、{{cssxref("<length-percentage>")}} のように組合わせ単位として仕様書で詳解しています。他に取りうる組み合わせは以下の通りです。

+ +
    +
  • {{cssxref("<frequency-percentage>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
+ +

特殊データ型 (他の仕様書で定義)

+ +
    +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<position>")}}
    • +
+ +

色

+ +

{{cssxref("<color>")}} の値は要素機能 (背景色など) の色を指定します。これは CSS カラーモジュール で定義されています。

+ +

画像

+ +

{{cssxref("<image>")}} の値は、CSS で使用できる各種すべての画像を指定します。これは CSS 画像の値と置換要素モジュール で定義されています。

+ +

位置

+ +

{{cssxref("<position>")}} 型は位置取りできる領域内におけるオブジェクトの 2D 位置を定義します。例えば、コンテナ要素内の背景画像がこれにあたります。この型は {{cssxref("background-position")}} として解釈されるために、CSS の背景と縁の仕様書 で定義されています。

+ +

関数ノテーション

+ +
    +
  • {{cssxref("calc()")}}
    • +
  • {{cssxref("min", "min()")}}
    • +
  • {{cssxref("max", "max()")}}
    • +
  • {{cssxref("clamp", "clamp()")}}
    • +
  • {{cssxref("toggle", "toggle()")}}
    • +
  • {{cssxref("attr", "attr()")}}
    • +
+ +

関数ノテーションは、より複雑な型を表現したり、特殊な処理を呼び出すことが CSS でできるものです。この構文は、関数名の直後に左括弧 ( の後、ノテーションの引数、右括弧 ) が続きます。関数は複数の引数を取ることができ、CSS のプロパティ値と同様の形式になっています。

+ +

括弧内の空白は許容されますが、任意です。(ただし、min()、max()、clamp() 関数については、各ページ内の空白に関する注意事項を参照してください。)

+ +

rgba() のように、レガシーな関数ノテーションの中にはカンマを使用するものもあります。しかし、カンマは一般的にリスト内の項目を区切るためにのみ使用されます。引数の区切りにカンマを使用するとき、カンマの前後に空白を入れるのは任意です。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}vi, vb, ic, cap, lh, rlh 単位の追加。
+ min(), max(), clamp() 関数ノテーションの追加
+ toggle() の追加
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}calc(), ch, rem, vw, vw, vmin, vmax, Q の追加
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}} +

rgb(), rgba(), hsl(), hsla() 関数のカンマ無し構文の追加。rgb() と hsl() にアルファ値を追加し、rgba() と hsla() をこれらへの (非推奨の) エイリアスに変更。
+ rebeccapurple カラーキワードを追加。
+ 4 と 8 桁の 16 進カラー値を追加、最後の桁はアルファ値を表します。hwb(), device-cmyk(), color() 関数の追加。

+
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}システム色を非推奨化。SVG カラーを追加。rgba(), hsl(), hsla() 関数の追加。
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

element(), image(), image-set(), conic-gradient() の追加。

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}画像の初回定義。
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}初回定義。
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_variables/index.html b/files/ja/web/css/css_variables/index.html new file mode 100644 index 0000000000..8aa76d0885 --- /dev/null +++ b/files/ja/web/css/css_variables/index.html @@ -0,0 +1,40 @@ +--- +title: 段階変数用のCSSカスタムプロパティ +slug: Web/CSS/CSS_Variables +tags: + - CSS + - CSS Variables + - Overview + - Reference +translation_of: Web/CSS/CSS_Variables +--- +
{{cssref}}
+ +

段階変数用のCSSカスタムプロパティとは何度も繰り返して用いられるカスタムプロパティを作成できるCSSモジュールです。

+ +

CSSプロパティ

+ +
+
    +
  • {{cssxref("--*")}}
    • +
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態備考
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}}初期仕様
diff --git a/files/ja/web/css/css_writing_modes/index.html b/files/ja/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..999d3a8526 --- /dev/null +++ b/files/ja/web/css/css_writing_modes/index.html @@ -0,0 +1,58 @@ +--- +title: CSS 書字方向 +slug: Web/CSS/CSS_Writing_Modes +tags: + - CSS + - CSS 書字方向 + - リファレンス + - 日本語処理 + - 概要 +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

CSS 書字方向 (CSS Writing Modes) は CSS モジュールの一つで、様々な国の書字方向、例えば左書き (ラテン系やインド語系の文章)、右書き (ヘブライ語やアラビア語の文章)、双方向 (左書きと右書きが混在する場合)、縦書き (一部のアジア言語で使われます) などを定義します。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("glyph-orientation-horizontal")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}初回定義
diff --git a/files/ja/web/css/cssom_view/index.html b/files/ja/web/css/cssom_view/index.html new file mode 100644 index 0000000000..3978a9a3ed --- /dev/null +++ b/files/ja/web/css/cssom_view/index.html @@ -0,0 +1,61 @@ +--- +title: CSSOM View +slug: Web/CSS/CSSOM_View +tags: + - CSS + - CSSOM + - CSSOM View + - Layout + - Reference + - 概要 +translation_of: Web/CSS/CSSOM_View +--- +
{{CSSRef}}
+ +

CSSOM View は CSS のモジュールの一つで、文書の表示方法、特にスクロールの振る舞いを操作できるようにするものです。

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("scroll-behavior")}}
    • +
+
+ +

ガイド

+ +
+
座標系
+
モニター上のウィンドウ、モバイル機器のビューポート、印刷時の紙上の位置などのディスプレイコンテキストにおける位置を特定するために使われる座標系についてのガイドです。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View')}}{{Spec2('CSSOM View')}}初回定義
+ +

ブラウザーの対応

+ +

scroll-behavior プロパティ

+ +
+ + +

{{Compat("css.properties.scroll-behavior")}}

+
diff --git a/files/ja/web/css/cursor/index.html b/files/ja/web/css/cursor/index.html new file mode 100644 index 0000000000..e488510257 --- /dev/null +++ b/files/ja/web/css/cursor/index.html @@ -0,0 +1,331 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Arrow + - CSS + - CSS Property + - CSS プロパティ + - Cursor + - Custom Cursor + - Reference + - UI + - mouse + - pointer + - 'recipe:css-property' + - カスタムカーソル + - カーソル + - ポインター + - マウス +translation_of: Web/CSS/cursor +--- +

{{CSSRef}}

+ +

cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+cursor: pointer;
+cursor: auto;
+
+/* URL とキーワードによる代替 */
+cursor: url(hand.cur), pointer;
+
+/* URL と座標とキーワードによる代替 */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* グローバル値 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

cursor プロパティはゼロ個以上の <url> をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

+ +

それぞれの <url> には二つの空白で区切った数値を続けることができ、 <x><y> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。

+ +

例えば、これは <url> 値を使用して二つの画像を指定し、 <x><y> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは progress キーワードで代替されるように指定しています。

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

値

+ +
+
<url>
+ url(…) の形式か、又はカンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の {{cssxref("<url>")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。 +
<x> <y> {{experimental_inline}}
+
任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。
+
キーワード値
+
+

値の上にマウスを当てると、各項目の実際の表示を確認できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
カテゴリCSS 値例説明
一般auto現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
defaultdefault.gifプラットフォームに依存する既定のカーソルです。ふつうは矢印です。
noneカーソルを表示しません。
リンクおよび状態context-menucontext-menu.pngコンテキストメニューが利用できることを示します。
helphelp.gifヘルプが使用可能であることを示します。
pointerpointer.gifカーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
progressprogress.gifバックグラウンドでプログラムがビジー状態dが、 (wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
waitwait.gifプログラムがビジー状態で、 (progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
選択cellcell.gif表のセルまたは一連のセルが選択できることを示します。
crosshaircrosshair.gif十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
texttext.gifテキストを選択可能であることを示します。通常、 I ビームが表示されます。
vertical-textvertical-text.gif縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ＆ドロップaliasalias.gifエイリアスやショートカットが作成されることを示します。
copycopy.gif何かがコピーされることを示します。
movemove.gif何かが移動されることを示します。
no-dropno-drop.gif現在の位置にアイテムがドロップできないことを示します。
+ {{bug("275173")}}: Windows および Mac OS X では、 no-drop が not-allowed と同じです。
not-allowednot-allowed.gif要求された操作が受け付けられないことを示します。
grabgrab.gif何かがグラブ (移動のためにドラッグ) することができることを示します。
grabbinggrabbing.gif何かがグラブ (移動のためにドラッグ) されようとしていることを示します。
サイズ変更＆スクロールall-scrollall-scroll.gif何かが任意の方向にスクロール (パン) 可能であることを示します。
+ {{bug("275174")}}: Windows では、 all-scroll は move 同じです。
col-resizecol-resize.gifアイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
row-resizerow-resize.gifアイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
n-resize上方向へのサイズ変更カーソルの例辺が移動できることを表します。例えば、 se-resize のカーソルはボックスの南東 (south-east) の角から移動を開始した時に使われます。
+ 環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize および s-resize は ns-resize と同じです。
e-resize右方向へのサイズ変更カーソルの例
s-resize下方向へのサイズ変更カーソルの例
w-resize左方向へのサイズ変更カーソルの例
ne-resize右上方向へのサイズ変更カーソルの例
nw-resize左上方向へのサイズ変更カーソルの例
se-resize右下方向へのサイズ変更カーソルの例
sw-resize左下方向へのサイズ変更カーソルの例
ew-resize3-resize.gif双方向へのサイズ変更が可能であることを示します。
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
拡大/縮小zoom-inzoom-in.gif +

拡大/縮小が可能であることを示す

+
zoom-outzoom-out.gif
+
+
+ +

使用上の注意

+ +

仕様書では cursor について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。

+ +

カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

カーソルの種類の設定

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* URL を使用する場合は、代替のキーワード値が必要です。 */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}幾つかのキーワード、ポジション構文、 url() 関数形式の追加
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.properties.cursor")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/custom-ident/index.html b/files/ja/web/css/custom-ident/index.html new file mode 100644 index 0000000000..0770a40aac --- /dev/null +++ b/files/ja/web/css/custom-ident/index.html @@ -0,0 +1,134 @@ +--- +title: +slug: Web/CSS/custom-ident +tags: + - CSS + - CSS Data Type + - Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/custom-ident +--- +
{{CSSRef}}
+ +

<custom-ident> は CSS のデータ型で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。

+ +

構文

+ +

<custom-ident> の構文は CSS の識別子 (プロパティ名など) に似ていますが、大文字と小文字を区別する点が違います。これは次の文字から成る文字の並びです:

+ +
    +
  • 任意のアルファベット (A-Z, a-z)
    • +
  • 任意の数字 (0-9)
    • +
  • ハイフン (-)
    • +
  • アンダースコア (_)
    • +
  • エスケープ文字 (バックスラッシュ \ に続く)
    • +
  • Unicode 文字 (バックスラッシュ \ と、それに続く 1 - 6 個の16進値の形式をとる、Unicode コードポイント）
    • +
+ +

このデータ値は大文字と小文字を区別するため、id1、Id1、iD1、ID1 はすべて異なった識別子です。逆に、別のエスケープ方式を使っていますが、 toto\? と toto\3F は同じ識別子です。

+ +

禁止されている値

+ +

<custom-ident> を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("<string>")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (-) および、それら続くものであってはなりません。

+ +

曖昧さを避けるため、 <custom-ident> を使用する各プロパティは、特定の値の使用を禁止しています:

+ +
+
{{CSSxRef("animation-name")}}
+
グローバル CSS 値 (unset、 initial、そして inherit) を禁止し、 none も禁止しています。
+
{{CSSxRef("counter-reset")}}
+
{{CSSxRef("counter-increment")}}
+
グローバル CSS 値 (unset、 initial、そして inherit) を禁止し、 none も禁止しています。
+
{{CSSxRef("@counter-style")}}
+
{{CSSxRef("list-style-type")}}
+
グローバル CSS 値 (unset、 initial、そして inherit) および none、 inline 、そして outside の値を禁止しています。また、かなりの数の定義済みの値が様々なブラウザーに実装されています: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, and disclosure-close.
+
{{CSSxRef("grid-row-start")}}
+ {{CSSxRef("grid-row-end")}}
+ {{CSSxRef("grid-column-start")}}
+ {{CSSxRef("grid-column-end")}}
+
span 値を禁止しています。
+
{{CSSxRef("will-change")}}
+
グローバル CSS 値 (unset、 initial、そして inherit) および will-change、 auto、 scroll-position そして contents の値を禁止しています。
+
+ +

例

+ +

有効な識別子

+ +
nono79            アルファベットと数字の組み合わせ
+ground-level      アルファベットとダッシュの組み合わせ
+-test             ダッシュとそれに続くアルファベット
+_internal         アンダースコアとそれに続くアルファベット
+\22 toto          Unicode 文字とそれに続くアルファベット
+bili\.bob         ピリオドは正しくエスケープされています
+
+ +

無効な識別子

+ +
34rem             数字で始まってはいけません
+-12rad            ダッシュで始まって数字が続いてはいけません
+bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけです
+--toto            2 つのダッシュで始まってはいけません
+'bilibob'         <string> です
+"bilibob"         <string> です
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}}{{Spec2('CSS Will Change')}}{{CSSxRef("will-change")}} で除外する値を定義。
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}}{{Spec2('CSS3 Counter Styles')}}キーワードの有限リストの代わりに <custom-ident> を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}}{{Spec2('CSS3 Lists')}}<identifier> から <custom-ident> へ改名。使い方を新しい counter-set プロパティへ追加。
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}}{{Spec2('CSS3 Animations')}}{{CSSxRef("animation-name")}} で除外する値を定義。
{{SpecName('CSS3 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS3 Values')}}<identifier> から <custom-ident> へ改名。擬似型とし、除外値の使用を禁止した。
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。

+ +

関連情報

+ +
    +
  • {{CSSxRef("<ident>")}}
    • +
diff --git a/files/ja/web/css/descendant_combinator/index.html b/files/ja/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..b8fdf4239a --- /dev/null +++ b/files/ja/web/css/descendant_combinator/index.html @@ -0,0 +1,109 @@ +--- +title: 子孫結合子 +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Reference + - Selector + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

子孫結合子 (descendant combinator) — 通常は単一の空白文字 ( ) で表される — は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。子孫結合子を利用したセレクターは子孫セレクターと呼ばれます。

+ +
/* "my-things" リストの子孫のリスト項目 */
+ul.my-things li {
+  margin: 2em;
+}
+ +

子孫結合子は、技術的には他の結合子がない2つのセレクターの間にある1つ以上の {{Glossary("CSS")}} {{Glossary("Whitespace", "ホワイトスペース")}}文字 ― 空白文字や4種類の制御文字 (復帰、ページ送り、改行、タブ文字) のうちの1つ ― です。さらに、結合子としてのホワイトスペース文字には任意の数の CSS コメントを含めることができます。

+ +

構文

+ +
セレクター1 セレクター2 {
+  /* プロパティ宣言 */
+}
+ +

例

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", "100%", 160)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}{{Spec2("CSS1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/dimension/index.html b/files/ja/web/css/dimension/index.html new file mode 100644 index 0000000000..88d5afc5df --- /dev/null +++ b/files/ja/web/css/dimension/index.html @@ -0,0 +1,82 @@ +--- +title: dimension +slug: Web/CSS/dimension +tags: + - CSS + - CSS Data Type + - CSS データ型 + - Reference + - dimension + - unit + - value + - 値 + - 単位 +translation_of: Web/CSS/dimension +--- +
{{CSSRef}}
+ +

<dimension> は CSS のデータ型で、 {{CSSxRef("<number>")}} とそれに添付された単位を表します (10px など)。

+ +

CSS は dimension を使用して、距離 ({{CSSxRef("<length>")}})、時間 ({{CSSxRef("<time>")}})、周期 ({{CSSxRef("<frequency>")}})、解像度 ({{CSSxRef("<resolution>")}})、その他の量を指定します。

+ +

構文

+ +

<dimension> の構文は、 {{CSSxRef("<number>")}} とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。

+ +

例

+ +

妥当な dimension

+ +
12px      12ピクセル
+1rem      1rem
+1.2pt     1.2ポイント
+2200ms    2200ミリ秒
+200hz     200ヘルツ
+200Hz     200ヘルツ (値は大文字小文字の区別なし)
+
+ +

妥当ではない dimension

+ +
12 px       単位は数値の直後に来る必要がある。
+12"px"      単位は識別子であり、引用符で囲まない。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS4 Values")}}cap, ic, lh, rlh, vi, vb を追加
{{SpecName("CSS3 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS3 Values")}}ch, rem, vw, vw, vmin, vmax, Q を追加
{{SpecName("CSS2.1", "syndata.html#numbers", "<dimension>")}}{{Spec2("CSS2.1")}}Numbers and Length において定義
{{SpecName("CSS1", "", "<dimension>")}}{{Spec2("CSS1")}}"length units" のもとに初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.types.dimension")}}

diff --git a/files/ja/web/css/direction/index.html b/files/ja/web/css/direction/index.html new file mode 100644 index 0000000000..17d49de476 --- /dev/null +++ b/files/ja/web/css/direction/index.html @@ -0,0 +1,99 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/direction +--- +
{{CSSRef}}
+ +

CSS の direction プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl を、それ以外では ltr を使います。

+ +
{{EmbedInteractiveExample("pages/css/direction.html")}}
+ + + +

通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の dir 属性を使うなどして行うほうがよいでしょう。

+ +

このプロパティは基本的な文章の方向と {{Cssxref("unicode-bidi")}} プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。

+ +

HTML の dir 属性と違って、direction プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。

+ +

direction プロパティと {{cssxref("unicode-bidi")}} プロパティは、 {{cssxref("all")}} 短縮プロパティの影響を受けない唯一のプロパティです。

+ +

{{cssinfo}}

+ +

構文

+ +
/* Keyword values */
+direction: ltr;
+direction: rtl;
+
+/* Global values */
+direction: inherit;
+direction: initial;
+direction: unset;
+ +

値

+ +
+
ltr
+
デフォルト値です。テキストと他の要素は左から右に進みます
+
rtl
+
テキストと他の要素は右から左に進みます
+
+ +

インラインレベル要素で direction プロパティに効果を持たせたいときは、{{Cssxref("unicode-bidi")}} プロパティの値が embed もしくは override である必要があります。

+ +

形式文法

+ +
{{csssyntax("direction")}}
+ +

例

+ +
blockquote {
+  direction: rtl;
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}変更なし
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザ実装状況

+ +
+
+ + +

{{Compat("css.properties.direction")}}

+
+
+ +

関連情報

+ +
    +
  • {{Cssxref("unicode-bidi")}}
    • +
  • {{Cssxref("writing-mode")}}
    • +
diff --git a/files/ja/web/css/display-box/index.html b/files/ja/web/css/display-box/index.html new file mode 100644 index 0000000000..c17806224e --- /dev/null +++ b/files/ja/web/css/display-box/index.html @@ -0,0 +1,127 @@ +--- +title: +slug: Web/CSS/display-box +tags: + - CSS + - CSS データ型 + - CSS 表示 + - Reference + - display-box +translation_of: Web/CSS/display-box +--- +
{{CSSRef}}
+ +

これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。

+ +

構文

+ +

有効な <display-box> の値は以下のとおりです。

+ +
+
contents {{Experimental_Inline}}
+
これらの要素は自分自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 contents の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。
+
+ ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。
+
none
+
要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
+ 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに {{CSSxRef("visibility")}} プロパティを使用してください。
+
+ +

アクセシビリティの考慮

+ +

多くのブラウザーの現在の実装では、アクセシビリティツリーから display の値が contents である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは CSSWG 仕様書によれば、正しくない動作です。

+ + + +

例

+ +

最初の例では、 secret クラスの段落に display: none を設定します。ボックスとその内容は表示されなくなります。

+ +

display: none

+ +

HTML

+ +
<p>Visible text</p>
+<p class="secret">Invisible text</p>
+ +

CSS

+ +
p.secret {
+  display: none;
+}
+ +

結果

+ +

{{EmbedLiveSample("display_none", "100%", 60)}}

+ +

display: contents

+ +

この例では、外側の {{htmlelement("div")}} が2ピクセルの赤い境界線と 300px の幅を持っています。しかし、 display: contents も指定されているので、この <div> は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。

+ +

HTML

+ +
<div class="outer">
+  <div>Inner div.</div>
+</div>
+
+ +

CSS

+ +
.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer > div {
+  border: 1px solid green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("display_contents", 300, 60)}}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-box', 'display-box')}}{{Spec2('CSS3 Display')}}
+ +

ブラウザーの互換性

+ + + +

contents の対応

+ +

{{Compat("css.properties.display.contents", 10)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/display-inside/index.html b/files/ja/web/css/display-inside/index.html new file mode 100644 index 0000000000..25d3c62a77 --- /dev/null +++ b/files/ja/web/css/display-inside/index.html @@ -0,0 +1,122 @@ +--- +title: +slug: Web/CSS/display-inside +tags: + - CSS + - CSS 表示 + - Reference + - display + - display-inside +translation_of: Web/CSS/display-inside +--- +
{{CSSRef}}
+ +

以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-outside>")}} のキーワードと共に使用されます。

+ +

構文

+ +

有効な <display-inside> の値は以下の通りです。

+ +
+
flow {{Experimental_Inline}}
+
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。 +

外部表示種別が inline または run-in であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。

+ +

ほかのプロパティ ({{cssxref("position")}}, {{cssxref("float")}}, {{cssxref("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。

+
+
flow-root
+
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
+
table
+
HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
+
flex
+
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
+
grid
+
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
+
ruby {{Experimental_Inline}}
+
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
+
+ +
+

メモ: 二つの値の構文に対応しているブラウザーは、 display: flex や display: grid などの内部表示種別のみが指定されていると、外部表示種別を block に設定します。これで期待通りに動作します。例えば、ある要素を display: grid に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

+
+ +

例

+ +

この例では、親ボックスは display: flow-root となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。

+ +

HTML

+ +
<div class="box">
+  <div class="float">I am a floated box!</div>
+  <p>I am content inside the container.</p>
+</div>
+
+ +

CSS

+ +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    display: flow-root;
+}
+
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 180)}}

+ +

ブラウザーの互換性

+ + + +

複数のキーワードの対応

+ +

{{Compat("css.properties.display.multi-keyword_values", 10)}}

+ + + +

flow-root の対応

+ +

{{Compat("css.properties.display.flow-root", 10)}}

+ +

table の対応

+ +

{{Compat("css.properties.display.table_values", 10)}}

+ +

grid の対応

+ +

{{Compat("css.properties.display.grid", 10)}}

+ +

flex の対応

+ +

{{Compat("css.properties.display.flex", 10)}}

+ +

ruby の対応

+ +

{{Compat("css.properties.display.ruby_values", 10)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/display-internal/index.html b/files/ja/web/css/display-internal/index.html new file mode 100644 index 0000000000..86170edf18 --- /dev/null +++ b/files/ja/web/css/display-internal/index.html @@ -0,0 +1,131 @@ +--- +title: +slug: Web/CSS/display-internal +tags: + - CSS + - CSS Data Type + - CSS Display + - Data Type + - Reference + - display-internal +translation_of: Web/CSS/display-internal +--- +
{{CSSRef}}
+ +

table や ruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

+ +

構文

+ +

有効な <display-internal> の値は次の通りです。

+ +
+
table-row-group
+
これらの要素は HTML の {{HTMLElement("tbody")}} 要素のように動作します。
+
table-header-group
+
これらの要素は HTML の {{HTMLElement("thead")}} 要素のように動作します。
+
table-footer-group
+
これらの要素は HTML の {{HTMLElement("tfoot")}} 要素のように動作します。
+
table-row
+
これらの要素は HTML の {{HTMLElement("tr")}} 要素のように動作します。
+
table-cell
+
これらの要素は HTML の {{HTMLElement("td")}} 要素のように動作します。
+
table-column-group
+
これらの要素は HTML の {{HTMLElement("colgroup")}} 要素のように動作します。
+
table-column
+
これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。
+
table-caption
+
これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。
+
ruby-base {{Experimental_Inline}}
+
これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。
+
ruby-text {{Experimental_Inline}}
+
これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。
+
ruby-base-container {{Experimental_Inline}}
+
これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します。
+
ruby-text-container {{Experimental_Inline}}
+
これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。
+
+ +

例

+ +

CSS テーブルの例

+ +

以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。

+ +

HTML

+ +
<main>
+  <div>
+    <label for="name">Name</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Age</label>
+    <input type="text" id="age" name="age">
+  </div>
+</main>
+ +

CSS

+ +
main {
+  display: table;
+}
+
+div {
+  display: table-row;
+}
+
+label, input {
+  display: table-cell;
+  margin: 5px;
+}
+ +

結果

+ +

{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}{{Spec2('CSS3 Display')}}
+ +

ブラウザーの互換性

+ + + +

対応している table の値

+ +

table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group

+ +

{{Compat("css.properties.display.table_values", 10)}}

+ +

対応している ruby の値

+ +

ruby, ruby-base, ruby-base-container, ruby-text, ruby-text-container

+ +

{{Compat("css.properties.display.ruby_values", 10)}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-listitem>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    • {{CSSxRef("<display-legacy>")}}
      • +
    +
    • +
diff --git a/files/ja/web/css/display-legacy/index.html b/files/ja/web/css/display-legacy/index.html new file mode 100644 index 0000000000..8b608159ad --- /dev/null +++ b/files/ja/web/css/display-legacy/index.html @@ -0,0 +1,122 @@ +--- +title: +slug: Web/CSS/display-legacy +tags: + - CSS + - CSS Data Type + - CSS Display + - Data Type + - Reference + - display-legacy +translation_of: Web/CSS/display-legacy +--- +
{{CSSRef}}
+ +

CSS 2 では display プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。

+ +

構文

+ +

有効な <display-legacy> は以下のとおりです。

+ +
+
inline-block
+
この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。
+
+ これは inline flow-root と等価です。
+
inline-table
+
inline-table は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。
+
+ これは inline table と等価です。
+
inline-flex
+
要素は、インライン要素のようにふるまいつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
+
+ これは inline flex と等価です。
+
inline-grid
+
要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
+
+ これは inline grid と等価です。
+
+ +

例

+ +

以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。

+ +
+

HTML

+ +
<div class="container">
+  <div>Flex Item</div>
+  <div>Flex Item</div>
+</div>
+
+Not a flex item
+
+ +

CSS

+ +
.container {
+  display: inline-flex;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 300, 150)}}

+
+ +

新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。

+ +
.container {
+  display: inline flex;
+}
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}}{{Spec2('CSS3 Display')}}
+ +

ブラウザーの互換性

+ + + +

inline-block の対応

+ +

{{Compat("css.properties.display.inline-block", 10)}}

+ +

inline-table の対応

+ +

{{Compat("css.properties.display.inline-table", 10)}}

+ +

inline-flex の対応

+ +

{{Compat("css.properties.display.inline-flex", 10)}}

+ +

inline-grid の対応

+ +

{{Compat("css.properties.display.inline-grid", 10)}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-listitem>")}}
      • +
    • {{CSSxRef("<display-internal>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    +
    • +
diff --git a/files/ja/web/css/display-listitem/index.html b/files/ja/web/css/display-listitem/index.html new file mode 100644 index 0000000000..11d0b6586a --- /dev/null +++ b/files/ja/web/css/display-listitem/index.html @@ -0,0 +1,65 @@ +--- +title: +slug: Web/CSS/display-listitem +tags: + - CSS + - CSS データ型 + - CSS 表示 + - Reference + - list-item +translation_of: Web/CSS/display-listitem +--- +
{{CSSRef}}
+ +

list-item キーワードは、要素に {{CSSxRef("list-style")}} プロパティで指定された内容 (例えば見出し記号) を含む ::marker 疑似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。

+ +

構文

+ +

list-item 単独の値を指定すると、要素はリストの項目のように動作します。これは {{CSSxRef("list-style-type")}} や {{CSSxRef("list-style-position")}} と共に使用することができます。

+ +

list-item は {{CSSxRef("<display-outside>")}} キーワードのいずれかと、 {{CSSxRef("<display-inside>")}} の flow または flow-root キーワードと組み合わせることもできます。

+ +
+

メモ: 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で flow になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が block になります。

+
+ +

例

+ +

HTML

+ +
<div class="fake-list">I will display as a list item</div>
+
+ +

CSS

+ +
.fake-list {
+  display: list-item;
+  list-style-position: inside;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 150)}}

+ +

ブラウザーの互換性

+ + + +

list-item の対応

+ +

{{Compat("css.properties.display.list-item", 10)}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-internal>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    • {{CSSxRef("<display-legacy>")}}
      • +
    +
    • +
diff --git a/files/ja/web/css/display-outside/index.html b/files/ja/web/css/display-outside/index.html new file mode 100644 index 0000000000..f96f37ea5d --- /dev/null +++ b/files/ja/web/css/display-outside/index.html @@ -0,0 +1,93 @@ +--- +title: +slug: Web/CSS/display-outside +tags: + - CSS + - CSS Data Type + - CSS Display + - Data Type + - Reference + - display-outside +translation_of: Web/CSS/display-outside +--- +
{{CSSRef}}
+ +

<display-outside> のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の {{CSSxRef("display")}} の外部表示種別を指定します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-inside>")}} のキーワードと共に使用されます。

+ +

構文

+ +

有効な <display-outside> の値は以下の通りです。

+ +
+
block
+
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
+
inline
+
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
+
run-in {{Experimental_Inline}}
+
要素は、ランインボックスを生成します。 display: run-in が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。
+
+ ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。
+
+ +
+

注: 二つの値の構文に対応しているブラウザーは、 display: block や display: inline などの外部表示種別のみが指定されていると、内部表示種別を flow に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

+
+ +

例

+ +

以下の例では、 span 要素 (通常はインライン要素として表示) に display: block が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。

+ +

HTML

+ +
<span>span 1</span>
+<span>span 2</span>
+ +

CSS

+ +
span {
+    display: block;
+    border: 1px solid rebeccapurple;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", 300, 60)}}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}}{{Spec2('CSS3 Display')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.display.display-outside", 10)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/display/index.html b/files/ja/web/css/display/index.html new file mode 100644 index 0000000000..644ae750d3 --- /dev/null +++ b/files/ja/web/css/display/index.html @@ -0,0 +1,341 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - CSS Property + - Reference + - display + - 'recipe:css-property' +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

+ +

正式には、 display プロパティは要素の内部と外部の表示型を設定します。外部の型は要素のフローレイアウトへの参加方法を設定し、内部の型は子要素のレイアウトを設定します。 display のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 display: flex が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。個々の仕様書については、この文書の最後にある表を参照してください。

+ +

構文

+ +

display プロパティは、キーワード値を使用して指定します。キーワード値は以下の 6 つのカテゴリに分類されます。

+ +
.container {
+  display:  [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
+}
+
+ +

外側

+ +
+
{{CSSxRef("<display-outside>")}}
+
これらのキーワードは、本質的に要素のフローレイアウトの役割を表す、要素の外部表示種別を指定します。
+
+ +

{{page("/ja/docs/Web/CSS/display-outside", "Syntax")}}

+ +

内側

+ +
+
{{CSSxRef("<display-inside>")}}
+
これらのキーワードは、要素の内部の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。
+
+ +

{{page("/ja/docs/Web/CSS/display-inside", "Syntax")}}

+ +

リストアイテム

+ +
+
{{CSSxRef("<display-listitem>")}}
+
要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。
+
+ +

{{page("/ja/docs/Web/CSS/display-listitem", "Syntax")}}

+ +

内部

+ +
+
{{CSSxRef("<display-internal>")}}
+
table や ruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。この節ではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。
+
+ +

{{page("/ja/docs/Web/CSS/display-internal", "Syntax")}}

+ +

ボックス

+ +
+
{{CSSxRef("<display-box>")}}
+
これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。
+
+ +

{{page("/ja/docs/Web/CSS/display-box", "Syntax")}}

+ +

従来のもの

+ +
+
{{CSSxRef("<display-legacy>")}}
+
CSS 2 では display プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。
+
+ +

{{page("/ja/docs/Web/CSS/display-legacy", "Syntax")}}

+ +

現在はどちらの構文を使用するべきか

+ +

Level 3 仕様書は display プロパティに二つの値を — 外部および内部の表示型の指定を明示的に行うために — 説明しています。しかし、これはブラウザーの互換性が不十分です。

+ +

<display-legacy> による方法は、単一のキーワード値で同じ結果を生み出すので、二つのキーワード値による指定の対応が進むまで使用してください。例えば、二つの値でインラインのフレックスコンテナーは次のように指定することができます。

+ +
.container {
+  display: inline flex;
+}
+ +

現在は、単一の値を使用して指定することができます。

+ +
.container {
+  display: inline-flex;
+}
+ +

これらの仕様変更の詳細については、display の新しい2つの値の構文への対応の記事を参照してください。

+ +

グローバル

+ +
/* グローバル値 */
+display: inherit;
+display: initial;
+display: unset;
+
+ +

解説

+ +

display に設定できる様々な種類の値の個々のページでは、それらの値が動作する機能の複数の例をを設定しています。 — {{anch("Syntax", "構文")}} の節を参照してください。さらに、以下の資料を参照してください。

+ + + +

CSS フローレイアウト (display: block, display: inline)

+ + + +

display: flex

+ + + +

display: grid

+ + + +

アクセシビリティの考慮

+ +

display: none

+ +

要素の display の値に none を使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。

+ +

要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、読み上げソフトのような支援技術が解析可能な状態を維持するための、プロパティの組み合わせを使用できます。

+ +

display: contents

+ +

大部分のブラウザーの現在の実装では、アクセシビリティツリーから display の値が contents であるすべての要素を削除します (ただし子孫は残ります)。これにより、その要素自身は読み上げソフトでは読み上げられなくなります。これは CSS 仕様書によれば正しくありません。

+ + + +

表

+ +

{{HTMLElement("table")}} 要素の display の値を block、grid、あるいは flex に変更すると、アクセシビリティツリーでの表現が変わります。これにより、表が読み上げ技術によって適切に読み上げられなくなります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

display 値の比較

+ +

この例では、2つのブロックレベルのコンテナー要素があり、それぞれに3つのインラインの子要素があります。その下には、コンテナーに異なる display の値を適用するための洗濯メニューがあり、異なる値が要素のレイアウトとその子要素のレイアウトにどのように影響するかを比較対照することができます。

+ +

コンテナとその子要素には {{cssxref("padding")}} と {{cssxref("background-color")}} が含まれているので、表示値の効果がわかりやすくなっています。

+ +
+

注: 新しい2つの値の構文は、対応がまだかなり限られているため、ここでは一切含めていません。

+
+ +

HTML

+ +
<article class="container">
+  <span>First</span>
+  <span>Second</span>
+  <span>Third</span>
+</article>
+
+<article class="container">
+  <span>First</span>
+  <span>Second</span>
+  <span>Third</span>
+</article>
+
+<div>
+  <label for="display">Choose a display value:</label>
+  <select id="display">
+    <option selected>block</option>
+    <option>inline</option>
+    <option>inline-block</option>
+    <option>none</option>
+    <option>flex</option>
+    <option>inline-flex</option>
+    <option>grid</option>
+    <option>inline-grid</option>
+    <option>table</option>
+    <option>list-item</option>
+  </select>
+</div>
+ +

CSS

+ +
html {
+  font-family: helvetica, arial, sans-serif;
+  letter-spacing: 1px;
+  padding-top: 10px;
+}
+
+article {
+  background-color: red;
+}
+
+article span {
+  background-color: black;
+  color: white;
+  margin: 1px;
+}
+
+article, span {
+  padding: 10px;
+  border-radius: 7px;
+}
+
+article, div {
+  margin: 20px;
+}
+ +

JavaScript

+ +
const articles = document.querySelectorAll('.container');
+const select = document.querySelector('select');
+
+function updateDisplay() {
+  articles.forEach((article) => {
+    article.style.display = select.value;
+  });
+}
+
+select.addEventListener('change', updateDisplay);
+
+updateDisplay();
+ +

Result

+ +

{{EmbedLiveSample('display_value_comparison','100%', 440)}}

+ +
+

注: 上記にリンクされている各個別の表示データ型のページには、より多くの例があります。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}run-in, flow, flow-root, contents, 複数のキーワード値を追加。
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container の値を追加
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}grid box モデルの値を追加
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}flexible box モデルの値を追加
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}テーブルモデルの値と inline-block の値を追加
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}初回定義。基本的な値として none, block, inline, list-item
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.display", 10)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/easing-function/index.html b/files/ja/web/css/easing-function/index.html new file mode 100644 index 0000000000..28ef3b62ad --- /dev/null +++ b/files/ja/web/css/easing-function/index.html @@ -0,0 +1,345 @@ +--- +title: +slug: Web/CSS/easing-function +tags: + - API + - CSS + - CSS Animations + - CSS Data Type + - CSS Transitions + - Data Type + - Layout + - Reference + - easing-function +translation_of: Web/CSS/easing-function +--- +
{{CSSRef}}
+ +

<easing-function> は CSS のデータ型で、アニメーションの間に一次元の値がどれだけの速さで変化するかを記述する数学的な関数を表します。これにより、アニメーションの速度を期間中に変化させることができます。

+ +

イージング関数のうち3次ベジェ曲線のサブセットに含まれるものは、アニメーションの開始と終了を滑らかにすることができるため、よく「スムーズ」イージング関数と呼ばれています。これらの関数は、時間比と出力比を相関させており、どちらも {{cssxref("<number>")}} で表されます。これらの値は 0.0 が初期状態、1.0 が最終状態を表します。

+ +

+ +

特定の関数が使用された場合によっては、計算された出力値がアニメーションの経路の間で、時には 1.0 を超えたり、 0.0 を下回ったりすることがあります。これによってアニメーションが最終状態の後に行ったり、戻ったりすることになります。 {{cssxref("left")}} や {{cssxref("right")}} のような一部のプロパティは、これによって一種の「バウンド」効果を生成します。

+ +

しかし、色の成分の値が 255 を超えたり 0 を下回ったりするように、出力値が取り得る範囲を超えてしまう場合は、その値は取り得る値の中で最も近い値に切り詰められます (色の成分の値であれば、それぞれ 255 および 0 になります)。一部の cubic-bezier() 曲線にはこのような特性があります。

+ +

構文

+ +

イージング関数には、線形関数、3次ベジェ曲線、階段関数の3種類があります。 <easing-function> 型の値は、これら3つの型のうちの1つを使ってイージング関数を記述します。

+ +

イージング関数

+ +

CSS は 3 種類のタイミング関数に対応しています。線形関数と、3次ベジェ曲線のサブセットの関数と、階段関数です。これらの関数でもっとも有用なものは、簡単に指定できるようにキーワードが与えられています。

+ +

線形クラスのイージング関数

+ +
linear
+ +

+ +

The animation moves from beginning to end at a constant rate. This keyword represents the easing function cubic-bezier(0.0, 0.0, 1.0, 1.0).

+ +

cubic-bezier() クラスのイージング関数

+ +

+ +

cubic-bezier() 関数記法は、3次ベジェ曲線 を定義します。この曲線は連続的であり、アニメーションの始まりや終わりを緩やかにするためによく使用されます。このため、イージング関数と呼ばれることもあります。

+ +

3次ベジェ曲線は 4 個の点 P0, P1, P2, P3 によって定義されます。P0 と P3 は曲線の始点と終点であり、 CSS では座標が割合 (横座標は時間の割合、縦座標は出力範囲の割合) であることから、これらの点は固定されています。P0 は (0, 0) で開始時間および初期状態を示し、P3 は (1, 1) で終了時間および最終状態を示します。

+ +

すべての3次ベジェ曲線が数学的な関数 とは限らないため、どの3次ベジェ曲線もイージング関数として適しているわけではありません。すなわち、曲線は横座標で 0 から 1 の値をとります。 P0 および P3 は CSS の定義で固定されているので、P1 および P2 の横座標の値が [0, 1] の範囲にある場合のみ、3次ベジェ曲線は関数であり、それゆえ有効になります。

+ +

P1 または P2 の縦座標の値が [0, 1] の範囲から外れている3次ベジェ曲線では、はずむ効果が得られます。

+ +

不正な cubic-bezier 曲線を指定すると、 CSS はその属性全体を無視します。

+ +
構文
+ +
cubic-bezier(x1, y1, x2, y2)
+
+ +

ここで、

+ +
+
x1, y1, x2, y2
+
3次ベジェ曲線を定義する P1 および P2 点の横座標および縦座標の値を示す {{cssxref("<number>")}} です。x1 および x2 は [0, 1] の範囲にある必要があり、さもないと不正な値になります。
+
+ +

一般的なタイミング関数のキーワード

+ +
ease
+ +

+ +

アニメーション開始時はより急速に加速して、終了に向けて少しずつ緩やかになっていきます。このキーワードは、イージング関数 cubic-bezier(0.25, 0.1, 0.25, 1.0) を表します。この関数は ease-in-out に似ていますが、開始がより急速です。

+ +
ease-in
+ +

+ +

アニメーションの始めは緩やかで、その後次第に加速していき、最終状態に達するとアニメーションは突然停止します。このキーワードはイージング関数 cubic-bezier(0.42, 0.0, 1.0, 1.0) を表します。

+ +
ease-in-out
+ +

+ +

アニメーションは緩やかに始まり、加速し、終了に向けて加速が緩やかになります。このキーワードはイージング関数 cubic-bezier(0.42, 0.0, 0.58, 1.0) を表します。開始時は ease-in 関数に、完了時は ease-out 関数に似ています。

+ +
ease-out
+ +

+ +

アニメーションは急速に始まり、最終状態にかけて次第に緩やかになっていきます。このキーワードはタイミング関数 cubic-bezier(0.0, 0.0, 0.58, 1.0) を表します。

+ +

steps() クラスのタイミング関数

+ +

steps() 関数記法は、出力値の範囲を等間隔に区切るステップ関数を定義します。このステップ関数のサブクラスは、階段関数と呼ばれることもあります。

+ +
構文
+ +
steps(number_of_steps, direction)
+
+ +

ここで、

+ +
+
number_of_steps
+
厳密に正の {{cssxref("<integer>")}} で、ステップ関数を構成する等間隔の段数を示すものです。
+
direction
+
関数が 左連続か右連続 かを表すキーワードです。
+
+
+
    +
  • jump-start は左連続関数を表し、したがってアニメーションの開始時に最初のステップが発生します。
    • +
  • jump-end は右連続関数を表し、したがってアニメーションの完了時に最後のステップが発生します。
    • +
  • jump-both は右および左の連続関数を表し、0%と100%の位置の両方で停止し、アニメーションの繰り返しの間に効果的にステップを入れます。
    • +
  • jump-none どちらの端にもジャンプしません。代わりに、それぞれ区間の 1/n ごとに0%の位置と100%の位置の両方を保持します。
    • +
  • start は jump-start と同等です。
    • +
  • end は jump-end と同等です。
    • +
+
+
end が既定値です。
+
+ +
steps( n, <direction> )
+ +
    +
  • +

    steps(2, jump-start)
    + steps(2, start)

    +
    • +
  • +

    steps(4, jump-end)
    + steps(4, end)

    + four steps, with a jump from the fourth step to the final value at the 100% mark
    • +
  • +

    steps(5, jump-none)

    + five steps, with no jumps, so 20% of the time is at the beginning state or 0% mark and the last 20% is at the final state, or 100% mark
    • +
  • +

    steps(3, jump-both)

    +
    • +
+ +
step-start
+ +

アニメーションはすぐに最終状態に遷移し、最後までその状態を維持します。このキーワードは、イージング関数 steps(1, jump-start) または steps(1, start) を表します。

+ +
step-end
+ +

アニメーションは、終了するまで初期状態のままで、終了時点で直接最終状態にジャンプします。このキーワードは、イージング関数 steps(1, jump-end) または steps(1, end) を表します。

+ +

例

+ +

イージング関数の比較

+ +

この例では、提供されているボタンを使ってアニメーションを開始したり停止したりすることができ、メニューを選択してイージング関数を、利用可能なキーワードに加えていくつかの cubic-bezier() および steps() のオプションの中から選択することができるようになっています。これは、様々なイージング関数を簡単に比較できるようにするためのアイデアです。

+ +

HTML

+ +
<div>
+  <div></div>
+</div>
+<ul>
+  <li>
+    <button class="animation-button">Start animation</button>
+  </li>
+  <li>
+    <label for="easing-select">Choose an easing function:</label>
+    <select id="easing-select">
+      <option selected>linear</option>
+      <option>ease</option>
+      <option>ease-in</option>
+      <option>ease-in-out</option>
+      <option>ease-out</option>
+      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
+      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
+      <option>steps(5, end)</option>
+      <option>steps(3, start)</option>
+      <option>steps(4)</option>
+    </select>
+  </li>
+</ul>
+ +

CSS

+ +
body > div {
+  position: relative;
+  height: 100px;
+}
+
+div > div {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4));
+  border-radius: 50%;
+  top: 25px;
+  animation: 1.5s infinite alternate;
+}
+
+@keyframes move-right {
+  from {
+    left: 10%;
+  }
+
+  to {
+    left: 90%;
+  }
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+ +

JavaScript

+ +
const selectElem = document.querySelector('select');
+const startBtn = document.querySelector('button');
+const divElem = document.querySelector('div > div');
+
+startBtn.addEventListener('click', () => {
+  if(startBtn.textContent === 'Start animation') {
+    divElem.style.animationName = 'move-right';
+    startBtn.textContent = 'Stop animation';
+    divElem.style.animationTimingFunction = selectElem.value;
+  } else {
+    divElem.style.animationName = 'unset';
+    startBtn.textContent = 'Start animation';
+  }
+});
+
+selectElem.addEventListener('change', () => {
+  divElem.style.animationTimingFunction = selectElem.value;
+});
+ +

結果

+ +

{{EmbedLiveSample('Easing_function_comparison', '100%', 200)}}

+ +

cubic-bezier() 関数の例

+ +

これらは CSS における正しい3次ベジェ曲線の使い方です。

+ +
/* 4 つの値が [0, 1] の範囲に含まれる、標準的なベジェ曲線 */
+cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+/* <整数値> は <数量> でもあるので、<整数値> を用いても有効です。 */
+cubic-bezier(0, 0, 1, 1)
+
+/* 横軸で負数を用いるのは有効であり、はずむ効果をもたらします。 */
+cubic-bezier(0.1, -0.6, 0.2, 0)
+
+/* 横軸において 1.0 を超える値も有効です。 */
+cubic-bezier(0, 1.1, 0.8, 4)
+
+ +

これらの3次ベジェ曲線の定義は無効です。

+ +
/* アニメーションさせるものは色ですが、
+   ベジェ曲線に用いるのは割合の数値です。 */
+cubic-bezier(0.1, red, 1.0, green)
+
+/* 定義域は [0, 1] の範囲であったり、曲線が時間の
+関数でなかったりする場合です。 */
+cubic-bezier(2.45, 0.6, 4, 0.1)
+
+/* 2 つの点を定義する必要があり、それらに既定値はありません。 */
+cubic-bezier(0.3, 2.1)
+
+/* 縦座標は [0, 1] の範囲にある必要があり、
+   さもないと曲線はタイミング関数になりません。 */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)
+ +

steps() 関数の例

+ +

p>以下のタイミング関数は妥当です。

+ + + +
/* 5段階あり、最後の段階は
+   アニメーションの完了直前に発生します。 */
+steps(5, end)
+
+/* 2段階の階段で、最初の段階は
+   アニメーションの開始時に発生します。 */
+steps(2, start)
+
+/* 第二の引数は省略可能です。 */
+steps(2)
+
+ +

以下のタイミング関数は不正です。

+ +
/* 最初の引数は <integer> でなければならず、
+   整数と同じ値であっても実数であってはいけません。 */
+steps(2.0, jump-end)
+
+/* 段数は負の値であってはいけません。 */
+steps(-3, start)
+
+/* 段数は少なくとも 1 つ必要です。 */
+steps(0, jump-none)
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}{{Spec2('CSS3 Animations')}}<single-timing-function> を CSS トランジションモジュールの <single-transition-timing-function> の別名として定義
{{SpecName('CSS Easing 1', '#typedef-easing-function', '<easing-function>')}}{{Spec2('CSS Easing 1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.easing-function", 2)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/element()/index.html b/files/ja/web/css/element()/index.html new file mode 100644 index 0000000000..3eddb0dbbf --- /dev/null +++ b/files/ja/web/css/element()/index.html @@ -0,0 +1,103 @@ +--- +title: element() +slug: Web/CSS/element() +tags: + - CSS + - CSS 関数 + - CSS4-images + - Reference + - ウェブ + - レイアウト +translation_of: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の element() 関数は、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。

+ +

特に便利な使い道は、 {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。

+ +

Gecko ブラウザでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。

+ +

構文

+ +
element(id)
+ +

where:

+ +
+
id
+
背景として使う要素の ID です。要素の HTML 属性 #id に定義されているものです。
+
+ +

例

+ +

この例は -moz-element() に対応している Firefox で実動例を見ることができます。

+ +

ある程度現実的な例

+ +

この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。

+ +
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+ +

"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの、背景に使われています。

+ +

example1.png

+ +

ある程度とっぴな例

+ +

この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。

+ +
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+ +

example2.png

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}CSS3 Images から延期
+ +

ブラウザーの対応

+ + + +
{{Compat("css.types.image.element")}}
+ +

関連情報

+ +
    +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("image-set", "image-set()")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
  • {{domxref("document.mozSetImageElement()")}}
    • +
diff --git a/files/ja/web/css/empty-cells/index.html b/files/ja/web/css/empty-cells/index.html new file mode 100644 index 0000000000..dc203bac4a --- /dev/null +++ b/files/ja/web/css/empty-cells/index.html @@ -0,0 +1,121 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - CSS プロパティ + - CSS 表 + - リファレンス +translation_of: Web/CSS/empty-cells +--- +
{{CSSRef}}
+ +

CSS の empty-cells プロパティは、目に見える内容を持たない{{htmlelement("table", "表")}}のセルの、周囲の境界と背景を{{glossary("user agent", "ユーザーエージェント")}}がどのように描画するかを指定します。

+ +
{{EmbedInteractiveExample("pages/css/empty-cells.html")}}
+ + + +

このプロパティは、 {{cssxref("border-collapse")}} プロパティが separate の場合のみ効果があります。

+ +

構文

+ +
/* キーワード値 */
+empty-cells: show;
+empty-cells: hide;
+
+/* グローバル値 */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+
+ +

empty-cells プロパティは、以下のキーワード値のうちの一つで指定します。

+ +

値

+ +
+
show
+
通常のセルのように、境界や背景を描くことを示すキーワードです。
+
hide
+
境界や背景を描かないことを示すキーワードです。
+
+ +

例

+ +
{{csssyntax}}
+
+ +

例

+ +

HTML

+ +
<table class="table_1">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+<br>
+<table class="table_2">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+
+ +

CSS

+ +
.table_1 {
+  empty-cells: show;
+}
+
+.table_2 {
+  empty-cells: hide;
+}
+
+td,
+th {
+  border: 1px solid gray;
+  padding: 0.5rem;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Examples', '100%', '200') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}} 
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.empty-cells")}}

diff --git a/files/ja/web/css/env()/index.html b/files/ja/web/css/env()/index.html new file mode 100644 index 0000000000..e8112419cf --- /dev/null +++ b/files/ja/web/css/env()/index.html @@ -0,0 +1,138 @@ +--- +title: env() +slug: Web/CSS/env() +tags: + - CSS + - CSS Function + - CSS Variables + - CSS 変数 + - CSS 関数 + - Draft + - Function + - Reference + - Variables + - env + - env() + - 変数 + - 関数 +translation_of: Web/CSS/env() +--- +
{{CSSRef}}
+ +

env() は CSS の関数で、ユーザーエージェントが定義した環境変数の値を、 {{cssxref("var")}} 関数やカスタムプロパティと同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。

+ +

ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 env() 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。

+ +
<meta name="viewport" content="viewport-fit=cover" />
+ +
body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}
+ +

加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 env() 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 メディアクエリ規則) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。

+ +

もともとは iOS ブラウザーで、開発者がコンテンツをビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている safe-area-inset-* の値を使用することで、矩形以外の画面を使用している閲覧者でも、コンテンツが見えることを保証するのに役立ちます。

+ +

構文

+ +
/* 代替値なしで4つの安全な矩形までの寸法値を使用 */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* 代替値付きで使用 */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+
+ +

値

+ +
+
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
+
safe-area-inset-* の値は4つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、コンテンツを置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなど、矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い時計の画面 — では、矩形の中のすべてのコンテンツが表示できるような矩形から、ユーザーエージェントが設定します。
+
+ +

注: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

以下の例では、 env() の第2引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。

+ +
<p>
+  お使いのブラウザーが <code>env()</code> 関数に対応している場合、
+  この段落のテキストと左の境界の間に 50px のパディングが設定されますが、
+  上、右、下には設定されません。
+  これは、他の CSS プロパティとは異なり、ユーザーエージェントプロパティ名は
+  大文字・小文字が区別されるため、 <code>padding: 0 0 0 50px</code>
+  と同等の CSS になるからです。
+</p>
+ +
p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}
+ +

{{EmbedLiveSample("Examples")}}

+ +

値の例

+ +
padding: env(safe-area-inset-bottom, 50px); /* 画面が矩形のユーザーエージェントではゼロ */
+padding: env(Safe-area-inset-bottom, 50px); /* UA プロパティは大文字・小文字を区別するため 50px */
+padding: env(x, 50px 20px); /* x が妥当な環境変数でなければ padding: '50px 20px' が設定される */
+padding: env(x, 50px, 20px); /* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 */
+
+ +

代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。

+ +

注: ユーザーエージェントプロパティは all プロパティでリセットされません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.custom-property.env")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/blur()/index.html b/files/ja/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..5ccc38f287 --- /dev/null +++ b/files/ja/web/css/filter-function/blur()/index.html @@ -0,0 +1,69 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

blur() は CSS の関数で、入力画像にガウシアンぼかしを適用します。返値は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

構文

+ +
blur(radius)
+ +

引数

+ +
+
radius
+
ぼかしの半径で、 {{cssxref("<length>")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 0 の値は入力を変更しません。補間時の欠損値は 0 です。
+
+ +

例

+ +

ピクセル数と rem を用いた blur の設定

+ +
blur(0)        /* 効果なし */
+blur(8px)      /* 半径 8px でぼかす */
+blur(1.17rem)  /* 半径 1.17rem でぼかす */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-blur', 'blur()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/brightness()/index.html b/files/ja/web/css/filter-function/brightness()/index.html new file mode 100644 index 0000000000..afbd7f718f --- /dev/null +++ b/files/ja/web/css/filter-function/brightness()/index.html @@ -0,0 +1,70 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

brightness() は CSS の関数で、入力画像に線形乗算を適用し、明るく又は暗くします。その結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

構文

+ +
brightness(amount)
+ +

引数

+ +
+
amount
+
結果の明るさで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% 未満の値では画像が暗くなり、 100% を超える値では画像が明るくなります。 0% の値では画像が完全に黒くなり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
+
+ +

例

+ +

数値とパーセント値を使用した brightness の設定

+ +
brightness(0%)   /* 完全に黒 */
+brightness(0.4)  /* 明るさ40% */
+brightness(1)    /* 効果なし */
+brightness(200%) /* 明るさ2倍 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-brightness', 'brightness()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/contrast()/index.html b/files/ja/web/css/filter-function/contrast()/index.html new file mode 100644 index 0000000000..168dc864cb --- /dev/null +++ b/files/ja/web/css/filter-function/contrast()/index.html @@ -0,0 +1,69 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast() +tags: + - CSS + - CSS 関数 + - Reference + - フィルター効果 +translation_of: Web/CSS/filter-function/contrast() +--- +
{{cssref}}
+ +

contrast() は CSS の 関数で、入力画像のコントラストを調整します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
+ + + +

構文

+ +
contrast(amount)
+ +

引数

+ +
+
amount
+
結果のコントラストで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% 未満の値ではコントラストが下がり、 100% を超える値ではコントラストが上がります。 0% の値では画像が完全に灰色になり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
+
+ +

例

+ +

数値とパーセント値を使用した contrast の設定

+ +
contrast(0)     /* 完全な灰色 */
+contrast(65%)   /* 65%のコントラスト */
+contrast(1)     /* 効果なし */
+contrast(200%)  /* 2倍のコントラスト */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-contrast', 'contrast()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/drop-shadow()/index.html b/files/ja/web/css/filter-function/drop-shadow()/index.html new file mode 100644 index 0000000000..72f9daa09b --- /dev/null +++ b/files/ja/web/css/filter-function/drop-shadow()/index.html @@ -0,0 +1,65 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow() +tags: + - CSS + - CSS 関数 + - Reference + - フィルター効果 + - 関数 +translation_of: Web/CSS/filter-function/drop-shadow() +--- +
{{cssref}}
+ +

drop-shadow() は CSS の関数で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
+ + + +

ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。

+ +
+

注: この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 box-shadow プロパティは要素のボックス全体の背後に長方形の影を作成しますが、 drop-shadow() フィルター関数は画像そのものの形 (アルファチャネル) に合った影を作成します。

+
+ +

構文

+ +
drop-shadow(offset-x offset-y blur-radius color)
+ +

drop-shadow() 関数は <shadow> 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 inset キーワードがと spread 引数が許可されないという例外があります。

+ +

引数

+ +
+
offset-x offset-y (必須)
+
影のオフセットを指定する2つの {{cssxref("<length>")}} 値です。 offset-x は水平方向の距離を表し、負の数で影を要素の左方に配置します。 offset-y は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も 0 であれば、影は要素の真後ろに配置されます。
+
blur-radius (任意)
+
影をぼかす半径で、 {{cssxref("<length>")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の 0 になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。
+
color (任意)
+
影の色で、 {{cssxref("<color>")}} で指定します。指定されない場合の既定値は、ブラウザーによります。 Firefox 及び Internet Explorer {{cssxref("color")}} プロパティの値が使用されます。一方、 WebKit の影は既定で透明であり、この値を省略する使い方は限られています。
+
+ +

例

+ +
/* 10px のぼかしで広がりのない黒い影 */
+drop-shadow(16px 16px 10px black)
+
+/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */
+drop-shadow(.5rem .5rem 1rem #e23)
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • CSS の {{cssxref("box-shadow")}} プロパティ
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/grayscale()/index.html b/files/ja/web/css/filter-function/grayscale()/index.html new file mode 100644 index 0000000000..2f5eb6f89c --- /dev/null +++ b/files/ja/web/css/filter-function/grayscale()/index.html @@ -0,0 +1,42 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale() +tags: + - CSS + - CSS Function + - CSS 関数 + - Filter Effects + - Reference + - フィルター効果 +translation_of: Web/CSS/filter-function/grayscale() +--- +
{{cssref}}
+ +

CSS の grayscale() 関数は、入力画像をグレースケールに変換します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
+ + + +

構文

+ +
grayscale(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% の値では完全にグレースケールになり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
grayscale(0)     /* 効果なし */
+grayscale(.7)    /* 70% グレースケール */
+grayscale(100%)  /* 完全なグレースケール */
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/ja/web/css/filter-function/hue-rotate()/index.html b/files/ja/web/css/filter-function/hue-rotate()/index.html new file mode 100644 index 0000000000..bdae24f1cc --- /dev/null +++ b/files/ja/web/css/filter-function/hue-rotate()/index.html @@ -0,0 +1,70 @@ +--- +title: hue-rotate() +slug: Web/CSS/filter-function/hue-rotate() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/hue-rotate() +--- +
{{cssref}}
+ +

hue-rotate() は CSS の関数で、要素およびその中身のコンテンツの色相環を回転します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}
+ + + +

構文

+ +
hue-rotate(angle)
+ +

引数

+ +
+
angle
+
入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 0deg は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は 0 です。最小値又は最大値はなく、 hue-rotate(Ndeg) は N を 360 で割った余りと等価です。
+
+ +

例

+ +
hue-rotate(-90deg)  /* 270度の回転と同じ */
+hue-rotate(0deg)    /* 効果なし */
+hue-rotate(90deg)   /* 90度の回転 */
+hue-rotate(.5turn)  /* 180度の回転 */
+hue-rotate(405deg)  /* 45度の回転と同じ */
+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-hue-rotate', 'hue-rotate()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/index.html b/files/ja/web/css/filter-function/index.html new file mode 100644 index 0000000000..cf21e6bdf8 --- /dev/null +++ b/files/ja/web/css/filter-function/index.html @@ -0,0 +1,65 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - CSS + - CSS データ型 + - Reference + - フィルター効果 +translation_of: Web/CSS/filter-function +--- +
{{cssref}}
+ +

CSS の <filter-function> データ型は、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}} プロパティで使用します。

+ +

構文

+ +

<filter-function> データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。

+ +
+
{{cssxref("filter-function/blur", "blur()")}}
+
画像をぼかします。
+
{{cssxref("filter-function/brightness", "brightness()")}}
+
画像を明るくしたり暗くしたりします。
+
{{cssxref("filter-function/contrast", "contrast()")}}
+
画像のコントラストを上げたり下げたりします。
+
{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
+
画像の背後にドロップシャドウを適用します。
+
{{cssxref("filter-function/grayscale", "grayscale()")}}
+
画像をグレイスケールに変換します。
+
{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​
+
画像の色相を全体的に変更します。
+
{{cssxref("filter-function/invert", "invert()")}}
+
画像の色を反転させます。
+
{{cssxref("filter-function/opacity", "opacity()")}}
+
画像を半透明にします。
+
{{cssxref("filter-function/saturate", "saturate()")}}
+
入力画像の彩度を上げたり下げたりします。
+
{{cssxref("filter-function/sepia", "sepia()")}}
+
画像をセピア調に変換します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}初回定義。
+ +

関連情報

+ +
    +
  • このデータ型を使用するプロパティ: {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}}
    • +
diff --git a/files/ja/web/css/filter-function/invert()/index.html b/files/ja/web/css/filter-function/invert()/index.html new file mode 100644 index 0000000000..ac644cb147 --- /dev/null +++ b/files/ja/web/css/filter-function/invert()/index.html @@ -0,0 +1,67 @@ +--- +title: invert() +slug: Web/CSS/filter-function/invert() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/invert() +--- +
{{cssref}}
+ +

invert() は CSS の関数で、入力画像の色サンプルを反転します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-invert.html")}}
+ + + +

構文

+ +
invert(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% の値では完全に反転され、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
invert(0)     /* 効果なし */
+invert(.6)    /* 60% 反転 */
+invert(100%)  /* 完全に反転 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-invert', 'invert()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/opacity()/index.html b/files/ja/web/css/filter-function/opacity()/index.html new file mode 100644 index 0000000000..0d1f304a27 --- /dev/null +++ b/files/ja/web/css/filter-function/opacity()/index.html @@ -0,0 +1,72 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/opacity() +--- +
{{cssref}}
+ +

opacity() は CSS の関数で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-opacity.html")}}
+ + + +
+

注: この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。

+
+ +

構文

+ +
opacity(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 100% の値では完全に透明になり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
opacity(0%)   /* 完全に透過 */
+opacity(50%)  /* 50% 透過 */
+opacity(1)    /* 効果なし */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-opacity', 'opacity()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • CSS の {{cssxref("opacity")}} プロパティ
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/saturate()/index.html b/files/ja/web/css/filter-function/saturate()/index.html new file mode 100644 index 0000000000..47e0226594 --- /dev/null +++ b/files/ja/web/css/filter-function/saturate()/index.html @@ -0,0 +1,67 @@ +--- +title: saturate() +slug: Web/CSS/filter-function/saturate() +tags: + - CSS + - CSS 関数 + - Reference + - フィルター効果 +translation_of: Web/CSS/filter-function/saturate() +--- +
{{cssref}}
+ +

saturate() は CSS の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-saturate.html")}}
+ + + +

構文

+ +
saturate(amount)
+ +

引数

+ +
+
amount
+
変換の量で、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% 未満の値では彩度を下げ、 100% を超える値では彩度を上げます。 0% の値では画像が完全に彩度がなくなり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。
+
+ +

例

+ +
saturate(0)     /* 彩度なし */
+saturate(.4)    /* 彩度40% */
+saturate(100%)  /* 効果なし */
+saturate(200%)  /* 2倍の彩度 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-saturate', 'saturate()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​​​​​​​​
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/ja/web/css/filter-function/sepia()/index.html b/files/ja/web/css/filter-function/sepia()/index.html new file mode 100644 index 0000000000..eecc53bb3e --- /dev/null +++ b/files/ja/web/css/filter-function/sepia()/index.html @@ -0,0 +1,67 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia() +tags: + - CSS + - CSS Function + - Filter Effects + - Function + - Reference +translation_of: Web/CSS/filter-function/sepia() +--- +
{{cssref}}
+ +

sepia() は CSS の関数で、入力画像をセピア色に、より暖かい、より黄色と茶色の表現に変換します。結果は {{cssxref("<filter-function>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/function-sepia.html")}}
+ + + +

構文

+ +
sepia(amount)
+ +

引数

+ +
+
amount
+
変換の度合いで、 {{cssxref("<number>")}} 又は {{cssxref("<percentage>")}} で指定します。 100% の値では完全にセピア色になり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間時の欠損値は 0 です。
+
+ +

例

+ +
sepia(0)     /* 効果なし */
+sepia(.65)   /* 65% セピア色 */
+sepia(100%)  /* 完全にセピア色 */
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-sepia', 'sepia()')}}{{Spec2('Filters 1.0')}}
+ +

関連情報

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html new file mode 100644 index 0000000000..5bb245abe5 --- /dev/null +++ b/files/ja/web/css/filter/index.html @@ -0,0 +1,1140 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - CSS プロパティ + - Reference + - SVG + - SVG フィルター + - filter + - フィルター効果 +translation_of: Web/CSS/filter +--- +
{{CSSRef}}
+ +

filter は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

+ +

CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。 SVG フィルター要素への URL で SVG フィルターを参照することもできます。

+ +
{{EmbedInteractiveExample("pages/css/filter.html")}}
+ + + +

構文

+ +
/* SVG フィルターへの URL */
+filter: url("filters.svg#filter-id");
+
+/* <filter-function> 値 */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* 複数のフィルター */
+filter: contrast(175%) brightness(3%);
+
+/* フィルターを使用しない */
+filter: none;
+
+/* グローバル値 */
+filter: inherit;
+filter: initial;
+filter: unset;
+
+ +

次のように関数と共に使用してください。

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。

+ +
filter: url(file.svg#filter-element-id)
+
+ +

補間

+ +

最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("<url>")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが none である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。

+ +
.mydiv {
+  filter: grayscale(50%);
+}
+
+/* Gray all images by 50% and blur by 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+ +

URL 関数を使用して SVG リソースを使用した例は以下の通りです。

+ +
.target {
+  filter: url(#c1);
+}
+
+.mydiv {
+  filter: url(commonfilters.xml#large-blur);
+}
+
+ +

関数

+ +

filter プロパティは none または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は none を返します。特に示す場合を除いて、パーセント記号付きの値 (34% など) を取る関数は、10進数の値 (0.34 など) も受け付けます。

+ +

単一の filter プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の filter プロパティに別々に適用した場合とは異なる結果になります。

+ +

SVG フィルター

+ +

url()

+ +

外部 XML ファイルに埋め込むことができる SVG フィルターを指す URI を取ります。

+ +
filter: url(resources.svg#c1)
+
+ +

フィルター関数

+ +

blur()

+ +

{{cssxref("filter-function/blur", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 radius の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は 0 です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。

+ +
filter: blur(5px)
+
+ + + +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+ +
{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}
+ +

brightness()

+ +

{{cssxref("filter-function/brightness", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 0% の値を設定すると、完全な黒の画像が作成されます。 100% の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 100% を超える値が許されており、より明るい結果が得られます。補間時の空白値は 1 です。

+ +
filter: brightness(2)
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="brightness">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]"/>
+      <feFuncG type="linear" slope="[amount]"/>
+      <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}

+ +

contrast()

+ +

{{cssxref("filter-function/contrast", "contrast()")}} 関数は、入力画像のコントラストを調整します。 0% の値を指定すると完全にグレーの画像が作成されます。 100% の値を指定すると、入力画像は変更されません。 100% を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は 1 です。

+ +
filter: contrast(200%)
+
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+
+ + + +
{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}
+ +

drop-shadow()

+ +

{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は <shadow> 型 (CSS3 Backgrounds で定義) の引数を受け取りますが、 inset キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、より良い性能を得るためにハードウェアアクセラレーションを提供しているブラウザーがあることです。 <shadow> 引数の値は次の通りです。

+ +
+
<offset-x> <offset-y> (必須)
+
二つの {{cssxref("<length>")}} 値で、影をずらす大きさを設定します。 <offset-x> は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 <offset-y> は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("<length>")}} を参照してください。
+ 両方の値が 0 である場合は、影は要素の背後に配置されます (そして、 <blur-radius> や <spread-radius> を設定することで、ぼかしの効果を生成することができます)。
+
<blur-radius> (オプション)
+
これは三番目の {{cssxref("<length>")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 0 (影の縁がはっきりしている) になります。
+
<color> (オプション)
+
指定可能なキーワードや記述方法は {{cssxref("<color>")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("<color>")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。
+
+ +
filter: drop-shadow(16px 16px 10px black)
+ +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+
+ + + +
{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}
+ +

grayscale()

+ +

{{cssxref("filter-function/grayscale", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 amount の値は変換の程度を定義します。 100% の値は完全にグレースケールになります。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の空白値は 0 です。

+ +
filter: grayscale(100%)
+ + + +
{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}
+ +

hue-rotate()

+ +

{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 angle の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 0deg の値を指定すると入力は変更されません。補完時の空白値は 0 です。最大値はありませんが、 360deg を超える値の以上の値の場合は回り込みになります。

+ +
filter: hue-rotate(90deg)
+ + + +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate" >
+    <feColorMatrix type="hueRotate" values="[angle]" />
+  <filter />
+</svg>
+ +

{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}

+ +

invert()

+ +

{{cssxref("filter-function/invert", "invert()")}} 関数は、入力画像のサンプルを反転します。 amount の値は、変換の度合を定義します。 100% の値を指定すると、完全に反転されます。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の空白値は 0 です。

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}

+ +

opacity()

+ +

{{cssxref("filter-function/opacity", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 amount の値は、変換の度合を定義します。 0% の値を指定すると、完全に透明になります。 100% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は 1 です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}

+ +

saturate()

+ +

{{cssxref("filter-function/saturate", "saturate()")}} 関数は、入力画像の彩度を変化させます。 amount の値は、変換の度合を定義します。 0% の値を指定すると、無彩色になります。 100% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。 100% を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は 1 です。

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','')}}

+ +

sepia()

+ +

{{cssxref("filter-function/sepia", "sepia()")}} 関数は、入力画像をセピア調にします。 amount の値は、変換の度合を定義します。 100% の値を指定すると、完全にセピア調になります。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の空白値は 0 です。

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}

+ +

関数の組み合わせ

+ +

いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。

+ +
filter: contrast(175%) brightness(103%)
+ + + +

{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{Spec2('Filters 1.0')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.filter")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/filter_effects/index.html b/files/ja/web/css/filter_effects/index.html new file mode 100644 index 0000000000..26c171c112 --- /dev/null +++ b/files/ja/web/css/filter_effects/index.html @@ -0,0 +1,69 @@ +--- +title: フィルター効果 +slug: Web/CSS/Filter_Effects +tags: + - CSS + - Reference + - フィルター効果 + - 概要 +translation_of: Web/CSS/Filter_Effects +--- +
{{CSSRef}}
+ +

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

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("backdrop-filter")}}
    • +
  • {{cssxref("filter")}}
    • +
+
+ +

データ型

+ +
+
    +
  • {{cssxref("<filter-function>")}}
    • +
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}初回定義
+ +

ブラウザーの対応

+ +

backdrop-filter プロパティ

+ +
+ + +

{{Compat("css.properties.backdrop-filter")}}

+ +

filter プロパティ

+ +
+ + +

{{Compat("css.properties.filter")}}

+
+
diff --git a/files/ja/web/css/fit-content/index.html b/files/ja/web/css/fit-content/index.html new file mode 100644 index 0000000000..2aa2d093c4 --- /dev/null +++ b/files/ja/web/css/fit-content/index.html @@ -0,0 +1,119 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +tags: + - CSS + - CSS グリッド + - CSS 関数 + - Experimental + - Reference + - Web + - ウェブ + - レイアウト +translation_of: Web/CSS/fit-content +--- +
{{CSSRef}}
+ +

fit-content() はCSS の関数で、指定された寸法を min(最大寸法, max(最小寸法, 引数)) の式に従って有効な寸法に制約します。

+ +
{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}
+ + + +

この関数は CSS グリッドのプロパティにおいて、トラックの寸法を max-content で定義された最大寸法と auto で定義された最小寸法との間で、 auto と似た方法 (すなわち minmax(auto, max-content)) で計算しますが、 auto の最小値よりも大きい場合は 引数 がトラックの寸法になるという点が異なります。

+ +

これは {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} にレイアウトボックスの寸法としても使用され、最大寸法は内容の最大寸法、最小寸法は内容の最小寸法になります。

+ +

構文

+ +

引数として <length> または <percentage> を受け付ける関数です。

+ +
/* <length> 値 */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* <percentage> 値 */
+fit-content(40%)
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
絶対的な長さ。
+
{{cssxref("<percentage>")}}
+
指定された軸で有効な空間に対する相対的なパーセント値です。
+
グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  </div>
+  <div>Flexible item</div>
+</div>
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としての関数を定義。
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}トラックの寸法として使用される際の関数を定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.grid-template-columns.fit-content")}}

diff --git a/files/ja/web/css/flex-basis/index.html b/files/ja/web/css/flex-basis/index.html new file mode 100644 index 0000000000..68cdc32397 --- /dev/null +++ b/files/ja/web/css/flex-basis/index.html @@ -0,0 +1,214 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ + + +
+

メモ: (auto 以外の) flex-basis と width (または flex-direction: column の場合は height) の両方が要素に設定されていた場合、 flex-basis が優先されます。

+
+ +

構文

+ +
/* 幅を指定する */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 固有のサイズ指定キーワード */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* フレックスアイテムの内容物に基づいて自動設定する */
+flex-basis: content;
+
+/* グローバル値 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

flex-basis プロパティは、content キーワードまたは <'width'> で指定します。

+ +

値

+ +
+
<'width'>
+
絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの main size に対する {{cssxref("<percentage>")}}、あるいは auto キーワードで定義します。負の値は不正です。既定値は auto です。
+
content
+
flex アイテムの内容物に基づいて、自動的にサイズを決めます。
+
+
メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を auto にするのと合わせて auto を使用することで、同等の効果を得られます。
+ +
+

経緯:

+ +
    +
  • 元々、flex-basis:auto は "自身の width または height プロパティを参照する" ことを意味していました。
    • +
  • その後 flex-basis:auto の意味が自動サイズ設定に変わり、また "自身の width または height プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。
    • +
  • さらに、この変更が {{bug("1093316")}} で戻されて auto が再び "自身の width または height プロパティを参照する" になり、自動サイズ設定を行うための content キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。
    • +
+
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フレックスアイテムの初期の寸法の設定

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 14px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 12px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.flex-basis")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-direction/index.html b/files/ja/web/css/flex-direction/index.html new file mode 100644 index 0000000000..3f7b9c2150 --- /dev/null +++ b/files/ja/web/css/flex-direction/index.html @@ -0,0 +1,158 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-direction +--- +
{{CSSRef}}
+ +

flex-direction は CSS のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。

+ +
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
+ + + +

なお、 row および row-reverse の値は、フレックスコンテナーの書字方向に影響されます。 {{HTMLAttrxRef("dir")}} 属性が ltr である場合は、 row は左から右へ向かう水平軸を表し、また row-reverse は右から左へ向かう水平軸を表します。一方、 dir 属性が rtl である場合は、 row は右から左へ向かう水平軸を表し、また row-reverse は左から右へ向かう水平軸を表します。

+ +

構文

+ +
/* 行のテキストの方向に配置 */
+flex-direction: row;
+
+/* <row> と同様だが、逆向き */
+flex-direction: row-reverse;
+
+/* 積み重なるように配置する */
+flex-direction: column;
+
+/* <column> と同様だが、逆向き */
+flex-direction: column-reverse;
+
+/* グローバル値 */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

値

+ +

以下の値を指定できます。

+ +
+
row
+
フレックスコンテナーの主軸は、書字方向と同じに定義されます。 main-start および main-end の位置は、コンテンツの書字方向と同様になります。
+
row-reverse
+
row と同様ですが、main-start および main-end の位置が入れ替わります。
+
column
+
フレックスコンテナーの主軸は、ブロック軸と同じになります。 main-start および main-end の位置は、 writing-mode における before および after の位置と同じになります。
+
column-reverse
+
column と同様ですが、 main-start および main-end の位置が入れ替わります。
+
+ +

アクセシビリティの考慮

+ +

flex-direction プロパティを row-reverse または column-reverse の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フレックスコンテナーの列と行の反転

+ +

HTML

+ +
<h4>This is a Column-Reverse</h4>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>This is a Row-Reverse</h4>
+<div id="content1">
+  <div class="box1" style="background-color:red;">A</div>
+  <div class="box1" style="background-color:lightblue;">B</div>
+  <div class="box1" style="background-color:yellow;">C</div>
+</div>
+
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.flex-direction")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-flow/index.html b/files/ja/web/css/flex-flow/index.html new file mode 100644 index 0000000000..bb36b3aeec --- /dev/null +++ b/files/ja/web/css/flex-flow/index.html @@ -0,0 +1,92 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - Reference + - 一括指定プロパティ +translation_of: Web/CSS/flex-flow +--- +
{{CSSRef}}
+ +

CSS の flex-flow プロパティは、 {{cssxref("flex-direction")}} プロパティと {{cssxref("flex-wrap")}} プロパティの一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/flex-flow.html")}}
+ + + +

構文

+ +
/* flex-flow: <'flex-direction'> */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: <'flex-wrap'> */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: <'flex-direction'> および <'flex-wrap'> */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* グローバル値 */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+
+ +

値

+ +

値に関して詳しくは、 {{cssxref("flex-direction")}} および {{cssxref("flex-wrap")}} をご覧ください。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
element {
+  /* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */
+  flex-flow: column-reverse wrap;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }}{{ Spec2('CSS3 Flexbox') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.flex-flow")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-grow/index.html b/files/ja/web/css/flex-grow/index.html new file mode 100644 index 0000000000..5f0ef66147 --- /dev/null +++ b/files/ja/web/css/flex-grow/index.html @@ -0,0 +1,136 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - NeedsContent + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

flex-grow は CSS のプロパティで、フレックスアイテムの主軸方向の寸法のフレックス伸長係数を設定します。

+ +
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
+ + + +

構文

+ +
/* <number> 値 */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* グローバル値 */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

flex-grow プロパティは単一の <number> として指定します。

+ +

値

+ +
+
<number>
+
{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は0です。
+
+ +

解説

+ +

このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。

+ +

主軸方向の寸法は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。

+ +

残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。

+ +

使用するにあたって、 flex-grow は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フレックスアイテムの伸長係数の設定

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.flex-grow")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-shrink/index.html b/files/ja/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..ac14cfd5b3 --- /dev/null +++ b/files/ja/web/css/flex-shrink/index.html @@ -0,0 +1,128 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - CSS フレックスボックス + - NeedsContent + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +

flex-shrink は CSS のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは flex-shrink の数値に従って縮小して収まります。

+ +

使用時は flex-shrink は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ + + +

構文

+ +
/* <number> 値 */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* グローバル値 */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

flex-shrink プロパティは単一の <number> で指定します。

+ +

値

+ +
+
<number>
+
{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は 1 です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フレックスアイテムの縮小係数の設定

+ +

HTML

+ +
+
<p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p>
+<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p>
+<p>D と E の幅は他より狭くなります。</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-wrap/index.html b/files/ja/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..2fc408e1c1 --- /dev/null +++ b/files/ja/web/css/flex-wrap/index.html @@ -0,0 +1,158 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - Reference +translation_of: Web/CSS/flex-wrap +--- +
{{ CSSRef}}
+ +

CSS の flex-wrap プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

+ +
{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
+ + + +

他のプロパティや詳細情報については CSS フレックスボックスの利用をご覧ください。

+ +

構文

+ +
flex-wrap: nowrap; /* 既定値 */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* グローバル値 */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

flex-wrap プロパティは次の値のリストから選択した単一のキーワードで指定します。

+ +

値

+ +

以下の値を利用することができます。

+ +
+
nowrap
+
フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 cross-start は、 {{cssxref("flex-direction")}} の値に応じて start または before と同一になります。
+
wrap
+
フレックスアイテムは複数行に分割されます。 cross-start は flex-direction の値に応じて start または before と同一になり、 cross-end は、指定された cross-start の反対側になります。
+
wrap-reverse
+
wrap と同様に動作しますが、 cross-start と cross-end が入れ替わります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
+
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.flex-wrap")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex/index.html b/files/ja/web/css/flex/index.html new file mode 100644 index 0000000000..d4feca1e55 --- /dev/null +++ b/files/ja/web/css/flex/index.html @@ -0,0 +1,294 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

+ +
{{EmbedInteractiveExample("pages/css/flex.html")}}
+ + + +

構成するプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

構文

+ +
/* キーワード値 */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* 単位がない数値を1つ指定: flex-grow */
+flex: 2;
+
+/* 幅または高さを1つ指定: flex-basis */
+flex: 10em;
+flex: 30%;
+flex: min-content;
+
+/* 値を2つ指定: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* 値を2つ指定: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* グローバル値 */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

flex プロパティは1つ、2つ、3つの値を取ることがあります。

+ +
    +
  • 値1つの構文: 値は以下のうちの1つです。 + +
      +
    • <number>: この場合は flex: <number> 1 0 と解釈されます。 <flex-shrink> の値は 1 と想定され、 <flex-basis> の値は 0 と想定されます。
      • +
    • キーワード: none, auto, initial のいずれか。
      • +
    +
    • +
  • 値2つの構文: +
      +
    • 1つ目は次の値でなければなりません。 +
        +
      • {{cssxref("<number>")}} であり、 <flex-grow> として解釈される。
        • +
      +
      • +
    • 2つ目は次の値でなければなりません。 +
        +
      • {{cssxref("<number>")}}: <flex-shrink> として解釈される。
        • +
      • {{cssxref("width")}} として有効な値: <flex-basis> として解釈される。
        • +
      +
      • +
    +
    • +
  • 値3つの構文: 値は以下の順序でなければなりません。 +
      +
    1. 最初の値は単位なしの {{cssxref("<number>")}} でなければならず、 <flex-grow> として解釈されます。
      2. +
    2. 2つ目の値は単位なしの {{cssxref("<number>")}} でなければならず、 <flex-shrink> として解釈されます。
      3. +
    3. 3つ目の値は {{cssxref("width")}} として有効な値でなければならず、 <flex-basis> として解釈されます。
      4. +
    +
    • +
+ +

値

+ +
+
initial
+
アイテムは width および height プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "flex: 0 1 auto" と同等です。
+
auto
+
アイテムは width および height プロパティによって大きさが決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "flex: 1 1 auto" と同等です。
+
none
+
アイテムは width および height プロパティによって大きさが決められます。大きさは完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"flex: 0 0 auto" と同等です。
+
<'flex-grow'>
+
フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 0)
+
<'flex-shrink'>
+
フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 1)
+
<'flex-basis'>
+
フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが 0 ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は 1 です。 (初期値は auto)
+
+ +

解説

+ +

多くの場合、 flex には auto, initial, none, または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。

+ +
+ + + + +

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}

+ +

既定ではフレックスアイテムは最小コンテンツサイズよりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

flex: auto の設定

+ +

HTML

+ +
<div id="flex-container">
+  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+  <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ +

CSS

+ +
#flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#flex-container > .flex-item {
+  flex: auto;
+}
+
+#flex-container > .raw-item {
+  width: 5rem;
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample('Setting_flex_auto','100%','60')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状況備考
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.flex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex_value/index.html b/files/ja/web/css/flex_value/index.html new file mode 100644 index 0000000000..27160362e2 --- /dev/null +++ b/files/ja/web/css/flex_value/index.html @@ -0,0 +1,59 @@ +--- +title: +slug: Web/CSS/flex_value +tags: + - CSS + - CSS Data Type + - CSS データ型 + - Layout + - Reference + - Web + - ウェブ + - リファレンス + - レイアウト +translation_of: Web/CSS/flex_value +--- +
{{CSSRef}}
+ +

CSS の <flex> データ型 は、グリッドコンテナー内部における可変の長さです。 {{cssxref("grid-template-columns")}} や {{cssxref("grid-template-rows")}} 及びほかの関連プロパティで使われます。

+ +

構文

+ +

<flex> データ型は {{cssxref("<number>")}} のあとに単位 fr が付きます。すべての CSS dimensions と同様に、数値と単位の間に空白は入れません。

+ +

例

+ +
1fr    /* 整数値の使用 */
+2.5fr  /* 浮動小数点値の使用 */
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Grid", "#typedef-flex", "<flex>")}}{{Spec2("CSS Grid")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.types.flex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/float/index.html b/files/ja/web/css/float/index.html new file mode 100644 index 0000000000..8f0737bbba --- /dev/null +++ b/files/ja/web/css/float/index.html @@ -0,0 +1,229 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/float +--- +
{{CSSRef}}
+ +

float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。

+ +
{{EmbedInteractiveExample("pages/css/float.html")}}
+ + + +

浮動要素 (floating element) とは、float の計算値が none 以外の要素です。

+ +

float は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
指定値計算値
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
その他変更されません
+ +
注: JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは float に対応していますが、古いブラウザーは cssFloat という綴りになり、 Internet Explorer のバージョン 8 以前では、 styleFloat を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 <label> の "for" を "htmlFor" とする必要があったりするのと同じです)。
+ +

構文

+ +
/* キーワード値 */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* グローバル値 */
+float: inherit;
+float: initial;
+float: unset;
+
+ +

float プロパティは、以下の値からひとつのキーワードを選択して指定します。

+ +

値

+ +
+
left
+
要素は、必ずその包含ブロックの左側に浮動します。
+
right
+
要素は、必ずその包含ブロックの右側に浮動します。
+
none
+
要素は決して浮動しません。
+
inline-start
+
要素は、必ずその包含ブロックの始端側に浮動します。 ltr 表記では左側、 rtl 表記では右側になります。
+
inline-end
+
要素は、必ずその包含ブロックの終端側に浮動します。 ltr 表記では右側、 rtl 表記では左側になります。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

浮動要素の位置をどのように決めるか

+ +

上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか他の浮動要素の辺に触れるまで、左側または右側に移動させられます。

+ +

この例では、3つの赤い正方形があります。このうち2つは左側に浮動しており、1つは右側に浮動しています。2つめの「左の」赤い正方形は、1つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。

+ +

浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を width: 100% かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。

+ +

HTML

+ +
<section>
+  <div class="left">1</div>
+  <div class="left">2</div>
+  <div class="right">3</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
+     lectus vulputate. Donec id iaculis velit. Aliquam vel
+     malesuada erat. Praesent non magna ac massa aliquet tincidunt
+     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
+</section>
+
+ +

CSS

+ +
section {
+  border: 1px solid blue;
+  width: 100%;
+  float: left;
+}
+
+div {
+  margin: 5px;
+  width: 50px;
+  height: 150px;
+}
+
+.left {
+  float: left;
+  background: pink;
+}
+
+.right {
+  float: right;
+  background: cyan;
+}
+ +

結果

+ +

{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

+ +

浮動の解除

+ +

あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.float")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/font-family/index.html b/files/ja/web/css/font-family/index.html new file mode 100644 index 0000000000..6b0bd30acd --- /dev/null +++ b/files/ja/web/css/font-family/index.html @@ -0,0 +1,243 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - font + - font-family +translation_of: Web/CSS/font-family +--- +
{{CSSRef}}
+ +

CSS の font-family プロパティは、選択した要素に対して、フォントファミリ名や総称ファミリ名の優先順位リストを指定することができます。

+ +
{{EmbedInteractiveExample("pages/css/font-family.html")}}
+ + + +

複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} @-規則を使用してダウンロード可能なフォントを選択します。

+ +

一括指定プロパティの {{CSSxRef("font")}} を使用すると、 font-size やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。

+ +

指定されたフォントが利用可能であるという保証はないので、 font-family リストの中に、総称ファミリを少なくとも 1 つ、常に追加しておくべきです。総称ファミリを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。

+ +

font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは限りません。むしろ、フォント選択は 1 文字ずつ行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです (ただし、これは Internet Explorer 6 およびそれ以前では動作しません)。フォントが一部のスタイル、種類、大きさでのみ利用可能な場合、これらのプロパティがどのフォントファミリを選択するかに影響する可能性があります。

+ +

構文

+ +
/* フォントファミリ名および総称ファミリ名 */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* 総称ファミリ名のみ */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: ui-serif;
+font-family: ui-sans-serif;
+font-family: ui-monospace;
+font-family: ui-rounded;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* グローバル値 */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+
+ +

font-family プロパティは1つ以上のフォントファミリを、カンマで区切って指定します。それぞれのフォントファミリは <family-name> または <generic-name> の値です。

+ +

以下の例は二つのフォントファミリを並べており、最初は <family-name> で二番目は <generic-name> です。

+ +
font-family: Gill Sans Extrabold, sans-serif;
+ +

値

+ +
+
<family-name>
+
フォントファミリの名称。例えば、 "Times" や "Helvetica" はフォントファミリです。空白を含むフォントファミリ名は、引用符で囲む必要があります。
+
<generic-name>
+
+

総称フォントファミリは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリ名はキーワードであり、引用符で囲んではいけません。総称フォントファミリは、フォントファミリ名リストの最終選択肢である必要があります。以下のキーワードが定義されています。

+ +
+
serif
+
終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。
+ 例: Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
+
sans-serif
+
平たい角の端を持つ字形です。
+ 例: "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif
+
monospace
+
すべての字が同じ幅を持つ字形です。
+ 例: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace
+
cursive
+
筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。
+ 例: "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive
+
fantasy
+
fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。
+ 例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
+
system-ui
+
指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。
+
ui-serif
+
ユーザーインターフェイス既定のセリフ付きフォントです。
+
ui-sans-serif
+
ユーザーインターフェイス既定のセリフなしフォントです。
+
ui-monospace
+
ユーザーインターフェイス既定の等幅フォントです。
+
ui-rounded
+
ユーザーインターフェイス既定の丸い特性を持ったフォントです。
+
math
+
これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。
+
emoji
+
絵文字を表示するために特別にデザインされたフォントです。
+
fangsong
+
セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。
+
+
+
+ +

妥当なファミリ名

+ +

フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリ名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。

+ +

例えば、以下の宣言は妥当です:

+ +
font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+ +

以下の宣言は無効です。

+ +
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

いくつかのよくあるフォントファミリ

+ +
.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+.emoji {
+  font-family: emoji;
+}
+
+.math {
+  font-family: math;
+}
+
+.fangsong {
+  font-family: fangsong;
+}
+
+ + + +

{{EmbedLiveSample("Some_common_font_families", 600, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Fonts", "#generic-font-families", "generic font families")}}{{Spec2("CSS4 Fonts")}}新しい総称フォントファミリを追加。特に、 system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, emoji, math, fangsong
{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}{{Spec2("CSS3 Fonts")}}特に変更なし
{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}{{Spec2("CSS2.1")}}特に変更なし
{{SpecName("CSS1", "#font-family", "font-family")}}{{Spec2("CSS1")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-family")}}

diff --git a/files/ja/web/css/font-feature-settings/index.html b/files/ja/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..c8364f03f8 --- /dev/null +++ b/files/ja/web/css/font-feature-settings/index.html @@ -0,0 +1,119 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +tags: + - CSS + - CSS フォント + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/font-feature-settings +--- +
{{CSSRef}}
+ +

CSS の font-feature-settings プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。

+ +
{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}
+ + + +

構文

+ +
/* 既定の設定を使用する */
+font-feature-settings: normal;
+
+/* OpenType の特性タグの値を設定する */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* グローバル値 */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;
+ +
メモ: 可能な限り、ウェブの作者は代わりに {{cssxref("font-variant")}} 一括指定プロパティ、又は関連する個別指定プロパティである {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} プロパティを使うべきです。
+
+これらは font-feature-settings よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 font-feature-settings は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に font-feature-settings を使うべきではありません。
+ +

値

+ +
+
normal
+
テキストは既定の設定で配置されます。
+
<feature-tag-value>
+
テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の {{cssxref("<string>")}} です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。
+ 値は正の整数です。キーワード on と off はそれぞれ 1 と 0 の別名です。値が設定されていなければ、既定値は 1 です。 非真偽値の OpenType 特性 (例: stylistic alternates) では、この値は選ばれる特定のグリフを意味します。真偽値の特性はオンとオフを切り替えます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
/* use small-cap alternate glyphs */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* convert both upper and lowercase to small caps (affects punctuation also) */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* use zeros with a slash through them to differentiate from "O" */
+
+.nicezero { font-feature-settings: "zero"; }
+
+/* enable historical forms */
+.hist { font-feature-settings: "hist"; }
+
+/* disable common ligatures, usually on by default */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* enable tabular (monospaced) figures */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* enable automatic fractions */
+.fractions { font-feature-settings: "frac"; }
+
+/* use the second available swash character */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* enable stylistic set 7 */
+.fancystyle {
+  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
+  font-feature-settings: "ss07";
+}
+
+ +

{{cssinfo}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-feature-settings")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/font-kerning/index.html b/files/ja/web/css/font-kerning/index.html new file mode 100644 index 0000000000..adebe64c59 --- /dev/null +++ b/files/ja/web/css/font-kerning/index.html @@ -0,0 +1,120 @@ +--- +title: font-kerning +slug: Web/CSS/font-kerning +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference +translation_of: Web/CSS/font-kerning +--- +
{{CSSRef}}
+ +

font-kerning CSS プロパティはフォントに存在するカーニング情報の使用方法を制御します。

+ +
/* キーワード値 */
+font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* グローバル値 */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+
+ +

カーニングは、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが well-kerned であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。

+ +

Example of font-kerning

+ +

{{cssinfo}}

+ +

構文

+ +

font-kerning プロパティは以下のキーワード内の一つを指定します。

+ +

値

+ +
+
auto
+
このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。
+
normal
+
このキーワードは、カーニングを適用するよう要求します。
+
none
+
このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div id="kern"></div>
+<div id="nokern"></div>
+<textarea id="input">AV T. ij</textarea>
+ +

CSS

+ +
div {
+  font-size: 2rem;
+  font-family: serif;
+}
+
+#nokern {
+  font-kerning: none;
+}
+
+#kern {
+  font-kerning: normal;
+}
+ +

JavaScript

+ +
var input  = document.getElementById('input'),
+    kern   = document.getElementById('kern'),
+    nokern = document.getElementById('nokern');
+
+input.addEventListener('keyup', function() {
+  kern.textContent = input.value; /* Update content */
+  nokern.textContent = input.value;
+});
+
+kern.textContent = input.value; /* Initialize content */
+nokern.textContent = input.value;
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-kerning")}}

+ +

関連情報

+ +
    +
  • {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}}
    • +
diff --git a/files/ja/web/css/font-language-override/index.html b/files/ja/web/css/font-language-override/index.html new file mode 100644 index 0000000000..67cd954604 --- /dev/null +++ b/files/ja/web/css/font-language-override/index.html @@ -0,0 +1,109 @@ +--- +title: font-language-override +slug: Web/CSS/font-language-override +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - font-language-override + - l10n + - 'recipe:css-property' +translation_of: Web/CSS/font-language-override +--- +
{{CSSRef}}
+ +

font-language-override は CSS のプロパティで、書体で言語に固有の字形の使用を制御します。

+ +
/* キーワード値 */
+font-language-override: normal;
+
+/* <string> 値 */
+font-language-override: "ENG";  /* 英語の字形 */
+font-language-override: "TRK";  /* トルコ語の字形 */
+
+/* グローバル値 */
+font-language-override: initial;
+font-language-override: inherit;
+font-language-override: unset;
+
+ +

既定では、 HTML の lang 属性がブラウザーにその言語に特化してデザインされた字形を表示することを指示します。例えば、多くのフォントが合字 fi に特別な文字を持っており、 "i" の点を "f" に統合しています。しかし、言語がトルコ語に設定された場合、その書体では統合した字形を使用しません。トルコ語では "i" に、点が付いたもの (i) と点が付かないもの (ı) の二つの種類があり、この合字を使用すると点が付いた "i" を点がない "ı" に誤った変換をしてしまいます。

+ +

font-language-override プロパティで、その書体における特定の言語の動作を上書きすることができます。これは例えば、使用している書体でその言語に対して正しい対応が行われていないときに便利です。例えば、ある書体がアゼルバイジャン語の正しい規則を持っていない場合、同様の規則に従うトルコ語の字形を強制的に使用することができます。

+ +

構文

+ +

font-language-override プロパティは、キーワード normal または一つの <string> として指定します。

+ +

値

+ +
+
normal
+
lang 属性で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。
+
{{cssxref("string")}}
+
文字列で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。値は OpenType language system にある言語タグと一致している必要があります。例えば、 "ENG" は英語で、 "KOR" は韓国語です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

デンマーク語の文字の使用Using Danish glyphs

+ +

HTML

+ +
<p class="para1">Default language setting.</p>
+<p class="para2">This is a string with the <code>font-language-override</code> set to Danish.</p>
+
+ +

CSS

+ +
p.para1 {
+  font-language-override: normal;
+}
+
+p.para2 {
+  font-language-override: "DAN";
+}
+ +

結果

+ +

{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#propdef-font-language-override', 'font-language-override')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-language-override")}}

+ +

関連情報

+ +
    +
  • {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-kerning")}}
    • +
diff --git a/files/ja/web/css/font-optical-sizing/index.html b/files/ja/web/css/font-optical-sizing/index.html new file mode 100644 index 0000000000..673cc31efb --- /dev/null +++ b/files/ja/web/css/font-optical-sizing/index.html @@ -0,0 +1,98 @@ +--- +title: font-optical-sizing +slug: Web/CSS/font-optical-sizing +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference +translation_of: Web/CSS/font-optical-sizing +--- +
{{CSSRef}}
+ +

CSS の font-optical-sizing プロパティは、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。これは光学的サイズバリエーション軸があるフォントのみで動作します。

+ +

例えば、小さいテキストは太い角と大きなセリフで描かれる傾向があるのに対し、大きなテキストは太い角と細い角の間のコントラストがもっと微妙に描画される傾向があります。

+ +
+

メモ: 光学的サイズバリエーション軸は、 {{cssxref("font-variation-settings")}} の opsz で表現されます。

+
+ +

構文

+ +
/* キーワード値 */
+font-optical-sizing: none;
+font-optical-sizing: auto; /* default */
+
+/* グローバル値 */
+font-optical-sizing: inherit;
+font-optical-sizing: initial;
+font-optical-sizing: unset;
+
+ +

値

+ +
+
none
+
ブラウザーは表示の最適化のために書体の形を変更しません。
+
auto
+
ブラウザーは表示の最適化のために書体の形を変更します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
<p class="optical-sizing">This paragraph is optically sized.
+ This is the default across browsers.</p>
+
+<p class="no-optical-sizing">This paragraph is not optically sized.
+ You should see a difference in supporting browsers.</p>
+ +
@font-face {
+    src: url('AmstelvarAlpha-VF.ttf');
+    font-family:'Amstelvar';
+    font-style: normal;
+}
+
+p {
+  font-size: 36px;
+  font-family: Amstelvar;
+}
+
+.no-optical-sizing {
+  font-optical-sizing: none;
+}
+ +
+

メモ: 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — はテストに適しています。 GitHub からダウンロードできます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}{{Spec2('CSS4 Fonts')}} 
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-optical-sizing")}}

diff --git a/files/ja/web/css/font-size-adjust/index.html b/files/ja/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..81656335a4 --- /dev/null +++ b/files/ja/web/css/font-size-adjust/index.html @@ -0,0 +1,124 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-size-adjust +--- +

font-size-adjust は CSS のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。

+ +
/* 指定されたフォントサイズを使用 */
+font-size-adjust: none;
+
+/* 小文字のフォントサイズを、指定された
+フォントサイズの半分にする */
+font-size-adjust: 0.5;
+
+/* グローバル値 */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+
+ +

このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した {{Cssxref("font-family")}} が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。

+ +

このプロパティの使い方は、 font-size-adjust に対応していないブラウザーと互換性を持たせるため、 {{ Cssxref("font-size") }} プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

実際のところ、フォントの小文字が 7px の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 font-size-adjust に対応していないブラウザーでは 14px のフォントが使用されている場合でも、妥当な結果が得られます。

+ +

構文

+ +

値

+ +
+
none
+
{{ Cssxref("font-size") }} プロパティだけを基準にフォントサイズを選びます。
+
{{cssxref("<number>")}}
+
+

{{ Cssxref("font-size") }} に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。

+ +

指定した数値は、通常は最初に選んだ {{ Cssxref("font-family") }} のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが font-size-adjust に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。

+ +

0 は高さが 0 のテキスト (非表示テキスト) になります。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

小文字の大きさの調整

+ +

HTML

+ +
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
+<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
+<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
+ +

CSS

+ +
.times {
+  font-family: Times, serif;
+  font-size: 10px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+.adjtimes {
+  font-family: Times, serif;
+  font-size-adjust: 0.58;
+  font-size: 10px;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }}初回定義
+ +
+

font-size-adjust は最初に CSS 2 で定義されましたが、 CSS 2.1 で削除されました。 CSS 3 で新たに定義し直されました。

+
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-size-adjust")}}

+ +
{{CSSRef}}
diff --git a/files/ja/web/css/font-size/index.html b/files/ja/web/css/font-size/index.html new file mode 100644 index 0000000000..cd4d37ec67 --- /dev/null +++ b/files/ja/web/css/font-size/index.html @@ -0,0 +1,228 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

CSS の font-size プロパティはフォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な {{cssxref("<length>")}} の単位例えば em, ex, なども更新されます。

+ +
{{EmbedInteractiveExample("pages/css/font-size.html")}}
+ + + +

構文

+ +
/* <absolute-size> 値 */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+font-size: xxx-large;
+
+/* <relative-size> 値 */
+font-size: smaller;
+font-size: larger;
+
+/* <length> 値 */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage> 値 */
+font-size: 80%;
+
+/* グローバル値 */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+
+ +

font-size プロパティは、以下の何れかの方法で指定します。

+ +
    +
  • 絶対的サイズのキーワードまたは相対的サイズのキーワードのうちの一つ
    • +
  • <length> または親要素のフォントサイズからの相対的な <percentage>
    • +
+ +

値

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
+
ユーザーの既定のフォントサイズ (つまり medium) を基準とした絶対的なサイズのキーワードです。
+
larger, smaller
+
相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。
+
{{cssxref("<length>")}}
+
+

正の {{cssxref("<length>")}} の値。 (em や ex などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。

+ +

(rem などの) ルートを基準としたフォント相対単位では、フォントサイズは {{HTMLElement("html")}} (ルート) 要素で使われているフォントのサイズからの相対値です。

+
+
{{cssxref("<percentage>")}}
+
+

正の {{cssxref("<percentage>")}} 値で、親要素のフォントサイズからの相対値です。

+
+
+ +
+

注: アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。

+
+ +

解説

+ +

フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。

+ +

キーワード

+ +

キーワードはウェブのフォントサイズを決める良い方法です。 {{HTMLElement("body")}} 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。

+ +

ピクセル

+ +

ピクセル値 (px) でフォントサイズを設定することは、ピクセル制度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。

+ +

フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを 16px 、子要素を larger とした場合、子要素のフォントサイズは親要素の 16px より大きくレンダリングされます。

+ +
注: フォントサイズを px で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、アクセシブルではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。
+ +

em

+ +

フォントサイズを設定するもうひとつの方法は em 値を使うものです。 em 値の大きさは動的です。font-size プロパティを定義すると、 em はその em が用いられている要素のフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザーの既定値、たいてい 16px が使われます。したがって、既定では 1em = 16px であり、2em = 32px です。もし body 要素で font-size を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。

+ +

必要なピクセル値に相当する em は、次の式で計算することができます。

+ +
em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ
+ +

例えば、 body のフォントサイズが 1em にセットされているものとすると、ブラウザー標準の 1em = 16px です。使いたいフォントサイズが 12px なら、 0.75em を指定します (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが 10px なら、 0.625em を指定します (10/16 = 0.625)。22px なら 1.375em です (22/16)。

+ +

em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。

+ +

em と ex の単位が {{cssxref("font-size")}} プロパティで用いられると、親要素のフォントサイズからの相対になります (要素のフォントサイズからの相対値を使用する他のプロパティとは異なります)。すなわち、 em の単位やパーセント値は {{cssxref("font-size")}} の場合と同様です。

+ +

em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em;
+}
+ +
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+
+ +

結果は以下のようになります。

+ +

{{EmbedLiveSample("Ems", 400, 40)}}

+ +

ブラウザーの既定の font-size が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の {{HTMLElement("span")}} 要素の font-size は 1.6em ですが、これは親要素の font-size からの相対値で、さらにその親要素の font-size からの相対値になるからです。これはよく複合 (compounding) と呼ばれます。

+ +

rem

+ +

rem 値は、複合の問題を避けるために考案されました。 rem 値は親要素ではなく、ルート html 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。

+ +

以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を rem に変更したことです。

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+
+ +

この CSS を同じ HTML に適用すると、以下のようになります:

+ +
<span>Outer <span>inner</span> outer</span>
+ +

{{EmbedLiveSample("Rems", 400, 40)}}

+ +

この例では、単語 “outer inner outer” はすべて 16px で表示されます (ブラウザーの font-size は既定値が 10px のままであるとします)。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォントサイズの設定

+ +

CSS

+ +
.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+
+ +

HTML

+ +
<h1 class="small">Small H1</h1>
+<h1 class="larger">Larger H1</h1>
+<h1 class="point">24 point H1</h1>
+<h1 class="percent">200% H1</h1>
+ +

結果

+ +

{{EmbedLiveSample('Setting_font_sizes','600','200')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS4 Fonts')}}xxx-large キーワードを追加
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-size")}}

diff --git a/files/ja/web/css/font-stretch/index.html b/files/ja/web/css/font-stretch/index.html new file mode 100644 index 0000000000..934810b87c --- /dev/null +++ b/files/ja/web/css/font-stretch/index.html @@ -0,0 +1,263 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +tags: + - CSS + - CSS フォント + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/font-stretch +--- +
{{CSSRef}}
+ +

font-stretch CSS プロパティは、フォントの normal, condensed, expanded のフェイスを選択します。

+ +
/* キーワード値 */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+
+/* パーセント値 */
+font-stretch: 0%;
+font-stretch: 50%;
+font-stretch: 200%;
+
+/* グローバル値 */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+
+ +

フォントファミリによっては追加のフェイスを提供しており、通常より狭い文字、 (condensed フェイス)、通常より広い文字 (expanded フェイス) などがあります。

+ +

font-stretch を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。

+ +

一部のサンプルフォントでこのプロパティの効果を見るには、以下のフォントフェイスの選択をご覧ください。

+ +

構文

+ +

このプロパティは、単一のキーワード値又は単一の {{cssxref("<percentage>")}} 値として指定することができます。

+ +

値

+ +
+
normal
+
通常のフォントフェイスを指定します。
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。
+
<percentage>
+
{{cssxref("<percentage>")}} 値です。このプロパティでは負の数は許可されていません。
+
+ +

font-stretch の古いバージョンの仕様書では、このプロパティは9つのキーワード値のみを受け付けていました。 CSS Fonts Level 4 で、構文が <percentage> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。

+ +

但し、 <percentage> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは Browser compatibility をご覧ください。

+ +

キーワードと数値の対応

+ +

以下の表は、キーワード値とパーセントの数値の間の対応を示しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワードパーセント値
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +

フォントフェイスの選択

+ +

font-stretch で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が100%よりも小さい場合はより狭いフェイスが割り当てられ、100%と等しいか大きい場合はより広いフェイスが割り当てられます。

+ +

以下の表は二つの異なるフォントにおいて、 font-stretch に様々なパーセント値を提供した場合の効果を示しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 50%62.5%75%87.5%100%112.5%125%150%200%
Helvetica Neue
League Mono Variable
+ +
    +
  • Helvetica Neue は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 font-stretch の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。
    • +
  • League Mono Variable は、 font-stretch のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。
    • +
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

パーセント値の構文

+ +

なお、この例は <percentage> 値に対応したブラウザーのみで動作します。

+ +
+

HTML

+ +
<div class="container">
+    <p class="condensed">an elephantine lizard</p>
+    <p class="normal">an elephantine lizard</p>
+    <p class="expanded">an elephantine lizard</p>
+</div>
+
+ +

CSS

+ +
/*
+This example uses the League Mono Variable font, developed by
+Tyler Finck (https://www.tylerfinck.com/) and used here under
+the terms of the SIL Open Font License, Version 1.1:
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
+  font-family:'LeagueMonoVariable';
+  font-style: normal;
+}
+
+.container {
+  border: 10px solid #f5f9fa;
+  padding: 0 1rem;
+  font: 1.5rem 'LeagueMonoVariable', sans-serif;
+}
+
+.condensed {
+  font-stretch: 50%;
+}
+
+.normal {
+  font-stretch: 100%;
+}
+
+.expanded {
+  font-stretch: 200%;
+}
+
+
+
+ +

結果

+ +

{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状況備考
{{ SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS4 Fonts') }}可変フォントに <percentage> の構文を追加。
{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS3 Fonts') }}初回定義
+ +
+

CSS プロパティ font-stretch は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。

+
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-stretch")}}

diff --git a/files/ja/web/css/font-style/index.html b/files/ja/web/css/font-style/index.html new file mode 100644 index 0000000000..2bea52a0bb --- /dev/null +++ b/files/ja/web/css/font-style/index.html @@ -0,0 +1,227 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - font + - ウェブ +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

CSS の font-style プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+ + + +

italic フォントフェイスは通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいのが一般的です。一方 oblique フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。

+ +

構文

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* グローバル値 */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

font-style プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが oblique であれば任意で角度を含めることができます。

+ +

値

+ +
+
normal
+
{{Cssxref("font-family")}} の中で normal に分類されているフォントを選択します。
+
italic
+
italic として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに oblique に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
+
oblique
+
oblique として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに italic に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
+
oblique <angle>
+
oblique として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。
+
+ 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の font matching section を参照してください)。
+
+ +

可変フォント

+ +

可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 oblique キーワードに <angle> 修飾子を使用して選択することができます。

+ +

TrueType または OpenType の可変フォントでは、 "slnt" 変数が oblique の傾く角度を様々に実装するために使用され、 "ital" 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。

+ +

次の例を動作させるには、 CSS Fonts Level 4 の font-style: oblique が <angle> を受け入れる構文に対応したブラウザーが必要です。

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="slant" name="slant" min="-90" max="90" />
+    <label for="slant">Slant</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+
+ + + +

JavaScript

+ +
let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォントスタイル

+ + + +
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}
+ +

{{ EmbedLiveSample('Font_styles') }}

+ +

アクセシビリティの考慮事項

+ +

テキストの長い区間に渡って font-style の値を italic に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}oblique の後で角度を指定できるようになった
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-style")}}

diff --git a/files/ja/web/css/font-synthesis/index.html b/files/ja/web/css/font-synthesis/index.html new file mode 100644 index 0000000000..c9d84d2d59 --- /dev/null +++ b/files/ja/web/css/font-synthesis/index.html @@ -0,0 +1,111 @@ +--- +title: font-synthesis +slug: Web/CSS/font-synthesis +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-synthesis +--- +
{{CSSRef}}
+ +

font-synthesis は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。

+ +
{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}
+ + + +

構文

+ +

このプロパティは以下の形のうちの一つを取ることができます。

+ +
    +
  • キーワード値の none
    • +
  • キーワード値の weight と style のどちらか
    • +
  • キーワード値の weight と style の両方
    • +
+ +

値

+ +
+
none
+
太字およびイタリックの字体を合成しないことを示すキーワードです。
+
weight
+
必要であれば、太字の字体を合成してよいことを示すキーワードです。
+
style
+
必要であれば、イタリックの字体を合成してよいことを示すキーワードです。
+
+ +

解説

+ +

ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォント合成の無効化

+ +

HTML

+ +
<em class="syn">Synthesize me! 站直。</em>
+<br/>
+<em class="no-syn">Don't synthesize me! 站直。</em>
+
+ +

CSS

+ +
em {
+  font-weight: bold;
+}
+.syn {
+  font-synthesis: style weight;
+}
+.no-syn {
+  font-synthesis: none;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Disabling_font_synthesis', '', '50') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-synthesis")}}

+ +

See also

+ +
    +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-weight")}}
    • +
diff --git a/files/ja/web/css/font-variant-alternates/index.html b/files/ja/web/css/font-variant-alternates/index.html new file mode 100644 index 0000000000..b029abd181 --- /dev/null +++ b/files/ja/web/css/font-variant-alternates/index.html @@ -0,0 +1,128 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/font-variant-alternates +--- +
{{CSSRef}}
+ +

font-variant-alternatesCSSプロパティは代替グリフの使用を制御します。代替グリフは{{cssxref("@font-feature-values")}}で定義された代替名で参照される可能性があります。

+ +
/* 予約語 */
+font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+
+/* 函数表記値 */
+font-variant-alternates: stylistic(user-defined-ident);
+font-variant-alternates: styleset(user-defined-ident);
+font-variant-alternates: character-variant(user-defined-ident);
+font-variant-alternates: swash(user-defined-ident);
+font-variant-alternates: ornaments(user-defined-ident);
+font-variant-alternates: annotation(user-defined-ident);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* 大域値 */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+
+ +

{{cssxref("@font-feature-values")}}@規則は，OpenType機能と関連付けられた代替グリフ函数（stylistic，styleset，character-variant，swash，ornament，又はannotation）用の名前を定義できます。本プロパティを用いて，（{{cssxref("@font-feature-values")}}で定義された）対人可読な名前をスタイルシートで使うことができます。

+ +

{{cssinfo}}

+ +

書式

+ +

本プロパティは二つの形式の内一方を取ります:

+ +
    +
  • 予約語normal
    • +
  • 一又は複数の後掲した他の予約語及び函数（空白区切り・順不同）
    • +
+ +

値

+ +
+
normal
+
この予約語は代替グリフを無効にします。
+
historical-forms
+
この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeのhist機能タグに相当します。
+
stylistic()
+
この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのsalt機能タグ（例: salt 2）に相当します。
+
styleset()
+
この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのssXY機能タグ（例: ss02）に相当します。
+
character-variant()
+
この函数は文字に対する様式的代替を有効にします。styleset()に似ていますが，一連の文字に対して一貫したグリフを作成せず，個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのcvXY機能タグ（例: cv02）に相当します。
+
swash()
+
この函数は先端装飾〔訳注: グリフの先端を流線的に延長する装飾。訳語参考〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのswsh及びcswh機能タグ（例: swsh 2及びcswh 2）に相当します。
+
ornaments()
+
この函数は花形装飾活字及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのornm機能タグ（例: ornm 2）に相当します。 +
注意: 文義を維持する目的で，フォント設計者は，箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。
+
+
annotation()
+
この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのnalt機能タグ（例: nalt 2）に相当します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p>Firefox rocks!</p>
+<p class="variant">Firefox rocks!</p>
+
+ +

CSS

+ +
@font-feature-values "Leitura Display Swashes" {
+    @swash { fancy: 1 }
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(fancy);
+}
+ +

結果

+ +
+

注意: この例を正しく閲覧するには，OpenTypeフォントLeitura Display Swashesを導入する必要があります。fontsgeek.com等から試験目的の無償版が入手できます。

+
+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}{{Spec2('CSS3 Fonts')}}初期定義
+ +

ブラウザ互換性

+ + + +

{{Compat("css.properties.font-variant-alternates")}}

diff --git a/files/ja/web/css/font-variant-caps/index.html b/files/ja/web/css/font-variant-caps/index.html new file mode 100644 index 0000000000..6ba11b38e0 --- /dev/null +++ b/files/ja/web/css/font-variant-caps/index.html @@ -0,0 +1,138 @@ +--- +title: font-variant-caps +slug: Web/CSS/font-variant-caps +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variant-caps +--- +
{{CSSRef}}
+ +

font-variant-caps は CSS のプロパティで、大文字向けの代替字形の使用を制御します。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
+ + + +

指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。

+ +

フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。

+ +

言語特有の規則

+ +

このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。

+ +
    +
  • チュルク語族 (トルコ語 (tr), アゼルバイジャン語 (az), クリミア・タタール語 (crh), ヴォルガ・タタール語 (tt), バシキール語 (ba) など) では、二種類の i (点ありと点なし) があり、二種類の大文字小文字の組み合わせ i/İ と ı/I があります。
    • +
  • ドイツ語 (de) では、 ß は大文字で ẞ (U+1E9E) になることがあります。
    • +
  • ギリシャ語 (el) では、語全体が大文字の時にアクセント記号がなくなりますが (ά/Α)、分離型のエタは例外です (ή/Ή)。また、また、最初の母音にアクセントを付けた二重母音はアクセント記号を失い、二番目の母音に発音区別符号を付けます (άι/ΑΪ)。
    • +
+ +

構文

+ +
/* キーワード値 */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* グローバル値 */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+
+ +

font-variant-caps プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。

+ +

値

+ +
+
normal
+
代替字形の使用を無効にします。
+
small-caps
+
小さな大文字の表示を有効にします (OpenType 特性: smcp)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。
+
all-small-caps
+
大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: c2sc, smcp)。
+
petite-caps
+
petite capital の表示を有効にします (OpenType 特性: pcap)。
+
all-petite-caps
+
大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: c2pc, pcap)。
+
unicase
+
大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: unic).
+
titling-caps
+
タイトルキャピタルの表示を有効化します (OpenType 特性: titl)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。
+
+ +

アクセシビリティの考慮

+ +

長い区間のテキストに対して font-variant の値を all-small-caps や all-petite-caps を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

スモールキャップのフォント変化形の設定

+ +

HTML

+ +
<p class="small-caps">Firefox rocks, small caps!</p>
+<p class="normal">Firefox rocks, normal caps!</p>
+
+ +

CSS

+ +
.small-caps {
+  font-variant-caps: small-caps;
+  font-style: italic;
+}
+.normal {
+  font-variant-caps: normal;
+  font-style: italic;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-variant-caps")}}

diff --git a/files/ja/web/css/font-variant-east-asian/index.html b/files/ja/web/css/font-variant-east-asian/index.html new file mode 100644 index 0000000000..5ebf344a0c --- /dev/null +++ b/files/ja/web/css/font-variant-east-asian/index.html @@ -0,0 +1,186 @@ +--- +title: font-variant-east-asian +slug: Web/CSS/font-variant-east-asian +tags: + - CSS + - CSS Fonts + - CSS Property + - NeedsLiveSample + - Reference + - 'recipe:css-property' + - 日本語処理 +translation_of: Web/CSS/font-variant-east-asian +--- +
{{CSSRef}}
+ +

CSS の font-variant-numeric プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。

+ +
font-variant-east-asian: normal;
+font-variant-east-asian: ruby;
+font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
+font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
+font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
+font-variant-east-asian: full-width;         /* <east-asian-width-values> */
+font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
+font-variant-east-asian: ruby full-width jis83;
+
+/* グローバル値 */
+font-variant-east-asian: inherit;
+font-variant-east-asian: initial;
+font-variant-east-asian: unset;
+
+ +

構文

+ +

値

+ +
+
normal
+
このキーワードは、別形式の表記の使用を無効にします。
+
ruby
+
このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の ruby の値に対応します。
+
<east-asian-variant-values>
+
これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード標準による形状の定義OpenType の対応
jis78JIS X 0208:1978jp78
jis83JIS X 0208:1983jp83
jis90JIS X 0208:1990jp90
jis04JIS X 0213:2004jp04
simplifiedなし。簡体字中国語の字形を使用smpl
traditionalなし。繁体字中国語の字形を使用trad
+
+
<east-asian-width-values>
+
これらの値は東アジアの文字の大きさを制御します。二つの値が利用できます。 +
    +
  • proportional-width は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の pwid の値に対応します。
    • +
  • full-width は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の fwid に対応します。
    • +
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

東アジアの字形の変化形を設定

+ +

この例は OS に「游ゴシック」フォントがインストールされていることが必要で、ほかのフォントでは OpenType 機能に対応していない可能性があります。

+ +

HTML

+ +
<table>
+<thead></thead>
+<tbody style="border:0;">
+  <tr>
+    <th>normal/jis78:</th>
+    <td>麹町</td>
+    <td class="jis78">麹町</td>
+  </tr>
+  <tr>
+    <th>normal/ruby:</th>
+    <td>しんかんせん</td>
+    <td class="ruby">しんかんせん</td>
+  </tr>
+  <tr>
+    <th>normal/traditional:</th>
+    <td>大学</td>
+    <td class="traditional">大学</td>
+  </tr>
+</tbody>
+</table>
+
+ +

CSS

+ +
td{
+  font-family:"Yu Gothic";
+  font-size:20px;
+}
+th{
+  color:grey;
+  padding-right:10px;
+}
+
+.ruby {
+  font-variant-east-asian: ruby;
+}
+
+.jis78 {
+  font-variant-east-asian: jis78;
+}
+
+.traditional{
+  font-variant-east-asian: traditional;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状況備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-variant-east-asian")}}

diff --git a/files/ja/web/css/font-variant-ligatures/index.html b/files/ja/web/css/font-variant-ligatures/index.html new file mode 100644 index 0000000000..7fd0d237ff --- /dev/null +++ b/files/ja/web/css/font-variant-ligatures/index.html @@ -0,0 +1,217 @@ +--- +title: font-variant-ligatures +slug: Web/CSS/font-variant-ligatures +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variant-ligatures +--- +
{{CSSRef}}
+ +

font-variant-ligatures は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
+font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
+font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
+font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
+font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
+font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
+font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
+font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
+
+/* グローバル値 */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+
+ +

font-variant-ligatures プロパティは、以下の一覧のキーワード値のうち一つで指定します。

+ +

値

+ +
+
normal
+
正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。
+
none
+
一般的なものであっても、すべての合字や文脈書式を無効にします。
+
<common-lig-values>
+
fi, ffi, th などの、よくある合字を制御します。 OpenType の値 liga および clig に対応します。二つの値が指定できます。 +
    +
  • common-ligatures: これらの合字を有効にします。なお、キーワード normal はこれらの合字を有効にします。
    • +
  • no-common-ligatures: これらの合字を無効にします。
    • +
+
+
<discretionary-lig-values>
+
フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は dlig です。二つの値が指定できます。 +
    +
  • discretionary-ligatures: これらの合字を有効にします。
    • +
  • no-discretionary-ligatures: これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • +
+
+
<historical-lig-values>
+
古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は hlig です。二つの値が指定できます。 +
    +
  • historical-ligatures: これらの合字を有効にします。
    • +
  • no-historical-ligatures これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • +
+
+
<contextual-alt-values>
+
字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は calt です。二つの値が指定できます。 +
    +
  • contextual: 文脈的な変更を使用するよう指定します。なお、キーワード normal はこれらの合字も有効にします。
    • +
  • no-contextual: 使用を避けます。
    • +
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォントの合字と文脈に合わせた字形の設定

+ +

HTML

+ +
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
+<p class="normal">
+  normal<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="none">
+  none<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="common-ligatures">
+  common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-common-ligatures">
+  no-common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="discretionary-ligatures">
+  discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-discretionary-ligatures">
+  no-discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="historical-ligatures">
+  historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-historical-ligatures">
+  no-historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-contextual">
+  no-contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+
+
+ +

CSS

+ +
p {
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-variant-ligatures")}}

diff --git a/files/ja/web/css/font-variant-numeric/index.html b/files/ja/web/css/font-variant-numeric/index.html new file mode 100644 index 0000000000..859bb006ea --- /dev/null +++ b/files/ja/web/css/font-variant-numeric/index.html @@ -0,0 +1,137 @@ +--- +title: font-variant-numeric +slug: Web/CSS/font-variant-numeric +tags: + - CSS + - CSS フォント + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/font-variant-numeric +--- +
{{CSSRef}}
+ +

CSS の font-variant-numeric プロパティは、数字、分数、序数記号の表記を制御するために使用します。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
+ + + +

構文

+ +
font-variant-numeric: normal;
+font-variant-numeric: ordinal;
+font-variant-numeric: slashed-zero;
+font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
+font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
+font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
+font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
+font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
+font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
+font-variant-numeric: oldstyle-nums stacked-fractions;
+
+/* グローバル値 */
+font-variant-numeric: inherit;
+font-variant-numeric: initial;
+font-variant-numeric: unset;
+
+ +

このプロパティは二つの形のうちの一つを取ります。

+ +
    +
  • キーワード値 normal
    • +
  • 以下の一覧にあるその他の値を空白区切り、自由な順番で
    • +
+ +

値

+ +
+
normal
+
このキーワードは、別形式の表記の使用を無効にします。
+
ordinal
+
このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の ordn の値に対応します。
+
slashed-zero
+
このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の zero の値に対応します。
+
<numeric-figure-values>
+
これらの値は、数字の形状を制御します。二つの値が利用できます。 +
    +
  • lining-nums は、全てをベースライン上に並べる表記を有効にします。 OpenType の lnum の値に対応します。
    • +
  • oldstyle-nums は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の onum の値に対応します。
    • +
+
+
<numeric-spacing-values>
+
これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。 +
    +
  • proportional-nums は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の pnum の値に対応します。
    • +
  • tabular-nums は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の tnum の値に対応します。
    • +
+
+
<numeric-fraction-values>
+
これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。 +
    +
  • diagonal-fractions は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の frac の値に対応します。
    • +
  • stacked-fractions は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の afrc の値に対応します。
    • +
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
+ +

CSS

+ +
/*
+This example uses the Source Sans Pro OpenType font, developed by Adobe
+and used here under the terms of the SIL Open Font License, Version 1.1:
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
+}
+
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状況備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-variant-numeric")}}

diff --git a/files/ja/web/css/font-variant-position/index.html b/files/ja/web/css/font-variant-position/index.html new file mode 100644 index 0000000000..8815fb355a --- /dev/null +++ b/files/ja/web/css/font-variant-position/index.html @@ -0,0 +1,108 @@ +--- +title: font-variant-position +slug: Web/CSS/font-variant-position +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference +translation_of: Web/CSS/font-variant-position +--- +
{{CSSRef}}
+ +

CSS の font-variant-position プロパティは、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。

+ +

文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 {{HTMLElement("sub")}} と {{HTMLElement("sup")}} 要素で使用されます。

+ +
/* キーワード値 */
+font-variant-position: normal;
+font-variant-position: sub;
+font-variant-position: super;
+
+/* グローバル値 */
+font-variant-position: inherit;
+font-variant-position: initial;
+font-variant-position: unset;
+
+ +

これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。

+ +

これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。

+ +

{{cssinfo}}

+ +

構文

+ +

font-variant-position プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
normal
+
上付き文字および下付き文字の字体の代替を無効にします。
+
sub
+
下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。
+
super
+
上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<p class="normal">Normal!</p>
+<p class="super">Super!</p>
+<p class="sub">Sub!</p>
+
+ +

CSS

+ +
p {
+  display: inline;
+}
+
+.normal {
+  font-variant-position: normal;
+}
+
+.super {
+  font-variant-position: super;
+}
+
+.sub {
+  font-variant-position: sub;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-variant-position")}}

diff --git a/files/ja/web/css/font-variant/index.html b/files/ja/web/css/font-variant/index.html new file mode 100644 index 0000000000..e266550061 --- /dev/null +++ b/files/ja/web/css/font-variant/index.html @@ -0,0 +1,139 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/font-variant +--- +
{{CSSRef}}
+ +

font-variant は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。

+ +

CSS Level 2 (Revision 1) における font-variant の値 (つまり、 normal や small-caps) は、一括指定の {{cssxref("font")}} を用いて設定することもできます。

+ +
{{EmbedInteractiveExample("pages/css/font-variant.html")}}
+ + + +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
+ +

構文

+ +
font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* グローバル値 */
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+
+ +

値

+ +
+
normal
+
通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 font-variant の個別指定プロパティは、 {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}} です。
+
none
+
{{cssxref("font-variant-ligatures")}} を none に、その他の個別指定プロパティを normal に、それぞれの初期値を設定します。
+
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>
+
個別指定の {{cssxref("font-variant-ligatures")}} プロパティに関するキーワードを指定します。指定可能な値は、 common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual です。
+
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()
+
個別指定の {{cssxref("font-variant-alternates")}} プロパティに関するキーワードや関数を指定します。
+
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
+
個別指定の {{cssxref("font-variant-caps")}} プロパティに関するキーワードや関数を指定します。
+
<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero
+
個別指定の {{cssxref("font-variant-numeric")}} プロパティに関するキーワードを指定します。指定可能な値は、 lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, slashed-zero です。
+
<east-asian-variant-values>, <east-asian-width-values>, ruby
+
個別指定の {{cssxref("font-variant-east-asian")}} プロパティに関するキーワードを指定します。指定可能な値は、 jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

スモールキャップのフォント変化形の設定

+ +

HTML

+ +
<p class="normal">Firefox rocks!</p>
+<p class="small">Firefox rocks!</p>
+
+ +

CSS

+ +
p.normal {
+  font-variant: normal;
+}
+p.small {
+  font-variant: small-caps;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}{{Spec2('CSS3 Fonts')}}新しい font-variant-* プロパティの一括指定になった。
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-variant', 'font-variant')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.properties.font-variant")}}

+
+ +

関連情報

+ +
    +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/font-variation-settings/index.html b/files/ja/web/css/font-variation-settings/index.html new file mode 100644 index 0000000000..3ec74b86e3 --- /dev/null +++ b/files/ja/web/css/font-variation-settings/index.html @@ -0,0 +1,155 @@ +--- +title: font-variation-settings +slug: Web/CSS/font-variation-settings +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variation-settings +--- +
{{CSSRef}}
+ +

font-variation-settings は CSS のプロパティで、変更したい特性の４文字の軸名と特性の値を指定することにより、可変フォントに対する低水準の制御を提供します。

+ +
{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
+ + + +

構文

+ +
/* 既定の設定を使用 */
+font-variation-settings: normal;
+
+/* 可変フォントの軸名の値を設定 */
+font-variation-settings: "XHGT" 0.7;
+
+/* グローバル値 */
+font-variation-settings: inherit;
+font-variation-settings: initial;
+font-variation-settings: unset;
+
+ +

値

+ +

このプロパティは1つまたは2つの形を取ることができます。

+ +
+
normal
+
テキストは既定の設定を使用してレイアウトされます。
+
<string> <number>
+
テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の {{cssxref("<string>")}} と、続いて設定する軸の値を示す {{cssxref("number")}} の組み合わせから成ります。 <string> の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコード点の範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、 <number> は小数や負の数を取ることもできます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

解説

+ +

このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば {{cssxref("font-weight")}} や {{cssxref("font-style")}}) を設定するための基本プロパティがない場合にのみ使用してください。

+ +

font-variation-settings を使用して設定されたフォント特性は、常に font-weight などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 @font-face 宣言が font-weight の範囲を含んでいる場合のみこれが成り立ちます。

+ +

登録済みの軸と独自の軸

+ +

可変フォントの軸には、登録済みの軸と独自の軸があります。

+ +

登録済みの軸はよく現れます。 — 仕様書の作者が標準化する価値があると感じるほどよく使われます。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。

+ +

こちらは関連する CSS プロパティに対応する登録済みの軸です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
軸のタグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

独自の軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得、例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も4文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。

+ +
+

注: 登録済みの軸のタグは小文字のタグを使用するのに対し、d久慈の軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。

+
+ +

例

+ +

登録済みの軸を記述した以下のデモを見てください。その他の可変フォントの例は、 可変フォントガイド, v-fonts.com, and axis-praxis.org などで見られます。

+ +
+

警告: オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。

+
+ +

Weight (wght)

+ +

以下のデモの CSS は、フォントの重みの値を編集することができます。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

Slant (slnt)

+ +

以下のデモの CSS は、フォントの傾きの値を編集することができます。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#descdef-font-face-font-variation-settings', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-variation-settings")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/font-weight/index.html b/files/ja/web/css/font-weight/index.html new file mode 100644 index 0000000000..b7796971b0 --- /dev/null +++ b/files/ja/web/css/font-weight/index.html @@ -0,0 +1,396 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

font-weight は CSS のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+font-weight: normal;
+font-weight: bold;
+
+/* 親要素に対して相対的なキーワード値 */
+font-weight: lighter;
+font-weight: bolder;
+
+/* 数値のキーワード値 */
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;// normal
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;// bold
+font-weight: 800;
+font-weight: 900;
+
+/* グローバル値 */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

font-weight プロパティは、以下の一覧から選択した単一のキーワードで指定します。

+ +

値

+ +
+
normal
+
通常のフォントの太さです。 400 と同じです。
+
bold
+
太字のフォントの太さです。 700 と同じです。
+
lighter
+
フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+
bolder
+
フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+
<number>
+
1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
+
+ +

font-weight 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。

+ +

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

+ +

太さのフォールバック

+ +

ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。

+ +
    +
  • 対象となる太さがが 400～500 で指定された場合 + +
      +
    • 利用できる太さを、対象値から 500 までの間で昇順で探します。
      • +
    • 一致するものがなければ、対象値未満の利用できる太さを降順で探します。
      • +
    • 一致するものがなければ、 500 より大きい太さを昇順で探します。
      • +
    +
    • +
  • 太さが 400 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。
    • +
  • 太さが 500 より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。
    • +
+ +

相対的な太さの意味

+ +

以下の表は、 lighter または bolder を指定する場合に要素の絶対的な太さを算出する方法を示しています。

+ +

なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

一般的な太さ名との対応

+ +

100 から 900 の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
950Extra Black (Ultra Black)
+ +

可変フォント

+ +

多くのフォントは、一般的な太さ名との対応の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。

+ +

TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。

+ +

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="weight" name="weight" min="1" max="1000" />
+    <label for="weight">Weight</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+
+ + + +

JavaScript

+ +
let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+
+
+ +

アクセシビリティの考慮

+ +

弱視の人は、 font-weight の値が 100 (Thin/Hairline) または 200 (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

Setting font weights

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, "and what is the use of a book," thought Alice "without pictures or
+  conversations?"
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* 段落のテキストを太字にします */
+p {
+  font-weight: bold;
+}
+
+/* div 要素のテキストの太さを normal より 2 段階太くしますが、
+   標準的な bold より細くします */
+div {
+ font-weight: 600;
+}
+
+/* span 要素のテキストの太さを親要素より
+   1 段階細くします */
+span {
+  font-weight: lighter;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_font_weights","400","300")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}font-weight で 1～1000 の任意の数を受け付けるよう定義。
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-weight")}}

diff --git a/files/ja/web/css/font/index.html b/files/ja/web/css/font/index.html new file mode 100644 index 0000000000..c4c5020373 --- /dev/null +++ b/files/ja/web/css/font/index.html @@ -0,0 +1,376 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/font +--- +
{{CSSRef}}
+ +

font は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。

+ +
{{EmbedInteractiveExample("pages/css/font.html")}}
+ + + +

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 font によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+ +

構文

+ +

font プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。

+ +

font をシステムキーワードとして指定する場合は、 caption, icon, menu, message-box, small-caption, status-bar のうちの一つでなければなりません。

+ +

font を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。

+ +
    +
  • 次の値を含めなければなりません。 +
      +
    • {{cssxref("<font-size>")}}
      • +
    • {{cssxref("<font-family>")}}
      • +
    +
    • +
  • 次の値は任意で含めることができます。 +
      +
    • {{cssxref("<font-style>")}}
      • +
    • {{cssxref("<font-variant>")}}
      • +
    • {{cssxref("<font-weight>")}}
      • +
    • {{cssxref("<font-stretch>")}}
      • +
    • {{cssxref("<line-height>")}}
      • +
    +
    • +
  • font-style, font-variant, font-weight は font-size よりも前になければなりません
    • +
  • font-variant は CSS 2.1 で定義された値、つまり normal 及び small-caps のみ指定できます
    • +
  • font-stretch は単一のキーワード値のみを指定することができます
    • +
  • line-height は font-size の直後に、 "/" で区切って、 "16px/3" のように指定します
    • +
  • font-family は指定される最後の値である必要があります。
    • +
+ +

値

+ +
+
<'font-style'>
+
{{Cssxref("font-style")}} プロパティを参照。
+
<'font-variant'>
+
{{Cssxref("font-variant")}} プロパティを参照。
+
<'font-weight'>
+
{{Cssxref("font-weight")}} プロパティを参照。
+
<'font-stretch'>
+
{{Cssxref("font-stretch")}} プロパティを参照。
+
<'font-size'>
+
{{Cssxref("font-size")}} プロパティを参照。
+
<'line-height'>
+
{{cssxref("line-height")}} プロパティを参照。
+
<'font-family'>
+
{{Cssxref("font-family")}} プロパティを参照。
+
+ +

システムフォント値

+ +
+
caption
+
キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。
+
icon
+
ラベルアイコンに使用されるシステムフォント。
+ +
メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
+
message-box
+
ダイアログボックスに使われるシステムフォント。
+
small-caption
+
小さいコントロールのラベルに使われるシステムフォント。
+
status-bar
+
ウィンドウのステータスバーに使われるシステムフォント。
+
接頭辞付きのシステムフォントキーワード
+
ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field を実装しています。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

フォントのプロパティの設定

+ +
/* フォントの大きさを 12px に設定し、行の高さを 14px にする。
+   フォントファミリは sans-serif に設定する */
+p { font: 12px/14px sans-serif }
+
+/* フォントの大きさを親要素の 80% または既定値
+   (親要素がない場合) に設定する。
+   フォントファミリは sans-serif に設定する */
+p { font: 80% sans-serif }
+
+/* フォントの太さを太字に、
+   フォントスタイルを斜体に、
+   フォントの大きさを large に、
+   フォントファミリーは serif に設定する */
+p { font: bold italic large serif }
+
+/* ウィンドウのステータスバーと同じフォントに設定する */
+p { font: status-bar }
+
+ +

ライブサンプル

+ + + +

{{ EmbedLiveSample('live_sample','100%', '440px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}{{Spec2('CSS3 Fonts')}}font-stretch の値の対応を追加
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}{{Spec2('CSS2.1')}}キーワードへのサポートが追加されました
{{SpecName('CSS1', '#font', 'font')}}{{Spec2('CSS1')}}初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font")}}

diff --git a/files/ja/web/css/frequency-percentage/index.html b/files/ja/web/css/frequency-percentage/index.html new file mode 100644 index 0000000000..a76e4dd30e --- /dev/null +++ b/files/ja/web/css/frequency-percentage/index.html @@ -0,0 +1,95 @@ +--- +title: +slug: Web/CSS/frequency-percentage +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - frequency-percentage + - units + - values +translation_of: Web/CSS/frequency-percentage +--- +
{{CSSRef}}{{seecompattable}}
+ +

<frequency-percentage> は CSS のデータ型で、 {{Cssxref("frequency")}} または {{Cssxref("percentage")}} が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。

+ +

構文

+ +

<frequency-percentage> の値は {{Cssxref("frequency")}} または {{Cssxref("percentage")}} です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。

+ +

解説

+ +

calc() での使用

+ +

許可されている型として <frequency-percentage> が指定されているところでは、これはパーセント値が周期として解決されるので、 calc() の式で利用することができます。

+ +

例

+ +

有効なパーセント値

+ +
90% 正のパーセント値
++90% 先頭に + が付いた正のパーセント値
+-90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない
+ +

無効なパーセント値

+ +
90 % 数値と単位の間に空白を入れてはいけない。
+ +

有効な周波数値

+ +
12Hz     正の整数
+4.3Hz    整数以外
+14KhZ    単位は大文字小文字の区別がないが、 SI 以外の大文字小文字の使い分けは推奨しない。
++0Hz     先頭に + が付いた単位付きのゼロ
+-0kHz    先頭に - が付いた単位付きのゼロ
+ +

無効な周波数値

+ +
12.0     これは単位がないため <number> であり <frequency> ではない。
+7 Hz     数値と単位の間に空白を入れてはいけない。
+0        単位のないゼロは <length> では許可されることがあるが、 <frequency> では無効。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS3 Values')}}<frequency-percentage> を定義。 calc() を追加
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.frequency-percentage")}}

+ +

関連情報

+ +
    +
  • CSS データ型
    • +
  • CSS 値と単位
    • +
  • 関連する CSS データ型: +
      +
    • {{cssxref("frequency", "<frequency>")}}
      • +
    • {{cssxref("percentage", "<percentage>")}}
      • +
    +
    • +
diff --git a/files/ja/web/css/frequency/index.html b/files/ja/web/css/frequency/index.html new file mode 100644 index 0000000000..956a7bab50 --- /dev/null +++ b/files/ja/web/css/frequency/index.html @@ -0,0 +1,76 @@ +--- +title: +slug: Web/CSS/frequency +tags: + - CSS + - CSS データ型 + - CSS 値と単位 + - Layout + - Reference +translation_of: Web/CSS/frequency +--- +
{{CSSRef}}
+ +

CSS の <frequency> データ型は、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。

+ +

構文

+ +

<frequency> データ型は、 {{cssxref("<number>")}} とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。

+ +

単位

+ +
+
Hz
+
ヘルツ単位の周波数を表します。例： 0Hz、 1500Hz、 10000Hz
+
kHz
+
キロヘルツ単位の周波数を表します。例： 0kHz、 1.5kHz、 10kHz
+
+ +
+

メモ: 0 の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 0 は無効で 0Hz や 0kHz を表すものではありません。単位の大文字と小文字は区別されませんが、国際単位系の表記に従って、 Hz や kHz の H を大文字にするのが良い習慣です。

+
+ +

例

+ +

有効な周波数の値

+ +
12Hz     正の整数
+4.3Hz    非整数
+14KhZ    単位は大文字小文字を区別しません（ただ、国際単位系の表記が推奨されます）
++0Hz     先行する + のあるゼロと単位
+-0kHz    先行する - のあるゼロと単位
+ +

無効な周波数の値

+ +
12.0     これは {{cssxref("<number>")}} で、<frequency> ではありません。単位が必須です。
+7 Hz     {{cssxref("<number>")}} と単位の間に空白を置いてはいけません
+0        単位のないゼロは {{cssxref("<length>")}} では利用できますが、 <frequency> では無効です。
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}初回定義。
+ +
+

メモ: このデータ型は初め、 CSS Level 2 の現在は廃止された aural メディアタイプで、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で <frequency> データ型が再導入されました。

+
+ +

ブラウザーの対応

+ + + +

{{Compat("css.types.frequency")}}

diff --git a/files/ja/web/css/gap/index.html b/files/ja/web/css/gap/index.html new file mode 100644 index 0000000000..2d2e1d70d9 --- /dev/null +++ b/files/ja/web/css/gap/index.html @@ -0,0 +1,223 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックスレイアウト + - CSS プロパティ + - CSS ボックス配置 + - CSS 段組みレイアウト + - Reference + - gap + - リファレンス +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

gap は CSS のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/gap.html")}}
+ + + +
+

CSS グリッドレイアウトでは、当初は grid-gap プロパティを定義していました。この接頭辞付きのプロパティは gap に置き換えられました。しかし、グリッドで grid-gap を実装していて gap を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。

+
+ +

構文

+ +
/* 単一の <length> 値 */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* 単一の <percentage> 値 */
+gap: 16%;
+gap: 100%;
+
+/* 二つの <length> 値 */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* 一つ又は二つの <percentage> 値 */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() 値 */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* グローバル値 */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

このプロパティは <'row-gap'> の値と、任意で <'column-gap'> の値を続けて指定します。 <'column-gap'> が省略された場合、 <'row-gap'> と同じ値が設定されます。

+ +

<'row-gap'> 及び <'column-gap'> はそれぞれ、 <length> 又は <percentage> で指定します。

+ +

値

+ +
+
{{CSSxRef("<length>")}}
+
グリッド線を隔てる溝の幅です。
+
{{CSSxRef("<percentage>")}}
+
要素の寸法に対する、グリッド線を隔てる溝の幅です。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

フレックスレイアウト

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Flex_layout", "auto", "120px")}}

+ +

グリッドレイアウト

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Grid_layout", "auto", "120px")}}

+ +

段組みレイアウト

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/general_sibling_combinator/index.html b/files/ja/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..bd738fbc01 --- /dev/null +++ b/files/ja/web/css/general_sibling_combinator/index.html @@ -0,0 +1,86 @@ +--- +title: 一般兄弟結合子 +slug: Web/CSS/General_sibling_combinator +tags: + - CSS + - Reference + - Selectors + - セレクター +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

一般兄弟結合子 (general sibling combinator, ~) は2個のセレクターを結びつけます。右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。

+ +

まず、右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に現れることです。（直後である必要はありません）

+ +

もうひとつは、これらの要素が同じ親要素（{{Glossary("element", "要素")}}）をもつことです。

+ +
/* 任意の画像の兄弟で、
+   その画像より後方にある段落 */
+img ~ p {
+  color: red;
+}
+ +

構文

+ +
先行する要素 ~ 選択される要素 { スタイルプロパティ }
+
+ +

例

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>This is not red.</span>
+<p>Here is a paragraph.</p>
+<code>Here is some code.</code>
+<span>And here is a red span!</span>
+<code>More code...</code>
+<span>And this is a red span!</span>
+
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を"subsequent-sibling combinator"に変更。
{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}{{Spec2("CSS3 Selectors")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.general_sibling")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html new file mode 100644 index 0000000000..67259799d1 --- /dev/null +++ b/files/ja/web/css/gradient/index.html @@ -0,0 +1,186 @@ +--- +title: +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

<gradient> は CSS のデータ型で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
+ + + +

CSS グラデーションは固有の寸法を持ちません。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。

+ +

構文

+ +

<gradient> データ型は、以下のリストにある関数型のうちの一つによって定義します。

+ +
+

線形 (linear) グラデーション

+ +

色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。

+
+ +
+

放射 (radical) グラデーション

+ +

色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。

+
+ +
+

反復 (repeating) グラデーション

+ +

要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。

+
+ +
+

扇形 (conic) グラデーション

+ +

色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。

+
+ +

補間

+ +

色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 transparent キーワードを使用するとこれを使用しないことがあるので注意してください。)

+ +

例

+ +

線形グラデーションの例

+ +

単純な線形グラデーションです。

+ + + +
.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}
+ +

{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}

+ +

放射グラデーションの例

+ +

単純な放射グラデーションです。

+ + + +
.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
+ +

{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}

+ +

反復グラデーションの例

+ +

単純な線形および放射の反復グラデーションの例です。

+ + + +
.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}
+ +

{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}

+ +

扇形グラデーションの例

+ +

単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。

+ + + +
.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+
+ +

{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#gradients', '<gradient>')}}{{Spec2('CSS4 Images')}}conic-gradient を追加
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.image.gradient")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html new file mode 100644 index 0000000000..9a7579c14b --- /dev/null +++ b/files/ja/web/css/grid-column-start/index.html @@ -0,0 +1,240 @@ +--- +title: grid-column-start +slug: Web/CSS/grid-column-start +tags: + - CSS + - CSS Grid + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/grid-column-start +--- +

grid-column-start は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムのの開始位置を指定します。この開始位置は、{{Glossary("grid areas", "グリッド領域")}}の行の開始の端を指定します。

+ +
{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+grid-column-start: auto;
+
+/* <custom-ident> 値 */
+grid-column-start: somegridarea;
+
+/* <integer> + <custom-ident> 値 */
+grid-column-start: 2;
+grid-column-start: somegridarea 4;
+
+/* span + <integer> + <custom-ident> 値 */
+grid-column-start: span 3;
+grid-column-start: span somegridarea;
+grid-column-start: span somegridarea 5;
+
+/* グローバル値 */
+grid-column-start: inherit;
+grid-column-start: initial;
+grid-column-start: unset;
+
+ +

このプロパティは単一の <grid-line> 値で指定します。 <grid-line> 値は次のように指定します。

+ +
    +
  • auto キーワード
    • +
  • <custom-ident> 値
    • +
  • <integer> 値
    • +
  • <custom-ident> および <integer> を空白で区切ったもの
    • +
  • span キーワードと <custom-ident> または <integer> またはその両方。
    • +
+ +

値

+ +
+
auto
+
プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の 1 とするためのキーワードです。
+
<custom-ident>
+
<custom-ident>-start という名前の付いた線がある場合、これはそのような線の最初がグリッアイテムの配置に関わります。 +

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 grid-column-start: foo; と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に foo-start という名前の線が明示的に存在しない限り)。

+ +

そうでなければ、これは <custom-ident> に沿って整数の 1 が指定されたものとして扱われます。

+
+
<integer> && <custom-ident>?
+
n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

+ +

0 の {{cssxref("integer")}} 値は無効です。

+
+
span && [ <integer> || <custom-ident> ]
+
グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

+ +

the <integer> が省略された場合の既定値は 1 です。負の数や 0 は無効です。

+ +

<custom-ident> は span の値を取ることができません。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

グリッドアイテムの列の開始位置の設定

+ +

HTML

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

結果

+ +

{{ EmbedLiveSample('Setting_column_start_for_a_grid_item', '230', '420') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid-column-start", "grid-column-start")}}{{Spec2("CSS3 Grid")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.grid-column-start")}}

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html new file mode 100644 index 0000000000..46ed1f1a47 --- /dev/null +++ b/files/ja/web/css/grid-column/index.html @@ -0,0 +1,191 @@ +--- +title: grid-column +slug: Web/CSS/grid-column +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - Reference +translation_of: Web/CSS/grid-column +--- +

grid-column は CSS のプロパティで、 {{cssxref("grid-column-start")}} および {{cssxref("grid-column-end")}} の一括指定プロパティであり、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。

+ +
{{EmbedInteractiveExample("pages/css/grid-column.html")}}
+ + + +

構文

+ +

このプロパティは一つまたは二つの <grid-line> の値で指定します。

+ +

二つの <grid-line> 値を指定する場合は、 "/" で区切ります。個別指定の grid-column-start はスラッシュの前に設定し、個別指定の grid-column-end はスラッシュの後に設定します。

+ +

それぞれの <grid-line> の値は以下の何れかを指定できます。

+ +
    +
  • auto キーワード
    • +
  • <custom-ident> 値
    • +
  • <integer> 値
    • +
  • <custom-ident> および <integer> を空白で区切ったもの
    • +
  • span キーワードと <custom-ident> または <integer> またはその両方。
    • +
+ +

値

+ +
+
auto
+
プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の 1 とするためのキーワードです。
+
<custom-ident>
+
'<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 +

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 grid-column: foo; と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に foo-start/foo-end という名前の線が明示的に存在しない限り)。

+ +

そうでなければ、これは <custom-ident> に沿って整数の 1 が指定されたものとして扱われます。

+
+
<integer> && <custom-ident>?
+
n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

+ +

0 の {{cssxref("integer")}} 値は無効です。

+
+
span && [ <integer> || <custom-ident> ]
+
グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

+ +

the <integer> が省略された場合の既定値は 1 です。負の数や0は無効です。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "100px")}}

+ +

Internet Explorer での問題

+ +

IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に -ms-{{cssxref("grid-column")}} および -ms-{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 ソースリポジトリ

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}{{Spec2("CSS3 Grid")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.grid-column")}}

+ +

関連情報

+ +
    +
  • 関連する CSS プロパティ: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}
    • +
  • グリッドレイアウトガイド: CSS グリッドでの行ベースの配置
    • +
  • 動画チュートリアル: 行ベースの配置
    • +
+ + diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html new file mode 100644 index 0000000000..c9267b6bc6 --- /dev/null +++ b/files/ja/web/css/grid-row/index.html @@ -0,0 +1,208 @@ +--- +title: grid-row +slug: Web/CSS/grid-row +tags: + - CSS + - CSS Grid + - CSS Property + - CSS グリッド + - CSS プロパティ + - Reference + - grid-row +translation_of: Web/CSS/grid-row +--- +

grid-row は CSS のプロパティで、 {{cssxref("grid-row-start")}} および {{cssxref("grid-row-end")}} の一括指定プロパティであり、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。

+ +
{{EmbedInteractiveExample("pages/css/grid-row.html")}}
+ + + +

二つの <grid-line> 値が指定された場合は、個別指定の grid-column-start はスラッシュの前に設定し、個別指定の grid-column-end はスラッシュの後に設定します。

+ +

構文

+ +
/* キーワード値 */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* <custom-ident> 値 */
+grid-row: somegridarea;
+grid-row: somegridarea / someothergridarea;
+
+/* <integer> + <custom-ident> 値 */
+grid-row: somegridarea 4;
+grid-row: 4 somegridarea / 6;
+
+/* span + <integer> + <custom-ident> 値 */
+grid-row: span 3;
+grid-row: span somegridarea;
+grid-row: 5 somegridarea span;
+grid-row: span 3 / 6;
+grid-row: span somegridarea / span someothergridarea;
+grid-row: 5 somegridarea span / 2 span;
+
+/* グローバル値 */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+
+ +

値

+ +
+
auto
+
プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の 1 とするためのキーワードです。
+
<custom-ident>
+
'<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 +

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 grid-row: foo; と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に foo-start/foo-end という名前の線が明示的に存在しない限り)。

+ +

そうでなければ、これは <custom-ident> に沿って整数の 1 が指定されたものとして扱われます。

+
+
<integer> && <custom-ident>?
+
n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

+ +

0 の {{cssxref("integer")}} 値は無効です。

+
+
span && [ <integer> || <custom-ident> ]
+
グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 +

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

+ +

the <integer> が省略された場合の既定値は 1 です。負の数や0は無効です。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+
+ +

{{EmbedLiveSample("Example", "200px", "200px")}}

+ +

Internet Explorer での問題

+ +

IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に -ms-{{cssxref("grid-column")}} および -ms-{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 ソースリポジトリ

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}{{Spec2("CSS3 Grid")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.grid-row")}}

+ +

関連情報

+ +
    +
  • 関連する CSS プロパティ: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}
    • +
  • グリッドレイアウトガイド: CSS グリッドでの行ベースの配置
    • +
  • 動画チュートリアル: 行ベースの配置
    • +
+ + diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..8b0c14760e --- /dev/null +++ b/files/ja/web/css/grid-template-areas/index.html @@ -0,0 +1,185 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid-template-areas +--- +

grid-template-areas CSS プロパティは、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。

+ +
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+ + + +

これらの領域は特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} およびそれらの短縮プロパティ {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, {{cssxref("grid-area")}} から参照できます。

+ +

構文

+ +
/* キーワード値 */
+grid-template-areas: none;
+
+/* <string> 値 */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* グローバル値 */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+
+ +

値

+ +
+
none
+
グリッドコンテナーは名前付きのグリッド領域を定義しません。
+
{{cssxref("<string>")}}+
+
リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。
+ +

正式な構文

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

描画結果

+ +

{{EmbedLiveSample("Example", "100%", "250px")}}

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}初期定義。
+ +

{{cssinfo}}

+ +

ブラウザーの実装状況

+ + + +

{{Compat("css.properties.grid-template-areas")}}

+ +

関連情報

+ +
    +
  • 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}
    • +
  • グリッドレイアウトガイド: Grid template areas
    • +
  • 動画チュートリアル: Grid Template Areas
    • +
+ +
diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..6d3ec0ce95 --- /dev/null +++ b/files/ja/web/css/grid-template-columns/index.html @@ -0,0 +1,217 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +tags: + - CSS + - CSS Grid + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/grid-template-columns +--- +

grid-template-columns は CSS のプロパティで、{{glossary("grid column", "グリッド列")}}のライン名とトラックのサイズ変更機能を定義します。

+ +
{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+grid-template-columns: none;
+
+/* <track-list> 値 */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+grid-template-columns: subgrid;
+
+/* <auto-track-list> 値 */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* グローバル値 */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

値

+ +
+
none
+
明示的なグリッドがないことを示します。どの列も暗黙的に生成され、それらのサイズは {{cssxref("grid-auto-columns")}} プロパティによって決定されます。
+
{{cssxref("<length>")}}
+
負の値ではない長さで、列の幅を指定します。
+
{{cssxref("<percentage>")}}
+
グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "<percentage>")}} です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を auto として扱う必要があります。
+ トラックの本質的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。
+
{{cssxref("<flex>")}}
+
fr の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 <flex> の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 +

minmax() 表記の外に現れた場合は、最小値が自動として扱われます (つまり minmax(auto, <flex>))。

+
+
max-content
+
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
+
min-content
+
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
+
{{cssxref("minmax", "minmax(min, max)")}}
+
min 以上、 max 以下の寸法の範囲を定義する関数表記法です。 max が min より小さい場合、 max は無視され、関数は min として扱われます。最大値として、 <flex> 値はトラックのフレックス係数を設定します。最小値としては無効です。
+
auto
+
最大値であれば max-content と同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。
+
+

注: トラックの寸法が auto の場合 (そして auto の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
min(max-content, max(auto, argument)) の式を表し、 auto と同様に (すなわち minmax(auto, max-content) と) 計算されますが、トラックの寸法が auto の最小値よりも大きい場合は argument でクランプされるところが異なります。
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。
+
subgrid
+
subgrid の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。
+
+ +
+

サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

グリッド列の寸法の指定

+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

結果

+ +

{{EmbedLiveSample("Specifying_grid_column_sizes", "100%", "20px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}{{Spec2("CSS Grid 2")}}subgrid を追加
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS Grid")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.grid-template-columns")}}

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html new file mode 100644 index 0000000000..fee4ff7917 --- /dev/null +++ b/files/ja/web/css/grid-template/index.html @@ -0,0 +1,209 @@ +--- +title: grid-template +slug: Web/CSS/grid-template +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid-template +--- +

grid-template CSS プロパティは、{{glossary("grid column", "grid columns")}} および {{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義するための 短縮 プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/grid-template.html")}}
+ + + + + +

作者は、次の個別のプロパティの値で設定することもできます: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}

+ +

構文

+ + +
/* キーワード値 */
+grid-template: none;
+
+/* grid-template-rows / grid-template-columns の値 */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* grid-template-areas grid-template-rows / grid-template-column の値 */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* グローバル値 */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+
+ +

値

+ +
+
none
+
3 個すべてのプロパティの値に none を設定します。これは明示的なグリッドが無いことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。
+
<'grid-template-rows'> / <'grid-template-columns'>
+
{{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に none を設定します。
+
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
+
{{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には auto が設定されます)。さらに、各サイズの前後で定義された名前付きラインをつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は none が設定されます)。
+ +

注記: これらのトラックリストに {{cssxref("repeat")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。

+
+
+ +

注記: {{cssxref("grid")}} 短縮プロパティは同じ構文を受け入れますが、暗黙的な grid プロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(grid-template とは対照的に、) grid を使用してください。

+ +

正式な構文

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-column: foot;
+}
+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

描画結果

+ +

{{EmbedLiveSample("Examples", "100%", "200px")}}

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}{{Spec2("CSS3 Grid")}}初期定義
+ +

{{cssinfo}}

+ +

ブラウザーの実装状況

+ +

+ + + +

{{Compat("css.properties.grid-template")}}

+ +

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html new file mode 100644 index 0000000000..50c4b368e6 --- /dev/null +++ b/files/ja/web/css/grid/index.html @@ -0,0 +1,199 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - Reference + - grid + - grid-auto-columns + - grid-auto-flow + - grid-auto-rows + - grid-template-areas + - grid-template-columns + - grid-template-rows +translation_of: Web/CSS/grid +--- +

CSS の grid プロパティは一括指定プロパティで、明示的なすべてのグリッドプロパティ ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}) と、暗黙のすべてのグリッドプロパティ ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}) を単一の宣言で設定します。

+ +
{{EmbedInteractiveExample("pages/css/grid.html")}}
+ + + +
+

メモ: 明示的なグリッドプロパティ、または暗黙のグリッドプロパティのみを単一の grid 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。

+
+ +

構文

+ +
/* <'grid-template'> 値 */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* グローバル値	 */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +

値

+ +
+
<'grid-template'>
+
{{cssxref("grid-template")}} を定義し、これには {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} が含まれます。
+
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+
{{cssxref("grid-template-rows")}} プロパティを明示的に設定 (および {{cssxref("grid-template-columns")}} プロパティを none に設定) することで行トラックを設定し、 {{cssxref("grid-auto-columns")}} プロパティを設定 (および {{cssxref("grid-auto-rows")}} を auto に設定) することで列トラックの自動反復方法を設定します。 dense が設定されていれば、 {{cssxref("grid-auto-flow")}} も column に設定されます。 +

ほかの grid のサブプロパティはすべて、初期値に初期化されます。

+
+
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+
{{cssxref("grid-template-columns")}} プロパティを明示的に設定 (および {{cssxref("grid-template-rows")}} プロパティを none に設定) することで列トラックを設定し、 {{cssxref("grid-auto-rows")}} プロパティを設定 (および {{cssxref("grid-auto-columns")}} を auto に設定) することで行トラックの児童反復方法を設定します。 dense が設定されていれば、 {{cssxref("grid-auto-flow")}} も column に設定されます。 +

ほかの grid のサブプロパティはすべて、初期値に初期化されます。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.grid")}}

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/hanging-punctuation/index.html b/files/ja/web/css/hanging-punctuation/index.html new file mode 100644 index 0000000000..2f1600dd2a --- /dev/null +++ b/files/ja/web/css/hanging-punctuation/index.html @@ -0,0 +1,124 @@ +--- +title: hanging-punctuation +slug: Web/CSS/hanging-punctuation +tags: + - CSS + - CSS Property + - CSS Text + - CSS テキスト + - CSS プロパティ + - Experimental + - Reference + - リファレンス +translation_of: Web/CSS/hanging-punctuation +--- +
{{CSSRef}}
+ +

hanging-punctuation は CSS のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。

+ +
/* キーワード値 */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* 2 つのキーワード */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* 3 つのキーワード */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* グローバル値 */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+
+ +

{{CSSInfo}}

+ +

構文

+ +

hanging-punctuation プロパティは 1 つ、2 つ、 3 つの値で指定することができます。

+ +
    +
  • 値1つの構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。
    • +
  • 値2つの構文は、次のうち 1 つを使用します。 +
      +
    • first と併せて、last, allow-end, force-end のいずれか
      • +
    • last と併せて、first, allow-end, force-end のいずれか
      • +
    +
    • +
  • 値3つの構文は、次のうち 1 つを使用します。 +
      +
    • first, allow-end, last
      • +
    • first, force-end, last
      • +
    +
    • +
+ +

値

+ +
+
none
+
文字のぶら下げを行いません。
+
first
+
要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。
+
last
+
要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。
+
force-end
+
行末の句読点をぶら下げます。
+
allow-end
+
句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
+ +

CSS

+ +
p {
+  hanging-punctuation: first last;
+  margin: .5rem;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}{{Spec2("CSS3 Text")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.hanging-punctuation")}}

diff --git a/files/ja/web/css/height/index.html b/files/ja/web/css/height/index.html new file mode 100644 index 0000000000..9fa11ce89d --- /dev/null +++ b/files/ja/web/css/height/index.html @@ -0,0 +1,167 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - CSS プロパティ + - Layout + - Reference + - Vertical + - dimensions + - height + - 'recipe:css-property' + - size + - レイアウト +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 {{cssxref("box-sizing")}} が border-box に設定されていた場合は、 境界領域の高さを定義します。

+ +
{{EmbedInteractiveExample("pages/css/height.html")}}
+ + + +

{{cssxref("min-height")}} 及び {{cssxref("max-height")}} プロパティは height を上書きします。

+ +

構文

+ +
/* キーワード値 */
+height: auto;
+
+/* <length> 値 */
+height: 120px;
+height: 10em;
+
+/* <percentage> 値 */
+height: 75%;
+
+/* グローバル値 */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
絶対値で高さを定義します。
+
{{cssxref("<percentage>")}}
+
包含ブロックの高さのパーセントで高さを定義します。
+
auto
+
指定された要素の高さをブラウザーが計算して決めます。
+
max-content
+
本来の望ましい高さです。
+
min-content
+
本来の最小の高さです。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div id="taller">50ピクセルの高さです。</div>
+<div id="shorter">25ピクセルの高さです。</div>
+<div id="parent">
+  <div id="child">
+    親の半分の高さです。
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 240)}}

+ +

アクセシビリティの考慮事項

+ +

テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の height を設定するよう確認してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, available, fit-content の追加。
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}{{cssxref("<length>")}} 値のサポートを追加。どの要素に用いるかを明記。
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.height")}}

+ +

関連情報

+ +
    +
  • ボックスモデル, {{cssxref("box-sizing")}}
    • +
  • {{cssxref("max-height")}}, {{cssxref("min-height")}}
    • +
  • 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}
    • +
diff --git a/files/ja/web/css/hyphens/index.html b/files/ja/web/css/hyphens/index.html new file mode 100644 index 0000000000..4415a4764a --- /dev/null +++ b/files/ja/web/css/hyphens/index.html @@ -0,0 +1,156 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - CSS Property + - CSS テキスト + - CSS プロパティ + - CSS 文字列 + - Reference +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +

hyphens は CSS のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

ハイフネーションの規則は言語に依存します。 HTML では言語は lang 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 xml:lang 属性を使用する必要があります。

+ +
+

注: どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。

+
+ +

構文

+ +
/* キーワード値 */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* グローバル値 */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

hyphens プロパティは、以下に挙げたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
none
+
単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。
+
manual
+
単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照してください。
+
auto
+
ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照）があれば、自動的な改行位置の選択を上書きします。
+
+ +
+

メモ: auto を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の lang 属性を必ず指定してください。

+
+ +

形式文法

+ +
{{csssyntax}}
+ +

改行候補位置の提案

+ +

文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。

+ +
+
U+2010 (HYPHEN)
+
「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。
+
U+00AD (SHY)
+
不可視の「ソフト」ハイフン ("soft" hyphen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 &shy; を使用してソフトハイフンを挿入することができます。
+
+ +
+

HTML の {{htmlelement("wbr")}} 要素によって改行が行われた場合、ハイフンは挿入されません。

+
+ +

例

+ +

以下の例では3つのクラスを使用し、それぞれの hyphens プロパティの設定を示します。

+ +

HTML

+ +
<dl>
+  <dt><code>none</code>: no hyphen; overflow if needed</dt>
+  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
+  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
+  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
+  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
+  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
+</dl>
+
+ +

CSS

+ +
dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

結果

+ +
+

{{EmbedLiveSample("Example", "100%", 490)}}

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.properties.hyphens")}}

+
+ +

関連情報

+ +
    +
  • {{Cssxref("content")}}
    • +
  • {{cssxref("overflow-wrap")}} (旧 word-wrap)
    • +
  • {{cssxref("word-break")}}
    • +
diff --git a/files/ja/web/css/id_selectors/index.html b/files/ja/web/css/id_selectors/index.html new file mode 100644 index 0000000000..7e61a62063 --- /dev/null +++ b/files/ja/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: ID セレクター +slug: Web/CSS/ID_selectors +tags: + - CSS + - Reference + - Selector + - Selectors +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

CSS の ID セレクター (ID selector) は、 {{htmlattrxref("id")}} 属性の値に基づいて要素と一致します。選択される要素の id 属性は、セレクターで指定した値と完全一致していなければなりません。

+ +
/* id="demo" のついた要素 */
+#demo {
+  border: red 2px solid;
+}
+ +

構文

+ +
#id_value { スタイルプロパティ }
+ +

なお、これは次の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です (ただし、詳細度は異なります)。

+ +
[id=id_value] { スタイルプロパティ }
+ +

例

+ +

CSS

+ +
#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">これは特別な ID がついています！</div>
+<div>これは単なる普通の div です。</div>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", '100%', 50)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.id")}}

diff --git a/files/ja/web/css/ident/index.html b/files/ja/web/css/ident/index.html new file mode 100644 index 0000000000..805dbe3e25 --- /dev/null +++ b/files/ja/web/css/ident/index.html @@ -0,0 +1,79 @@ +--- +title: ident +slug: Web/CSS/ident +translation_of: Web/CSS/ident +--- +

{{CSSRef}}{{Draft}}

+ +

<ident> CSS データ型 は、 {{glossary("identifier")}} として使用される任意の文字列を意味します。

+ +

構文

+ +

<custom-ident> の構文は CSS の識別子 (プロパティ名など)に似ていますが、 大文字と小文字の区別 がある点が違います。 これは次の文字から成る文字の並びです:

+ +
    +
  • アルファベット (A - Z と a - z)
    • +
  • 数字 (0 - 9)
    • +
  • ハイフン (-)
    • +
  • アンダースコア (_)
    • +
  • エスケープ文字 (バックスラッシュ \ に続く)
    • +
  • Unicode 文字 (バックスラッシュ \ と、それに続く 1-6 個の16進数を形式をとる、Unicode コードポイント)
    • +
+ +

大文字と小文字の区別 があるため id1、 Id1、 iD1 そして ID1 は全て異なる識別子である点に注意してください。しかし、文字をエスケープする方法はいくつか存在するため、 toto\? と toto\3F は同じ識別子です。

+ +

例

+ +

有効な識別子

+ +
nono79      	アルファベットと数字の組み合わせ
+ground-level	アルファベットとダッシュの組み合わせ
+-test       	ダッシュとそれに続く英数字
+--toto      	identifier の様なカスタムプロパティ
+_internal   	アンダースコアとそれに続く英数字
+\22 toto    	Unicode 文字とそれに続く一連の英数字
+bili\.bob   	正しくエスケープされたピリオド
+
+ +

無効な識別子

+ +
34rem   	数字で始まってはいけません
+-12rad  	ダッシュで始まって数字が続いてはいけません
+bili.bob	アルファベット、 _、 - のみをエスケープする必要はありません
+'bilibob'	これは {{CSSxRef("<string>")}} になります
+"bilibob"	これは {{CSSxRef("<string>")}} になります
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('CSS4 Values', '#css-identifier', '<ident>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#css-identifier', '<ident>')}}{{Spec2('CSS3 Values')}}
+ +

ブラウザーの互換性

+ +

このデータ型は、他のCSS構文の定義を単純化するために使用される便利な型なので実際の型ではありません。

+ +

関連情報

+ +
    +
  • {{CSSxRef("<custom-ident>")}} – CSS全体のキーワードを除く <ident> 値の制限されたサブセット、 {{CSSxRef("--*", "custom properties")}} 及びその他のプロパティ値。
    • +
diff --git a/files/ja/web/css/image-orientation/index.html b/files/ja/web/css/image-orientation/index.html new file mode 100644 index 0000000000..248f5c450e --- /dev/null +++ b/files/ja/web/css/image-orientation/index.html @@ -0,0 +1,131 @@ +--- +title: image-orientation +slug: Web/CSS/image-orientation +tags: + - CSS + - CSS Image + - CSS Property + - CSS プロパティ + - CSS 画像 + - EXIF + - Experimental + - Reference + - image-orientation + - リファレンス + - 画像の向き + - 画像補正 +translation_of: Web/CSS/image-orientation +--- +

image-orientation は CSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。向きの調整以外に使用してはいけません。そのような場合は、 {{cssxref("transform")}} プロパティで rotate {{cssxref("<transform-function>")}} の値を使用してください。

+ +
+

警告: このプロパティは仕様書で非推奨となっています。この機能は {{HTMLElement("img")}} や {{HTMLElement("picture")}} 要素のプロパティに、おそらく from-image の例外を除いて移行する可能性があります。 flip および <angle> の値は Firefox 63 で廃止されました。

+
+ +
/* キーワード値 */
+image-orientation: none;
+image-orientation: from-image; /* 画像の EXIF データを使用 */
+
+/* グローバル値 */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+
+/* 廃止された値 {{obsolete_inline(63)}} */
+image-orientation: 90deg; /* 90度回転 */
+image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */
+image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
+
from-image
+
画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。
+
{{cssxref("<angle>")}} {{non-standard_inline}}{{obsolete_inline(63)}}
+
画像を回転させる {{cssxref("<angle>")}}。 もっとも近い 90deg (0.25turn) 単位の値に丸められます。
+
flip {{non-standard_inline}}{{obsolete_inline(63)}}
+
{{cssxref("<angle>")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。 {{cssxref("<angle>")}} を指定しない場合は、 0deg を使用します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

使用上のメモ

+ +

このプロパティは、回転したカメラで撮影された画像の方向を修正するためだけを目的としています。自由に回転させるために使用するべきではありません。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 {{cssxref("transform")}} プロパティに rotate キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。

+ +

{{cssxref("<transform-function>")}} などの他の CSS プロパティとの組み合わせで使用された場合、 image-orientation による回転は、常に他の変形が行われる前に適用されます。

+ +

例

+ +

CSS

+ +
#image {
+  image-orientation: from-image; /* ライブ例の中で変更することができます */
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Example", "100%", 240)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Images', '#the-image-orientation', 'image-orientation')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.image-orientation")}}

+ +

関連情報

+ +
    +
  • ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
    • +
  • {{cssxref("transform")}} および {{cssxref("rotate")}}
    • +
+ +
{{CSSRef}}
diff --git a/files/ja/web/css/image-rendering/index.html b/files/ja/web/css/image-rendering/index.html new file mode 100644 index 0000000000..bf4a1c5162 --- /dev/null +++ b/files/ja/web/css/image-rendering/index.html @@ -0,0 +1,129 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +tags: + - CSS + - CSS プロパティ + - CSS 画像 + - Reference + - image-rendering +translation_of: Web/CSS/image-rendering +--- +
{{CSSRef}}
+ +

CSS の image-rendering プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。

+ +

{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が 100×100px であって、実際の寸法が 200×200px (または 50×50px) であるとき、画像は image-rendering で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

+ +

構文

+ +
/* キーワード値 */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* グローバル値 */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+ +

値

+ +
+
auto
+
拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko はバイリニア (bilinear) 再サンプリングを使用します (high-quality)。
+
smooth {{Experimental_Inline}}
+
画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。
+
high-quality {{Experimental_Inline}}
+
smooth と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。 high-quality の画像は他の値よりも優先されます。
+
crisp-edges
+
画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
+
pixelated
+
画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は auto と同じになります。
+
+ +
+

メモ: optimizeQuality および optimizeSpeed の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) smooth および pixelated の同義語として定義されていました。

+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ + + + + +
.auto {
+  image-rendering: auto;
+}
+
+.pixelated {
+  -ms-interpolation-mode: nearest-neighbor;
+  image-rendering: pixelated;
+}
+
+.crisp-edges {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
+ +

{{EmbedLiveSample('Examples')}}

+ +
+

メモ: 実際の仕様では、 pixelated と crisp-edges の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) Canvas API は手動の画像データ操作または imageSmoothingEnabled によって pixelated の代替ソリューション を提供することができます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Images", "#the-image-rendering", "image-rendering")}}{{Spec2("CSS3 Images")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.image-rendering")}}

+ +
+

メモ: 仕様書の例にあるようなピクセルアートの拡大縮小には crisp-edges を使うことが想定されていますが、実際にはどのブラウザーも (2020年1月時点で) 対応していません。 Firefox では、 pixelated は最近傍法として解釈されますが、 auto と crisp-edges はトリリニア法または線形で補間されます。

+ +

Chromium と Safari (WebKit) での動作については、 GetInterpolationQuality 関数と CSSPrimitiveValue::operator ImageRendering() をそれぞれ参照してください。

+
+ +

関連情報

+ +
    +
  • その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
diff --git a/files/ja/web/css/image-set()/index.html b/files/ja/web/css/image-set()/index.html new file mode 100644 index 0000000000..a3f00ddc18 --- /dev/null +++ b/files/ja/web/css/image-set()/index.html @@ -0,0 +1,87 @@ +--- +title: image-set() +slug: Web/CSS/image-set() +tags: + - CSS + - CSS Function + - CSS-4 Images + - Function + - Reference + - Web +translation_of: Web/CSS/image-set() +--- +
{{cssref}}
+ +

image-set() は CSS の関数表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。

+ +

解像度と帯域は端末やネットワークアクセスによって様々です。 image-set() 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。

+ +

image-set() はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。

+ +

構文

+ +
image-set() = image-set( <image-set-option># )
+where <image-set-option> = [ <image> | <string> ] <resolution> and
+      <string> is an <url>
+
+ +

値

+ +

もっともよく見かけるのは url() または <string> 値ですが、 <image> は画像セット以外のあらゆる画像型を取ることができます。 image-set() 関数は他の image-set() 関数の中に入れることはできません。

+ +

<resolution> の単位には、ピクセル当たりのドット数を表す x または dppx、インチ当たりのドット数を表す dpi、センチメートル当たりのドット数を表す dpcm があります。 image-set() の中の画像はすべて、固有の解像度が必要です。

+ +

例

+ +

image-set() を使用して代替の background-image オプションを提供する

+ +
background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x,
+                             "cat-print.png" 600dpi);
+ +

この例は image-set() の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。

+ +

アクセシビリティの考慮

+ +

ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.image.image-set")}}

+ +

関連情報

+ +
    +
  • {{cssxref("image")}}
    • +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("element")}}
    • +
  • {{cssxref("url")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/ja/web/css/image/index.html b/files/ja/web/css/image/index.html new file mode 100644 index 0000000000..04758c43d3 --- /dev/null +++ b/files/ja/web/css/image/index.html @@ -0,0 +1,176 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/image +--- +

{{CSSRef}}

+ +

<image> は CSS のデータ型で、二次元の画像を表現します。

+ +

構文

+ +

<image> データ型は以下のいずれかによって表すことができます。

+ +
    +
  • {{CSSxRef("<url>")}} データ型で記述された画像
    • +
  • {{CSSxRef("<gradient>")}} データ型
    • +
  • {{CSSxRef("element")}} 関数で定義されたウェブページの一部
    • +
  • {{CSSxRef("image()")}} 関数で定義された画像、画像フラグメント、単色の色
    • +
  • {{CSSxRef("cross-fade")}} 関数で定義された2つ以上の画像の合成
    • +
  • {{CSSxRef("image-set")}} 関数で定義された、解像度に基づいて定義された画像の選択
    • +
+ +

解説

+ +

CSS はさまざま種類の画像を扱うことができます。

+ +
    +
  • JPEG や PNG やその他のラスタ形式など、固有の寸法 (intrinsic dimensions) (自然の寸法) を持つ画像。
    • +
  • 一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、複数の固有の寸法を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)
    • +
  • SVG またはその他のベクター形式のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。
    • +
  • CSS のグラデーションなど、固有の寸法がなく、固有のアスペクト比もない画像。
    • +
+ +

CSS はオブジェクトの正しい寸法を、 (1) 固有の寸法、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などの CSS プロパティで定義された指定された寸法、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような既定の寸法によって特定します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
オブジェクトの種類 (CSS プロパティ)既定のオブジェクトの寸法
{{CSSxRef("background-image")}}要素の background の置かれる領域の寸法
{{CSSxRef("list-style-image")}}1em の文字の寸法
{{CSSxRef("border-image-source")}}要素の境界画像領域の寸法
{{CSSxRef("cursor")}}クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法
{{CSSxRef("mask-image")}}?
{{CSSxRef("shape-outside")}}?
{{CSSxRef("mask-border-source")}}?
@counter-style の {{CSSxRef("symbols")}}危険性のある機能です。対応している場合、クライアントのシステムでのカーソルの寸法に合わせたブラウザー定義の寸法です。
擬似要素 ({{CSSxRef("::after")}} または {{cssxref("::before")}}) の {{CSSxRef("content")}}300px × 150px の矩形
+ +

正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。

+ +
    +
  • 指定された寸法に幅と高さの両方が定義されていれば、その値が実際の寸法に使われます。
    • +
  • 指定された寸法に幅と高さのどちらかのみが定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。
    • +
  • 指定された寸法が幅と高さを定義していないときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。
    • +
+ +
注: すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細はブラウザーの互換性の節をご覧ください。
+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

+ + + +

例

+ +

有効な画像

+ +
url(test.jpg)               /* <url>、但し test.jpg は実在する画像 */
+linear-gradient(blue, red)  /* <gradient> */
+element(#realid)            /* element() 関数で参照されるウェブページの一部、
+                               ページ上に "realid" が実在する ID である場合 */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                            /* arrow.png が対応している画像であれば、 <url> の元画像の
+                               左上から 16x16 を選択し、そうでなければ赤一色の見本になります。
+                               言語が右書きの場合は、画像は水平方向に反転します。 */
+cross-fade(20% url(twenty.png), url(eighty.png))
+                            /* 多重露光の画像で、 twenty が 20% の露光で、
+                               eighty が 80% の露光になる */
+image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
+                            /* 様々な解像度による画像の選択 */
+ +

無効な画像

+ +
nourl.jpg            /* 画像ファイルは url() 関数により示す必要がある */
+url(report.pdf)      /* url() 関数で指すファイルは画像でなければならない */
+element(#fakeid)     /* 要素 ID はページ上に実在する ID でなければならない */
+image(z.jpg#xy=0,0)  /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */
+image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Images", "#typedef-image", "<image>")}}{{Spec2("CSS4 Images")}}Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("image-resolution")}} を追加
{{SpecName("CSS3 Images", "#typedef-image", "<image>")}}{{Spec2("CSS3 Images")}}初回定義。これ以前は <image> データ型の明示的な定義はなし。画像は url() 関数記法でしか定義できなかった
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.image")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("<gradient>")}}
    • +
  • {{CSSxRef("element")}}
    • +
  • {{CSSxRef("imagefunction", "image()")}}
    • +
  • {{CSSxRef("image-set")}}
    • +
  • {{CSSxRef("cross-fade")}}
    • +
diff --git a/files/ja/web/css/ime-mode/index.html b/files/ja/web/css/ime-mode/index.html new file mode 100644 index 0000000000..22d83ff620 --- /dev/null +++ b/files/ja/web/css/ime-mode/index.html @@ -0,0 +1,102 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS + - CSS Reference + - Deprecated +translation_of: Web/CSS/ime-mode +--- +
{{CSSRef}} {{deprecated_header}}
+ +

ime-mode プロパティは、テキストフィールドで Input Method Editor (以下 IME) をコントロールします。このプロパティは廃止されました。

+ +
/* Keyword values */
+ime-mode: auto;
+ime-mode: normal;
+ime-mode: active;
+ime-mode: inactive;
+ime-mode: disabled;
+
+/* Global values */
+ime-mode: inherit;
+ime-mode: initial;
+ime-mode: unset;
+ +

ime-modeは、一部のブラウザーで無秩序に実装されたプロパティです。これは、Microsoft が独自の拡張機能として Internet Explorer 5 で導入したものです。{{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}

+ +
+

Note: 一般的に、パブリックなWebサイトがIMEモードを変更することは適切ではありません。 このプロパティは、プライベートなWebアプリケーションでのみ使用すべきです。また、以前にレガシーコードで設定されていた場合は、プロパティを元に戻すべきです。

+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
auto
+
現在の IME の状態を変更しません。これはデフォルトの設定です。
+
normal
+
IME の状態を通常の状態に変更します。この値はユーザースタイルシートでウェブページが指定した値を上書きするために用意されました。 この値は Internet Explorer ではサポートされていません。
+
active
+
コンテンツがフォーカスを得た時に IME は自動的にオンになります。ユーザーがオフにしない限りテキスト入力には IME が使用されます。 Linux ではサポートされていません。
+
inactive
+
コンテンツがフォーカスを得た時に IME は自動的にオフに設定されますが、ユーザーは任意で IME をオンにする事ができます。 Linux ではサポートされていません。
+
disabled
+
IME は無効にされます。ユーザーによって IME をオンにする事はできません。
+
+ +

公式の構文

+ +
{{csssyntax}}
+ +

例

+ +

この例は、フィールドの IME のサポートを無効にします。これは、 拡張文字セットをサポートしていないデータベースにデータを入力するフィールドの一般的なプラクティスでした。

+ +
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+ +
+

拡張文字がフォームを通過しないように IME を無効にすることに依存しないでください。 IME を無効にしても、拡張文字をフォームのフィールドに貼り付けることはできます。

+
+ +

注記

+ +

Firefox の ime-mode は Internet Explorer と異なり、<input type="password"> にも適用できます。しかしこれはユーザーの使い勝手にはマイナスの影響を与えます。パスワードフィールドでは IME は有効にされるべきではありません。ユーザーは以下の CSS をユーザースタイルシートに挿入する事で推奨された設定に従わないサイトの動作を修正する事ができます:

+ +
input[type=password] {
+  ime-mode: auto !important;
+}
+ +

Gecko 1.9 の Mac 版では、disabled に設定されたエディターがフォーカスを失う際に、IME の状態をフォーカスを得る直前の状態には戻りません。そのため、Mac ユーザーは disabled 値を利用したフォームの利用に苛立ちを覚えるかもしれません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}{{Spec2('CSS3 Basic UI')}}初期の定義
+ +

ブラウザー互換性

+ +
+
+ + +

{{Compat("css.properties.ime-mode")}}

+
+
diff --git a/files/ja/web/css/index.html b/files/ja/web/css/index.html new file mode 100644 index 0000000000..6af2d9450c --- /dev/null +++ b/files/ja/web/css/index.html @@ -0,0 +1,122 @@ +--- +title: 'CSS: カスケーディングスタイルシート' +slug: Web/CSS +tags: + - CSS + - Cascading Style Sheets + - Design + - Guide + - Landing + - Layout + - Reference + - Style Sheets + - Styles + - Stylesheets + - 'l10n:priority' +translation_of: Web/CSS +--- +
{{CSSRef}}
+ +

カスケーディングスタイルシート (Cascading Style Sheets) (CSS) はスタイルシート言語であり、 HTML や XML (方言である SVG, MathML, {{Glossary("XHTML")}} などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。 CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。

+ +

CSS はオープンウェブの核となる言語に含まれ、 W3C 標準仕様によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1, CSS2.1, CSS3 について聞いたことがあるでしょう。しかし、 CSS4 は公式なバージョンにはなっていません。

+ +

CSS3 以降、仕様の範囲が大幅に拡大し、 CSS モジュールごとに進捗状況が大きく異なるようになったため、モジュールごとに勧告を開発して公開することがより効果的になりました。 W3C では、 CSS 仕様のバージョン管理の代わりに、最新の CSS 仕様の安定した状態のスナップショットを定期的に取得するようになりました。

+ +

主なリソース

+ +
+
CSS 入門
+
ウェブ開発が初めての人は、CSS の基本の記事を読んで、 CSS とは何か、どのように使用するかを学習しましょう。
+
CSS チュートリアル
+
CSS 学習エリアは、初心者から中級者になるための、すべての基本事項を網羅した豊富なコンテンツがあります。
+
CSS リファレンス
+
CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの CSS リファレンスです。
+
+ +
+

フロントエンドウェブ開発者になるために

+ +

目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。

+ +

始めましょう

+
+ +
+
+

チュートリアル

+ +

CSS 学習エリア は基礎から CSS を教える複数のモジュールにスポットを当てています — 事前の知識は必要ありません。

+ +
+
CSS の第一歩
+
CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。
+
CSS の構成要素
+
+

このモジュールは CSS の第一歩が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。

+ +

ここでの目的は、テキストの装飾やCSS レイアウトなどのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。

+
+
テキストの装飾
+
CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。
+
CSS レイアウト
+
現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートからの相対でボックスを適切な場所に配置する方法、および互いの配置方法を検討します。必要な前提知識をカバーしているので、さまざまな表示の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。
+
CSS を使ってよくある問題を解決する
+
このモジュールは、ウェブページを作成する際の一般的な問題を解決するための CSS の使用方法を説明するコンテンツの節へのリンクを提供しています。
+
+
+ +
+

リファレンス

+ + + +

料理帳

+ +

CSS レイアウト料理帳は、よくあるレイアウトパターンや、サイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。

+ +

CSS 開発のためのツール

+ + + +

メタバグ

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+ +

関連情報

+ + diff --git a/files/ja/web/css/index/index.html b/files/ja/web/css/index/index.html new file mode 100644 index 0000000000..20ef75d74b --- /dev/null +++ b/files/ja/web/css/index/index.html @@ -0,0 +1,10 @@ +--- +title: CSS 関連ドキュメントの索引 +slug: Web/CSS/Index +tags: + - CSS + - Index + - MDN Meta +translation_of: Web/CSS/Index +--- +

{{Index("/ja/docs/Web/CSS")}}

diff --git a/files/ja/web/css/inherit/index.html b/files/ja/web/css/inherit/index.html new file mode 100644 index 0000000000..8d70d43966 --- /dev/null +++ b/files/ja/web/css/inherit/index.html @@ -0,0 +1,87 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - CSS カスケードと継承 + - CSS 値 + - Cascade + - Inheritance + - Layout + - Reference + - inherit + - カスケード + - スタイル + - 継承 +translation_of: Web/CSS/inherit +--- +
{{CSSRef}}
+ +

inherit は CSS のキーワードで、要素のプロパティの計算値を親要素から取得するよう指定します。 CSS の一括指定 {{cssxref("all")}} を含め、すべての CSS プロパティに適用することができます。

+ +

継承プロパティにおいては、既定の動作を推進するものであり、他の規則を上書きする場合にのみ必要です。非継承プロパティにおいては、比較的意味の弱い動作をしますので、 {{cssxref("all")}} プロパティには {{cssxref("initial")}} , {{cssxref("unset")}} などを使用した方が良いかもしれません。

+ +

親要素が包含ブロックではなかった場合であっても、常に文書ツリー内の親要素から継承が行われます。

+ +

例

+ +
/* 第二レベルのヘッダーを緑色にする */
+h2 { color: green; }
+
+/* ... ただしサイドバーの中にあるものは、親要素の色を使用する */
+#sidebar h2 { color: inherit; }
+
+ +

この例の中で、サイドバー内にある h2 要素は異なる色になる可能性があります。例えば、以下の規則に一致する div の子であった場合は ...

+ +
div#current { color: blue; }
+
+ +

... 青になるでしょう。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}{{Spec2('CSS4 Cascade')}} Level 3 から変更なし。
{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}{{ Spec2('CSS3 Values') }} {{ SpecName('CSS2.1') }} から重要な変更なし。
{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}{{ Spec2('CSS2.1') }}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.types.global_keywords.inherit")}}

+
+ +

関連情報

+ +
    +
  • 継承
    • +
  • {{cssxref("initial")}} を使用すると、プロパティを初期値に設定します。
    • +
  • {{cssxref("unset")}} を使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
    • +
  • {{cssxref("revert")}} を使用すると、プロパティをユーザーエージェントのスタイルシート (又はもしあれば、ユーザーのスタイル) で設定された値に初期化します。
    • +
  • {{cssxref("all")}} プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。
    • +
diff --git a/files/ja/web/css/inheritance/index.html b/files/ja/web/css/inheritance/index.html new file mode 100644 index 0000000000..bf2dd3f663 --- /dev/null +++ b/files/ja/web/css/inheritance/index.html @@ -0,0 +1,74 @@ +--- +title: 継承 +slug: Web/CSS/inheritance +tags: + - CSS + - Guide + - Inheritance + - Layout + - Web +translation_of: Web/CSS/inheritance +--- +
{{cssref}}
+ +

CSS において、継承 (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。

+ +

CSS プロパティは2種類に分類することができます。

+ +
    +
  • 継承プロパティは、既定で親要素の計算値に設定されるものです
    • +
  • 非継承プロパティは、既定でそのプロパティの初期値に設定されるものです
    • +
+ +

いずれかの CSS プロパティの定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。

+ +

継承プロパティ

+ +

要素の継承プロパティに値が指定されなかった場合、要素はその親要素のプロパティの計算値を取得します。文書のルート要素だけは、プロパティの概要で与えられた初期値を取得します。

+ +

継承プロパティの一般例として {{ Cssxref("color") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

+ +
p { color: green; }
+ +

次の様にマークアップしたとします。

+ +
<p>この段落には<em>強調されたテキスト</em>があります。</p>
+ +

「強調されたテキスト」という文字列は、 em 要素が p 要素から {{ Cssxref("color") }} プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。

+ +

非継承プロパティ

+ +

値を持たない非継承プロパティが要素に指定された場合、要素はプロパティの初期値（※各プロパティのページの「概要」の章に記されています）を取得します。

+ +

非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

+ +
 p { border: medium solid; }
+ +

次の様にマークアップしたとします。

+ +
<p>この段落には<em>強調されたテキスト</em>があります。</p>
+ +

この場合、「強調されたテキスト」という文字列は ({{ Cssxref("border-style") }} の初期値が none であるため) ボーダーを持ちません。

+ +

注

+ +

{{ Cssxref("inherit") }} のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。

+ +

すべてのプロパティに値を適用する {{cssxref("all")}} 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、

+ +
font {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

これは、 {{cssxref("font")}} プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 {{cssxref("font-weight")}} を "bold" に適用します。

+ +

関連情報

+ + diff --git a/files/ja/web/css/initial-letter-align/index.html b/files/ja/web/css/initial-letter-align/index.html new file mode 100644 index 0000000000..3da44c1f25 --- /dev/null +++ b/files/ja/web/css/initial-letter-align/index.html @@ -0,0 +1,121 @@ +--- +title: initial-letter-align +slug: Web/CSS/initial-letter-align +tags: + - Align + - CSS + - CSS Inline + - CSS Property + - CSS プロパティ + - Experimental + - Graphics + - Layout + - NeedsL + - Reference + - Web + - 'recipe:css-property' +translation_of: Web/CSS/initial-letter-align +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の initial-letter-align プロパティは、段落内の最初の文字の配置を指定します。

+ +
/* キーワード値 */
+initial-letter-align: auto;
+initial-letter-align: alphabetic;
+initial-letter-align: hanging;
+initial-letter-align: ideographic;
+
+/* グローバル値 */
+initial-letter-align: inherit;
+initial-letter-align: initial;
+initial-letter-align: unset;
+
+ +

構文

+ +

以下に挙げたキーワード値のうちの一つです。

+ +

値

+ +
+
auto
+
ユーザーエージェントがテキストの言語に従って値を選択します。西洋の言語では既定で alphabetic であり、日中韓の言語は ideographic、一部のインド語派の言語は hanging になります。
+
alphabetic
+
上記の通り、最初の文字の大文字高は、テキストの最初の行の大文字高に配置されます。最初の文字のベースラインは N 文字目のテキストのベースラインに配置されます。
+
hanging
+
最初の文字のぶら下げベースラインは、テキストの最初の行のぶら下げベースラインに配置されます。
+
ideographic
+
最初の文字は N 行の領域の中央に配置されます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

最初の文字の配置

+ +

HTML

+ +
<p class="auto ">Initial letter - auto</p>
+<p class="alphabetic">Initial letter - alphabetic</p>
+<p class="hanging">Initial letter - hanging</p>
+<p class="ideographic">Initial letter - ideographic</p>
+
+ +

CSS

+ +
.auto {
+  -webkit-initial-letter-align: auto;
+  initial-letter-align: auto;
+}
+
+.alphabetic {
+  -webkit-initial-letter-align: alphabetic;
+  initial-letter-align: alphabetic;
+}
+
+.hanging {
+  -webkit-initial-letter-align: hanging;
+  initial-letter-align: hanging;
+}
+
+.ideographic {
+  -webkit-initial-letter-align: ideographic;
+  initial-letter-align: ideographic;
+}
+ +

結果

+ +

{{EmbedLiveSample('Aligning_initial_letter')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Inline', '#aligning-initial-letter', 'initial-letter-align')}}{{Spec2('CSS3 Inline')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.initial-letter-align")}}

diff --git a/files/ja/web/css/initial-letter/index.html b/files/ja/web/css/initial-letter/index.html new file mode 100644 index 0000000000..935057530c --- /dev/null +++ b/files/ja/web/css/initial-letter/index.html @@ -0,0 +1,113 @@ +--- +title: initial-letter +slug: Web/CSS/initial-letter +tags: + - CSS + - CSS Inline + - CSS Property + - Experimental + - Graphics + - Layout + - Reference + - Web + - 'recipe:css-property' +translation_of: Web/CSS/initial-letter +--- +
{{CSSRef}}
+ +

initial-letter は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。

+ +
/* キーワード値 */
+initial-letter: normal;
+
+/* 数値 */
+initial-letter: 1.5;    /* 頭文字が1.5行分を占める */
+initial-letter: 3.0;    /* 頭文字が3行分を占める */
+initial-letter: 3.0 2;  /* 頭文字が3行分を占め、
+                           2行分下がる */
+
+/* グローバル値 */
+initial-letter: inherit;
+initial-letter: initial;
+initial-letter: unset;
+
+ +

構文

+ +

キーワード値の normal、または <number> と、その後に任意で <integer> が付きます。

+ +

値

+ +
+
normal
+
頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。
+
<number>
+
頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。
+
<integer>
+
寸法が与えられたときに、頭文字が沈み込む行数を定義します。0以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

先頭文字の大きさの設定

+ +

HTML

+ +
<p class="normal">Initial letter is normal</p>
+<p class="onefive">Initial letter occupies 1.5 lines</p>
+<p class="three">Initial letter occupies 3 lines</p>
+ +

CSS

+ +
.normal {
+  -webkit-initial-letter: normal;
+  initial-letter: normal;
+}
+
+.onefive {
+  -webkit-initial-letter: 1.5;
+  initial-letter: 1.5;
+}
+
+.three {
+  -webkit-initial-letter: 3.0;
+  initial-letter: 3.0;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Setting_initial_letter_size', 250, 180)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}}{{Spec2('CSS3 Inline')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.initial-letter")}}

diff --git a/files/ja/web/css/initial/index.html b/files/ja/web/css/initial/index.html new file mode 100644 index 0000000000..0b51d7bd17 --- /dev/null +++ b/files/ja/web/css/initial/index.html @@ -0,0 +1,81 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - CSS カスケードと継承 + - CSS 値 + - Reference + - initial + - レイアウト + - 初期値 +translation_of: Web/CSS/initial +--- +
{{CSSRef}}
+ +

initial は CSS のキーワードで、要素にプロパティの初期値 (または既定値) を設定します。どの CSS プロパティにも適用できます。これは CSS の一括指定 {{cssxref("all")}} を含み、 initial を指定して、すべての CSS プロパティを初期値に戻すために使用することができます。

+ +
+

注: 継承プロパティでは、初期値は期待されない値かもしれません。代わりに {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} キーワードを使用することを検討してください。

+
+ +

例

+ +

HTML

+ +
<p>
+  <span>このテキストは赤です。</span>
+  <em>このテキストは初期値 (ふつうは黒) です。</em>
+  <span>これは再び赤です。</span>
+</p>
+ +

CSS

+ +
p {
+  color: red;
+}
+
+em {
+  color: initial;
+}
+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}{{Spec2('CSS4 Cascade')}}Level 3 から変更なし。
{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}{{Spec2('CSS3 Cascade')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.global_keywords.initial")}}

+ +

関連情報

+ +
    +
  • {{cssxref("unset")}} を使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
    • +
  • {{cssxref("revert")}} を使用すると、プロパティをユーザーエージェントのスタイルシート (又はもしあれば、ユーザーのスタイル) で設定された値に初期化します。
    • +
  • {{cssxref("inherit")}} を使用すると、要素のプロパティを親と同じ値にします。
    • +
  • {{cssxref("all")}} プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。
    • +
diff --git a/files/ja/web/css/initial_value/index.html b/files/ja/web/css/initial_value/index.html new file mode 100644 index 0000000000..f25e94cf55 --- /dev/null +++ b/files/ja/web/css/initial_value/index.html @@ -0,0 +1,52 @@ +--- +title: 初期値 +slug: Web/CSS/initial_value +tags: + - CSS + - CSS カスケードと継承 + - Reference +translation_of: Web/CSS/initial_value +--- +
{{cssref}}
+ +

CSS プロパティの 初期値 (initial value)は、定義表に挙げられている既定値です。初期値の使い方はプロパティが継承されているかどうかで異なります。

+ + + +
+

メモ: {{cssxref("initial")}} キーワードを使用すると、明示的に初期値を指定することができます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
CSS Cascade 4 正式な定義。
{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}{{Spec2("CSS2.1")}}暗黙の定義。
+ +

関連情報

+ +
    +
  • {{cssxref("initial")}}
    • +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ja/web/css/inline-size/index.html b/files/ja/web/css/inline-size/index.html new file mode 100644 index 0000000000..68484e7599 --- /dev/null +++ b/files/ja/web/css/inline-size/index.html @@ -0,0 +1,106 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +tags: + - CSS + - CSS Logical Property + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inline-size +--- +
{{CSSRef}}
+ +

inline-size は CSS のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは {{cssxref("width")}} または {{cssxref("height")}} プロパティに相当し、 {{cssxref("writing-mode")}} の値によって変わります。

+ +

書字方向が垂直方向であった場合、 inline-size の値は要素の高さに対応し、水平方向であった場合は要素の幅に対応します。関連プロパティの {{cssxref("block-size")}} が要素のもう一方の寸法を定義します。

+ +
{{EmbedInteractiveExample("pages/css/inline-size.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+inline-size: 300px;
+inline-size: 25em;
+
+/* <percentage> 値 */
+inline-size: 75%;
+
+/* キーワード値 */
+inline-size: max-content;
+inline-size: min-content;
+inline-size: fit-content(20em);
+inline-size: auto;
+
+/* グローバル値 */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+
+ +

値

+ +

inline-size プロパティは、{{cssxref("width")}} や {{cssxref("height")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

インライン方向の寸法をピクセル単位で設定

+ +

HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}
+ +

Result

+ +

{{EmbedLiveSample("Setting_inline_size_in_pixels")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inline-size")}}

+ +

関連情報

+ +
    +
  • 対応付けされる物理的プロパティ: {{cssxref("width")}} および {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/ja/web/css/inset-block-end/index.html b/files/ja/web/css/inset-block-end/index.html new file mode 100644 index 0000000000..1b9b6eee2e --- /dev/null +++ b/files/ja/web/css/inset-block-end/index.html @@ -0,0 +1,108 @@ +--- +title: inset-block-end +slug: Web/CSS/inset-block-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-block-end +--- +
{{CSSRef}}
+ +

inset-block-end は CSS のプロパティで、要素における末尾からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+ +
/* <length> 値 */
+inset-block-end: 3px;
+inset-block-end: 2.4em;
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-block-end: 10%;
+
+/* キーワード値 */
+inset-block-end: auto;
+
+/* グローバル値 */
+inset-block-end: inherit;
+inset-block-end: initial;
+inset-block-end: unset;
+
+ +

構文

+ +

値

+ +

inset-block-end プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ブロック方向の末尾のオフセットの設定

+ +

HTML

+ +
<div>
+  <p class="exampleText">テキストの例</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-block-end: 20px;
+  background-color: #c8c800;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_block_end_offset", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inset-block-end")}}

+ +

関連情報

+ +
    +
  • 内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}}
    • +
  • 対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/inset-block-start/index.html b/files/ja/web/css/inset-block-start/index.html new file mode 100644 index 0000000000..c9eb98bed1 --- /dev/null +++ b/files/ja/web/css/inset-block-start/index.html @@ -0,0 +1,109 @@ +--- +title: inset-block-start +slug: Web/CSS/inset-block-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-block-start +--- +
{{CSSRef}}
+ +

inset-block-start は CSS のプロパティで、要素における先頭からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+ +
/* <length> 値 */
+inset-block-start: 3px;
+inset-block-start: 2.4em;
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-block-start: 10%;
+
+/* キーワード値 */
+inset-block-start: auto;
+
+/* グローバル値 */
+inset-block-start: inherit;
+inset-block-start: initial;
+inset-block-start: unset;
+
+ + +

構文

+ +

値

+ +

inset-block-start プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ブロック方向の先頭のオフセットの設定

+ +

HTML

+ +
<div>
+  <p class="exampleText">テキストの例</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_block_start_offset", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inset-block-start")}}

+ +

関連情報

+ +
    +
  • 内部位置を定義する他のプロパティ: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}}
    • +
  • 対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/inset-block/index.html b/files/ja/web/css/inset-block/index.html new file mode 100644 index 0000000000..11eb385c98 --- /dev/null +++ b/files/ja/web/css/inset-block/index.html @@ -0,0 +1,119 @@ +--- +title: inset-block +slug: Web/CSS/inset-block +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/inset-block +--- +
{{CSSRef}}
+ +

inset-block は CSS のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+ +
/* <length> 値 */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* 値が先頭と末尾の両方に適用される */
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-block: 10% 5%;
+
+/* キーワード値 */
+inset-block: auto;
+
+/* グローバル値 */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+
+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("inset-block-end")}}
    • +
  • {{cssxref("inset-block-start")}}
    • +
+ +

構文

+ +

値

+ +

inset-block プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ブロック方向の先頭と末尾のオフセットの設定

+ +

HTML

+ +
<div>
+  <p class="exampleText">テキストの例</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_block_start_and_end_offsets", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inset-block")}}

+ +

関連情報

+ +
    +
  • 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • +
  • 対応する物理的な一括指定: {{cssxref("inset")}}
    • +
  • 対応するインライン方向の一括指定: {{cssxref("inset-inline")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/inset-inline-end/index.html b/files/ja/web/css/inset-inline-end/index.html new file mode 100644 index 0000000000..7c4ef34b79 --- /dev/null +++ b/files/ja/web/css/inset-inline-end/index.html @@ -0,0 +1,112 @@ +--- +title: inset-inline-end +slug: Web/CSS/inset-inline-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - NeedsContent + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-inline-end +--- +
{{CSSRef}}
+ +

inset-inline-end は CSS のプロパティで、要素における行末からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+ +
/* <length> 値 */
+inset-inline-end: 3px;
+inset-inline-end: 2.4em;
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-inline-end: 10%;
+
+/* キーワード値 */
+inset-inline-end: auto;
+
+/* グローバル値 */
+inset-inline-end: inherit;
+inset-inline-end: initial;
+inset-inline-end: unset;
+
+ +

{{cssxref("inset-inline-start")}} と inset-inline-end の一括指定は {{cssxref("inset-inline")}} です。

+ + +

構文

+ +

値

+ +

inset-inline-end プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

インライン方向の末尾のオフセットの設定

+ +

HTML

+ +
<div>
+  <p class="exampleText">テキストの例</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_inline_end_offset", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inset-inline-end")}}

+ +

関連情報

+ +
    +
  • 内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}
    • +
  • 対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/inset-inline-start/index.html b/files/ja/web/css/inset-inline-start/index.html new file mode 100644 index 0000000000..971a1c3749 --- /dev/null +++ b/files/ja/web/css/inset-inline-start/index.html @@ -0,0 +1,110 @@ +--- +title: inset-inline-start +slug: Web/CSS/inset-inline-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-inline-start +--- +
{{CSSRef}}
+ +

inset-inline-start は CSS のプロパティで、要素における行頭からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+ +
/* <length> 値 */
+inset-inline-start: 3px;
+inset-inline-start: 2.4em;
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-inline-start: 10%;
+
+/* キーワード値 */
+inset-inline-start: auto;
+
+/* グローバル値 */
+inset-inline-start: inherit;
+inset-inline-start: initial;
+inset-inline-start: unset;
+
+ +

inset-inline-start と {{cssxref("inset-inline-end")}} の一括指定は {{cssxref("inset-inline")}} です。

+ +

構文

+ +

値

+ +

inset-inline-start プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

インライン方向の先頭のオフセットの設定

+ +

HTML

+ +
<div>
+  <p class="exampleText">テキストの例</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_inline_start_offset", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inset-inline-start")}}

+ +

関連情報

+ +
    +
  • 内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-end")}}
    • +
  • 対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/inset-inline/index.html b/files/ja/web/css/inset-inline/index.html new file mode 100644 index 0000000000..d42839c42b --- /dev/null +++ b/files/ja/web/css/inset-inline/index.html @@ -0,0 +1,119 @@ +--- +title: inset-inline +slug: Web/CSS/inset-inline +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/inset-inline +--- +
{{CSSRef}}
+ +

inset-inline は CSS のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+ +
/* <length> 値 */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-inline: 10% 5%;
+
+/* キーワード値 */
+inset-inline: auto;
+
+/* グローバル値 */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+
+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ +
    +
  • {{cssxref("inset-inline-end")}}
    • +
  • {{cssxref("inset-inline-start")}}
    • +
+ +

構文

+ +

値

+ +

inset-inline プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

インライン方向の先頭と末尾のオフセットの設定

+ +

HTML

+ +
<div>
+  <p class="exampleText">テキストの例</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_inline_start_and_end_offsets", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inset-inline")}}

+ +

関連情報

+ +
    +
  • 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • +
  • 対応する物理的な一括指定: {{cssxref("inset")}}
    • +
  • 対応するブロック方向の一括指定: {{cssxref("inset-block")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/inset/index.html b/files/ja/web/css/inset/index.html new file mode 100644 index 0000000000..26d8ca411c --- /dev/null +++ b/files/ja/web/css/inset/index.html @@ -0,0 +1,115 @@ +--- +title: inset +slug: Web/CSS/inset +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset +--- +
{{CSSRef}}
+ +

inset は CSS のプロパティで、 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} に対応する一括指定です。これは {{cssxref("margin")}} の一括指定における複数値の場合と同じ構文です。

+ +

CSS 論理的プロパティの仕様書で定義されているものですが、論理的なオフセットを定義するものではありません。これは物理的なオフセットであり、要素の書字方向やテキストの向きには関係がありません。

+ +
/* <length> 値 */
+inset: 10px; /* すべての辺に適用される値 */
+inset: 4px 8px; /* 上/下 左/右 */
+inset: 5px 15px 10px; /* 上 左/右 下 */
+inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */
+
+/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
+inset: 10% 5% 5% 5%;
+
+/* キーワード値 */
+inset: auto;
+
+/* グローバル値 */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

構文

+ +

値

+ +

inset プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

要素のオフセットの設定

+ +

HTML

+ +
<div>
+  <span class="exampleText">テキストの例</span>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 150px;
+  height: 120px;
+  position: relative;
+}
+
+.exampleText {
+  writing-mode: sideways-rl;
+  position: absolute;
+  inset: 20px 40px 30px 10px;
+  background-color: #c8c800;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_offsets_for_an_element", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.inset")}}

+ +

関連情報

+ +
    +
  • 個別指定のボックスのオフセットプロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • +
  • 対応する論理プロパティの一括指定: {{cssxref("inset-block")}} および {{cssxref("inset-inline")}}
    • +
  • {{cssxref("margin")}} 一括指定の複数値の構文
    • +
diff --git a/files/ja/web/css/integer/index.html b/files/ja/web/css/integer/index.html new file mode 100644 index 0000000000..ccb11660cd --- /dev/null +++ b/files/ja/web/css/integer/index.html @@ -0,0 +1,95 @@ +--- +title: +slug: Web/CSS/integer +tags: + - CSS + - CSS データ型 + - Reference + - Web +translation_of: Web/CSS/integer +--- +
{{CSSRef}}
+ +

<integer> は CSS のデータ型で、 {{cssxref("number")}} の特殊型であり、正と負の整数を表現します。 integer は {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} など、数多くの CSS プロパティで使用することができます。

+ +

構文

+ +

<integer> データ型は数桁の10進数、 0 から 9 までを含み、任意でその前に単一の + または - の符号が付きます。 integer に関連付けられた単位はありません。

+ +
公式には、有効な <integer> 値の範囲は決められていません。 Opera では 215-1、 IE では220-1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 LC 段階の 2012 年 4 月の最新の決定では、 [-227-1; 227-1] でしたが、# しかし 224-1 や 230-1 のような他の値も提案されていました。しかし、最新の仕様書では範囲を定めなくなりました。
+ +

補間

+ +

アニメーション時には、 <integer> データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は floor 関数を使って求められます。補間の速度は、アニメーションに結びつけられた timing function で決められます。

+ +

例

+ +

妥当な integer の値

+ +
12          正の整数 (先頭の + なし)
++123        正の整数 (先頭の + あり)
+-456        負の整数
+0           ゼロ
++0          ゼロ、先頭の + つき
+-0          ゼロ、先頭の - なし
+
+ +

不正な integer の値

+ +
12.0        整数を表していますが、これは <number> であり、<integer> ではありません。
+12.         小数点を含んではいけません。
++---12      先頭に置ける +/- は 1 つだけです。
+ten         文字は使えません。
+_5          記号は使えません。
+\35         エスケープを使った Unicode 文字は、それが整数を表す場合でも (これは 5 です) 使えません。
+\4E94       アラビア数字以外の数字は使えません (これは日本語の「五」です)。
+3e4         指数表記は使えません。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#integers', '<integer>')}}{{Spec2('CSS4 Values')}}重要な変更はなし。
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}重要な変更はなし。
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}明示的な定義
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}暗黙的な定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.types.integer")}}

+
+ +

関連情報

+ +
    +
  • {{cssxref("<number>")}}
    • +
diff --git a/files/ja/web/css/isolation/index.html b/files/ja/web/css/isolation/index.html new file mode 100644 index 0000000000..6c7882d0c8 --- /dev/null +++ b/files/ja/web/css/isolation/index.html @@ -0,0 +1,114 @@ +--- +title: isolation +slug: Web/CSS/isolation +tags: + - CSS + - CSS プロパティ + - 合成と混合 +translation_of: Web/CSS/isolation +--- +
{{CSSRef}}
+ +

CSS の isolation プロパティは、要素が新しい{{glossary("stacking context", "重ね合わせコンテキスト")}}を生成する必要があるかどうかを定義します。

+ +
{{EmbedInteractiveExample("pages/css/isolation.html")}}
+ + + +

このプロパティは {{cssxref("mix-blend-mode")}} との組み合わせで使用すると特に有用です。

+ +

構文

+ +
/* キーワード値 */
+isolation: auto;
+isolation: isolate;
+
+/* グローバル値 */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+
+ +

isolation プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +
+
auto
+
何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。
+
isolate
+
新しい重ね合わせコンテキストが必ず作成されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+
+ +
.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}
+ +

{{ EmbedLiveSample('Examples', 230, 230) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('Compositing', '#isolation', 'Isolation') }}{{ Spec2('Compositing') }}Initial definition
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.isolation")}}

+ +

関連情報

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/ja/web/css/justify-content/index.html b/files/ja/web/css/justify-content/index.html new file mode 100644 index 0000000000..71fabed030 --- /dev/null +++ b/files/ja/web/css/justify-content/index.html @@ -0,0 +1,215 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +tags: + - CSS + - CSS プロパティ + - CSS ボックス配置 + - Reference + - justify-content + - place-content +translation_of: Web/CSS/justify-content +--- +
{{CSSRef}}
+ +

CSS の justify-content プロパティは、フレックスコンテナーの{{Glossary("Main Axis", "主軸")}}およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

+ +

このデモはグリッドレイアウトを用いていくつかの値を紹介します。

+ +
{{EmbedInteractiveExample("pages/css/justify-content.html")}}
+ + + +

長さや自動マージンが適用された後に配置が行われることから、フレックスボックスレイアウトで {{cssxref("flex-grow")}} が 0 ではないフレックス要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

+ +

構文

+ +
/* 位置による配置 */
+justify-content: center;     /* アイテムを中央に寄せる */
+justify-content: start;      /* アイテムを先頭に寄せる */
+justify-content: end;        /* アイテムを末尾に寄せる */
+justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
+justify-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
+justify-content: left;       /* アイテムを左端に寄せる */
+justify-content: right;      /* アイテムを右端に寄せる */
+
+/* ベースラインによる配置 */
+/* justify-content はベースラインの値を取りません */
+
+/* 通常の配置 */
+justify-content: normal;
+
+/* 均等配置 */
+justify-content: space-between; /* 各アイテムを均等に配置し
+                                   最初のアイテムは先頭に寄せ、
+                                   最後のアイテムは末尾に寄せる */
+justify-content: space-around;  /* 各アイテムを均等に配置し
+                                   各アイテムの両側に半分の大きさの
+                                   間隔を置く */
+justify-content: space-evenly;  /* 各アイテムを均等に配置し
+                                   各アイテムの周りに同じ大きさの間隔を置く */
+justify-content: stretch;       /* 各アイテムを均等に配置し
+                                   サイズが 'auto' であるアイテムは、
+                                   コンテナーに合わせて引き伸ばす */
+
+/* あふれた場合の配置 */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* グローバル値 */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+
+ +

値

+ +
+
start
+
各アイテムは、主軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
+
end
+
各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
+
flex-start
+
各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
+
flex-end
+
各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
+
center
+
各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。
+
left
+
各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
+
right
+
各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
+
normal
+
各アイテムは justify-content の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの stretch として動作します。
+
baseline
+ first baseline
+ last baseline
+
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
+ first baseline の代替配置は start、last baseline の代替配置は end です。
+
space-between
+
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。
+
space-around
+
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。
+
space-evenly
+
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。
+
stretch
+
+

各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。

+ +
+

メモ: stretch はフレキシブルボックス (フレックスボックス) は対応していません。

+
+
+
safe
+
配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。
+
unsafe
+
配置キーワードと共に使用します。アイテムと配置コンテナーの相対的な寸法にかかわらず、またあふれることによってデータの損失が発生するかどうかにかかわらず、指定した値を尊重します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#container {
+  display: flex;
+  justify-content: space-between; /* live sample で変更可能 */
+}
+
+#container > div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Example", "100%", 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Box Alignment')}}[ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe の値を追加
{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ + + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.justify-content.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.justify-content.grid_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/justify-items/index.html b/files/ja/web/css/justify-items/index.html new file mode 100644 index 0000000000..b3788140b8 --- /dev/null +++ b/files/ja/web/css/justify-items/index.html @@ -0,0 +1,232 @@ +--- +title: justify-items +slug: Web/CSS/justify-items +tags: + - CSS + - CSS Box Alignment + - CSS Property + - CSS プロパティ + - CSS ボックス配置 + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/justify-items +--- +
{{CSSRef}}
+ +

CSS の justify-items プロパティは、ボックスのすべてのアイテムに既定の {{CSSxRef("justify-self")}} を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。

+ +
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
+ + + +

このプロパティの効果は、現在のレイアウトモードに依存します。

+ +
    +
  • ブロックレベルレイアウトでは、内包ブロック内のアイテムをインライン軸で配置します。
    • +
  • 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、内包ブロック内のアイテムをインライン軸で配置します。
    • +
  • 表のセルレイアウトでは、このプロパティは無視されます (絶対配置及び表レイアウトのブロック内の配置についてはこちら)
    • +
  • フレックスボックスレイアウトでは、このプロパティは無視されます (フレックスボックス内での配置についてはこちら)
    • +
  • グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置についてはこちら)
    • +
+ +

構文

+ +
/* 基本キーワード */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* 位置による配置 */
+justify-items: center;     /* 中央付近にアイテムを集める */
+justify-items: start;      /* 先頭側にアイテムを集める */
+justify-items: end;        /* 末尾側にアイテムを集める */
+justify-items: flex-start; /* 'start' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
+justify-items: flex-end;   /* 'end' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* 左側にアイテムを集める */
+justify-items: right;      /* 右側にアイテムを集める */
+
+/* ベースラインの配置 */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* あふれたときの配置 (位置による配置時のみ) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* 従来の配置 */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* グローバル値 */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+
+ +

このプロパティは４つの異なる形式のうち１つを取ることができます。

+ +
    +
  • 基本キーワード: キーワード値 normal, auto, stretch のうちの一つ。
    • +
  • ベースラインによる配置: baseline キーワードに加えて、任意で first または last のどちらか。
    • +
  • 位置による配置: center, start, end, flex-start, flex-end, self-start, self-end, left, right のうちの一つ。加えて任意で safe または unsafe。
    • +
  • 歴史的な配置: legacy キーワードに続いて、 left または right のどちらかの値。
    • +
+ +

値

+ +
+
auto
+
使用される値は、ボックスに親があれば、親ボックスの justify-items プロパティ、そうでなければ絶対位置であり、このような場合、 auto は normal を表します。
+
normal
+
このキーワードの効果は、現在のレイアウトモードに依存します。 +
    +
  • ブロックレベルレイアウトでは、このキーワードは start の別名です。
    • +
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように動作し、その他の絶対位置ボックスには stretch のように動作します。
    • +
  • 表のセルレイアウトでは、このキーワードは意味を持たず、無視されます。
    • +
  • フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、無視されます。
    • +
  • グリッドレイアウトでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように振舞います。
    • +
+
+
start
+
アイテムは適切な軸で配置コンテナーの先頭側に向かって、互いに接するように詰められます。
+
end
+
アイテムは適切な軸で配置コンテナーの末尾側に向かって、互いに接するように詰められます。
+
flex-start
+
フレックスコンテナーの子ではないアイテムにおいては、この値は start のように扱われます。
+
flex-end
+
フレックスコンテナーの子ではないアイテムにおいては、この値は end のように扱われます。
+
self-start
+
アイテムは適切な軸で、アイテムの先頭側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
+
self-end
+
アイテムは適切な軸で、アイテムの末尾側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
+
center
+
アイテムは配置コンテナーの中央で、互いに接するように詰められます。
+
left
+
アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は start のように動作します。
+
right
+
アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は start のように動作します。
+
baseline
+ first baseline
+ last baseline
+
first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
+ first baseline の代替配置は start、 last baseline の代替配置は end です。
+
stretch
+
アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が auto であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。
+
safe
+
アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが start であったかのように配置されます。
+
unsafe
+
アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。
+
legacy
+
値がボックスの子孫に継承されるようにします。なお、子孫が justify-self: auto の値を持っている場合、 legacy キーワードは子孫からは考慮されず、関連付けられた left, right, center の値のみが継承されます。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

単純なデモ

+ +

次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには justify-items の値として stretch (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。

+ +

しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには justify-items の値である center が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。

+ +

HTML

+ +
<article class="container" tabindex="0">
+  <span>First child</span>
+  <span>Second child</span>
+  <span>Third child</span>
+  <span>Fourth child</span>
+</article>
+ +

CSS

+ +
html {
+  font-family: helvetica, arial, sans-serif;
+  letter-spacing: 1px;
+}
+
+article {
+  background-color: red;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 40px;
+  grid-gap: 10px;
+  width: 300px;
+  justify-items: stretch;
+}
+
+article:hover, article:focus {
+  justify-items: center;
+}
+
+article span {
+  background-color: black;
+  color: white;
+  margin: 1px;
+  text-align: center;
+}
+
+article, span {
+  padding: 10px;
+  border-radius: 7px;
+}
+
+article {
+  margin: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

ブラウザーの互換性

+ + + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.justify-items.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.justify-items.grid_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/justify-self/index.html b/files/ja/web/css/justify-self/index.html new file mode 100644 index 0000000000..a319c539c3 --- /dev/null +++ b/files/ja/web/css/justify-self/index.html @@ -0,0 +1,164 @@ +--- +title: justify-self +slug: Web/CSS/justify-self +tags: + - CSS + - CSS プロパティ + - CSS ボックス配置 + - リファレンス +translation_of: Web/CSS/justify-self +--- +
{{CSSRef}}
+ +

CSS の justify-self プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。

+ +
{{EmbedInteractiveExample("pages/css/justify-self.html")}}
+ + + +

このプロパティの効果は、現在のレイアウトモードに依存します。

+ +
    +
  • ブロックレベルレイアウトでは、内包ブロック内のアイテムをインライン軸で配置します。
    • +
  • 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、内包ブロック内のアイテムをインライン軸で配置します。
    • +
  • 表のセルレイアウトでは、このプロパティは無視されます (絶対配置及び表レイアウトのブロック内の配置についてはこちら)
    • +
  • フレックスボックスレイアウトでは、このプロパティは無視されます (フレックスボックス内での配置についてはこちら)
    • +
  • グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置についてはこちら)
    • +
+ +

構文

+ +
/* 基本キーワード */
+justify-self: auto;
+justify-self: normal;
+justify-self: stretch;
+
+/* 位置による配置 */
+justify-self: center;     /* 中央付近にアイテムを集める */
+justify-self: start;      /* 開始側にアイテムを集める */
+justify-self: end;        /* 終端側にアイテムを集める */
+justify-self: flex-start; /* 開始側にフレックスアイテムを集める */
+justify-self: flex-end;   /* 終端側にフレックスアイテムを集める */
+justify-self: self-start;
+justify-self: self-end;
+justify-self: left;       /* 左側にアイテムを集める */
+justify-self: right;      /* 右側にアイテムを集める */
+
+/* ベースラインの配置 */
+justify-self: baseline;
+justify-self: first baseline;
+justify-self: last baseline;
+
+/* あふれたときの配置 (位置による配置時のみ) */
+justify-self: safe center;
+justify-self: unsafe center;
+
+/* グローバル値 */
+justify-self: inherit;
+justify-self: initial;
+justify-self: unset;
+
+ +

このプロパティは３つの異なる形式のうち１つを取ることができます。

+ +
    +
  • 基本キーワード: キーワード値 normal, auto, stretch のうちの一つ。
    • +
  • ベースラインによる配置: baseline キーワードに加えて、任意で first 又は last のどちらか。
    • +
  • 位置による配置: +
      +
    • center, start, end, flex-start, flex-end, self-start, self-end, left, right のうちの一つ。
      • +
    • 加えて任意で safe 又は unsafe。
      • +
    +
    • +
+ +

値

+ +
+
auto
+
使用される値は、ボックスに親があれば、親ボックスの justify-items プロパティ、そうでなければ絶対位置であり、このような場合、 auto は normal を表します。
+
normal
+
このキーワードの効果は、レイアウトモードに依存します。 +
    +
  • ブロックレベルレイアウトでは、このキーワードは start の別名です。
    • +
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように振舞い、その他の絶対位置ボックスには stretch のように振舞います。
    • +
  • 表のセルレイアウトでは、このキーワードは意味を持たず、無視されます。
    • +
  • フレックスボックスレイアウトでは、このキーワードは意味を持たず、無視されます。
    • +
  • グリッドレイアウトでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように振舞います。
    • +
+
+
start
+
アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。
+
end
+
アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。
+
flex-start
+
フレックスコンテナーの子ではないアイテムにおいては、この値は start のように扱われます。
+
flex-end
+
フレックスコンテナーの子ではないアイテムにおいては、この値は end のように扱われます。
+
self-start
+
アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
+
self-end
+
アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
+
center
+
アイテムは配置コンテナーの中央で、互いに接するように詰められます。
+
left
+
アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は start のように動作します。
+
right
+
アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は start のように動作します。
+
baseline
+ first baseline
+ last baseline
+
first- 又は last-baseline 配置への参加を指定します。ボックスの最初又は最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
+ first baseline の代替配置は start、 last baseline の代替配置は end です。
+
stretch
+
アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が auto であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。
+
safe
+
アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが start であったかのように配置されます。
+
unsafe
+
アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-justify-self", "justify-self")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの対応

+ + + +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.justify-self.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.justify-self.grid_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..ac905fc918 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,56 @@ +--- +title: パンくずナビゲーション +slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +tags: + - CSS + - Layout + - Navigation + - cookbook + - flexbox +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

パンくず（Breadcrumb）ナビゲーションは、来た道をたどって開始ページまで戻ることができるパンくずリストを提供することによって、ユーザーがウェブサイト内の自分の位置を理解するのに役立ちます。

+ +

リンクを区切り文字を付けてインラインで表示

+ +

要件

+ +

項目は通常、個々のページ間の階層を示すために、区切り文字を付けてインラインで表示されます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このパターンは単純なフレックスレイアウトを使用してレイアウトされており、CSS の1行でナビゲーションがどのように行われるかを示しています。 区切り文字は CSS 生成コンテンツを使用して追加されます。 区切り文字は好きなものに変更することができます。

+ +

アクセシビリティへの懸念

+ +

aria-label 属性および aria-current 属性を使用して、このナビゲーションが何であるか、そして現在のページが構造のどこにあるのかをユーザーが理解できるようにしています。 詳細については関連リンクを参照してください。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

フレックスボックス

+ +

{{Compat("css.properties.flex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/card/index.html b/files/ja/web/css/layout_cookbook/card/index.html new file mode 100644 index 0000000000..4c6d015537 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/card/index.html @@ -0,0 +1,86 @@ +--- +title: カード +slug: Web/CSS/Layout_cookbook/Card +tags: + - CSS + - CSS Grid + - card + - cookbook + - css layout +translation_of: Web/CSS/Layout_cookbook/Card +--- +

{{CSSRef}}

+ +

このパターンは、オプションのフッター付きの「カード」コンポーネントのリストです。

+ +

1行に3つのカードコンポーネント

+ +

要件

+ +

カードコンポーネントには、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。

+ +

各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。

+ +

カードのコレクションに追加すると、カードは2次元に並ぶ必要があります。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このカードは、1次元レイアウトであるにもかかわらず CSS グリッドレイアウトを使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。

+ +
.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+ +

見出しトラックは {{cssxref("max-content")}} に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック（コンテンツが存在する場所）を 1fr に設定します。 これは、残りのスペースを占有することを意味します。

+ +

暗黙的にグリッドに作成された行はデフォルトで自動サイズ変更されるため、トラックにフッターがある場合は自動サイズ変更されます。 したがって、これは追加されたコンテンツにフィットします。

+ +
+

注: 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 グリッドレベル 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。

+
+ +

便利な代替方法

+ +

フレックスボックスを使ってカードをレイアウトすることもでき、その場合は、コンテンツ領域を大きくし、他の項目は大きくしないようにする必要があります。 これはカードをレイアウトするための合理的な方法ですが、私は、項目に規則を追加する必要があるのではなく、コンテナからトラックを制御できることをやや好みます。

+ +

全体的なレイアウトのためにフレックスボックスを使うことができますが、これは最終的なフレックス行の上で伸縮するカードをもたらすでしょう。 あるいは、CSS 段組みを使用することもできます — これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。

+ +

これらの各レイアウト方法のデモについては、欄のレシピを参照してください。

+ +

アクセシビリティへの懸念

+ +

カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、Heydon Pickering による包括的なコンポーネント: カード（英語）を参照してください。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

 

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/center_an_element/index.html b/files/ja/web/css/layout_cookbook/center_an_element/index.html new file mode 100644 index 0000000000..c813da5cbe --- /dev/null +++ b/files/ja/web/css/layout_cookbook/center_an_element/index.html @@ -0,0 +1,59 @@ +--- +title: 要素を中央に配置 +slug: Web/CSS/Layout_cookbook/Center_an_element +tags: + - CSS + - Layout + - Recipe + - box alignment + - centering + - cookbook + - flexbox +translation_of: Web/CSS/Layout_cookbook/Center_an_element +--- +
{{CSSRef}}
+ +

このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。

+ +

大きなボックスの中央に配置された要素

+ +

要件

+ +

項目を別のボックスの縦横の中央に配置する。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸（交差軸）の中央に配置するには {{cssxref("align-items")}} を center に設定し、インライン軸（主軸）の中央に配置するには {{cssxref("justify-content")}} を center に設定します。

+ +

ここで使用されているボックス配置プロパティはブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナに変える必要なしに要素を中央に配置できるようになるかもしれません。 ただし、現在ブロックレイアウトでのボックス配置プロパティのサポートは制限されているため、現在フレックスボックスを使用して中央に配置するのがこれを達成するための最も堅牢な方法です。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

MDN にある資料

+ + diff --git a/files/ja/web/css/layout_cookbook/column_layouts/index.html b/files/ja/web/css/layout_cookbook/column_layouts/index.html new file mode 100644 index 0000000000..868f6d0610 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/column_layouts/index.html @@ -0,0 +1,132 @@ +--- +title: 欄レイアウト +slug: Web/CSS/Layout_cookbook/Column_layouts +tags: + - CSS + - Layout + - Multi-col + - columns + - cookbook + - flexbox + - grid +translation_of: Web/CSS/Layout_cookbook/Column_layouts +--- +
{{CSSRef}}
+ +

多くの場合、いくつかの欄を含むレイアウトを作成する必要があります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらのオプションについて説明します。

+ +

コンテナ内に2つの欄を持つ3種類のレイアウトスタイル。

+ +

必要条件

+ +

欄（columns）で達成したいと思うかもしれないデザインパターンがいくつかあります。

+ +
    +
  • 新聞のような欄（段）に分割されたコンテンツの連続したスレッド。
    • +
  • すべての高さが等しい、欄（列）として配置された一並びの項目。
    • +
  • 行と列で並べられた複数行の列。
    • +
+ +

レシピ

+ +

要件を満たすためには、さまざまなレイアウト方法を選択する必要があります。

+ +

コンテンツの連続したスレッド — 段組みレイアウト

+ +

段組みレイアウト（multi-column layout、multicol）を使用して段を作成した場合、テキストは各段を順番に埋める連続したストリームのままです。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。

+ +

{{cssxref("column-gap")}} プロパティを使用して段間のギャップを制御したり、{{cssxref("column-rule")}} を使用して段間に線を追加したりできます。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

次の場合に段組みを使用してください。

+ +
    +
  • テキストを新聞のような段に表示したい。
    • +
  • 段に分割したい小さい項目のセットを持っている。
    • +
  • 個々の欄ボックスを装飾のターゲットにする必要がない。
    • +
+ +

同じ高さの単一行の項目 — フレックスボックス

+ +

フレックスボックス（flexbox）は、{{cssxref("flex-direction")}} を row に設定することでコンテンツを列に分割するために使用できますが、フレックスボックスはフレックスコンテナ内の要素をターゲットにし、それぞれの直接の子を新しい列に配置します。 これは段組みで見たものとは異なる振る舞いです。

+ +

フレックス項目間に規則を追加する方法は現在ありません。 また、{{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティに対するブラウザーのサポートは制限されています。 したがって、項目間にギャップを作成するには、マージンを使用します。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

フレックスボックスを使用して、コンテナの {{cssxref("flex-wrap")}} プロパティを wrap に設定することで、フレックス項目が新しい行に折り返されるレイアウトを作成することもできます。 これらの新しいフレックスラインは、そのラインに沿ってのみスペースを配分します — 以下の例に示すように、新しいラインの項目は上のラインの項目と整列しません。 これがフレックスボックスが一次元として記述されている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、同時に両方ではありません。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

次の場合にフレックスボックスを使用してください。

+ +
    +
  • 単一行または単一列の項目。
    • +
  • 項目をレイアウトした後に交差軸（cross axis）上で整列をしたいとき。
    • +
  • ラップされた項目がそれらのラインに沿ってだけスペースを共有し、他のラインの項目と並ばないことに満足しているとき。
    • +
+ +

項目を行と列に並べる — グリッドレイアウト

+ +

欲しいものが項目が行と列に並ぶレイアウトであるならば、CSS グリッドレイアウトを選ぶべきです。 グリッドレイアウトは、フレックスボックスがフレックスコンテナの直接の子に作用するのと同様の方法で、グリッドコンテナの直接の子に作用しますが、CSS グリッドでは、項目を行と列に並べることができます — これは2次元として記述されています。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

次の場合にグリッドを使用してください。

+ +
    +
  • 複数行または複数列の項目用。
    • +
  • ブロック軸とインライン軸の項目を揃えることができるようにする場合。
    • +
  • 項目を行と列に整列させたい場合。
    • +
+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

column-width

+ +

{{Compat("css.properties.column-width")}}

+ +

column-rule

+ +

{{Compat("css.properties.column-rule")}}

+ +

flex

+ +

{{Compat("css.properties.flex")}}

+ +

flex-wrap

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

MDN にある資料

+ + diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html new file mode 100644 index 0000000000..e420bcc7b3 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html @@ -0,0 +1,66 @@ +--- +title: Cookbook template +slug: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +tags: + - CSS + - Contribute + - Layout + - Template + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +--- +

{{CSSRef}}

+ +
注: これは CSS 料理帳のページのテンプレートページです。 新しい料理帳のページを作成するときに、これを生のテンプレートとして使用してください。
+イタリック体のコメントは、テンプレートの一部の使い方に関する情報です。
+ +

このレシピが解決する問題の説明または、あなたが実証しているパターンの説明。

+ +

Requirements

+ +

このパターンには何を含める必要がありますか、それともどのような問題を解決する必要がありますか？ それをここにリストします。

+ +

Recipe

+ +

下の例のパスを変更して、マージされた例を指すようにします。 最後のパラメータは実際のサンプルの高さで、必要に応じて変更できます。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +

マージされたダウンロードバージョンを指すようにリンクを変更します。

+ +

Download the example

+ +

Choices made

+ +

パターンを作成したときの決定を説明してください。 なぜあなたは特定の方法を選んだのですか？ あなたがここに追加の例を追加したい場合 — 例えば代替のあるバージョン — ぜひ追加してください。 パターンは非常に単純なものからより複雑なものまで多岐にわたるので、このセクションは意図的に緩めています。

+ +

Useful fallbacks or alternative methods

+ +

レシピを構築するための有用な代替方法、またはサポートしていないブラウザーをサポートする必要がある場合に使用する代替レシピがある場合は、それらをここの別のセクションに含めてください。

+ +

Accessibility concerns

+ +

アクセシビリティに関して注意すべき点がある場合に、これを含めます。 あなたのパターンに関係がなければ、これは省略することができます。

+ +

Browser compatibility

+ +

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

+ + + +

以下の例で align-items を含めたように、使用した重要なプロパティの互換データ（compat data）を含めます。

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

See also

+ +
    +
  • 関連プロパティのリンク: {{Cssxref("example-property")}}
    • +
  • コンテキストでプロパティを使用方法を示す記事へのリンク: "Using … article"
    • +
  • 非常に良い外部リンク。 外部リンクを恐れてはいけませんが、それらは傑出したものであるべきであり、細かい点を述べるだけのものではありません。
    • +
diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html new file mode 100644 index 0000000000..ac347af90a --- /dev/null +++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -0,0 +1,106 @@ +--- +title: レシピを投稿する +slug: Web/CSS/Layout_cookbook/Contribute_a_recipe +tags: + - CSS + - Contribute + - Layout + - Templates + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe +--- +
{{CSSRef}}
+ +

レイアウト料理帳の一例を提供したい場合は、このページでは、あなたの例を公開するための手順について説明します。

+ +

何が良いレシピになりますか？

+ +

あらゆる便利なウェブデザインのパターンの最も単純なバージョンです。 含まれている CSS の各行は、パターンを示すのを助けるためにそこにあるべきですので、例をきれいに見せるためだけのものは省略してください。 アイデアは、誰かがパターンを手に取り、自分のスタイルでサイトでそれを使用できるということです。

+ +

レシピを公開する手順

+ +

英語で考えるんだ！ — en-US のページを作ります。

+ +

GitHub のアカウントで MDN のアカウントを作ります。

+ +

MDN の編集機能はもちろん GitHub と Git の扱いにも慣れている必要があります。

+ +

レシピの名前とスラグ、例に使うファイル名を以下を読みながら決めます。

+ +

レシピは以下で構成されています。

+ +
    +
  1. 実例（live example）は、CSS Examples GitHub リポジトリに保存します。
    2. +
  2. その例のダウンロード可能なバージョンも、CSS Examples リポジトリに保存します。
    3. +
  3. CSS レイアウト料理帳の中のページで、詳細は次のとおりです。 +
      +
    1.  要件（Requirements）
      2. +
    2. レシピ（Recipe）
      3. +
    3. 行った選択（Choices made）
      4. +
    4. 便利な代替方法（Useful fallbacks or alternative methods）
      5. +
    5. アクセシビリティへの懸念（Accessibility concerns）
      6. +
    6. ブラウザー実装状況（Browser compatibility）
      7. +
    7. 関連情報（See also）
      8. +
    +
    4. +
+ +

1. パターンを作ります

+ +

あなたの例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。 誰もがこれらに精通しているわけではないので、（BEM など）特定の CSS の規約を使用しないでください。 必要以上に複雑に見えることがあります。

+ +

HTML と CSS が有効であることを確認し、複数のブラウザーでテストしてください。 どこでもサポートされていない CSS プロパティを使用していても問題ありません！ ページを作成するときにブラウザーのサポート情報を含めることができます。 場合によっては、代替のサポートを含む、例の2番目のバージョンを作成すると便利な場合があります。

+ +

2. 実例を作成する

+ +

料理帳のページや MDN の他の場所で見ることができる実例は、訪問者が必要なすべてのコードに圧倒されることなくコードで遊んで関連部分を変更することを可能にします。 あなたのレシピは一つ以上の例として示されます。

+ +

CSS Examples リポジトリをフォークして（右上の Fork ボタンを押すと自分のアカウントにコピーが作られます）、css-cookbook フォルダを調べてください。 出発点としてコピーできる cookbook-template.html ファイルがあります。 これを css-cookbook ディレクトリにあなたのパターンにとって意味のある名前で保存してください。 テンプレート（template）は、さまざまなパーツを適切な場所に追加するのに役立つようにコメントされています。

+ +

これの重要なパーツは次のとおりです。

+ +

エディタパネルのスタイル用のスタイルシート、基本的な body のスタイル、およびエディタ機能用の JavaScript ファイルがあります。 これらのファイルはそのままにしておきます。

+ +

head の中には2つのスタイルのブロックがあります。 1つ目は、ページへの訪問者がこの例で遊ぶために変更する必要がないものです。 2つ目は、実例で遊びたい項目のどれかです。 通常、1つ目のブロックに実例の CSS をすべて追加してから、2番目のブロックに移動する必要がある規則のセットを選択します。 2番目のブロックの規則は、パターンの基本となる規則、おそらくユーザーが CSS の値を変更してパターンの更新を確認できるような規則にする必要があります。

+ +

コンポーネント用の HTML を2回追加する必要があります。 最初に preview クラスの section の中に、次に playable-html クラスの textarea の中にです。

+ +

head の中の2番目のブロックからの editable クラスの CSS も、playable-css クラスの textarea にコピーする必要があります。

+ +

単純な例は center.html で、これは要素を中央に配置のページに埋め込まれています。 これを使用して、さまざまな細部を正しく追加する方法を確認できます。

+ +

リポジトリをフォークしたので、私たちの CSS と JavaScript ファイルをあなたの例と一緒に持っているなら、ブラウザーであなたの実例を開くと、ページに含まれている時と全く同じように動くのを見るでしょう。

+ +

役に立つヒント

+ +
    +
  1. textarea 内で CSS と HTML をインデントしないでください。 代わりにラインの先頭にぶつけてください。 レンダリングすると見栄えがよくなります。
    2. +
  2. 必要な画像がある場合は、例と共にディレクトリにポップします。 または、すでにそこにあるものを使用することを歓迎します。
    3. +
  3. インラインスタイルで高さを変更して、textarea の高さを調整できます。
    4. +
+ +

3. ダウンロード版を作成する

+ +

実例にはすべての実例コードが含まれているので、そのすべてを含まない簡単な例を訪問者に提供したいと思います。 実例を --download を付けてコピーしてください。 例えば、center.html には center--download.html という名前のダウンロードバージョンがあります。 このファイルはあなたの最初の例と似ています。 これは単一の HTML ページとしてのパターンの基本バージョンです。 含まれたスタイルシートにある body の CSS 規則を含めると便利かもしれません。 cookbook-template--download.html を見ればこれらは出発点として含まれています。

+ +

4. あなたの例でプルリクエストをする

+ +

CSS Examples リポジトリでプルリクエスト（Pull Request、PR）を作成してください。 このようにして、ページを作成する前に必要になる可能性のある例の変更を手助けすることができます。 さらに、この例は実際のものである必要があり、最初に作成するのが理にかなっています。 プルリクエストにパターンの説明とあなたが何を示しているかを含めてください。

+ +

5. ページを作成する

+ +

あなたの例がマージされたら、あなたのページを作成することができます。 そのためにはページ作成権限付き MSDN アカウントが必要です。 その後、そのページを CSS 料理帳のページのサブページとして作成できます。 ここに料理帳のページ用のテンプレートがあります。

+ +

テンプレートは各セクションの一部になるべきものを説明し、より多くの助けを得るために他の料理帳の例を参照することができます。 これらのページのいずれかの編集ボタンをクリックすると、実装状況データを埋め込むために使用されるマクロや実例などが表示されます。

+ +

MDN Wiki の使用に関する一般的なガイダンスが必要な場合は、こちらのヘルプページを参照してください。

+ +

質問をする必要がある場合、または誰かにあなたのページを見てもらいたい場合は、MDN 談話（Discourse）を利用するか、IRC でチャットしてください。

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/grid_wrapper/index.html b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html new file mode 100644 index 0000000000..4d49e35c4d --- /dev/null +++ b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html @@ -0,0 +1,90 @@ +--- +title: グリッドラッパー +slug: Web/CSS/Layout_cookbook/Grid_wrapper +tags: + - CSS + - Guide + - Layout + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook/Grid_wrapper +--- +
{{CSSRef}}
+ +

このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。

+ +

要件

+ +

グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このレシピでは、CSS グリッドの {{cssxref("minmax")}} 関数を使用して、{{cssxref("grid-template-columns")}} プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う6つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。

+ +

外側の2つの列の最大サイズは 1fr です。 つまり、グリッドコンテナ内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。

+ +

便利な代替方法

+ +

このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の auto の {{cssxref("margin")}} とともに max-width を設定すると便利です。

+ +
.grid {
+  max-width: 1200px;
+  margin: 0 auto; // コンテナを水平方向に中央揃え
+}
+
+/* ブラウザーがグリッドをサポートしている場合は、max-width と margin を取り除く */
+@supports (display: grid) {
+  .grid {
+    display: grid;
+    /* 他のグリッドのコードはここへ */
+    max-width: none;
+    margin: 0;
+  }
+}
+ +

full-width 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（Una Kravets の好意による）。

+ +
.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+ +

これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。

+ +

アクセシビリティへの懸念

+ +

グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、CSS グリッドのレイアウトとアクセシビリティを参照）。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

 

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

関連情報

+ + + +

 

diff --git a/files/ja/web/css/layout_cookbook/index.html b/files/ja/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..9b98903a2b --- /dev/null +++ b/files/ja/web/css/layout_cookbook/index.html @@ -0,0 +1,86 @@ +--- +title: CSS レイアウト料理帳 +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - cookbook + - レイアウト + - レシピ + - 料理帳 +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

CSS レイアウト料理帳は、よくあるレイアウトパターンや、あなた自身のサイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。 プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。

+ +
+

メモ: CSS のレイアウトが初めてならば、最初に CSS レイアウト学習モジュールを見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。

+
+ +

レシピ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
レシピ説明レイアウト方法
メディアオブジェクト一方が画像でもう一方が説明テキストである二列のボックス。 例えば Facebook の投稿やツイート。CSS グリッド, {{cssxref("float")}} による代替, {{cssxref("fit-content")}} による寸法制御
欄段組みレイアウト、フレックスボックス、グリッドの選択CSS グリッド, 段組み, フレックスボックス
要素を中央に配置アイテムを水平および垂直方向に中央に配置する方法フレックスボックス, ボックス配置
張り付くフッターコンテンツが短い場合にコンテナーまたはビューポートの最下部に配置されるフッターの作成。CSS グリッド, フレックスボックス
ナビゲーションの分割一部のリンクが他と視覚的に分割されているナビゲーションパターン。フレックスボックス, {{cssxref("margin")}}
パンくずナビゲーション来訪者がページ階層の上の階層に戻ることができるリンクのリストの作成。フレックスボックス
バッジ付きリストグループカウントを表示するバッジの付いたアイテムのリスト。フレックスボックス, ボックス配置
ページ付けコンテンツのページへのリンク (検索結果など)。フレックスボックス, ボックス配置
カードカードのグリッドで表示されるカードコンポーネント。CSS グリッド
グリッドラッパーグリッドコンテンツを中央のラッパー内に配置するためのもので、はみ出すこともできます。CSS グリッド
+ +

レシピにご協力を

+ +

MDN 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインはこちらのページを見てください。

diff --git a/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html new file mode 100644 index 0000000000..f822596444 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html @@ -0,0 +1,60 @@ +--- +title: バッジ付きリストグループ +slug: Web/CSS/Layout_cookbook/List_group_with_badges +tags: + - CSS + - Layout + - box alignment + - cookbook + - flexbox + - lists +translation_of: Web/CSS/Layout_cookbook/List_group_with_badges +--- +

{{CSSRef}}

+ +

このレシピでは、カウントを示すバッジ付きのリストグループのパターンを作成します。

+ +

テキストの右側に表示されるカウントを示すバッジ付きの項目のリスト。

+ +

要件

+ +

項目のコンテンツ量に関係なく、リスト項目の右側にバッジを並べて表示する必要があります。 1行のコンテンツでも、複数行のコンテンツでも、バッジは常に垂直方向の中央に配置する必要があります。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

フレックスボックスは、この特定のパターンを簡単にし、またレイアウトの変更を容易にします。

+ +

テキストとバッジが正しく並ぶようにするために、{{cssxref("justify-content")}} プロパティに space-between の値を使用します。 これにより、項目間に余分なスペースが入ります。 実際の例では、このプロパティを削除すると、テキストが1行より短い項目のバッジがテキストの末尾に移動します。

+ +

コンテンツを垂直方向に揃えるには、{{cssxref("align-items")}} プロパティを使用してテキストとバッジを交差軸上で揃えます。 代わりに、バッジをコンテンツの上部に揃える場合は、これを align-items: flex-start に変更します。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.html b/files/ja/web/css/layout_cookbook/media_objects/index.html new file mode 100644 index 0000000000..3fbb3dc75d --- /dev/null +++ b/files/ja/web/css/layout_cookbook/media_objects/index.html @@ -0,0 +1,89 @@ +--- +title: 'レシピ: メディアオブジェクト' +slug: Web/CSS/Layout_cookbook/Media_objects +tags: + - CSS + - Layout + - Media object + - Recipe + - cookbook + - fit-content + - float + - grid +translation_of: Web/CSS/Layout_cookbook/Media_objects +--- +
{{CSSRef}}
+ +

メディアオブジェクトは、ウェブ上のいたるところで見られるパターンです。 Nicole Sullivan によって命名され、それは一方の側に画像を、そして他方の側に説明的なテキストを有する Facebook の投稿やツイートのような2列のボックスを指します。

+ +

+ +

必要条件

+ +

メディアオブジェクトのパターンには、次の特性の一部または全部が必要です。

+ +
    +
  • モバイルでは積み重ね、デスクトップでは2列です。
    • +
  • 画像は左右どちらでもかまいません。
    • +
  • 画像は小さい場合も大きい場合もあります。
    • +
  • メディアオブジェクトはネストできます。
    • +
  • メディアオブジェクトは、どちらの側が最も高いかに関係なく、コンテンツをクリアする（区切る）必要があります。
    • +
+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

必要に応じて2次元でレイアウトを制御できるため、メディアオブジェクトにグリッドレイアウトを使用することを選択しました。 つまり、フッターがあり、その上に短いコンテンツがある場合、そのフッターはそのメディアオブジェクトの下部にまで押し下げられます。

+ +

グリッドレイアウトを使用するもう1つの理由は、画像のトラックのサイズ変更に {{cssxref("fit-content")}} を使用できるようにするためです。 最大サイズが 200 ピクセルの fit-content を使用すると、アイコンのような小さい画像がある場合、トラックはその画像のサイズ、つまり max-content のサイズと同じサイズになります。 画像が大きい場合、トラックは 200 ピクセルで拡大しなくなり、画像には 100% の {{cssxref("max-width")}} が適用されるため、列の内側に収まるように縮小されます。

+ +

レイアウトを実現するために {{cssxref("grid-template-areas")}} を使用することで、CSS でこのパターンを見ることができます。 max-width が 500 ピクセルになったら、グリッドを定義します。 そのため、より小さいデバイスではメディアオブジェクトが積み重ねられます。

+ +

パターンのオプションはそれを反転して画像を反対側に切り替えることです — これはレイアウトを反映させる反転グリッドテンプレートを定義する media-flip クラスを追加することによって行われます。

+ +

あるメディアオブジェクトを別のメディアオブジェクトの中にネストするときは、通常のレイアウトでは2番目のトラックに、反転したときは最初のトラックに配置する必要があります。

+ +

代替方法

+ +

サポートしたいブラウザーに応じて、このパターンにはいくつかの代替方法があります。 良いキャッチオールは、画像を左に浮かべること、そしてそれがフロートを含むことを確実にするためにボックスに clearfix ハックを追加することです。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}

+ +
+

この例をダウンロードする

+
+ +

浮動要素がグリッド項目になると、そのフロートは適用されなくなるため、フロートを除去するために特別なことをする必要はありません。

+ +

する必要があるのは、項目に適用されているすべてのマージンと、グリッドのコンテキストで必要としていないすべての幅を取り除くことです（グリッドでそれを制御するための {{cssxref("gap")}} プロパティがあり、トラックがサイズを制御します）。

+ +

MDN の関連資料

+ + + +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用しているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ +

このページの互換性テーブルは構造化データから生成されます。 データに貢献したい場合は、https://github.com/mdn/browser-compat-data をチェックして、プルリクエストを送ってください。

+ +

grid-template-areas

+ +

{{Compat("css.properties.grid-template-areas")}}

+ +

float

+ +

{{Compat("css.properties.float")}}

diff --git a/files/ja/web/css/layout_cookbook/pagination/index.html b/files/ja/web/css/layout_cookbook/pagination/index.html new file mode 100644 index 0000000000..60821375f6 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/pagination/index.html @@ -0,0 +1,85 @@ +--- +title: ページ付け +slug: Web/CSS/Layout_cookbook/Pagination +tags: + - CSS + - Layout + - cookbook + - flexbox + - pagination +translation_of: Web/CSS/Layout_cookbook/Pagination +--- +

{{CSSRef}}

+ +

この料理帳のパターンは、ページ付け（pagination）を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。

+ +

ページ付きリスト内のページのセットへのリンク

+ +

要件

+ +

ページ付けのパターンは通常、項目を1行に表示します。 スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を {{htmlelement("nav")}} 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に1行として表示します。

+ +

通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このパターンは、フレックスボックスを使用してレイアウトされています — 一方のフレックスコンテナは別のフレックスコンテナの中にネストされています。 {{htmlelement("nav")}} 要素は、{{cssxref("justify-content")}} プロパティを使用してリストを中央に配置できるように、フレックスコンテナとして指定されています。

+ +

リスト自体も、項目を行としてレイアウトするためのフレックスコンテナになります。 項目を配置するために、フレックス項目には {{cssxref("margin")}} を使用します。

+ +

代替方法

+ +

{{cssxref("column-gap")}} プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。

+ +
.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+
+ +

アクセシビリティへの懸念

+ +

スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、<nav> 要素に aria-label="pagination" を追加しました。

+ +

スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に aria-hidden 属性を設定しました。

+ +

このドキュメントの最後にある「関連情報」セクションには、関連するアクセシビリティのトピックへのリンクがあります。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

フレックスレイアウトの column-gap

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/split_navigation/index.html b/files/ja/web/css/layout_cookbook/split_navigation/index.html new file mode 100644 index 0000000000..beb0d732d9 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/split_navigation/index.html @@ -0,0 +1,55 @@ +--- +title: ナビゲーションの分割 +slug: Web/CSS/Layout_cookbook/Split_Navigation +tags: + - CSS + - Layout + - Navigation + - Recipe + - cookbook + - flexbox +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

1つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。

+ +

2つのグループに分けられた項目。

+ +

要件

+ +

一般的なナビゲーションのパターンは、ある要素を他の要素から押しのけることです。 2セットの項目を2つの別々のフレックスコンテナにする必要なく、フレックスボックスを使用してこれを実現できます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。

+ +

自動マージンは、適用される方向に利用可能なすべてのスペースを吸収します。 これは、自動マージンを使ってブロックを中央に配置する方法です — ブロックの両側にスペースをすべて取ろうとすると、ブロックが中央に押し込まれます。

+ +

この場合、左の自動マージンは利用可能なスペースをすべて占め、項目を右に押します。 リスト内の任意の項目にクラス push を適用できます。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

フレックスボックス

+ +

{{Compat("css.properties.flex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.html b/files/ja/web/css/layout_cookbook/sticky_footers/index.html new file mode 100644 index 0000000000..07ce9b5e34 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/sticky_footers/index.html @@ -0,0 +1,77 @@ +--- +title: 固定フッター +slug: Web/CSS/Layout_cookbook/Sticky_footers +tags: + - CSS + - Guide + - Layout + - cookbook + - flexbox + - grid + - sticky footer +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。

+ +

ボックスの底に押し込まれた張り付くフッター

+ +

要件

+ +

固定フッターのパターンは、次の要件を満たす必要があります。

+ +
    +
  • コンテンツが短い場合、フッターはビューポートの下部に固定されます。
    • +
  • ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。
    • +
+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +
+

注: この例と以下の例では、ライブ例がうまくいくように、min-height: 100% に設定された wrapper を使用しています。 また、{{htmlelement("body")}} で {{cssxref("min-height")}} を 100vh に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。

+
+ +

行った選択

+ +

上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 .wrapper の最小の高さは 100% です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。

+ +

グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは 1fr トラックに、フッターは最後の自動サイズ調整トラックに入ります。1fr トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。

+ +

代替方法

+ +

グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

フレックスボックスの例は同じように始まりますが、.wrapper では display: grid ではなく display: flex を使用し、flex-direction を column に設定します。次に、メインコンテンツを flex-grow: 1 に設定し、他の2つの要素を flex-shrink: 0 に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。

+ +

ブラウザー実装状況

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

MDN にある資料

+ + diff --git a/files/ja/web/css/layout_mode/index.html b/files/ja/web/css/layout_mode/index.html new file mode 100644 index 0000000000..726d53e876 --- /dev/null +++ b/files/ja/web/css/layout_mode/index.html @@ -0,0 +1,32 @@ +--- +title: レイアウトモード +slug: Web/CSS/Layout_mode +tags: + - CSS + - リファレンス + - レイアウト +translation_of: Web/CSS/Layout_mode +--- +
{{cssref}}
+ +

CSS のレイアウトモード (または単に「レイアウト」) は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムです。複数のレイアウトモードがあります。

+ +
    +
  • 通常フロー — すべての要素は何かの操作をしてこれから外すまで、通常フローの一部です。通常フローは、段落のようなボックスをレイアウトするためのブロックレイアウトと、テキストのような行内アイテムをレイアウトするためのインラインレイアウトを含みます。
    • +
  • 表レイアウトは、表のレイアウトのためのものです。
    • +
  • 浮動レイアウトは、アイテムを左または右に配置して、残りの部分はそれを回り込む通常フローにするためのものです。
    • +
  • 位置指定レイアウトは、他要素とほとんど相互作用のない位置指定要素のためのものです。
    • +
  • 段組みレイアウトは、新聞のように複数の段でコンテンツをレイアウトするためのものです。
    • +
  • フレックスボックスレイアウトは、滑らかに大きさが変更できる複雑なページのレイアウトに使われます。
    • +
  • グリッドレイアウトは、固定グリッドを基準にした要素配置に使われます。
    • +
+ +
+

メモ: レイアウトモードによって、使える CSS プロパティに制限があります。大半は 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。

+
+ +

関連情報

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ja/web/css/left/index.html b/files/ja/web/css/left/index.html new file mode 100644 index 0000000000..a7d16d6eb3 --- /dev/null +++ b/files/ja/web/css/left/index.html @@ -0,0 +1,228 @@ +--- +title: left +slug: Web/CSS/left +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/left +--- +
{{CSSRef}}
+ +

left は CSS のプロパティで、位置指定要素 (positioned element) の水平位置の決定に関与します。位置指定されていない要素には効果はありません。

+ +
{{EmbedInteractiveExample("pages/css/left.html")}}
+ + + +

left の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。

+ +
    +
  • position が absolute 又は fixed に設定されている場合、 left プロパティは要素の左辺と包含ブロックの左辺との間の距離を指定します。 (包含ブロックは相対配置された祖先の要素です。)
    • +
  • position が relative に設定されている場合、 left プロパティは要素の左辺が通常位置から右方向へ移動する量を指定します。
    • +
  • position が sticky に設定されている場合、 left プロパティは sticky 制約の矩形を計算するために使用されます。
    • +
  • position が static に設定されている場合、 left プロパティは効果がありません。
    • +
+ +

left と {{cssxref("right")}} の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は過剰指定になります。このような場合、包含ブロックが左書きの場合は left の値が優先され、包含ブロックが右書きの場合は right の値が優先されます。

+ +

構文

+ +
/* <length> 値 */
+left: 3px;
+left: 2.4em;
+
+/* 内包ブロックの幅に対する <percentage> */
+left: 10%;
+
+/* キーワード値 */
+left: auto;
+
+/* グローバル値 */
+left: inherit;
+left: initial;
+left: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 +
    +
  • 絶対位置指定要素の場合は、包含ブロックの左辺までの距離。
    • +
  • 相対位置指定要素の場合は、通常の位置からの右方向への移動量。
    • +
+
+
{{cssxref("<percentage>")}}
+
包含ブロックの幅に対する {{cssxref("<percentage>")}} です。
+
auto
+
以下のように指定します。 +
    +
  • 絶対位置指定要素では、要素の位置は {{Cssxref("right")}} プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 right も auto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
    • +
  • 相対位置指定要素では、通常の位置から要素までの距離は {{Cssxref("right")}} に基づきます。また、 right も auto であった場合は、水平方向には移動しません。
    • +
+
+
inherit
+
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 又は auto キーワードと同様に扱われます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+#example_5 {
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 100px;
+  background-color: #D7FFC2;
+}
+ +

HTML

+ +
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative position in relation to its siblings.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relative to its sibling div above, but removed from flow of content.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      </pre>
+      <p>Absolute position inside of a parent with relative position</p>
+    </div>
+
+    <div id="example_5">
+      <pre>
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 200px;
+      </pre>
+      <p>Absolute position with both left and right declared</p> </div>
+  </div>
+</div>
+ +

実行例

+ +

{{EmbedLiveSample('Examples',1200,650)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}{{Spec2('CSS3 Positioning')}}sticky の位置の動作を追加
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.left")}}

+ +

関連情報

+ +
    +
  • {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}
    • +
  • 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}
    • +
  • {{cssxref("position")}}
    • +
diff --git a/files/ja/web/css/length-percentage/index.html b/files/ja/web/css/length-percentage/index.html new file mode 100644 index 0000000000..9d10935eb8 --- /dev/null +++ b/files/ja/web/css/length-percentage/index.html @@ -0,0 +1,61 @@ +--- +title: +slug: Web/CSS/length-percentage +tags: + - CSS + - CSS Data Type + - CSS データ型 + - Reference + - length-percentage + - units + - values + - 値 + - 単位 +translation_of: Web/CSS/length-percentage +--- +
{{CSSRef}}
+ +

<length-percentage> は CSS のデータ型で、 {{Cssxref("length")}} または {{Cssxref("percentage")}} が取りうる値を表します。

+ +

構文

+ +

この型に利用できる個々の構文の詳細は、 {{Cssxref("length")}} および {{Cssxref("percentage")}} の文書を参照してください。

+ +

calc() での使用

+ +

許可されている型として <length-percentage> が指定されているところでは、これはパーセント値が長さとして解決されるので、 calc() の式で利用することができます。したがって、以下のすべての値が {{Cssxref("width")}} で利用できます。

+ +
width: 200px
+width: 20%
+width: calc(100% - 200px)
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS3 Values')}}<length-percentage> を定義。 calc() を追加
+ +

ブラウザーの対応

+ + + +

{{Compat("css.types.length-percentage")}}

diff --git a/files/ja/web/css/length/index.html b/files/ja/web/css/length/index.html new file mode 100644 index 0000000000..1864785e94 --- /dev/null +++ b/files/ja/web/css/length/index.html @@ -0,0 +1,266 @@ +--- +title: +slug: Web/CSS/Length +tags: + - CSS + - CSS データ型 + - CSS 値と単位 + - Layout + - Reference + - Web + - length + - ウェブ + - レイアウト +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

CSS の <length> データ型は、長さの値を表します。長さは {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。

+ +
+

注: {{cssxref("<percentage>")}} 値も CSS の長さに使用され、 <length> 値を受け付ける同じプロパティの一部でも使用することができますが、 <length> 値と同じものではありません。 {{cssxref("<length-percentage>")}} を参照してください。

+
+ +

構文

+ +

<length> データ型は一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 0 の後の単位は省略可能です。

+ +
+

注: 負の <length> を許容するプロパティとそうでないプロパティがあります。

+
+ +

単位

+ +

相対的な長さの単位

+ +

相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、行の高さであったり、 {{glossary("viewport")}} の寸法であったりします。

+ +
フォント関連の長さ
+ +

フォント関連の長さは、 <length> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。

+ +
+

注: これらの単位、特に em と rem は、ユーザーがフォントの大きさを変更しても ページの vertical rhythm を維持するような、拡縮可能なレイアウトを作成するためによく使われます。

+
+ +
+
cap {{experimental_inline}}
+
その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。
+
ch
+
その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。
+
+ "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。
+
em
+
その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に継承されたフォントの大きさを表します。
+
ex
+
その要素の {{Cssxref("font")}} における x-height です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは 1ex ≈ 0.5em です。
+
ic {{experimental_inline}}
+
描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。
+
lh {{experimental_inline}}
+
使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。
+
rem
+
ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します（多くのブラウザーでは既定値は 16px ですが、ユーザー設定によって変わる可能性があります）。
+
rlh {{experimental_inline}}
+
ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。
+
+ +
ビューポートのパーセント値による長さ
+ +

ビューポートのパーセント値による長さは、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な <length> 値を定義します。ビューポートの長さは {{cssxref("@page")}} で宣言されたブロックでは無効です。

+ +
+
vh
+
ビューポートの初期値の包含ブロックにおける高さの1%と同じです。
+
vw
+
ビューポートの初期値の包含ブロックにおける幅の1%と同じです。
+
vi {{experimental_inline}}
+
初期値の包含ブロックにおける、ルート要素のインライン軸の寸法の1%と同じです。
+
vb {{experimental_inline}}
+
初期値の包含ブロックにおける、ルート要素のブロック軸の寸法の1%と同じです。
+
vmin
+
vw と vh の小さい方です。
+
vmax
+
vw と vh の大きい方です。
+
+ +

絶対的な長さの単位

+ +

絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合（印刷レイアウトなど）に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。

+ +

低解像度の端末では、px の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば 1in は 96px と定義され、これは 72pt と等しくなります。このような端末では結果的に、インチ (in)、センチメートル (cm)、ミリメートル (mm) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。

+ +

高解像度の端末では、インチ (in)、センチメートル (cm)、ミリメートル (mm) は対応する物理的な単位と同じになります。従って、 px の単位は、それ (1インチの1/96) を基準に定義されます。

+ +
+

注: たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 font-size を設定する場合には、 (em や rem のような) 相対的な単位が適しています。

+
+ +
+
px
+
1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、プリンターや高解像度の画面では、 CSS の1ピクセルが端末の複数ピクセルになることがります。 1px = 1in の1/96です。
+
cm
+
1センチメートルです。 1cm = 96px/2.54 です。
+
mm
+
1ミリメートルです。 1mm = 1cm の1/10です。
+
Q {{experimental_inline}}
+
1/4ミリメートルです。 1Q = 1cm の1/40です。
+
in
+
1インチです。 1in = 2.54cm = 96px です。
+
pc
+
1パイカです。 1pc = 12pt = 1in の1/6です。
+
pt
+
1ポイントです。 1pt = 1in の1/72です。
+
mozmm {{non-standard_inline}}, Firefox 59 で削除
+
実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。
+
+ +

補間

+ +

アニメーションの場合、 <length> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられたタイミング関数によって定められます。

+ +

例

+ +

長さの単位の比較

+ +

以下のデモでは、入力欄に <length> の値 (例えば 300px, 50%, 30vw) を入力することができ、 Return を押したときにバーの長さが反映されます。

+ +

これにより、様々な長さの単位の効果を比較し対照させることができます。

+ +

HTML

+ +
<div class="outer">
+  <div class="input-container">
+    <label>長さを入力してください:</label>
+    <input type="text" id="length">
+  </div>
+  <div class="inner">
+
+  </div>
+</div>
+<div class="results">
+</div>
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.outer {
+  width: 100%;
+  height: 50px;
+  background-color: #eee;
+  position: relative;
+}
+
+.inner {
+  height: 50px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+}
+
+.result {
+  height: 20px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.result code {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.input-container {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+label {
+  margin: 0 10px 0 20px;
+}
+ +

JavaScript

+ +
const inputDiv = document.querySelector('.inner');
+const inputElem = document.querySelector('input');
+const resultsDiv = document.querySelector('.results');
+
+inputElem.addEventListener('change', () => {
+  inputDiv.style.width = inputElem.value;
+
+  const result = document.createElement('div');
+  result.className = 'result';
+  result.style.width = inputElem.value;
+  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
+  resultsDiv.appendChild(result);
+
+  inputElem.value = '';
+  inputElem.focus();
+})
+ +

結果

+ +

{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#lengths', '<length>')}}{{Spec2('CSS4 Values')}}vi, vb, ic, lh, rlh の単位を追加。
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}ch, rem, vw, vh, vmin, vmax, Q の単位を追加。
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}em, pt, pc, px の単位の明示的な定義。
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}初回定義。 em, pt, pc, px の単位の暗黙的な定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.length")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/letter-spacing/index.html b/files/ja/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..5dad1104e6 --- /dev/null +++ b/files/ja/web/css/letter-spacing/index.html @@ -0,0 +1,135 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - SVG + - 'recipe:css-property' +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

letter-spacing はCSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 letter-spacing が正の値であった場合は、文字と文字の間が開き、 letter-spacing が負の値であった場合は、文字と文字が互いに近づきます。

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+letter-spacing: normal;
+
+/* <length> 値 */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* グローバル値 */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

値

+ +
+
normal
+
現在のフォントでの通常の字間になります。 0 の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。
+
{{cssxref("<length>")}}
+
既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。
+
+ +

アクセシビリティへの配慮

+ +

正と負のどちらでも、大きすぎる値を letter-spacing に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。

+ +

フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

字間の設定

+ +

HTML

+ +
<p class="normal">letter spacing</p>
+<p class="em-wide">letter spacing</p>
+<p class="em-wider">letter spacing</p>
+<p class="em-tight">letter spacing</p>
+<p class="px-wide">letter spacing</p>
+
+ +

CSS

+ +
.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+
+ +

結果

+ +

{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}変更なし。
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}SVG での初回定義
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.letter-spacing")}}

+ +

関連情報

+ +
    +
  • {{cssxref("font-kerning")}}
    • +
diff --git a/files/ja/web/css/line-break/index.html b/files/ja/web/css/line-break/index.html new file mode 100644 index 0000000000..ed94927d45 --- /dev/null +++ b/files/ja/web/css/line-break/index.html @@ -0,0 +1,116 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - Asian + - CSS + - CSS Property + - CSS Text + - NeedsExample + - Reference + - i18n + - l10n + - 'recipe:css-property' + - 日本語処理 + - 禁則処理 +translation_of: Web/CSS/line-break +--- +
{{CSSRef}}
+ +

line-break は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。

+ +
/* キーワード値 */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* グローバル値 */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+
+ +

構文

+ +

値

+ +
+
auto
+
既定の改行規則を使用してテキストを改行します。
+
loose
+
最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。
+
normal
+
最も一般的な改行規則を使用してテキストを改行します。
+
strict
+
最も厳格な改行規則を使用してテキストを改行します。
+
anywhere
+
+

句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

テキストの折り返しの設定

+ +

"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。

+ +

HTML

+ +
<div lang="ja">
+  <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+</div>
+
+ +

CSS

+ +
.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
+.auto { line-break: auto; }
+.loose { line-break: loose; }
+.normal { line-break: normal; }
+.strict { line-break: strict; }
+.anywhere { line-break: anywhere; }
+
+ +

Result

+ +

{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.line-break")}}

diff --git a/files/ja/web/css/line-height-step/index.html b/files/ja/web/css/line-height-step/index.html new file mode 100644 index 0000000000..95065318da --- /dev/null +++ b/files/ja/web/css/line-height-step/index.html @@ -0,0 +1,90 @@ +--- +title: line-height-step +slug: Web/CSS/line-height-step +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/line-height-step +--- +
{{CSSRef}}
+ +

line-height-step は CSS のプロパティで、行ボックスの高さにおける刻みの単位を設定します。このプロパティが設定された場合、行ボックスの高さは単位の倍数のうち最も近いものに切り上げられます。

+ +
/* ポイント値 */
+line-height-step: 18pt;
+
+ +

{{cssinfo}}

+ +

構文

+ +

line-height-step プロパティは、以下のうちの一つで指定します。

+ + + +

値

+ +
+
<length>
+
指定された {{cssxref("<length>")}} が、行ボックスの高さの刻みの計算に使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

以下の例では、それぞれの段落の行ボックスの高さは、刻みの単位に切り上げられます。 <h1> の行ボックスの高さは１つの刻みに収まらないので２つ分を占有しますが、その中の中央に配置されます。

+ +
:root {
+  font-size: 12pt;
+  --my-grid: 18pt;
+  line-height-step: var(--my-grid);
+}
+h1 {
+  font-size: 20pt;
+  margin-top: calc(2 * var(--my-grid));
+}
+ +

これらの規則の結果は、次のスクリーンショットのようになります。

+ +

どのように line-height-step プロパティがテキストの表示に影響するか

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}}{{Spec2('CSS Rhythmic Sizing')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.line-height-step")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("font")}}
    • +
  • {{Cssxref("font-size")}}
    • +
  • {{Cssxref("line-height")}}
    • +
diff --git a/files/ja/web/css/line-height/index.html b/files/ja/web/css/line-height/index.html new file mode 100644 index 0000000000..3df521e2cc --- /dev/null +++ b/files/ja/web/css/line-height/index.html @@ -0,0 +1,181 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - CSS Fonts + - CSS Property + - CSS フォント + - CSS プロパティ + - Layout + - Reference + - Text + - Vertical + - height + - 'recipe:css-property' + - size +translation_of: Web/CSS/line-height +--- +
{{CSSRef}}
+ +

line-height は CSS のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。

+ +
{{EmbedInteractiveExample("pages/css/line-height.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+line-height: normal;
+
+/* 単位のない値: この値を要素のフォントサイズに
+掛けたものを使用する */
+line-height: 3.5;
+
+/* <length> 値 */
+line-height: 3em;
+
+/* <percentage> 値 */
+line-height: 34%;
+
+/* グローバル値 */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+
+ +

line-height プロパティは以下のうちの一つで指定します。

+ + + +

値

+ +
+
normal
+
ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。
+
<number> (単位なし)
+
使用値は、この単位のない {{cssxref("<number>")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された <number> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height を設定する好ましい方法です。
+
<length>
+
行ボックスの高さの計算に、指定した {{cssxref("<length>")}} が使われます。利用可能な単位については、 {{cssxref("<length>")}} をご覧ください。
+
<percentage>
+
要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("<percentage>")}} に要素のフォントサイズの計算値を掛けたものです。パーセント値は予期しない結果を生む可能性があります (下記の2つの例を参照してください)。
+
-moz-block-height {{non-standard_inline}}
+
行の高さを現在のブロックのコンテンツの高さにします。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

基本的な例

+ +
/* 以下のルールの結果はすべて、同じ line height です */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* 数値/単位なし */
+div { line-height: 1.2em; font-size: 10pt; }   /* 長さ */
+div { line-height: 120%;  font-size: 10pt; }   /* パーセント値 */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* 一括指定 */
+ +

line-height を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、同時に font-family プロパティも指定しなければなりません。

+ +

line-height の値は単位なしの数値が好ましい

+ +

以下の例は、line-height の値として {{cssxref("<length>")}} より {{cssxref("<number>")}} のほうが好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものは緑色の境界を持っており、単位なしの line-height の値を使用しています。二番目は赤色の境界を持っており、 line-height の値を em で定義して使用しています。

+ +

CSS

+ +
.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+
+ +

HTML

+ +
<div class="box green">
+ <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
+  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
+</div>
+
+<div class="box red">
+ <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
+  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
+</div>
+
+<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます   (30px × 1.1) = 33px  -->
+<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます  (15px × 1.1) = 16.5px  おそらく、望む結果ではないでしょう -->
+
+ +

結果

+ +

{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}

+ +

アクセシビリティの考慮事項

+ +

主要な段落コンテンツでは、 line-height の値の最小値が 1.5 になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。

+ +

W3C Understanding WCAG 2.1

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#line-height', 'line-height')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.properties.line-height")}}

+
+ +

関連情報

+ +
    +
  • {{Cssxref("font")}}, {{Cssxref("font-size")}}
    • +
diff --git a/files/ja/web/css/linear-gradient()/index.html b/files/ja/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..95fb315074 --- /dev/null +++ b/files/ja/web/css/linear-gradient()/index.html @@ -0,0 +1,218 @@ +--- +title: linear-gradient() +slug: Web/CSS/linear-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Reference + - Web + - ウェブ + - グラフィック + - レイアウト +translation_of: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

CSS の linear-gradient() 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。

+ +
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}
+ + + +

他のグラデーションと同様、線形グラデーションは固有の寸法を持ちません。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

+ +

繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{CSSxRef("repeating-linear-gradient")}} プロパティを使用してください。

+ +

<gradient> は CSS の <image> データ型に所属しますので、 <image> が使用できるところでのみ使用できます。このため、 linear-gradient は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。

+ +

線形グラデーションの構成

+ +

線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 linear-gradient() 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。

+ +

linear-gradient.png

+ +

グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。

+ +

開始点は、グラデーションラインの最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、マジックコーナーと呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。

+ +

グラデーションのカスタマイズ

+ +

グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。

+ +
linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+ +

ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から10%の位置まで、純粋な青を90%の位置から末尾までに配置します。10%から90％までの間は、赤から青への色変化ですが、色ヒントがない30%があるので、変化の中間点は50%の位置ではなく30%の位置になります。

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。

+ +

色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例は30%が赤から黄へ変化し、黄から青への変化がその上でグラデーションの35%になります。

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+
+ +

複数位置の色経由点が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。

+ +
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+ +

既定では、0%の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が100%の位置まで続くか、100%の位置の色になります。

+ +

構文

+ +
/* 45度に傾いたグラデーションで、
+   青から始まり赤で終わる */
+linear-gradient(45deg, blue, red);
+
+/* 右下から左上に向かうグラデーションで、
+   青から始まり赤で終わる */
+linear-gradient(to left top, blue, red);
+
+/* 色経由点: 下から上に向かうグラデーションで、
+   青から始まり、長さの40%ののところで緑になり、
+   赤で終わる */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* 色ヒント: 左から右に向かうグラデーションで、
+   赤から始まり、グラデーションの長さ全体の
+   10%に中間点が来て、残りの90%の長さをかけて
+   青色に変わる */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* 複数位置の色経由点: 45度傾いたグラデーションで、
+   左下半分が赤で右上半分が青、
+   赤から青への変化は明確な線 */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+ +

値

+ +
+
<side-or-corner>
+
グラデーションラインの開始点の位置。指定する場合は、 to に続けて2つ以下のキーワードから成ります。一つは水平方向の辺 (left または right)、もう一方は垂直方向の辺 (top または bottom) です。辺を表すキーワードは順不同です。指定しない場合は、 to bottom が既定になります。
+
to top, to bottom, to left, to right の値は、 0deg, 180deg, 270deg, 90deg, の角度にそれぞれ対応します。他の値は角度に変換されます。
+
{{CSSxRef("<angle>")}}
+
グラデーションラインの方向を角度で示します。 0deg の値は to top と等価で、値が増加するとそこから時計回りに回ります。
+
<linear-color-stop>
+
色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。
+
<color-hint>
+
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+
+
+

メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

+
+
+
+ +

形式文法

+ +
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [ left | right ] || [ top | bottom ]
+  and <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop>
+  and <linear-color-stop> = <color> [ <color-stop-length> ]?
+  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  and <color-hint> = [ <percentage> | <length> ]
+ +

例

+ +

45 度 のグラデーション

+ + + +
body {
+  background: linear-gradient(45deg, red, blue);
+}
+
+ +

{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}

+ +

グラデーションラインの60%から始まるグラデーション

+ + + +
body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}
+ +

{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}

+ +

複数の位置の色経由点があるグラデーション

+ +

この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。

+ + + +
body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+ +

{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}}

+ +
+

メモ: 他の例は CSS グラデーションの使用を参照してください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}補間のヒントを追加。
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.image.gradient.linear-gradient")}}
+ +

関連情報

+ +
    +
  • CSS グラデーションの利用
    • +
  • 他のグラデーション関数: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}
    • +
  • {{CSSxRef("<image>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/ja/web/css/list-style-image/index.html b/files/ja/web/css/list-style-image/index.html new file mode 100644 index 0000000000..e1f682fc74 --- /dev/null +++ b/files/ja/web/css/list-style-image/index.html @@ -0,0 +1,115 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference + - list-style + - list-style-image +translation_of: Web/CSS/list-style-image +--- +
{{CSSRef}}
+ +

CSS の list-style-image プロパティは、リスト項目のマーカーとして使われる画像を設定します。

+ +

ふつうは一括指定の {{cssxref("list-style")}} を使うほうが便利です。

+ +
{{EmbedInteractiveExample("pages/css/list-style-image.html")}}
+ + + +
+

注: このプロパティはリスト項目、つまり、 {{cssxref("display")}}: list-item; が指定された要素に対して適用されます。既定では、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。

+
+ +

構文

+ +
/* キーワード値 */
+list-style-image: none;
+
+/* <url> 値 */
+list-style-image: url('starsolid.gif');
+
+/* グローバル値 */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+
+ +

値

+ +
+
{{cssxref("<url>")}}
+
マーカーとして使う画像の場所です。
+
none
+
画像をマーカーとして使用しないことを指定します。この値が設定された場合、代わりに {{ Cssxref("list-style-type") }} で定義されたマーカーが使われます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

リスト項目の画像の設定

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}
+ +

結果

+ +

{{ EmbedLiveSample('Setting_list_item_images') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image') }}{{ Spec2('CSS3 Lists') }}すべての {{cssxref("<image>")}} データ型をサポートするように拡張
{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}{{ Spec2('CSS2.1') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.list-style-image")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-position")}}
    • +
  • {{cssxref("url()", "url()")}} 関数
    • +
diff --git a/files/ja/web/css/list-style-position/index.html b/files/ja/web/css/list-style-position/index.html new file mode 100644 index 0000000000..5bd9b3919c --- /dev/null +++ b/files/ja/web/css/list-style-position/index.html @@ -0,0 +1,134 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference + - list-style + - list-style-position +translation_of: Web/CSS/list-style-position +--- +
{{CSSRef}}
+ +

CSS の list-style-position プロパティは、リストアイテムに対する {{cssxref("::marker")}} の位置を指定します。

+ +
{{EmbedInteractiveExample("pages/css/list-style-position.html")}}
+ + + +

多くの場合、一括指定の {{cssxref("list-style")}} を使うほうが便利です。

+ +

メモ: このプロパティはリストアイテムに対して適用されます。つまり、 {{cssxref("display")}}: list-item; が指定された要素です。既定では、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリストアイテムに適用することができます。

+ +

メモ: list-style-position: inside を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については {{bug(36854)}} をご覧ください。

+ +

構文

+ +
/* キーワード値 */
+list-style-position: inside;
+list-style-position: outside;
+
+/* グローバル値 */
+list-style-position: inherit;
+list-style-position: initial;
+list-style-position: unset;
+
+ +

list-style-position プロパティには、下記の値の中の一つが指定されます。

+ +

値

+ +
+
inside
+
{{cssxref("::marker")}} はリストアイテムの最初の要素として配置されます。
+
outside
+
{{cssxref("::marker")}} は主要ブロックボックスの外に配置されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<ul class="inside">List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="outside">List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="inside-img">List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>
+ +

CSS

+ +
.inside {
+  list-style-position: inside;
+  list-style-type: square;
+}
+
+.outside {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.inside-img {
+  list-style-position: inside;
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", 200, 420)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}{{Spec2('CSS3 Lists')}}変更なし
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.list-style-position")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}
    • +
diff --git a/files/ja/web/css/list-style-type/index.html b/files/ja/web/css/list-style-type/index.html new file mode 100644 index 0000000000..a02b18f9b6 --- /dev/null +++ b/files/ja/web/css/list-style-type/index.html @@ -0,0 +1,612 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference +translation_of: Web/CSS/list-style-type +--- +
{{CSSRef}}
+ +

list-style-type は CSS のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。

+ +
{{EmbedInteractiveExample("pages/css/list-style-type.html")}}
+ + + +

マーカーの色は、適用先の要素における色の計算値と同じになります。

+ +

既定で display: list-item の値を持っている要素はわずかです ({{HTMLElement("li")}} と {{HTMLElement("summary")}})。しかし、 list-style-type プロパティは {{cssxref("display")}} の値が list-item に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。

+ +

構文

+ +
/* マーカーの種類の一例 */
+list-style-type: disc;
+list-style-type: circle;
+list-style-type: square;
+list-style-type: decimal;
+list-style-type: georgian;
+list-style-type: trad-chinese-informal;
+list-style-type: kannada;
+
+/* <string> */
+list-style-type: '-';
+
+/* @counter-style 規則に該当する識別子 */
+list-style-type: custom-counter-style;
+
+/* キーワード値 */
+list-style-type: none;
+
+/* グローバル値 */
+list-style-type: inherit;
+list-style-type: initial;
+list-style-type: unset;
+
+ +

list-style-type プロパティは、以下のいずれかで定義することができます。

+ + + +

値

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
{{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。
+
+ +
+
{{cssxref("symbols()")}}
+
無名のリストスタイルを定義します。
+
{{cssxref("<string>")}}
+
特定の文字列を、リストのマーカーとして使用します。
+
none
+
マーカーは表示されません。
+
+ +
+
disc
+
+
    +
  • 塗りつぶされた円形 (既定値)
    • +
+
+
circle
+
+
    +
  • 中空円
    • +
+
+
square
+
+
    +
  • 塗りつぶされた四角形
    • +
+
+
decimal
+
+
    +
  • 数値
    • +
  • 既定では 1 から始まります
    • +
+
+
cjk-decimal {{experimental_inline}}
+
+
    +
  • 漢数字
    • +
  • 例: 一, 二, 三, ..., 九八, 九九, 一〇〇
    • +
+
+
decimal-leading-zero
+
+
    +
  • 数値
    • +
  • ゼロ埋めされて表示されます
    • +
  • 例: 01, 02, 03, … 98, 99
    • +
+
+
lower-roman
+
+
    +
  • 小文字のローマ数字
    • +
  • 例: i, ii, iii, iv, v…
    • +
+
+
upper-roman
+
+
    +
  • 大文字のローマ数字
    • +
  • 例: I, II, III, IV, V…
    • +
+
+
lower-greek
+
+
    +
  • 小文字のギリシャ語
    • +
  • アルファ、ベータ、ガンマ、…
    • +
  • 例: α, β, γ…
    • +
+
+
lower-alpha
+
lower-latin
+
+
    +
  • 小文字の ASCII 文字
    • +
  • 例: a, b, c, … z
    • +
  • lower-latin は IE7 以前は対応していません
    • +
  • {{anch("Browser compatibility")}} の節も参照して下さい
    • +
+
+
upper-alpha
+
upper-latin
+
+
    +
  • 大文字の ASCII 文字
    • +
  • 例: A, B, C, … Z
    • +
  • upper-latin は IE7 以前は対応していません
    • +
+
+
arabic-indic
+
-moz-arabic-indic
+
+
    +
  • 例
    • +
+
+
armenian
+
+
    +
  • 伝統的なアルメニア語の数値表記
    • +
  • (ayb/ayp, ben/pen, gim/keem…
    • +
+
+
bengali
+
-moz-bengali
+
+
    +
  • 例
    • +
+
+
cambodian {{experimental_inline}}*
+
+
    +
  • 例
    • +
  • khmer と同義
    • +
+
+
cjk-earthly-branch
+
-moz-cjk-earthly-branch
+
+
    +
  • 例
    • +
+
+
cjk-heavenly-stem
+
-moz-cjk-heavenly-stem
+
+
    +
  • 例
    • +
+
+
cjk-ideographic{{experimental_inline}}
+
+
    +
  • trad-chinese-informal と同義
    • +
  • 例: 一萬一千一百一十一
    • +
+
+
devanagari
+
-moz-devanagari
+
+
    +
  • 例
    • +
+
+
ethiopic-numeric {{experimental_inline}}
+
+
    +
  • 例
    • +
+
+
georgian
+
+
    +
  • 伝統的なジョージア語の数値表記
    • +
  • 例: an, ban, gan, … he, tan, in…
    • +
+
+
gujarati
+
-moz-gujarati
+
+
    +
  • 例
    • +
+
+
gurmukhi
+
-moz-gurmukhi
+
+
    +
  • 例
    • +
+
+
hebrew {{experimental_inline}}
+
+
    +
  • 伝統的なヘブライ語の数値表記
    • +
+
+
hiragana {{experimental_inline}}
+
+
    +
  • 例: あ, い, う, え, お, か, き…
    • +
  • 日本語の「あいうえお」
    • +
+
+
hiragana-iroha {{experimental_inline}}
+
+
    +
  • 例: い, ろ, は, に, ほ, へ, と…
    • +
  • {{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです
    • +
+
+
japanese-formal {{experimental_inline}}
+
+
    +
  • 法的または財務の文書で使用される、日本語の公的な数値表記
    • +
  • 例: 壱萬壱阡壱百壱拾壱
    • +
  • 似ている別の文字に書き換えられないようにするための漢字
    • +
+
+
japanese-informal {{experimental_inline}}
+
+
    +
  • 日本語の日常的な数値表記
    • +
+
+
kannada
+
-moz-kannada
+
+
    +
  • 例
    • +
+
+
katakana {{experimental_inline}}
+
+
    +
  • 例: ア, イ, ウ, エ, オ, カ, キ…
    • +
  • 日本語の「あいうえお」
    • +
+
+
katakana-iroha {{experimental_inline}}
+
+
    +
  • 例: イ, ロ, ハ, ニ, ホ, ヘ, ト…
    • +
  • {{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです
    • +
+
+
khmer
+
-moz-khmer
+
+
    +
  • 例
    • +
+
+
korean-hangul-formal {{experimental_inline}}
+
+
    +
  • 朝鮮のハングルの数値表記
    • +
  • 例: 일만 일천일백일십일
    • +
+
+
korean-hanja-formal {{experimental_inline}}
+
+
    +
  • 公的な朝鮮の漢数字
    • +
  • 例: 壹萬 壹仟壹百壹拾壹
    • +
+
+
korean-hanja-informal {{experimental_inline}}
+
+
    +
  • 朝鮮の漢数字
    • +
  • 例: 萬 一千百十一
    • +
+
+
lao
+
-moz-lao
+
+
    +
  • 例
    • +
+
+
lower-armenian {{experimental_inline}}*
+
+
    +
  • 例
    • +
+
+
malayalam
+
-moz-malayalam
+
+
    +
  • 例
    • +
+
+
mongolian {{experimental_inline}}
+
+
    +
  • 例
    • +
+
+
myanmar
+
-moz-myanmar
+
+
    +
  • 例
    • +
+
+
oriya
+
-moz-oriya
+
+
    +
  • 例
    • +
+
+
persian {{experimental_inline}}
+
-moz-persian
+
+
    +
  • 例
    • +
+
+
simp-chinese-formal {{experimental_inline}}
+
+
    +
  • 公的な簡体字中国語の数値表記
    • +
  • 例: 壹万壹仟壹佰壹拾壹
    • +
+
+
simp-chinese-informal {{experimental_inline}}
+
+
    +
  • 簡体字中国語の日常的な数値表記
    • +
  • 例: 一万一千一百一十一
    • +
+
+
tamil {{experimental_inline}}
+
-moz-tamil
+
+
    +
  • 例
    • +
+
+
telugu
+
-moz-telugu
+
+
    +
  • 例
    • +
+
+
thai
+
-moz-thai
+
+
    +
  • 例
    • +
+
+
tibetan {{experimental_inline}}*
+
+
    +
  • 例
    • +
+
+
trad-chinese-formal {{experimental_inline}}
+
+
    +
  • 公的な繁体字中国語の数値表記
    • +
  • 例: 壹萬壹仟壹佰壹拾壹
    • +
+
+
trad-chinese-informal {{experimental_inline}}
+
+
    +
  • 公的な場では使用しない、繁体字中国語の数値表記
    • +
  • 例: 一萬一千一百一十一
    • +
+
+
upper-armenian {{experimental_inline}}*
+
+
    +
  • 例
    • +
+
+
disclosure-open {{experimental_inline}}
+
+
    +
  • {{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号
    • +
+
+
disclosure-closed {{experimental_inline}}
+
+
    +
  • {{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号
    • +
+
+
+ +

標準外の拡張

+ +

Mozilla (Firefox), Blink (Chrome and Opera), WebKit (Safari) が拡張した、様々な言語のマーカーです。ブラウザーの互換性の表で、ブラウザーがどの拡張に対応しているかを確認してください。

+ +
+
-moz-ethiopic-halehame
+
+
    +
  • 例
    • +
+
+
-moz-ethiopic-halehame-am
+
+
    +
  • 例
    • +
+
+
ethiopic-halehame-ti-er
+
-moz-ethiopic-halehame-ti-er
+
+
    +
  • 例
    • +
+
+
ethiopic-halehame-ti-et
+
-moz-ethiopic-halehame-ti-et
+
+
    +
  • 例
    • +
+
+
hangul
+
-moz-hangul
+
+
    +
  • 例
    • +
  • 例
    • +
  • 例
    • +
+
+
hangul-consonant
+
-moz-hangul-consonant
+
+
    +
  • 例
    • +
  • 例
    • +
  • 例
    • +
+
+
urdu
+
-moz-urdu
+
+
    +
  • 例
    • +
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+
+ +

HTML

+ +
<ol class="normal">List 1
+  <li>Hello</li>
+  <li>World</li>
+  <li>What's up?</li>
+</ol>
+
+<ol class="shortcut">List 2
+  <li>Looks</li>
+  <li>Like</li>
+  <li>The</li>
+  <li>Same</li>
+</ol>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples","200","300")}}

+ +

アクセシビリティの考慮事項

+ +

読み上げソフトの VoiceOver には、 list-style-type の値に none が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に幅ゼロの空白を擬似コンテンツとして追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。

+ +
ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+
+
+ + + +

メモ

+ +
    +
  • 一部の list-style-types の表示には、適切なフォントのインストールが必要です。
    • +
  • cjk-ideographic は trad-chinese-informal と同義です。後方互換性のために残されています。
    • +
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}{{Spec2("CSS3 Counter Styles")}}CSS2.1 counters を再定義。
+ @counter-style 規則に対応するため構文を拡張。
+ @counter-style を使用して、一般的なスタイルである hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open, disclosure-closed を定義。
+ <counter-style> を symbols() 表記で拡張。
{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}{{Spec2('CSS3 Lists')}}{{cssxref("<string>")}} の対応を追加し、 @counter-style 規則で使われる識別子をキーワードに追加。
+ 単純な <string> の対応を追加。
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.list-style-type")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
    • +
diff --git a/files/ja/web/css/list-style/index.html b/files/ja/web/css/list-style/index.html new file mode 100644 index 0000000000..28ccfa8845 --- /dev/null +++ b/files/ja/web/css/list-style/index.html @@ -0,0 +1,160 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference + - list-style + - list-style-image + - list-style-position + - list-style-type + - リファレンス +translation_of: Web/CSS/list-style +--- +
{{CSSRef}}
+ +

CSS の list-style プロパティは一括指定で、リストスタイルプロパティの {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}} を設定します。

+ +
{{EmbedInteractiveExample("pages/css/list-style.html")}}
+ + + +
+

メモ: このプロパティはリスト項目、すなわち {{cssxref("display")}}: list-item; の要素に適用されます。既定では {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素（ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}）に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。

+
+ +

構文

+ +
/* type */
+list-style: square;
+
+/* image */
+list-style: url('../img/shape.png');
+
+/* position */
+list-style: inside;
+
+/* type | position */
+list-style: georgian inside;
+
+/* type | image | position */
+list-style: lower-roman url('../img/shape.png') outside;
+
+/* キーワード値 */
+list-style: none;
+
+/* グローバル値 */
+list-style: inherit;
+list-style: initial;
+list-style: unset;
+
+ +

list-style プロパティは1～3つのキーワードを任意の順序で指定します。 {{cssxref("list-style-type")}} と {{cssxref("list-style-image")}} が両方とも設定された場合、 list-style-type は画像が利用できない場合の予備として使用されます。

+ +

値

+ +
+
{{cssxref("list-style-type")}}
+
{{cssxref("list-style-type")}} を参照して下さい。
+
{{cssxref("list-style-image")}}
+
{{cssxref("list-style-image")}} を参照して下さい。
+
{{cssxref("list-style-position")}}
+
{{cssxref("list-style-position")}} を参照して下さい。
+
none
+
リストスタイルは使用されません。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
List 1
+<ul class="one">
+  <li>List Item1</li>
+  <li>List Item2</li>
+  <li>List Item3</li>
+</ul>
+List 2
+<ul class="two">
+  <li>List Item A</li>
+  <li>List Item B</li>
+  <li>List Item C</li>
+</ul>
+
+ +

CSS

+ +
.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 'auto', 220)}}

+ +

アクセシビリティの考慮事項

+ +

Safari は順序なしリストで list-style の値に none が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前にゼロ幅スペースを擬似コンテンツとして追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。

+ +
ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+
+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}{{Spec2('CSS3 Lists')}}変更なし。
{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.list-style")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
    • +
diff --git a/files/ja/web/css/list_of_proprietary_css_features/index.html b/files/ja/web/css/list_of_proprietary_css_features/index.html new file mode 100644 index 0000000000..c2635b76ec --- /dev/null +++ b/files/ja/web/css/list_of_proprietary_css_features/index.html @@ -0,0 +1,168 @@ +--- +title: プロプライエタリな CSS 機能の一覧 +slug: Web/CSS/List_of_Proprietary_CSS_Features +tags: + - CSS + - Junk +translation_of: Web/CSS/List_of_Proprietary_CSS_Features +--- +
{{ CSSRef() }}
+ +
草稿 + +
このページは未完成です。
+
+ +
+

このページは不完全かつ古いものです。もっと新しい情報は以下のページをご覧ください。

+ + +
+ +

以下の一覧には、様々なブラウザーのエンジンにおける CSS の私的な拡張のうち、標準化のための機能の試験的な実装ではないものを掲載しています (これらの一覧には Draft Implementations of CSS Features をご覧下さい)。

+ +

Gecko

+ +

プロパティ

+ +
    +
  • {{ Cssxref("-moz-force-broken-image-icon") }}
    • +
  • {{ Cssxref("-moz-image-region") }}
    • +
  • {{ Cssxref("-moz-margin-end") }}
    • +
  • {{ Cssxref("-moz-margin-start") }}
    • +
  • {{ Cssxref("-moz-orient") }}
    • +
  • {{ Cssxref("-moz-padding-end") }}
    • +
  • {{ Cssxref("-moz-padding-start") }}
    • +
  • {{ Cssxref("-moz-stack-sizing") }}
    • +
  • {{ Cssxref("-moz-window-shadow") }}
    • +
+ +

値

+ +

{{ cssxref("background-image") }}

+ +
    +
  • Sub-images +
      +
    • {{ cssxref("-moz-image-rect") }}
      • +
    +
    • +
+ +

疑似要素と疑似クラス

+ +

...

+ +

@規則

+ +

...

+ +

メディアクエリ

+ +

...

+ +

その他

+ +

...

+ +

Opera

+ +

プロパティ

+ +

...

+ +

値

+ +

{{ cssxref("background-image") }}

+ +
    +
  • {{ cssxref("-o-double-rainbow") }}
    • +
+ +

疑似要素と疑似クラス

+ +

...

+ +

@規則

+ +

...

+ +

メディアクエリ

+ +

...

+ +

その他

+ +

...

+ +

Trident (IE)

+ +

プロパティ

+ +
    +
  • {{ cssxref("-ms-accelerator") }}
    • +
+ +

値

+ +

...

+ +

疑似要素と疑似クラス

+ +

...

+ +

@規則

+ +

...

+ +

メディアクエリ

+ +

...

+ +

その他

+ +

...

+ +

WebKit

+ +

プロパティ

+ +
    +
  • {{ Cssxref("-webkit-box-reflect") }}
    • +
  • {{ Cssxref("-webkit-mask") }}
    • +
  • {{ Cssxref("-webkit-mask-attachment") }}
    • +
  • {{ Cssxref("-webkit-mask-composite") }}
    • +
  • {{ Cssxref("-webkit-mask-image") }}
    • +
  • {{ Cssxref("-webkit-mask-origin") }}
    • +
  • {{ Cssxref("-webkit-mask-repeat") }}
    • +
  • {{ Cssxref("-webkit-tap-highlight-color") }}
    • +
  • {{ Cssxref("-webkit-text-decorations-in-effect") }}
    • +
  • {{ Cssxref("-webkit-text-stroke") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-color") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-width") }}
    • +
  • {{ Cssxref("-webkit-touch-callout") }}
    • +
+ +

値

+ +

...

+ +

疑似要素と疑似クラス

+ +

...

+ +

@規則

+ +

...

+ +

メディアクエリ

+ +

...

+ +

その他

+ +

...

diff --git a/files/ja/web/css/margin-block-end/index.html b/files/ja/web/css/margin-block-end/index.html new file mode 100644 index 0000000000..59caf5f088 --- /dev/null +++ b/files/ja/web/css/margin-block-end/index.html @@ -0,0 +1,110 @@ +--- +title: margin-block-end +slug: Web/CSS/margin-block-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - NeedsContent + - Reference + - margin-block + - margin-block-end +translation_of: Web/CSS/margin-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

margin-block-end は CSS のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。

+ +
{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+margin-block-end: 10px;  /* 絶対的な長さ */
+margin-block-end: 1em;   /* テキストの大きさに対する相対値 */
+margin-block-end: 5%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-block-end: auto;
+
+/* グローバル値 */
+margin-block-end: inherit;
+margin-block-end: initial;
+margin-block-end: unset;
+
+ +

これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +

関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。

+ +

{{cssinfo}}

+ +

値

+ +

margin-block-end プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-block-end")}}

+ +

関連情報

+ +
    +
  • 対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/margin-block-start/index.html b/files/ja/web/css/margin-block-start/index.html new file mode 100644 index 0000000000..81f8876d96 --- /dev/null +++ b/files/ja/web/css/margin-block-start/index.html @@ -0,0 +1,110 @@ +--- +title: margin-block-start +slug: Web/CSS/margin-block-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - NeedsContent + - Reference + - margin-block + - margin-block-start +translation_of: Web/CSS/margin-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

margin-block-start は CSS のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。

+ +
{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+margin-block-start: 10px;  /* 絶対的な長さ */
+margin-block-start: 1em;   /* テキストの大きさに対する相対値 */
+margin-block-start: 5%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-block-start: auto;
+
+/* グローバル値 */
+margin-block-start: inherit;
+margin-block-start: initial;
+margin-block-start: unset;
+
+ +

これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +

関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。

+ +

{{cssinfo}}

+ +

値

+ +

margin-block-start プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-block-start")}}

+ +

関連情報

+ +
    +
  • 対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/margin-block/index.html b/files/ja/web/css/margin-block/index.html new file mode 100644 index 0000000000..5fb0cb4130 --- /dev/null +++ b/files/ja/web/css/margin-block/index.html @@ -0,0 +1,108 @@ +--- +title: margin-block +slug: Web/CSS/margin-block +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - margin-block + - margin-block-end + - margin-block-start + - 一括指定プロパティ +translation_of: Web/CSS/margin-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

The margin-block は CSS のプロパティで、論理的なブロックの先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。

+ +
/* <length> 値 */
+margin-block: 10px 20px;  /* 絶対的な長さ */
+margin-block: 1em 2em;   /* テキストの大きさに対する相対値 */
+margin-block: 5% 2%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+margin-block: 10px; /* 先頭と末尾の両方を設定 */
+
+/* キーワード値 */
+margin-block: auto;
+
+/* グローバル値 */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+
+ +

これらの値は、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。

+ +

値は {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} で個別に設定することができます。インライン方向のプロパティは {{CSSxRef("margin-inline")}} で、 {{CSSxRef("margin-inline-start")}} と {{CSSxRef("margin-inline-end")}} を設定します。

+ +

構文

+ +

値

+ +

margin-block プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-block")}}

+ +

関連情報

+ +
    +
  • 対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/ja/web/css/margin-bottom/index.html b/files/ja/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..431bc74bdc --- /dev/null +++ b/files/ja/web/css/margin-bottom/index.html @@ -0,0 +1,148 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

margin-bottom は CSS のプロパティで、要素の下側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+ +
{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
+ + + +

要素ボックスにおける CSS の margin-bottom プロパティの効果

+ +

このプロパティは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} のような非置換のインライン要素には効果がありません。

+ +

構文

+ +
/* <length> 値 */
+margin-bottom: 10px;  /* 絶対的な寸法 */
+margin-bottom: 1em;   /* 文字の寸法からの相対 */
+margin-bottom: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-bottom: auto;
+
+/* グローバル値 */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

margin-bottom プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

+ +

値

+ +
+
{{cssxref("<length>")}}
+
固定値によるマージンの寸法です。
+
{{cssxref("<percentage>")}}
+
包含ブロックの width に対するパーセントによるマージンの寸法です。
+
auto
+
ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

正および負の数の下側のマージンの設定

+ +

HTML

+ +
<div class="container">
+<div class="box0">Box 0</div>
+<div class="box1">Box 1</div>
+<div class="box2">Box one's negative margin pulls me up</div>
+</div>
+ +

CSS

+ +

div に margin-bottom と height を設定する CSS です。

+ +
.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+
+ +

包含要素と div の定義の一部です。これによって margin の効果がより明確に見えます。

+ +
.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}目立った変更なし。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}CSS1 と同様、ただしインライン要素での効果は削除。
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-bottom")}}

+ +

関連情報

+ +
    +
  • {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
    • +
  • 対応する論理プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • +
diff --git a/files/ja/web/css/margin-inline-end/index.html b/files/ja/web/css/margin-inline-end/index.html new file mode 100644 index 0000000000..5b2ed400c4 --- /dev/null +++ b/files/ja/web/css/margin-inline-end/index.html @@ -0,0 +1,109 @@ +--- +title: margin-inline-end +slug: Web/CSS/margin-inline-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - NeedsContent + - Reference + - margin-inline + - margin-inline-end +translation_of: Web/CSS/margin-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

margin-inline-end は CSS のプロパティで、要素のインライン方向の論理的な末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+margin-inline-end: 10px;   /* 絶対的な長さ */
+margin-inline-end: 1em;    /* テキストの大きさに対する相対値 */
+margin-inline-end: 5%;     /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-inline-end: auto;
+
+/* グローバル値 */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+
+ +

関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}} があります。

+ +

{{cssinfo}}

+ +

値

+ +

margin-inline-end プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-inline-end")}}

+ +

関連情報

+ +
    +
  • {{cssxref("margin-inline-start")}}
    • +
  • 対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/margin-inline-start/index.html b/files/ja/web/css/margin-inline-start/index.html new file mode 100644 index 0000000000..539bd96bcf --- /dev/null +++ b/files/ja/web/css/margin-inline-start/index.html @@ -0,0 +1,106 @@ +--- +title: margin-inline-start +slug: Web/CSS/margin-inline-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 物理的プロパティ + - Experimental + - Reference + - margin-inline + - margin-inline-start +translation_of: Web/CSS/margin-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

margin-inline-start は CSS のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+margin-inline-start: 10px;  /* 絶対的な長さ */
+margin-inline-start: 1em;   /* テキストの大きさに対する相対値 */
+margin-inline-start: 5%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-inline-start: auto;
+
+/* グローバル値 */
+margin-inline-start: inherit;
+
+ +

関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-end")}} があります。

+ +

{{cssinfo}}

+ +

値

+ +

margin-inline-start プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-inline-start")}}

+ +

関連情報

+ +
    +
  • {{cssxref("margin-inline-end")}}
    • +
  • 対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/ja/web/css/margin-inline/index.html b/files/ja/web/css/margin-inline/index.html new file mode 100644 index 0000000000..18aedfb37f --- /dev/null +++ b/files/ja/web/css/margin-inline/index.html @@ -0,0 +1,107 @@ +--- +title: margin-inline +slug: Web/CSS/margin-inline +tags: + - CSS + - CSS Logical Property + - CSS Property + - CSS プロパティ + - CSS 論理的プロパティ + - Experimental + - Reference + - margin-inline + - margin-inline-end + - margin-inline-start +translation_of: Web/CSS/margin-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

The margin-inline は CSS のプロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。

+ +
/* <length> 値 */
+margin-inline: 10px 20px;  /* 絶対的な長さ */
+margin-inline: 1em 2em;    /* テキストの大きさに対する相対値 */
+margin-inline: 5% 2%;      /* 直近のブロックコンテナーの大きさに対する相対値 */
+margin-inline: 10px; /* 先頭と末尾の両方を設定 */
+
+/* キーワード値 */
+margin-inline: auto;
+
+/* グローバル値 */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+
+ +

これらの値は、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。

+ +

値は {{CSSxRef("margin-inline-start")}} と {{CSSxRef("margin-inline-end")}} で個別に設定することができます。ブロック方向のプロパティは {{CSSxRef("margin-block")}} で、 {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} を設定します。

+ +

構文

+ +

値

+ +

margin-inline プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-inline")}}

+ +

関連情報

+ +
    +
  • 対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/ja/web/css/margin-left/index.html b/files/ja/web/css/margin-left/index.html new file mode 100644 index 0000000000..bc32853ead --- /dev/null +++ b/files/ja/web/css/margin-left/index.html @@ -0,0 +1,171 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - CSS Property + - Layout + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/margin-left +--- +
{{CSSRef}}
+ +

margin-left は CSS のプロパティで、要素の左側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+ +
{{EmbedInteractiveExample("pages/css/margin-left.html")}}
+ + + +

二つの隣り合うボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。

+ +

まれに幅の制約がきつすぎると (つまり、 width, margin-left, border, padding, コンテンツ領域, margin-right がすべて定義されていた場合)、 margin-left は無視され、 auto が設定されていたときと同じ計算値になります。

+ +

構文

+ +
/* <length> 値 */
+margin-left: 10px;  /* 絶対的な寸法 */
+margin-left: 1em;   /* 文字の寸法からの相対 */
+margin-left: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-left: auto;
+
+/* グローバル値 */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

margin-left プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

+ +

値

+ +
+
{{cssxref("<length>")}}
+
固定値によるマージンの寸法です。
+
{{cssxref("<percentage>")}}
+
包含ブロックの width に対するパーセントによるマージンの寸法です。
+
auto
+
左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 margin-left と margin-right の両方が auto の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{cssxref("display")}} の値{{cssxref("float")}} の値{{cssxref("position")}} の値auto の計算値コメント
inline, inline-block, inline-table任意static または relative0インラインレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption任意static または relative0。ただし margin-left と margin-right が共に auto に設定されていた場合は、親要素の中で中央揃えする値に設定されます。ブロックレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft または rightstatic または relative0ブロックレイアウトモード (フロート要素)
table-* すべて、ただし table-caption を除く任意任意0内部の table-* 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください
flex、 inline-flex, table-* 以外のすべて任意fixed または absolute0。ただし margin-left と margin-right が共に auto に設定されていた場合は、ボーダー領域を width の中で中央揃えする値に設定されます（固定されている場合）。絶対位置指定配置モード
flex, inline-flex任意任意0。ただし、水平に正の余白がある場合は、 auto を指定したすべてのマージンに均等に割り振られます。フレックスボックス配置モード
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ピクセル数とパーセント値を使用した左マージンの設定

+ +
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-margin-left', 'margin-left')}}{{Spec2('CSS3 Box')}}CSS 2.1 から目立った変更なし。
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}フレックス項目での margin-left の挙動を定義。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}CSS1 と同様、ただしインライン要素での効果は削除。
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-left")}}

+ +

関連情報

+ +
    +
  • {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} と {{cssxref("margin")}} 一括指定
    • +
  • 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • +
diff --git a/files/ja/web/css/margin-right/index.html b/files/ja/web/css/margin-right/index.html new file mode 100644 index 0000000000..d8d5b32ccf --- /dev/null +++ b/files/ja/web/css/margin-right/index.html @@ -0,0 +1,168 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

margin-right は CSS のプロパティで、要素の右側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+ +
{{EmbedInteractiveExample("pages/css/margin-right.html")}}
+ + + +

二つの隣り合うボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。

+ +

構文

+ +
/* <length> 値 */
+margin-right: 20px;  /* 絶対的な寸法 */
+margin-right: 1em;   /* 文字の寸法からの相対 */
+margin-right: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-right: auto;
+
+/* グローバル値 */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+
+ +

margin-right プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

+ +

値

+ +
+
{{cssxref("<length>")}}
+
固定値によるマージンの寸法です。
+
{{cssxref("<percentage>")}}
+
包含ブロックの width に対するパーセントによるマージンの寸法です。
+
auto
+
右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 margin-left と margin-right の両方が auto の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{cssxref("display")}} の値{{cssxref("float")}} の値{{cssxref("position")}} の値auto の計算値コメント
inline, inline-block, inline-table任意static または relative0インラインレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption任意static または relative0。ただし margin-left と margin-right が共に auto に設定されていた場合は、親要素の中で中央揃えする値に設定されます。ブロックレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft または rightstatic または relative0ブロックレイアウトモード (フロート要素)
table-* すべて、ただし table-caption を除く任意任意0内部の table-* 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください
flex、 inline-flex, table-* 以外のすべて任意fixed または absolute0。ただし margin-left と margin-right が共に auto に設定されていた場合は、ボーダー領域を width の中で中央揃えする値に設定されます（固定されている場合）。絶対位置指定配置モード
flex, inline-flex任意任意0。ただし、水平に正の余白がある場合は、 auto を指定したすべてのマージンに均等に割り振られます。フレックスボックス配置モード
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ピクセル数とパーセント値を使用した右マージンの設定

+ +
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}{{Spec2('CSS3 Box')}}目立った変更なし。
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{Spec2('CSS3 Flexbox')}}フレックス項目での margin-right の挙動を定義。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}{{Spec2('CSS2.1')}}CSS1 と同様、ただしインライン要素での効果は削除。
{{SpecName('CSS1', '#margin-right', 'margin-right')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-right")}}

+ +

関連情報

+ +
    +
  • {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
    • +
  • 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • +
diff --git a/files/ja/web/css/margin-top/index.html b/files/ja/web/css/margin-top/index.html new file mode 100644 index 0000000000..3854d0c52a --- /dev/null +++ b/files/ja/web/css/margin-top/index.html @@ -0,0 +1,108 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/margin-top +--- +
{{CSSRef}}
+ +

margin-top は CSS のプロパティで、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+ +
{{EmbedInteractiveExample("pages/css/margin-top.html")}}
+ + + +

このプロパティは、置換要ではないインライン要素、例えば {{HTMLElement("span")}} や {{HTMLElement("code")}} には効果がありません。

+ +

構文

+ +
/* <length> 値 */
+margin-top: 10px;  /* 絶対的な寸法 */
+margin-top: 1em;   /* 文字の寸法からの相対 */
+margin-top: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-top: auto;
+
+/* グローバル値 */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+
+ +

margin-top プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

+ +

値

+ +
+
{{cssxref("<length>")}}
+
固定値によるマージンの寸法です。
+
{{cssxref("<percentage>")}}
+
包含ブロックの width に対するパーセントによるマージンの寸法です。
+
auto
+
ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

正と負の上マージンの設定

+ +
.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}目立った変更なし。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}ただしインライン要素での効果を削除。
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin-top")}}

+ +

関連情報

+ +
    +
  • {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
    • +
  • 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • +
diff --git a/files/ja/web/css/margin/index.html b/files/ja/web/css/margin/index.html new file mode 100644 index 0000000000..876e9526ea --- /dev/null +++ b/files/ja/web/css/margin/index.html @@ -0,0 +1,181 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS プロパティ + - CSS 基本ボックスモデル + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。これはすべての個別のマージン ({{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}) の一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ + + +

top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの置換要素ではないインライン要素には効果がありません。

+ +
+

注: マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素内に追加の領域を作成します。

+
+ +

構文

+ +
/* 四辺すべてに適用 */
+margin: 1em;
+margin: -3px;
+
+/* 上下 | 左右 */
+margin: 5% auto;
+
+/* 上 | 左右 | 下 */
+margin: 1em auto 2em;
+
+/* 上 | 右 | 下 | 左 */
+margin: 2px 1em 0 auto;
+
+/* グローバル値 */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

margin プロパティは1～4つの値を使って指定することができます。それぞれの値は <length>、 <percentage>、 または auto キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。

+ +
    +
  • 値が1つ指定された場合、全四辺に同じマージンが適用される。
    • +
  • 値が2つ指定された場合、1つ目のマージンは上下、2つ目は左右の辺に適用される。
    • +
  • 値が3つ指定された場合、1つ目のマージンは上、2つ目は左右、3つ目は下の辺に適用される。
    • +
  • 値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
    • +
+ +

値

+ +
+
{{cssxref("length")}}
+
固定値によるマージンの寸法です。
+
{{cssxref("percentage")}}
+
内包ブロックの width に対するパーセントによるマージンの寸法です。
+
auto
+
ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

単純な例

+ +

HTML

+ +
<div class="center">This element is centered.</div>
+
+<div class="outside">This element is positioned outside of its container.</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example','100%',120) }}

+ +

その他の例

+ +
margin: 5%;                /* 全辺: 5% のマージン */
+
+margin: 10px;              /* 全辺: 10px のマージン */
+
+margin: 1.6em 20px;         /* 上と下: 1.6em のマージン */
+                            /* 左と右: 20px のマージン  */
+
+margin: 10px 3% -1em;       /* 上:     10px のマージン */
+                            /* 左と右: 3% のマージン   */
+                            /* 下:     -1em のマージン  */
+
+margin: 10px 3px 30px 5px;  /* 上:     10px のマージン */
+                            /* 右:     3px のマージン  */
+                            /* 下:     30px のマージン */
+                            /* 右:     5px のマージン  */
+
+margin: 2em auto;           /* 上と下: 2em のマージン   */
+                            /* ボックスは水平方向に中央 */
+
+margin: auto;               /* 上と下: 0 のマージン     */
+                            /* ボックスは水平方向に中央 */
+
+ +

注

+ +

水平方向の中央揃え

+ +

最近のブラウザーで何かを中央揃えしたい場合は、 display: flex; justify-content: center; を使用することができます。

+ +

しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 margin: 0 auto; を使用してください。

+ +

マージンの相殺

+ +

要素の上下のマージンは、相殺されて2つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の理解を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}有意な変更なし。
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}margin をアニメーション可能として定義。
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}インライン要素における top および bottom マージンの効果を削除。
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.margin")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/mask-border-repeat/index.html b/files/ja/web/css/mask-border-repeat/index.html new file mode 100644 index 0000000000..4e013f9246 --- /dev/null +++ b/files/ja/web/css/mask-border-repeat/index.html @@ -0,0 +1,80 @@ +--- +title: mask-border-repeat +slug: Web/CSS/mask-border-repeat +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-border-repeat +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の mask-border-repeat プロパティは、どのように元の画像の辺の領域を要素のマスク境界の寸法に合うように調整するかを設定します。

+ +

構文

+ +
/* キーワード値 */
+mask-border-repeat: stretch;
+mask-border-repeat: repeat;
+mask-border-repeat: round;
+mask-border-repeat: space;
+
+/* 上下 | 左右 */
+mask-border-repeat: round stretch;
+
+/* グローバル値 */
+mask-border-repeat: inherit;
+mask-border-repeat: initial;
+mask-border-repeat: unset;
+
+ +

mask-border-repeat プロパティは、以下の値のリストから一つまたは二つの値を使用して指定します。

+ +
    +
  • 一つの値が指定されると、全四辺に同じ動作が適用されます。
    • +
  • 二つの値が指定されると、最初の値は上と下の辺に、二番目の値は左と右の辺に適用されます。
    • +
+ +

値

+ +
+
stretch
+
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。
+
repeat
+
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。
+
round
+
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。
+
space
+
元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}{{Spec2("CSS Masks")}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの対応

+ +

TBD

diff --git a/files/ja/web/css/mask-border-source/index.html b/files/ja/web/css/mask-border-source/index.html new file mode 100644 index 0000000000..7db15c1458 --- /dev/null +++ b/files/ja/web/css/mask-border-source/index.html @@ -0,0 +1,73 @@ +--- +title: mask-border-source +slug: Web/CSS/mask-border-source +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-border-source +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の mask-border-source プロパティは、要素のマスク境界を生成するのに使われる元の画像を設定します。

+ +

{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。

+ +

構文

+ +
/* Keyword 値 */
+mask-border-source: none;
+
+/* <image> 値 */
+mask-border-source: url(image.jpg);
+mask-border-source: linear-gradient(to top, red, yellow);
+
+/* グローバル値 */
+mask-border-source: inherit;
+mask-border-source: initial;
+mask-border-source: unset;
+
+ +

値

+ +
+
none
+
マスク境界は使用されません。
+
{{cssxref("<image>")}}
+
マスク境界に使用する画像への参照です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

例については {{cssxref("mask-border")}} をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}{{Spec2("CSS Masks")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

TBD

diff --git a/files/ja/web/css/mask-border-width/index.html b/files/ja/web/css/mask-border-width/index.html new file mode 100644 index 0000000000..0c3b0b1e06 --- /dev/null +++ b/files/ja/web/css/mask-border-width/index.html @@ -0,0 +1,92 @@ +--- +title: mask-border-width +slug: Web/CSS/mask-border-width +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-border-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の mask-border-width プロパティは、要素のマスク境界の幅を設定します。

+ +

Syntax

+ +
/* キーワード値 */
+mask-border-width: auto;
+
+/* <length> 値 */
+mask-border-width: 1rem;
+
+/* <percentage> 値 */
+mask-border-width: 25%;
+
+/* <number> 値 */
+mask-border-width: 3;
+
+/* 上下 | 左右 */
+mask-border-width: 2em 3em;
+
+/* 上 | 左右 | 下 */
+mask-border-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+mask-border-width: 5% 2em 10% auto;
+
+/* グローバル値 */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+
+ +

mask-border-width プロパティは、以下の値のリストの中から1～4つの値を使って指定することができます。

+ +
    +
  • 値が1つ指定された場合、全四辺に同じマージンが適用される。
    • +
  • 値が2つ指定された場合、1つ目のマージンは上下、2つ目は左右の辺に適用される。
    • +
  • 値が3つ指定された場合、1つ目のマージンは上、2つ目は左右、3つ目は下の辺に適用される。
    • +
  • 値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
    • +
+ +

値

+ +
+
<length-percentage>
+
マスク境界の幅を、 {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で指定します。パーセント値は左右のオフセットについては境界領域の幅に対する相対値、上下のオフセットについては境界領域の高さに対する相対値です。負の数であってはなりません。
+
<number>
+
マスク境界の幅を、対応する {{cssxref("border-width")}} の倍数で指定します。負の数であってはなりません。
+
auto
+
マスク境界の幅は、対応する {{cssxref("mask-border-slice")}} の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する border-width が代わりに使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}{{Spec2("CSS Masks")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

TBD

diff --git a/files/ja/web/css/mask-clip/index.html b/files/ja/web/css/mask-clip/index.html new file mode 100644 index 0000000000..15d56ed307 --- /dev/null +++ b/files/ja/web/css/mask-clip/index.html @@ -0,0 +1,152 @@ +--- +title: mask-clip +slug: Web/CSS/mask-clip +tags: + - CSS + - CSS Masking + - CSS Property + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-clip +--- +
{{CSSRef}}
+ +

mask-clip は CSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。

+ +
/* <geometry-box> 値 */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* キーワード値 */
+mask-clip: no-clip;
+
+/* 標準外のキーワード値 */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* 複数の値 */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* グローバル値 */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。

+ +

値

+ +
+
content-box
+
描画されるコンテンツは、コンテンツボックスでクリッピングされます。
+
padding-box
+
描画されるコンテンツは、パディングボックスでクリッピングされます。
+
border-box
+
描画されるコンテンツは、境界ボックスでクリッピングされます。
+
margin-box
+
描画されるコンテンツは、マージンボックスでクリッピングされます。
+
fill-box
+
描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。
+
stroke-box
+
描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。
+
view-box
+
直近の SVG ビューポートを参照ボックスとして使用します。 viewBox 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは viewBox 属性で示された座標系の原点に配置され、参照ボックスの寸法は viewBox 属性の幅と高さに設定されます。
+
no-clip
+
描画されるコンテンツはクリッピングされません。
+
border{{non-standard_inline}}
+
このキーワードは border-box と同じ動作をします。
+
padding{{non-standard_inline}}
+
このキーワードは padding-box と同じ動作をします。
+
content{{non-standard_inline}}
+
このキーワードは content-box と同じ動作をします。
+
text{{non-standard_inline}}
+
このキーワードは要素のテキストでマスク画像をクリッピングします。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-size: 100% 100%;
+  mask-clip: border-box; /* Can be changed in the live sample */
+}
+
+ + + +

{{EmbedLiveSample("Example", "220px", "250px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.mask-clip")}}

diff --git a/files/ja/web/css/mask-composite/index.html b/files/ja/web/css/mask-composite/index.html new file mode 100644 index 0000000000..9465a137b6 --- /dev/null +++ b/files/ja/web/css/mask-composite/index.html @@ -0,0 +1,122 @@ +--- +title: mask-composite +slug: Web/CSS/mask-composite +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/mask-composite +--- +
{{CSSRef}}
+ +

mask-composite は CSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。

+ +
/* キーワード値 */
+mask-composite: add;
+mask-composite: subtract;
+mask-composite: intersect;
+mask-composite: exclude;
+
+/* グローバル値 */
+mask-composite: inherit;
+mask-composite: initial;
+mask-composite: unset;
+
+ +

構文

+ +

以下に示す1つまたは複数のキーワード値を、カンマで区切って指定します。

+ +

値

+ +

混合において、現在のマスクレイヤーは source、その下にあるすべてのマスクレイヤーは destination とします。

+ +
+
add
+
source が destination の上に配置されます。
+
subtract
+
destination の外側に source が配置されます。
+
intersect
+
destination と重なっている source の部分が destination を置き換えます。
+
exclude
+
source と destination で重なっていない領域が結合されます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

追加でマスクレイヤーの合成

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+              url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-size: 100% 100%;
+  mask-composite: add; /* Can be changed in the live sample */
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Compositing_mask_layers_with_addition", "100px", "130px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.mask-composite")}}

diff --git a/files/ja/web/css/mask-image/index.html b/files/ja/web/css/mask-image/index.html new file mode 100644 index 0000000000..1ef8500d4c --- /dev/null +++ b/files/ja/web/css/mask-image/index.html @@ -0,0 +1,96 @@ +--- +title: mask-image +slug: Web/CSS/mask-image +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-image +--- +
{{CSSRef}}
+ +

mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。

+ +
/* キーワード値 */
+mask-image: none;
+
+/* <mask-source> 値 */
+mask-image: url(masks.svg#mask1);
+
+/* <image> 値 */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* 複数の値 */
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* グローバル値 */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
このキーワードは、透明な黒い画像レイヤーとして解釈されます。
+
<mask-source>
+
{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。
+
{{cssxref("<image>")}}
+
マスク画像レイヤーとして使用有れる画像の値です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.mask-image")}}

diff --git a/files/ja/web/css/mask-mode/index.html b/files/ja/web/css/mask-mode/index.html new file mode 100644 index 0000000000..3b17074a91 --- /dev/null +++ b/files/ja/web/css/mask-mode/index.html @@ -0,0 +1,121 @@ +--- +title: mask-mode +slug: Web/CSS/mask-mode +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/mask-mode +--- +
{{CSSRef}}
+ +

CSS の mask-mode プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

+ +
/* キーワード値 */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* 複数の値 */
+mask-mode: alpha, match-source;
+
+/* グローバル値 */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+
+ +

構文

+ +

mask-mode プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。

+ +

値

+ +
+
alpha
+
このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
+
luminance
+
このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。
+
match-source
+
+

{{cssxref("mask-image")}} プロパティが <mask-source> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。

+ +

{{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

アルファマスクモードの使用

+ +

CSS

+ +
#masked {
+  width: 227px;
+  height: 200px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-mode: alpha; /* ライブサンプルで変更することができます */
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.mask-mode")}}

diff --git a/files/ja/web/css/mask-origin/index.html b/files/ja/web/css/mask-origin/index.html new file mode 100644 index 0000000000..84ee99c1b8 --- /dev/null +++ b/files/ja/web/css/mask-origin/index.html @@ -0,0 +1,143 @@ +--- +title: mask-origin +slug: Web/CSS/mask-origin +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-origin +--- +
{{CSSRef}}
+ +

mask-origin は CSS のプロパティで、マスクの基準位置を設定します。

+ +
/* キーワード値 */
+mask-origin: content-box;
+mask-origin: padding-box;
+mask-origin: border-box;
+mask-origin: margin-box;
+mask-origin: fill-box;
+mask-origin: stroke-box;
+mask-origin: view-box;
+
+/* 複数の値 */
+mask-origin: padding-box, content-box;
+mask-origin: view-box, fill-box, border-box;
+
+/* 標準外のキーワード値 */
+-webkit-mask-origin: content;
+-webkit-mask-origin: padding;
+-webkit-mask-origin: border;
+
+/* グローバル値 */
+mask-origin: inherit;
+mask-origin: initial;
+mask-origin: unset;
+
+ +

単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} CSS プロパティで指定された画像の基準位置を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。

+ +

{{cssinfo}}

+ +

構文

+ +

1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。

+ +

値

+ +
+
content-box
+
位置がコンテンツボックスからの相対位置になります。
+
padding-box
+
位置がパディングボックスからの相対位置になります。単純なボックスでは 0 0 がパディング境界の左上隅で、 100% 100% は右下隅です。
+
border-box
+
位置が境界ボックスからの相対位置になります。
+
margin-box
+
位置がマージンボックスからの相対位置になります。
+
fill-box
+
位置がオブジェクトの囲みボックスからの相対位置になります。
+
stroke-box
+
位置が輪郭線ボックスからの相対位置になります。
+
view-box
+
直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは viewBox 属性で示された座標系の原点に配置され、参照ボックスの寸法は viewBox 属性の幅と高さに設定されます。
+
content {{non-standard_inline}}
+
content-box と同じです。
+
padding {{non-standard_inline}}
+
padding-box と同じです。
+
border {{non-standard_inline}}
+
border-box と同じです。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  border: 10px solid blue;
+  background-color: #8cffa0;
+  padding: 10px;
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-origin: border-box; /* Can be changed in the live sample */
+}
+
+ + + +

{{EmbedLiveSample("Example", 160, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.mask-origin")}}

diff --git a/files/ja/web/css/mask-position/index.html b/files/ja/web/css/mask-position/index.html new file mode 100644 index 0000000000..b75fd53502 --- /dev/null +++ b/files/ja/web/css/mask-position/index.html @@ -0,0 +1,129 @@ +--- +title: mask-position +slug: Web/CSS/mask-position +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-position +--- +
{{CSSRef}}
+ +

mask-position は CSS プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。

+ +
/* キーワード値 */
+mask-position: top;
+mask-position: bottom;
+mask-position: left;
+mask-position: right;
+mask-position: center;
+
+/* <position> 値 */
+mask-position: 25% 75%;
+mask-position: 0px 0px;
+mask-position: 10% 8em;
+
+/* 複数の値 */
+mask-position: top right;
+mask-position: 1rem 1rem, center;
+
+/* グローバル値 */
+mask-position: inherit;
+mask-position: initial;
+mask-position: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

1つ以上の <position> 値をコンマで区切ったもの。

+ +

値

+ +
+
{{cssxref("<position>")}}
+
要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#wrapper {
+  border: 1px solid black;
+  width: 250px;
+  height: 250px;
+}
+
+#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: no-repeat;
+  mask-position: top right; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+
+ + + +

{{EmbedLiveSample("Example", 290, 290)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-position", "mask-position")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.mask-position")}}

diff --git a/files/ja/web/css/mask-repeat/index.html b/files/ja/web/css/mask-repeat/index.html new file mode 100644 index 0000000000..f38d2244c6 --- /dev/null +++ b/files/ja/web/css/mask-repeat/index.html @@ -0,0 +1,194 @@ +--- +title: mask-repeat +slug: Web/CSS/mask-repeat +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-repeat +--- +
{{CSSRef}}
+ +

mask-repeat は CSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。

+ +
/* 一つの値の構文 */
+mask-repeat: repeat-x;
+mask-repeat: repeat-y;
+mask-repeat: repeat;
+mask-repeat: space;
+mask-repeat: round;
+mask-repeat: no-repeat;
+
+/* 二つの値の構文: horizontal | vertical */
+mask-repeat: repeat space;
+mask-repeat: repeat repeat;
+mask-repeat: round space;
+mask-repeat: no-repeat round;
+
+/* 複数の値 */
+mask-repeat: space round, no-repeat;
+mask-repeat: round repeat, space, repeat-x;
+
+/* グローバル値 */
+mask-repeat: inherit;
+mask-repeat: initial;
+mask-repeat: unset;
+
+ +

既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (round を使用して) 大きさが合うように拡大縮小したり、 (space を使用して) 端から端まで等分に配分したりすることができます。

+ +

{{cssinfo}}

+ +

構文

+ +

1つ以上の <repeat-style> 値をコンマ区切りで指定します。

+ +

値

+ +
+
<repeat-style>
+
単一の値の構文は、二つの値の構文の一括指定です。
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
単一の値同等の二つの値
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ 二つの値の構文では、最初の値が水平方向の繰り返しの動作を表し、二番目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。
+
+ + + + + + + + + + + + + + + + + + + +
repeat画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。
space画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 {{cssxref("mask-position")}} プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 space を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。
round利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。
no-repeat画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は {{cssxref("mask-position")}} CSS プロパティで定義されます。
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

単一の値

+ +

CSS

+ +
#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: repeat; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+
+ + + +

{{EmbedLiveSample("Single_value", "290px", "290px")}}

+ +

複数のマスク画像の対応

+ +

それぞれのマスク画像に異なる <repeat-style> を、コンマ区切りで指定することができます。

+ +
.examplethree {
+  mask-image: url('mask1.png'), url('mask2.png');
+  mask-repeat: repeat-x, repeat-y;
+}
+
+ +

それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.mask-repeat")}}

diff --git a/files/ja/web/css/mask-type/index.html b/files/ja/web/css/mask-type/index.html new file mode 100644 index 0000000000..2dcc8a4b3d --- /dev/null +++ b/files/ja/web/css/mask-type/index.html @@ -0,0 +1,186 @@ +--- +title: mask-type +slug: Web/CSS/mask-type +tags: + - CSS + - CSS Masking + - CSS Property + - CSS プロパティ + - CSS マスク + - Reference + - SVG +translation_of: Web/CSS/mask-type +--- +
{{CSSRef}}
+ +

mask-type は CSS のプロパティで、 SVG の {{svgElement("mask")}} 要素をルミナンスマスクとアルファマスクのどちらとして扱うかを設定します。これは <mask> 要素自身に設定します。

+ +
/* キーワード値 */
+mask-type: luminance;
+mask-type: alpha;
+
+/* グローバル値 */
+mask-type: inherit;
+mask-type: initial;
+mask-type: unset;
+
+ +

このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ {{cssxref("mask-mode")}} プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。

+ +

{{cssinfo}}

+ +

構文

+ +

mask-type プロパティは以下に示すキーワード値のうちの一つで指定します。

+ +

値

+ +
+
luminance
+
関連付けられたマスク画像がルミナンスマスクであることを示すキーワードです。すなわち、適用時に相対輝度値が使用されます。
+
alpha
+
関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時にアルファチャネル値が使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

以下の長方形をマスクとして適用してみましょう。

+ +
<rect x="10" y="10" width="80" height="80"
+    fill="red" fill-opacity="0.7" />
+ + + +
このような正方形になります。 {{EmbedLiveSample('mask', '100%', '100')}}
+ +

適用先はこちらです。

+ + + +
{{EmbedLiveSample('box', '100%', '120')}}
+ +

結果として、ブラウザーがこのプロパティに対応している場合、 mask-type が {{SVGElement("mask")}} 要素に適用されると2つの異なる四角形になります。

+ + + + + + + + + + + + +
mask-type: alpha;mask-type: luminance;
+ + +
{{EmbedLiveSample('maskalpha', '100%', '102')}}
+ 		+ + +
{{EmbedLiveSample('maskluminance', '100%', '102')}}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Masks', '#the-mask-type', 'mask-type')}}{{Spec2('CSS Masks')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.mask-type")}}

+ +

関連情報

+ +
    +
  • その他のマスクに関するプロパティ: {{cssxref("mask")}}, {{cssxref("mask-mode")}}
    • +
diff --git a/files/ja/web/css/max()/index.html b/files/ja/web/css/max()/index.html new file mode 100644 index 0000000000..274f4a8b35 --- /dev/null +++ b/files/ja/web/css/max()/index.html @@ -0,0 +1,137 @@ +--- +title: max() +slug: Web/CSS/max() +tags: + - CSS + - CSS Function + - CSS 関数 + - Calculate + - Compute + - Function + - Layout + - Reference + - Web + - max + - 関数 +translation_of: Web/CSS/max() +--- +
{{CSSRef}}
+ +

max() は CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 max() 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。

+ +
/* プロパティ: max(式 [, 式]) */
+width: max(10vw, 4em, 80px);
+
+ +

上の例では、幅は最小 80px ですが、ビューポートの幅が 800px より広いか em の幅が 20px より大きい場合は広くなります。言い換えれば、最小幅は 80px です。 max() の値はプロパティが取りうる最小の値を提供するものとして考えてください。

+ +

構文

+ +

max() 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

+ +

式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式や、入れ子になった {{CSSxRef("min", "min()")}} および max() 関数にすることができます。

+ +

式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

+ +

メモ

+ +
    +
  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
    • +
  • min() や他の max() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
    • +
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
    • +
  • min() と max() の値を組み合わせたり、 max() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
    • +
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

画像を最小サイズ以上にする

+ +

max() を使用すると、画像の最小幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は大きい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。

+ +
.logo {
+  width: max(50vw, 300px);
+}
+
+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

{{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}

+ +

この例では、ロゴの幅は 300px 以上になりますが、ビューポートが 600px よりも広くなったら、ここからビューポートの幅の 50% を保ちながら、ビューポートが拡大するに従って拡大します。

+ +

フォントに最小値を設定する

+ +

CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。

+ +

いくらか CSS を見てください。

+ +
h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+
+ +

フォントサイズは最小で 2rems、ページの既定のフォントサイズの2倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。

+ +
<h1>This text is always legible, but doesn't change size</h1>
+<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

+ +

max() 関数はプロパティに許される最小値を探るものと考えてください。

+ +

アクセシビリティの考慮事項

+ +

max() を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、入れ子になった {{CSSxRef("min", "min()")}} 関数を max() の中に使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは 1rem になります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{Spec2("CSS4 Values")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.max")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("min", "min()")}}
    • +
  • CSS 値
    • +
diff --git a/files/ja/web/css/max-block-size/index.html b/files/ja/web/css/max-block-size/index.html new file mode 100644 index 0000000000..2674bb553f --- /dev/null +++ b/files/ja/web/css/max-block-size/index.html @@ -0,0 +1,193 @@ +--- +title: max-block-size +slug: Web/CSS/max-block-size +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Layout + - Maximum Height + - Maximum Width + - Reference + - height + - max-block-size + - 'recipe:css-property' + - size + - width +translation_of: Web/CSS/max-block-size +--- +
{{CSSRef}}
+ +

max-block-size は CSS のプロパティで、 {{cssxref("writing-mode")}} で指定された書字方向とは逆の向きの要素の最大寸法を指定します。すなわち、書字方向が水平 (横書き) であれば、 max-block-size は {{cssxref("max-height")}} と等価になります。書字方向が垂直 (縦書き) であれば、 max-block-size は {{cssxref("max-width")}} と同じになります。

+ +

もう一方の方向の最大長は、 {{cssxref("max-inline-size")}} プロパティを使用して指定します。

+ +

max-width は常に水平方向の寸法に使われ、 max-height は常に垂直方向の寸法に使われるため、このプロパティはテキストコンテンツの寸法に基づいて寸法を設定する必要がある場合、書字方向を意識して指定する必要がある場合に便利です。

+ +

ふつう max-height または max-width を使用する場面でいつでも、代わりに max-block-size をコンテンツの最大の「高さ」を設定するために使用し (これは垂直の値ではない可能性がありますが)、 max-inline-sizeをコンテンツの最大の「幅」を設定するために使用してください (これが横書きではなく縦書きである場合であっても)。様々な書字方向を表す{{SectionOnPage("/ja/docs/Web/CSS/writing-mode", "例")}}をご覧ください。

+ +
{{EmbedInteractiveExample("pages/css/max-block-size.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* <percentage> 値 */
+max-block-size: 75%;
+
+/* キーワード値 */
+max-block-size: auto;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content(20em);
+
+/* グローバル値 */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+
+ +

値

+ +

max-block-size プロパティの値は、 {{cssxref("max-width")}} および {{cssxref("max-height")}} プロパティで有効なすべての値を取ることができます。

+ +

{{page("/ja/docs/Web/CSS/max-width", "Values")}}

+ +

書字方向が方向にどう影響するのか

+ +

writing-mode の値は次のように max-block-size から max-width または max-height への対応付けに影響します。

+ + + + + + + + + + + + + + + + + + +
writing-mode の値max-block-size が等価になるもの
horizontal-tb, lr {{deprecated_inline}}, lr-tb {{deprecated_inline}}, rl {{deprecated_inline}}, rb {{deprecated_inline}}, rb-rl {{deprecated_inline}}{{cssxref("max-height")}}
vertical-rl, vertical-lr, sideways-rl {{experimental_inline}}, sideways-lr {{experimental_inline}}, tb {{deprecated_inline}}, tb-rl {{deprecated_inline}}{{cssxref("max-width")}}
+ +
+

writing-mode の値のうち sideways-lr および sideways-rl は設計プロセスの後期に CSS Writing Modes Level 3 仕様書から削除されました。これらは Level 4 で復活する可能性があります。

+
+ +
+

書字方向の lr, lr-tb, rl, rb, rb-tl は {{Glossary("HTML")}} のコンテキストでは許可されなくなりました。 {{Glossary("SVG")}} 1.x コンテキストでのみ利用できる可能性があります。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

Setting max-block-size with horizontal and vertical text

+ +

この例では、同じテキスト ({{interwiki("wikipedia", "en:Herman Melville", "Herman Melville")}} の小説 {{interwiki("wikipedia", "en:Moby-Dick", "Moby-Dick")}} の冒頭部分) が horizontal-tb および vertical-rl の両方の書字方向で表示されます。

+ +

二つのボックスついてそれ以外の部分はすべて、 {{cssxref("max-block-size")}} に使われている値を含めて同じです。

+ +

HTML

+ +

この HTML では、単純に二つの {{HTMLElement("div")}} ブロックを作成し、それぞれの {{cssxref("writing-mode")}} を horizontal および vertical クラスを用いて設定しています。両方のボックスで standard-box クラスを共有しており、こちらで単純に色、パディング、それぞれの max-block-size の値を設定しています。

+ +
<p>Writing mode <code>horizontal-tb</code> (the default):</p>
+<div class="standard-box horizontal">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+
+<p>Writing mode <code>vertical-rl</code>:</p>
+<div class="standard-box vertical">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+ +

CSS

+ +

この CSS では3つのクラスを定義しています。最初は standard-box で、両方のボックスに適用され、上にあるものです。これはブロックの最小および最大の寸法、フォントの大きさ、などを指定します。

+ +

その後にくるクラス horizontal および vertical は、ボックスに {{cssxref("writing-mode")}} プロパティを追加し、値を使われるクラスに応じて horizontal-tb または vertical-rl に設定します。

+ +
.standard-box {
+  padding: 4px;
+  background-color: #abcdef;
+  color: #000;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+  max-block-size: 160px;
+  min-block-size: 100px;
+}
+
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Setting_max-block-size_with_horizontal_and_vertical_text", 600, 850)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.max-block-size")}}

+ +

関連情報

+ +
    +
  • 対応する物理的プロパティ: {{cssxref("max-width")}} と {{cssxref("max-height")}}
    • +
  • 他の方向の最大寸法の設定: {{cssxref("max-inline-size")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/ja/web/css/max-height/index.html b/files/ja/web/css/max-height/index.html new file mode 100644 index 0000000000..4d333dd365 --- /dev/null +++ b/files/ja/web/css/max-height/index.html @@ -0,0 +1,122 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

max-height は CSS のプロパティで、要素の最大高を設定します。これは {{Cssxref("height")}} プロパティの使用値が、 max-height に指定した値を上回ることを防ぎます。

+ +
{{EmbedInteractiveExample("pages/css/max-height.html")}}
+ + + +

max-height は {{cssxref("height")}} を上書きしますが、 {{cssxref("min-height")}} は max-height を上書きします。

+ +

構文

+ +
/* <length> 値 */
+max-height: 3.5em;
+
+/* <percentage> 値 */
+max-height: 75%;
+
+/* キーワード値 */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content(20em);
+
+/* グローバル値 */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
max-height を絶対的な値で定義します。
+
{{cssxref("<percentage>")}}
+
max-height を包含ブロックの高さに対するパーセント値で定義します。
+
auto
+
ブラウザーは指定された要素の max-height を計算して選択します。
+
none
+
ボックスの寸法を制限しません。
+
max-content
+
内容物が推奨する max-height です。
+
min-content
+
内容物の最小の max-height です。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空白をして死された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
table { max-height: 75%; }
+
+form { max-height: none; }
+
+ +

アクセシビリティの考慮事項

+ +

ページを拡大縮小して文字サイズを拡大した際に、 max-height を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.max-height")}}

+ +

関連情報

+ +
    +
  • The box model, {{cssxref("box-sizing")}}
    • +
  • {{Cssxref("height")}}, {{Cssxref("min-height")}}
    • +
diff --git a/files/ja/web/css/max-inline-size/index.html b/files/ja/web/css/max-inline-size/index.html new file mode 100644 index 0000000000..1a8a8673d9 --- /dev/null +++ b/files/ja/web/css/max-inline-size/index.html @@ -0,0 +1,113 @@ +--- +title: max-inline-size +slug: Web/CSS/max-inline-size +tags: + - CSS + - CSS Logical Properties + - CSS Logical Property + - CSS Property + - Element size + - Experimental + - Reference + - Text Direction + - Writing Mode + - max-inline-size + - 'recipe:css-property' +translation_of: Web/CSS/max-inline-size +--- +
{{CSSRef}}
+ +

max-inline-size は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。

+ +

書字方向が垂直方向であった場合、 max-inline-size の値は要素の最大の高さに対応します。そうでなければ、要素の最大幅に対応します。関連プロパティとして、 {{cssxref("max-block-size")}} が要素のもう一方の寸法を定義します。

+ +
{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* <percentage> 値 */
+max-inline-size: 75%;
+
+/* キーワード値 */
+max-inline-size: auto;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content(20em);
+
+/* グローバル値 */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+
+ +

値

+ +

max-inline-size プロパティは {{cssxref("max-width")}} および {{cssxref("max-height")}} の各プロパティと同じ値を取ります。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

インライン方向の最大寸法をピクセル単位で設定

+ +

HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_maximum_inline_size_in_pixels")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}{{Spec2("CSS Logical Properties")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.max-inline-size")}}

+ +

関連情報

+ +
    +
  • 対応付けされる物理的プロパティ: {{cssxref("max-width")}} および {{cssxref("max-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/ja/web/css/max-width/index.html b/files/ja/web/css/max-width/index.html new file mode 100644 index 0000000000..7638cb8443 --- /dev/null +++ b/files/ja/web/css/max-width/index.html @@ -0,0 +1,142 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

max-width は CSS のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの使用値が、 max-width で指定した値を上回ることを防ぎます。

+ +
{{EmbedInteractiveExample("pages/css/max-width.html")}}
+ + + +

max-width は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は max-width を上書きします。

+ +

構文

+ +
/* <length> 値 */
+max-width: 3.5em;
+
+/* <percentage> 値 */
+max-width: 75%;
+
+/* キーワード値 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content(20em);
+
+/* グローバル値 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
max-width を絶対的な値で定義します。
+
{{cssxref("<percentage>")}}
+
max-width を包含ブロックの幅に対するパーセント値で定義します。
+
auto
+
ブラウザーは指定された要素の max-width を計算して選択します。
+
none
+
ボックスの寸法を制限しません。
+
max-content
+
内容物が推奨する max-width です。
+
min-content
+
内容物の最小の max-width です。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

この例では、 "child" の幅が150ピクセルか "parent" の幅のどちらか小さい方になります。

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

アクセシビリティの考慮事項

+ +

ページを拡大縮小して文字サイズを拡大した際に、 max-width を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content, fill-available を追加。
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.max-width")}}

+ +

関連情報

+ +
    +
  • The box model, {{cssxref("box-sizing")}}
    • +
  • {{cssxref("width")}}, {{cssxref("min-width")}}
    • +
diff --git a/files/ja/web/css/media/index.html b/files/ja/web/css/media/index.html new file mode 100644 index 0000000000..5bf2140f1d --- /dev/null +++ b/files/ja/web/css/media/index.html @@ -0,0 +1,5 @@ +--- +title: Media +slug: Web/CSS/Media +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/web/css/media/visual/index.html b/files/ja/web/css/media/visual/index.html new file mode 100644 index 0000000000..b37c0f1c67 --- /dev/null +++ b/files/ja/web/css/media/visual/index.html @@ -0,0 +1,16 @@ +--- +title: Visual +slug: Web/CSS/Media/Visual +tags: + - CSS + - CSS Reference + - MDC Project + - NeedsContent +translation_of: Web/CSS/@media +--- +
{{ CSSRef() }}
+

CSS 標準で定義されたメディアグループ。

+

{{ 英語版章題("See also") }}参照

+

W3C Media Types Spec

+

Interwiki Languages Links

+
{{ languages( { "en": "en/CSS/Media/Visual", "es": "es/CSS/Media/Visual", "fr": "fr/CSS/M\u00e9dia/Visuel", "pl": "pl/CSS/Media/Visual", "zh-cn": "cn/CSS/Media/Visual" } ) }}
diff --git a/files/ja/web/css/media_queries/index.html b/files/ja/web/css/media_queries/index.html new file mode 100644 index 0000000000..518d1ffdda --- /dev/null +++ b/files/ja/web/css/media_queries/index.html @@ -0,0 +1,103 @@ +--- +title: メディアクエリ +slug: Web/CSS/Media_queries +tags: + - CSS + - CSS3 メディアクエリ + - Reference + - メディアクエリ + - リファレンス + - レスポンシブデザイン + - 概要 +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

メディアクエリによって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。

+ +

これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。

+ +

CSS では、 {{cssxref("@media")}} @-規則を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 {{cssxref("@import")}} を使用すると、条件付きでスタイルシート全体を適用することもできます。

+ +

HTML でのメディアクエリ

+ +

HTML でも、メディアクエリは様々な要素に適用することができます。

+ +
    +
  • {{HTMLElement("link")}} 要素の {{htmlattrxref("media", "link")}} 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。
    • +
  • {{HTMLElement("source")}} 要素の {{htmlattrxref("media", "source")}} 属性では、ソースが適用されるメディアを定義します。 (これは {{HTMLElement("picture")}} 要素内でのみ有効です。)
    • +
  • {{HTMLElement("style")}} 要素の {{htmlattrxref("media", "style")}} 属性では、スタイルが適用されるメディアを定義します。
    • +
+ +

JavaScript でのメディアクエリ

+ +

JavaScript では、ウィンドウがメディアクエリに合うかどうかをテストするために {{domxref("Window.matchMedia()")}} メソッドを利用することができます。また、 {{domxref("MediaQueryList.addListener()")}} を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。

+ +

プログラムからのメディアクエリの使用については、メディアクエリのテストで知ることができます。

+ +

リファレンス

+ +

CSS @規則

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

ガイド

+ +
+
メディアクエリの利用
+
メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。
+
プログラムからのメディアクエリのテスト
+
JavaScript の中でメディアクエリを使用して端末の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。
+
アクセシビリティのためのメディアクエリの使用
+
ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}}
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}}
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}}
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}初回定義
+ +

関連情報

+ +
    +
  • {{cssxref("@supports")}} を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。
    • +
diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.html b/files/ja/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..cce7bfcb84 --- /dev/null +++ b/files/ja/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,91 @@ +--- +title: プログラムによるメディアクエリのテスト +slug: Web/CSS/Media_Queries/Testing_media_queries +tags: + - Advanced + - CSS + - DOM + - Guide + - JavaScript + - MediaQueryList + - matchMedia + - ウェブ + - メディアクエリ + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +
{{cssref}}
+ +

{{Glossary("DOM")}} では、 {{domxref("MediaQueryList") }} インタフェースおよびそのメソッドやプロパティを用いて、メディアクエリの結果をプログラムで調べることができる機能を備えています。 {{domxref("MediaQueryList") }} オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。

+ +

メディアクエリリストの作成

+ +

クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す {{domxref("MediaQueryList") }} オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia") }} メソッドを用います。

+ +

例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)");
+
+ +

クエリの結果の確認

+ +

メディアクエリリストが作成されると、その matches プロパティの値を参照することで、クエリの結果を確認することができます。このプロパティは、クエリの結果を反映します。

+ +
if (mediaQueryList.matches) {
+  /* 現在ビューポートが縦長である */
+} else {
+  /* 現在ビューポートが縦長ではない、すなわち横長である */
+}
+
+ +

クエリの通知の受信

+ +

クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりもリスナーを登録することが効率的です。このためには、 {{domxref("MediaQueryList") }} オブジェクトの addListener() メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が true から false へ移行した場合に) 呼び出されるコールバック関数を設定してください。

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
+function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
+mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加
+
+handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
+
+ +

このコードではデバイスの向き (orientation) を評価するメディアクエリリストを作成し、次にリスナーを追加しています。リスナーを追加した後、そのリスナーが実際に一度呼び出されることに注意してください。これにより、リスナーは現在のデバイスの向きを基にして初期状態の調整を行うことができます (そうでなければ、コードではデバイスの初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。

+ +

次で実装する handleOrientationChange() メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。

+ +
function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* 現在ビューポートが縦長 */
+  } else {
+    /* 現在ビューポートが横長 */
+  }
+}
+
+ +

上記で、 evt — イベントオブジェクトの引数を定義しています。これは MediaQueryList の新しい実装を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の {{domxref("MediaQueryListListener")}} メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 {{domxref("MediaQueryListEvent")}} のイベントオブジェクトをコールバック関数の引数として渡します。

+ +

このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} 及び {{domxref("MediaQueryListEvent.match","match")}} プロパティも含んでおり、 MediaQueryList のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。

+ +

クエリの通知の終了

+ +

メディアクエリの値の変化について通知を受ける必要がなくなったときは、{{domxref("MediaQueryList") }} オブジェクトの removeListener() メソッドを呼び出してください。

+ +
mediaQueryList.removeListener(handleOrientationChange);
+
+ +

ブラウザーの対応

+ +

MediaQueryList インターフェイス

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

関連情報

+ +
    +
  • メディアクエリ
    • +
  • {{domxref("window.matchMedia()") }}
    • +
  • {{domxref("MediaQueryList") }}
    • +
  • {{domxref("MediaQueryListEvent") }}
    • +
diff --git a/files/ja/web/css/media_queries/using_media_queries/index.html b/files/ja/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..a24ffa4734 --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,385 @@ +--- +title: メディアクエリの使用 +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - Advanced + - CSS + - Guide + - ウェブ + - ガイド + - メディア + - メディアクエリ + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーの{{glossary("viewport", "ビューポート")}}の幅など) に応じてサイトやアプリを変更したいときに便利です。

+ +

メディアクエリは以下の用途で使用されます。

+ +
    +
  • CSS の {{cssxref("@media")}} および {{cssxref("@import")}} @-規則により、条件付きでスタイルを適用する。
    • +
  • {{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの HTML 要素で media= 属性を付けて特定のメディアを対象とする。
    • +
  • JavaScript の {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用してメディアの状態を検査および監視する。
    • +
+ +
+

メモ: このページの例では説明のために CSS の @media を使用していますが、基本構文はすべての種類のメディアクエリで共通です。

+
+ +

構文

+ +

メディアクエリは、任意のメディアタイプと任意の数のメディア特性の式で構成されます。論理演算子を使用して、複数のクエリを様々な形で組み合わせることができます。メディアクエリは大文字・小文字の区別がありません。

+ +

メディアクエリは、 (指定されていれば) メディアタイプが文書を表示している端末に一致しており、かつすべてのメディア特性式が真と計算されれば、真と計算されます。不明なメディアタイプに対するクエリは常に偽です。

+ +
+

メモ: {{HTMLElement("link")}} タグによるメディアクエリ付きのスタイルシートは、クエリが偽を返してもダウンロードされます。にもかかわらず、中身はクエリが真に変わらない限り、適用されません。

+
+ +

メディアタイプ

+ +

メディアタイプは端末の全般的なカテゴリを説明します。 not 又は only の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 all タイプが暗黙に含まれています。

+ +
+
all
+
すべての端末に一致します。
+
print
+
ページ付きの素材や、印刷プレビューモードで画面に表示された文書のためのものです。 (これらの形式に特有の整形上の問題について詳しくは、ページ付きメディアをご覧ください。)
+
screen
+
主に画面のためのものです。
+
speech
+
主に音声合成のためのものです。
+
+ +
非推奨のメディアタイプ: CSS2.1 及びメディアクエリ 3 では、いくつかの追加のメディアタイプ (tty, tv, projection, handheld, braille, embossed, and aural) を定義しましたが、これらはメディアクエリ 4 で非推奨となり、使用するべきではありません。 aural タイプは似ている speech で置き換えられました。
+ +

メディア特性

+ +

メディア特性は、特定の{{glossary("user agent", "ユーザーエージェント")}}や、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前概要備考
{{cssxref("@media/any-hover", "any-hover")}}入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるかMedia Queries Level 4 で追加。
{{cssxref("@media/any-pointer", "any-pointer")}}入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるかMedia Queries Level 4 で追加。
{{cssxref("@media/aspect-ratio", "aspect-ratio")}}ビューポートの幅対高さのアスペクト比
{{cssxref("@media/color", "color")}}出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ
{{cssxref("@media/color-gamut", "color-gamut")}}ユーザーエージェント及び出力端末が対応しているおよその色の範囲Media Queries Level 4 で追加。
{{cssxref("@media/color-index", "color-index")}}出力端末の色参照表の項目数、又は端末がそのような表を使用していないのであればゼロ
{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}出力端末の幅対高さのアスペクト比Media Queries Level 4 で非推奨。
{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}出力端末のレンダリング面の高さMedia Queries Level 4 で非推奨。
{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}出力端末のレンダリング面の幅Media Queries Level 4 で非推奨。
{{cssxref("@media/display-mode", "display-mode")}}ウェブアプリのマニフェストの display メンバーで指定されているアプリケーションの表示モードWeb App Manifest 仕様書で定義
{{cssxref("@media/forced-colors", "forced-colors")}}ユーザーエージェントがカラーパレットを制限しているかどうかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/grid", "grid")}}出力端末はグリッドとビットマップ画面のどちらを使用するか
{{cssxref("@media/height", "height")}}ビューポートの高さ
{{cssxref("@media/hover", "hover")}}主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるかMedia Queries Level 4 で追加。
{{cssxref("@media/inverted-colors", "inverted-colors")}}ユーザーエージェントまたはその下の OS が色を反転しているかMedia Queries Level 5 で追加。
{{cssxref("@media/light-level", "light-level")}}環境の明るさレベルMedia Queries Level 5 で追加。
{{cssxref("@media/monochrome", "monochrome")}}出力端末のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は端末がモノクロでなければゼロ
{{cssxref("@media/orientation", "orientation")}}ビューポートの向き
{{cssxref("@media/overflow-block", "overflow-block")}}ビューポートをブロック軸方向にあふれたコンテンツを出力端末がどのように扱うかMedia Queries Level 4 で追加。
{{cssxref("@media/overflow-inline", "overflow-inline")}}ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるかMedia Queries Level 4 で追加。
{{cssxref("@media/pointer", "pointer")}}主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるかMedia Queries Level 4 で追加。
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}ユーザーがページであまり動きを望まないかどうかMedia Queries Level 5 で追加。
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}ユーザーが透明度を下げるよう望んでいるかどうかMedia Queries Level 5 で追加。
{{cssxref("@media/resolution", "resolution")}}出力端末のピクセル密度
{{cssxref("@media/scan", "scan")}}出力端末のスキャン処理方式
{{cssxref("@media/scripting", "scripting")}}スクリプト (例えば JavaScript) が利用できるかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/update-frequency", "update")}}どれだけの頻度で出力端末がコンテンツの表示を変更できるかMedia Queries Level 4 で追加。
{{cssxref("@media/width", "width")}}ビューポートの幅
+ +

論理演算子

+ +

論理演算子 not, and, only を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをカンマで区切って、単一の規則にまとめることもできます。

+ +

and

+ +

and 演算子は、複数のメディア特性を一つのメディアクエリにまとめるために使用し、クエリが真になるためには結合されたそれぞれの特性が真を返す必要があります。メディア特性とメディアタイプを組み合わせるためにも使用します。

+ +

not

+ +

not 演算子は、メディアクエリを否定するために使用し、もしクエリが偽を返せば真を返します。カンマ区切りのクエリのリストの中にある場合、適用された特定のクエリのみを否定します。 not 演算子を使用する場合は、メディアタイプも指定しなければなりません。

+ +
+

メモ: Level 3 では、 not キーワードは個別のメディア特性式を否定するために使用することはできず、メディアクエリ全体に対してしか使用できません。

+
+ +

only

+ +

only 演算子はクエリ全体が一致した場合にスタイルを適用し、古いブラウザーで選択されたスタイルが適用されるのを防ぐために使用します。 only を使用しない場合、古いブラウザーは screen and (max-width: 500px) というクエリを単なる screen として解釈してクエリの注釈を無視し、あらゆる画面にスタイルを適用します。 only 演算子を使用する場合は、メディアタイプも指定しなければなりません。

+ +

, (カンマ)

+ +

カンマは、複数のメディアクエリを一つのメディアクエリに結合するために使用します。カンマで区切ったリストの中にあるそれぞれのクエリは、他とは別なものとして扱われます。よって、リストの中の何れかのクエリが真になれば、メディアステートメント全体が真を返します。言い換えれば、リストは論理 or 演算子のように動作します。

+ +

メディアタイプの対象化

+ +

メディアタイプは、その端末の一般的なカテゴリを記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや音声ベースのスクリーンリーダーのような、特殊な端末を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。

+ +
@media print { ... }
+ +

複数の端末を対象にすることもできます。例えば、この @media ルールは2つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。

+ +
@media screen, print { ... }
+ +

すべてのメディアタイプの一覧は、メディアタイプを参照してください。とても広い用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりにメディア特性を使用してください。

+ +

メディア特性を対象とする

+ +

メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}、出力端末、環境などの特定の特徴を記述します。例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。この例はユーザーの主な入力手段 (マウスなど) が要素の上で停止できる時にスタイルを適用します。

+ +
@media (hover: hover) { ... }
+ +

多くのメディア特性は範囲特性であり、 "min-" 又は "max-" の接頭辞をつけて「最小条件」又は「最大条件」の制約を表現します。例えば、この CSS はブラウザーの{{glossary("viewport", "ビューポート")}}の幅が 12,450px 以下である場合のみ、スタイルを適用します。

+ +
@media (max-width: 12450px) { ... }
+ +

値を指定せずにメディア特性クエリを作成した場合、特性の値がゼロ (または Level 4 では none) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。

+ +
@media (color) { ... }
+ +

ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

その他のメディア特性の例については、それぞれの特性のリファレンスページを参照してください。

+ +

複雑なメディアクエリの作成

+ +

時々、複数の条件に依存するメディアクエリを作成したくなる場合があるかもしれません。これは、 not, and, only の論理演算子の出番です。その上、複数のメディアクエリをカンマ区切りのリストで結合することができます。これによって、同じスタイルを異なる場面に適用することができます。

+ +

以前の例で、すでに and 演算子がメディアタイプとメディア特性をグループ化するために使用されているのを見ました。 and演算子は、複数のメディア特性を1つのメディアクエリに結合することもできます。一方で not 演算子は、メディアクエリを反転し、基本的に普通の意味とは逆になります。 only 演算子は古いブラウザーでスタイルが適用されるのを防止します。

+ +
+

メモ: 多くの場合、 all メディアタイプが他のタイプが指定されない場合に既定で使用されます。しかし、 not 又は only 演算子を使用する場合は、メディアタイプを明示的に指定する必要があります。

+
+ +

複数のタイプ又は特性の組み合わせ

+ +

and キーワードはメディア特性をメディアタイプ、又は他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

スタイルを画面に限定する場合は、メディア特性に screen メディアタイプを結合します。

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+ +

複数のクエリの検査

+ +

カンマ区切りのリストを使うと、ユーザーの端末が様々なメディアタイプ、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下の規則はユーザーの端末の高さが 680px 以上又は画面が縦長モードであるときにスタイルが適用されます。

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリが適用され、 media ステートメントはやはり真を返します。

+ +

クエリの意味の反転

+ +

not キーワードはメディアクエリ全体の意味を反転します。これは、適用される特定のメディアクエリを単純に反転します。 (従って、メディアクエリのカンマ区切りのリストの中では、それぞれのメディアクエリは適用されません。) not キーワードは個別の特性クエリに対して使用することができず、クエリ全体のみを反転します。 not は以下のクエリの最後に評価されます。

+ +
@media not all and (monochrome) { ... }
+
+ +

... よって、上記のクエリは次のように評価されます。

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... このようにはなりません。

+ +
@media (not all) and (monochrome) { ... }
+ +

他の例を挙げます。以下のメディアクエリは、

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

... 次のように評価されます。

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

古いブラウザーとの互換性の維持

+ +

only キーワードは、メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。最近のブラウザーでは効果がありません。

+ +
@media only screen and (color) { ... }
+
+ +

Level 4 での構文の拡張

+ +

Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリを作れるよう構文が拡張されました。 Level 4 はこのようなクエリを書くために範囲コンテキストを追加しています。例えば、幅について max- の特性を使用する場合は、以下のように書くことができます。

+ +
+

注: Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は @media ブラウザー互換性一覧表を参照してください。

+
+ +
@media (max-width: 30em) { ... }
+ +

Media Queries Level 4 では、これを次のように書くことができます。

+ +
@media (width <= 30em) { ... }
+ +

min- および max- を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。

+ +
@media (min-width: 30em) and (max-width: 50em) { ... }
+ +

Level 4 の構文に変換すると、次のようになります。

+ +
@media (30em <= width <= 50em ) { ... }
+
+ +

また、 Media Queries Level 4 では and, not, or を伴う完全な論理代数を使ったメディアクエリの組み合わせの方法も追加されました。

+ +

not による特性の否定

+ +

メディア特性を not() を使用して囲むことで、クエリでその特性を否定します。例えば、 not(hover) は端末でホバーができない場合に一致します。

+ +
@media (not(hover)) { ... }
+ +

or による特性の結合

+ +

or を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば true になります。例えば、次のクエリは端末がモノクロ画面である、またはホバーができるかどうかを検査します。

+ +
@media (not (color)) or (hover) { ... }
+
+ +

関連情報

+ + diff --git a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html new file mode 100644 index 0000000000..02eaddac0f --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -0,0 +1,94 @@ +--- +title: アクセシビリティのためのメディアクエリの使用 +slug: Web/CSS/Media_queries/Using_Media_Queries_for_Accessibility +tags: + - '@media' + - CSS + - アクセシビリティ + - アニメーション + - メディア特性 +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +

メディアクエリは、障碍を持ったユーザーがウェブサイトをより理解することを支援するためにも利用することができます。

+ +

動きの縮減

+ +

点滅やフラッシュのアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持った人々にとって問題になる可能性があります。加えて、特定の種類の動きが前庭障害、てんかん、片頭痛、スコピック感受性などを引き起こす可能性があります。

+ +

また、この方法でユーザー設定によってアニメーションの停止を切り替えると、バッテリーが少ない、または性能が低い携帯電話やコンピューターを使用しているユーザーにも便益があります。

+ +

構文

+ +
+
no-preference
+
システムが把握している設定をユーザーが行っていないことを示します。
+
reduce
+
ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。
+
+ +

Example

+ +

この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ +

高コントラストモード

+ +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の -ms-high-contrast メディア特性は Microsoft 拡張で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。

+ +

これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。

+ +

構文

+ +

-ms-high-contrast メディア特性は、以下の値のうちの一つで指定します。

+ +

値

+ +
+
active
+
+

配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。

+
+
black-on-white
+
+

配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。

+
+
white-on-black
+
+

配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。

+
+
+ +

例

+ +

以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。

+ +
@media screen and (-ms-high-contrast: active) {
+  /* すべての高コントラストの整形規則 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
diff --git a/files/ja/web/css/microsoft_extensions/index.html b/files/ja/web/css/microsoft_extensions/index.html new file mode 100644 index 0000000000..31be6de5ef --- /dev/null +++ b/files/ja/web/css/microsoft_extensions/index.html @@ -0,0 +1,120 @@ +--- +title: Microsoft CSS 拡張 +slug: Web/CSS/Microsoft_Extensions +tags: + - CSS + - 'CSS:Microsoft 拡張' + - Microsoft 拡張 + - Non-standard + - Reference +translation_of: Web/CSS/Microsoft_Extensions +--- +
{{CSSRef}}
+ +

Edge や Internet Explorer のような Microsoft のアプリケーションは、いくつもの特殊な CSS の Microsoft 拡張に対応しています。これらの拡張には接頭辞に -ms- が付きます。

+ +

Microsoft 独自プロパティ (ウェブサイトでの使用は避けてください)

+ +
+

メモ: これらのプロパティは Microsoft のアプリケーションのみで動作し、標準路線ではありません。

+
+ +
+
    +
  • {{CSSxRef("-ms-accelerator")}}
    • +
  • {{CSSxRef("-ms-block-progression")}}
    • +
  • {{CSSxRef("-ms-content-zoom-chaining")}}
    • +
  • {{CSSxRef("-ms-content-zooming")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-max")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-min")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-points")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-type")}}
    • +
  • {{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-flow-from")}}
    • +
  • {{CSSxRef("-ms-flow-into")}}
    • +
  • {{CSSxRef("-ms-high-contrast-adjust")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-chars")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-lines")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-zone")}}
    • +
  • {{CSSxRef("-ms-ime-align")}}
    • +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
  • {{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scroll-chaining")}}
    • +
  • {{CSSxRef("-ms-scroll-limit")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-min")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-min")}}
    • +
  • {{CSSxRef("-ms-scroll-rails")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-y")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-y")}}
    • +
  • {{CSSxRef("-ms-scroll-translation")}}
    • +
  • {{CSSxRef("-ms-text-autospace")}}
    • +
  • {{CSSxRef("-ms-touch-select")}}
    • +
  • {{CSSxRef("-ms-wrap-flow")}}
    • +
  • {{CSSxRef("-ms-wrap-margin")}}
    • +
  • {{CSSxRef("-ms-wrap-through")}}
    • +
  • {{CSSxRef("zoom")}}
    • +
+
+ +

疑似要素

+ +
+
    +
  • {{CSSxRef("::-ms-browse")}}
    • +
  • {{CSSxRef("::-ms-check")}}
    • +
  • {{CSSxRef("::-ms-clear")}}
    • +
  • {{CSSxRef("::-ms-expand")}}
    • +
  • {{CSSxRef("::-ms-fill")}}
    • +
  • {{CSSxRef("::-ms-fill-lower")}}
    • +
  • {{CSSxRef("::-ms-fill-upper")}}
    • +
  • {{CSSxRef("::-ms-reveal")}}
    • +
  • {{CSSxRef("::-ms-thumb")}}
    • +
  • {{CSSxRef("::-ms-ticks-after")}}
    • +
  • {{CSSxRef("::-ms-ticks-before")}}
    • +
  • {{CSSxRef("::-ms-tooltip")}}
    • +
  • {{CSSxRef("::-ms-track")}}
    • +
  • {{CSSxRef("::-ms-value")}}
    • +
+
+ +

メディア特性

+ +
+
    +
  • {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
    • +
+
+ + + +
+
    +
  • {{DOMxRef("msContentZoomFactor")}}
    • +
  • {{DOMxRef("msGetPropertyEnabled")}}
    • +
  • {{DOMxRef("msGetRegionContent")}}
    • +
  • {{DOMxRef("MSRangeCollection")}}
    • +
  • {{DOMxRef("msRegionOverflow")}}
    • +
+
+ +

関連情報

+ + diff --git a/files/ja/web/css/min()/index.html b/files/ja/web/css/min()/index.html new file mode 100644 index 0000000000..263df74da5 --- /dev/null +++ b/files/ja/web/css/min()/index.html @@ -0,0 +1,139 @@ +--- +title: min() +slug: Web/CSS/min() +tags: + - CSS + - CSS Function + - CSS 関数 + - Calculate + - Compute + - Function + - Layout + - Reference + - min +translation_of: Web/CSS/min() +--- +
{{CSSRef}}
+ +

min() は CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 min() 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。

+ +
/* プロパティ: min(式 [, 式]) */
+width: min(10vw, 4em, 80px);
+
+ +

上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 min() の値はプロパティが取りうる最大の値を提供するものとして考えてください。

+ +

構文

+ +

min() 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。

+ +

式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式にすることができます。

+ +

必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

+ +

メモ

+ +
    +
  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
    • +
  • max() や他の min() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
    • +
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
    • +
  • min() と max() の値を組み合わせたり、 min() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
    • +
  • 複数の制約を適用する場合は、3つ以上の引数を与えることができます。
    • +
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

最大サイズまで広がる画像

+ +

min() を使用すると、画像の最大幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は小さい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。

+ +
.logo {
+  width: min(50vw, 300px);
+}
+
+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "110")}}

+ +

この例では、ロゴの幅はビューポートが 600px 未満まで狭くならない限り 300px になり、ここからビューポートの幅の 50% を保ちながら、ビューポートが縮小するに従って縮小します。

+ +

ラベルと入力欄のために最大値を設定する

+ +

CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。

+ +

いくらか CSS を見てください。

+ +
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。

+ +
<form>
+  <label>Type something:</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

+ +

アクセシビリティの考慮事項

+ +

min() を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。

+ +

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.min")}}

+
+
関連情報

+
+
    
+ 
  • {{CSSxRef("calc", "calc()")}}
    • 
+ 
  • {{CSSxRef("clamp", "clamp()")}}
    • 
+ 
  • {{CSSxRef("max", "max()")}}
    • 
+ 
  • CSS 値
    • 
+

diff --git a/files/ja/web/css/min-block-size/index.html b/files/ja/web/css/min-block-size/index.html
new file mode 100644
index 0000000000..33bd4323d0
--- /dev/null
+++ b/files/ja/web/css/min-block-size/index.html
@@ -0,0 +1,107 @@
+---
+title: min-block-size
+slug: Web/CSS/min-block-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - min-block-size
+  - 'recipe:css-property'
+translation_of: Web/CSS/min-block-size
+---
+
{{CSSRef}}

+
+
min-block-size は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。

+
+
書字方向が垂直方向であった場合、 min-block-size の値は要素の最小幅に対応します。そうでなければ、要素の最小の高さに対応します。関連プロパティの {{cssxref("min-inline-size")}} が要素のもう一方の寸法を定義します。

+
+
{{EmbedInteractiveExample("pages/css/min-block-size.html")}}

+
+
+
+
構文

+
+
/* <length> 値 */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* <percentage> 値 */
+min-block-size: 10%;
+
+/* キーワード値 */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content(20em);
+
+/* グローバル値 */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+

+
+
値

+
+
min-block-size プロパティは {{cssxref("min-width")}} および {{cssxref("min-height")}} の各プロパティと同じ値を取ります。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きでブロック方向の最小寸法を設定

+
+
HTML

+
+
<p class="exampleText">Example text</p>
+

+
+
CSS

+
+
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  min-block-size: 200px;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_minimum_block_size_for_vertical_text")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.min-block-size")}}

+
+
関連情報

+
+
    
+ 
  • 対応付けされる物理的プロパティ: {{cssxref("min-width")}} および {{cssxref("min-height")}}
    • 
+ 
  • {{cssxref("writing-mode")}}
    • 
+

diff --git a/files/ja/web/css/min-height/index.html b/files/ja/web/css/min-height/index.html
new file mode 100644
index 0000000000..b3ca9be908
--- /dev/null
+++ b/files/ja/web/css/min-height/index.html
@@ -0,0 +1,120 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Minimum
+  - Reference
+  - dimensions
+  - height
+  - min-height
+  - 'recipe:css-property'
+  - size
+translation_of: Web/CSS/min-height
+---
+
{{CSSRef}}

+
+
min-height は CSS のプロパティで、要素の最小幅を設定します。これは {{cssxref("height")}} プロパティの使用値が、min-height で指定した値を下回ることを防ぎます。

+
+
{{EmbedInteractiveExample("pages/css/min-height.html")}}

+
+
+
+
min-height の値が {{cssxref("max-height")}} および {{cssxref("height")}} の値より大きい場合は、min-height の値が要素の幅になります。

+
+
構文

+
+
/* <length> 値 */
+min-height: 3.5em;
+
+/* <percentage> 値 */
+min-height: 10%;
+
+/* キーワード値 */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content(20em);
+
+/* グローバル値 */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
min-height を絶対的な値で定義します。

+ 
{{cssxref("<percentage>")}}

+ 
min-height を包含ブロックの高さに対するパーセント値で定義します。

+ 
auto

+ 
ブラウザーが指定された要素の min-height を計算して選択します。

+ 
max-content

+ 
内容物が推奨する min-height です。

+ 
min-content

+ 
内容物の最小の min-height です。

+ 
fit-content({{cssxref("<length-percentage>")}})

+ 
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
min-height の設定

+
+
table { min-height: 75%; }
+
+form { min-height: 0; }
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}{{Spec2('CSS2.1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.min-height")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/min-inline-size/index.html b/files/ja/web/css/min-inline-size/index.html
new file mode 100644
index 0000000000..21bfa80251
--- /dev/null
+++ b/files/ja/web/css/min-inline-size/index.html
@@ -0,0 +1,108 @@
+---
+title: min-inline-size
+slug: Web/CSS/min-inline-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - min-inline-size
+  - 'recipe:css-property'
+translation_of: Web/CSS/min-inline-size
+---
+
{{CSSRef}}

+
+
min-inline-size は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。

+
+
書字方向が垂直方向であった場合、 min-inline-size の値は要素の最小の高さに対応します。そうでなければ、要素の最小幅に対応します。関連プロパティの {{cssxref("min-block-size")}} が要素のもう一方の寸法を定義します。

+
+
{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}

+
+
+
+
構文

+
+
/* <length> 値 */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* <percentage> 値 */
+min-inline-size: 10%;
+
+/* キーワード値 */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content(20em);
+
+/* グローバル値 */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+

+
+
値

+
+
min-inline-size プロパティは {{cssxref("min-width")}} および {{cssxref("min-height")}} の各プロパティと同じ値を取ります。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きでインライン方向の最小寸法を設定

+
+
HTML

+
+
<p class="exampleText">Example text</p>
+

+
+
CSS

+
+
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_minimum_inline_size_for_vertical_text")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.min-inline-size")}}

+
+
関連情報

+
+
    
+ 
  • 対応付けされる物理的プロパティ: {{cssxref("min-width")}} および {{cssxref("min-height")}}
    • 
+ 
  • {{cssxref("writing-mode")}}
    • 
+

diff --git a/files/ja/web/css/min-width/index.html b/files/ja/web/css/min-width/index.html
new file mode 100644
index 0000000000..ebf4e8769c
--- /dev/null
+++ b/files/ja/web/css/min-width/index.html
@@ -0,0 +1,117 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/min-width
+---
+
{{CSSRef}}

+
+
min-width は CSS のプロパティで、要素の最小幅を設定します。これは {{Cssxref("width")}} プロパティの使用値が、min-width で指定した値を下回ることを防ぎます。

+
+
{{EmbedInteractiveExample("pages/css/min-width.html")}}

+
+
+
+
min-width の値が {{Cssxref("max-width")}} および {{Cssxref("width")}} の値より大きい場合は、min-width の値が要素の幅になります。

+
+
構文

+
+
/* <length> 値 */
+min-width: 3.5em;
+
+/* <percentage> 値 */
+min-width: 10%;
+
+/* キーワード値 */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content(20em);
+
+/* グローバル値 */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
min-width を絶対的な値で定義します。

+ 
{{cssxref("<percentage>")}}

+ 
min-width を包含ブロックの幅に対するパーセント値で定義します。

+ 
auto

+ 
ブラウザーが指定された要素の min-width を計算して選択します。

+ 
none

+ 
ボックスの寸法を制限しません。

+ 
max-content

+ 
内容物が推奨する min-width です。

+ 
min-content

+ 
内容物の最小の min-width です。

+ 
fit-content({{cssxref("<length-percentage>")}})

+ 
利用可能な空白をして死された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
table { min-width: 75%; }
+
+form { min-width: 0; }
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}{{Spec2('CSS3 Flexbox')}}キーワード auto を追加し、初期値として使用する
{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}{{Spec2('CSS2.1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.min-width")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html
new file mode 100644
index 0000000000..2e76768c4f
--- /dev/null
+++ b/files/ja/web/css/minmax()/index.html
@@ -0,0 +1,217 @@
+---
+title: minmax()
+slug: Web/CSS/minmax()
+tags:
+  - CSS
+  - CSS Function
+  - CSS グリッドレイアウト
+  - CSS 関数
+  - Experimental
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/minmax()
+---
+
minmax() は CSS の関数で、寸法の範囲を min 以上、 max 以下で定義します。 CSS グリッドで使用されます。

+
+
{{EmbedInteractiveExample("pages/css/function-minmax.html")}}

+
+
+
+
構文

+
+
/* <inflexible-breadth>, <track-breadth> 値 */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* <fixed-breadth>, <track-breadth> 値 */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> 値 */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+

+
+
min および max の2つの引数を取る関数です。

+
+
どちらの引数も <length>, <percentage>, <flex>, またはキーワード値 max-content, min-content, auto のうちの一つを取ります。

+
+
もし min が max より大きい場合は無視され、 minmax(min,max) は min として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは min としては無効です。

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
負ではない寸法。

+ 
{{cssxref("<percentage>")}}

+ 
負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 <percentage> は auto として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。

+ 
{{cssxref("<flex>")}}

+ 
単位 fr がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの <flex> による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。

+ 
max-content

+ 
グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。

+ 
min-content

+ 
グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。

+ 
auto

+ 
最大値としては、 max-content と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
CSS プロパティ

+
+
minmax() 関数は次の中で使用することができます。

+
+
+
+
例

+
+
CSS

+
+
#container {
+  display: grid;
+  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+

+
+
HTML

+
+
<div id="container">
+  <div>
+    Item as wide as the content, but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>

+
+
結果

+
+
{{EmbedLiveSample("Example", "100%", 200)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.grid-template-columns.minmax")}}

+
+
関連情報

+
+
+
+
diff --git a/files/ja/web/css/mix-blend-mode/index.html b/files/ja/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..260c570359
--- /dev/null
+++ b/files/ja/web/css/mix-blend-mode/index.html
@@ -0,0 +1,655 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS プロパティ
+  - ウェブ
+  - リファレンス
+  - 合成と混合
+translation_of: Web/CSS/mix-blend-mode
+---
+
{{CSSRef}}

+
+
CSS の mix-blend-mode プロパティは、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

+
+
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* グローバル値 */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+

+
+
値

+
+

+ 
<blend-mode>

+ 
適用する混合モードを表す {{cssxref("<blend-mode>")}} です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
+
+
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}

+
+
HTML の例

+
+
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>

+
+
.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}

+
+
{{EmbedLiveSample("HTML_example", "100%", "180")}}

+
+
SVG の例

+
+
This example reproduces the previous example using SVG.

+
+
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>

+
+
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+

+
+
{{EmbedLiveSample("SVG_example", "100%", "180")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.mix-blend-mode")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("<blend-mode>")}}
    • 
+ 
  • {{cssxref("background-blend-mode")}}
    • 
+

diff --git a/files/ja/web/css/mozilla_extensions/index.html b/files/ja/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..a489ce0a0f
--- /dev/null
+++ b/files/ja/web/css/mozilla_extensions/index.html
@@ -0,0 +1,678 @@
+---
+title: CSS の Mozilla 拡張
+slug: Web/CSS/Mozilla_Extensions
+tags:
+  - CSS
+  - Mozilla 拡張
+  - Reference
+  - 標準外
+translation_of: Web/CSS/Mozilla_Extensions
+---
+
{{CSSRef}}

+
+
Firefox などの Mozilla アプリケーションは、いくつもの特別な CSS の Mozilla 拡張に対応しています。これには、プロパティ、値、疑似要素、疑似クラス、@-規則、メディアクエリが含まれます。これらの拡張には -moz- 接頭辞が付いています。

+
+
Mozilla 独自のプロパティと疑似クラス (ウェブサイトで使用してはいけません)

+
+

+
メモ: これらのプロパティと疑似クラスは、Firefox などの Mozilla アプリケーション内でのみ動作するものであり、標準化されていません。これら標準外のプロパティの一部は、XUL 要素にのみ適用されます。

+

+
+

+
B

+
+
    
+ 
  • {{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-box-align")}}
    • 
+ 
  • {{CSSxRef("-moz-box-direction")}}
    • 
+ 
  • {{CSSxRef("-moz-box-flex")}}
    • 
+ 
  • {{CSSxRef("-moz-box-ordinal-group")}}
    • 
+ 
  • {{CSSxRef("-moz-box-orient")}}
    • 
+ 
  • {{CSSxRef("-moz-box-pack")}}
    • 
+

+
+
C – I

+
+
    
+ 
  • {{CSSxRef("-moz-context-properties")}}
    • 
+ 
  • {{CSSxRef("-moz-float-edge")}}
    • 
+ 
  • {{CSSxRef("-moz-force-broken-image-icon")}}
    • 
+ 
  • {{CSSxRef("-moz-image-region")}}
    • 
+

+
+
O

+
+
    
+ 
  • {{CSSxRef("-moz-orient")}}
    • 
+ 
  • {{CSSxRef("-moz-osx-font-smoothing")}}
    • 
+ 
  • {{CSSxRef("-moz-outline-radius")}}
    • 
+ 
  • {{CSSxRef("-moz-outline-radius-bottomleft")}}
    • 
+ 
  • {{CSSxRef("-moz-outline-radius-bottomright")}}
    • 
+ 
  • {{CSSxRef("-moz-outline-radius-topleft")}}
    • 
+ 
  • {{CSSxRef("-moz-outline-radius-topright")}}
    • 
+ 
  • {{CSSxRef("overflow-clip-box")}}
    • 
+ 
  • {{CSSxRef("overflow-clip-box-block")}}
    • 
+ 
  • {{CSSxRef("overflow-clip-box-inline")}}
    • 
+

+
+
S – Z

+
+
    
+ 
  • {{CSSxRef("-moz-stack-sizing")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • 
+ 
  • {{CSSxRef("-moz-user-focus")}}
    • 
+ 
  • {{CSSxRef("-moz-user-input")}}
    • 
+ 
  • {{CSSxRef("-moz-user-modify")}}
    • 
+ 
  • {{CSSxRef("-moz-window-dragging")}}
    • 
+ 
  • {{CSSxRef("-moz-window-shadow")}}
    • 
+

+

+
+
以前は独自だったが現在は標準化されているプロパティ

+
+

+
メモ: CSS の互換性を最大化するため、以下の接頭辞付きのものではなく、接頭辞なしの標準プロパティを使用してください。これらは、標準化されて接頭辞なしの形式が対応され次第、接頭辞付きのバージョンは順次破棄されます。

+

+
+

+
    
+ 
  • 
+  
    A
    
+ 
    • 
+ 
  • {{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}
    • 
+ 
  • 
+  
    B
    
+ 
    • 
+ 
  • {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
    • 
+ 
  • {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
    • 
+ 
  • {{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [標準化された {{CSSxRef("box-decoration-break")}} に置き換え]
    • 
+ 
  • {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
    • 
+ 
  • {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end")}} に置き換え]
    • 
+ 
  • {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end-color")}} に置き換え]
    • 
+ 
  • {{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end-style")}} に置き換え]
    • 
+ 
  • {{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end-width")}} に置き換え]
    • 
+ 
  • {{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}
    • 
+ 
  • {{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start")}} に置き換え]
    • 
+ 
  • {{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start-color")}} に置き換え]
    • 
+ 
  • {{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start-style")}} に置き換え]
    • 
+ 
  • {{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start-width")}} に置き換え]
    • 
+ 
  • {{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • 
+  
    C
    
+ 
    • 
+ 
  • {{CSSxRef("clip-path")}} {{Experimental_Inline}} [SVG 以外にも適用]
    • 
+ 
  • {{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}
    • 
+ 
  • 
+  
    F – M
    
+ 
    • 
+ 
  • {{CSSxRef("filter")}} {{Experimental_Inline}} [SVG 以外にも適用]
    • 
+ 
  • {{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("margin-inline-end")}} に置き換え]
    • 
+ 
  • {{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("margin-inline-start")}} に置き換え]
    • 
+ 
  • {{CSSxRef("mask")}} {{Experimental_Inline}} [SVG 以外にも適用]
    • 
+ 
  • 
+  
    O
    
+ 
    • 
+ 
  • {{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}
    • 
+ 
  • {{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}
    • 
+ 
  • 
+  
    P
    
+ 
    • 
+ 
  • {{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("padding-inline-end")}} に置き換え]
    • 
+ 
  • {{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("padding-inline-start")}} に置き換え]
    • 
+ 
  • {{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("pointer-events")}} {{Experimental_Inline}} [SVG 以外にも適用]
    • 
+ 
  • 
+  
    T – U
    
+ 
    • 
+ 
  • {{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}
    • 
+ 
  • {{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}
    • 
+ 
  • {{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}
    • 
+ 
  • {{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}
    • 
+ 
  • {{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [接頭辞付きも許容]
    • 
+ 
  • {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
    • 
+

+

+
+
値

+
+
グローバル値

+
+

+
    
+ 
  • {{CSSxRef("initial","-moz-initial")}}
    • 
+

+

+
+
{{CSSxRef("-moz-appearance")}}

+
+

+
    
+ 
  • button
    • 
+ 
  • button-arrow-down
    • 
+ 
  • button-arrow-next
    • 
+ 
  • button-arrow-previous
    • 
+ 
  • button-arrow-up
    • 
+ 
  • button-bevel
    • 
+ 
  • checkbox
    • 
+ 
  • checkbox-container
    • 
+ 
  • checkbox-label
    • 
+ 
  • checkmenuitem
    • 
+ 
  • dialog
    • 
+ 
  • groupbox
    • 
+ 
  • listbox
    • 
+ 
  • menuarrow
    • 
+ 
  • menucheckbox
    • 
+ 
  • menuimage
    • 
+ 
  • menuitem
    • 
+ 
  • menuitemtext
    • 
+ 
  • menulist
    • 
+ 
  • menulist-button
    • 
+ 
  • menulist-text
    • 
+ 
  • menulist-textfield
    • 
+ 
  • menupopup
    • 
+ 
  • menuradio
    • 
+ 
  • menuseparator
    • 
+ 
  • -moz-mac-unified-toolbar{{Fx_MinVersion_Inline(3.5)}}
    • 
+ 
  • -moz-win-borderless-glass
    • 
+ 
  • -moz-win-browsertabbar-toolbox{{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-communications-toolbox{{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-glass
    • 
+ 
  • -moz-win-media-toolbox{{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-window-button-box
    • 
+ 
  • -moz-window-button-box-maximized
    • 
+ 
  • -moz-window-button-close
    • 
+ 
  • -moz-window-button-maximize
    • 
+ 
  • -moz-window-button-minimize
    • 
+ 
  • -moz-window-button-restore
    • 
+ 
  • -moz-window-titlebar
    • 
+ 
  • -moz-window-titlebar-maximized
    • 
+ 
  • progressbar
    • 
+ 
  • progresschunk
    • 
+ 
  • radio
    • 
+ 
  • radio-container
    • 
+ 
  • radio-label
    • 
+ 
  • radiomenuitem
    • 
+ 
  • resizer
    • 
+ 
  • resizerpanel
    • 
+ 
  • scale-horizontal
    • 
+ 
  • scalethumb-horizontal
    • 
+ 
  • scalethumb-vertical
    • 
+ 
  • scale-vertical
    • 
+ 
  • scrollbarbutton-down
    • 
+ 
  • scrollbarbutton-left
    • 
+ 
  • scrollbarbutton-right
    • 
+ 
  • scrollbarbutton-up
    • 
+ 
  • scrollbar-small
    • 
+ 
  • scrollbarthumb-horizontal
    • 
+ 
  • scrollbarthumb-vertical
    • 
+ 
  • scrollbartrack-horizontal
    • 
+ 
  • scrollbartrack-vertical
    • 
+ 
  • separator
    • 
+ 
  • spinner
    • 
+ 
  • spinner-downbutton
    • 
+ 
  • spinner-textfield
    • 
+ 
  • spinner-upbutton
    • 
+ 
  • statusbar
    • 
+ 
  • statusbarpanel
    • 
+ 
  • tab
    • 
+ 
  • tabpanels
    • 
+ 
  • tab-scroll-arrow-back
    • 
+ 
  • tab-scroll-arrow-forward
    • 
+ 
  • textfield
    • 
+ 
  • textfield-multiline
    • 
+ 
  • toolbar
    • 
+ 
  • toolbarbutton-dropdown
    • 
+ 
  • toolbox
    • 
+ 
  • tooltip
    • 
+ 
  • treeheadercell
    • 
+ 
  • treeheadersortarrow
    • 
+ 
  • treeitem
    • 
+ 
  • treetwisty
    • 
+ 
  • treetwistyopen
    • 
+ 
  • treeview
    • 
+ 
  • window
    • 
+

+

+
+
{{CSSxRef("background-image")}}

+
+

+
    
+ 
  • 
+  
    グラデーション {{Gecko_minversion_inline("1.9.2")}}
    
+
+  
      
+   
    • {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
      • 
+   
    • {{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}
      • 
+  
    
+ 
    • 
+ 
  • 
+  
    要素 {{gecko_minversion_inline("2.0")}}
    
+
+  
      
+   
    • {{CSSxRef("element","-moz-element")}}
      • 
+  
    
+ 
    • 
+ 
  • 
+  
    サブ画像 {{gecko_minversion_inline("2.0")}}
    
+
+  
      
+   
    • {{CSSxRef("-moz-image-rect")}}
      • 
+  
    
+ 
    • 
+

+

+
+
{{CSSxRef("border-color")}}

+
+

+
    
+ 
  • -moz-use-text-color {{obsolete_inline}} Gecko から削除 ({{bug(1306214)}} 参照); 代わりに currentcolor を使用してください。
    • 
+

+

+
+
{{CSSxRef("border-style")}} と {{CSSxRef("outline-style")}}

+
+

+
    
+ 
  • -moz-bg-inset{{Obsolete_Inline(1.9)}}
    • 
+ 
  • -moz-bg-outset{{Obsolete_Inline(1.9)}}
    • 
+ 
  • -moz-bg-solid{{Obsolete_Inline(1.9)}}
    • 
+

+

+
+
{{CSSxRef("<color>")}} キーワード

+
+

+
    
+ 
  • -moz-activehyperlinktext
    • 
+ 
  • -moz-hyperlinktext
    • 
+ 
  • -moz-visitedhyperlinktext
    • 
+ 
  • -moz-buttondefault
    • 
+ 
  • -moz-buttonhoverface
    • 
+ 
  • -moz-buttonhovertext
    • 
+ 
  • -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
    • 
+ 
  • -moz-default-color{{Gecko_minversion_inline("5.0")}}
    • 
+ 
  • -moz-cellhighlight
    • 
+ 
  • -moz-cellhighlighttext
    • 
+ 
  • -moz-field
    • 
+ 
  • -moz-fieldtext
    • 
+ 
  • -moz-dialog
    • 
+ 
  • -moz-dialogtext
    • 
+ 
  • -moz-dragtargetzone
    • 
+ 
  • -moz-mac-accentdarkestshadow
    • 
+ 
  • -moz-mac-accentdarkshadow
    • 
+ 
  • -moz-mac-accentface
    • 
+ 
  • -moz-mac-accentlightesthighlight
    • 
+ 
  • -moz-mac-accentlightshadow
    • 
+ 
  • -moz-mac-accentregularhighlight
    • 
+ 
  • -moz-mac-accentregularshadow
    • 
+ 
  • -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • -moz-mac-focusring
    • 
+ 
  • -moz-mac-menuselect
    • 
+ 
  • -moz-mac-menushadow
    • 
+ 
  • -moz-mac-menutextselect
    • 
+ 
  • -moz-menuhover
    • 
+ 
  • -moz-menuhovertext
    • 
+ 
  • -moz-win-communicationstext{{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
    • 
+ 
  • -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
    • 
+

+

+
+
{{CSSxRef("display")}}

+
+

+
    
+ 
  • -moz-box {{Deprecated_Inline}}
    • 
+ 
  • -moz-inline-block {{Obsolete_Inline}}
    • 
+ 
  • -moz-inline-box {{Deprecated_Inline}}
    • 
+ 
  • -moz-inline-grid{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-inline-stack{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-inline-table {{Obsolete_Inline}}
    • 
+ 
  • -moz-grid{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-grid-group{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-grid-line{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-groupbox{{Obsolete_Inline}}
    • 
+ 
  • -moz-deck{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-popup{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-stack{{Obsolete_Inline(62)}}
    • 
+ 
  • -moz-marker{{Obsolete_Inline(62)}}
    • 
+

+

+
+
{{CSSxRef("empty-cells")}}

+
+

+
    
+ 
  • -moz-show-background (Quirks モードでは既定値)
    • 
+

+

+
+
{{CSSxRef("font")}}

+
+

+
    
+ 
  • -moz-button
    • 
+ 
  • -moz-info
    • 
+ 
  • -moz-desktop
    • 
+ 
  • -moz-dialog (色も)
    • 
+ 
  • -moz-document
    • 
+ 
  • -moz-workspace
    • 
+ 
  • -moz-window
    • 
+ 
  • -moz-list
    • 
+ 
  • -moz-pull-down-menu
    • 
+ 
  • -moz-field (色も)
    • 
+

+

+
+
{{CSSxRef("font-family")}}

+
+

+
    
+ 
  • -moz-fixed
    • 
+

+

+
+
{{CSSxRef("image-rendering")}}

+
+

+
    
+ 
  • {{CSSxRef("image-rendering","-moz-crisp-edges")}}{{Gecko_minversion_inline("1.9.2")}}
    • 
+

+

+
+
{{CSSxRef("<length>")}}

+
+

+
    
+ 
  • {{CSSxRef("-moz-calc")}}{{gecko_minversion_inline("2.0")}}
    • 
+

+

+
+
{{CSSxRef("list-style-type")}}

+
+

+
    
+ 
  • -moz-arabic-indic
    • 
+ 
  • -moz-bengali
    • 
+ 
  • -moz-cjk-earthly-branch
    • 
+ 
  • -moz-cjk-heavenly-stem
    • 
+ 
  • -moz-devanagari
    • 
+ 
  • -moz-ethiopic-halehame
    • 
+ 
  • -moz-ethiopic-halehame-am
    • 
+ 
  • -moz-ethiopic-halehame-ti-er
    • 
+ 
  • -moz-ethiopic-halehame-ti-et
    • 
+ 
  • -moz-ethiopic-numeric
    • 
+ 
  • -moz-gujarati
    • 
+ 
  • -moz-gurmukhi
    • 
+ 
  • -moz-hangul
    • 
+ 
  • -moz-hangul-consonant
    • 
+ 
  • -moz-japanese-formal
    • 
+ 
  • -moz-japanese-informal
    • 
+ 
  • -moz-kannada
    • 
+ 
  • -moz-khmer
    • 
+ 
  • -moz-lao
    • 
+ 
  • -moz-malayalam
    • 
+ 
  • -moz-myanmar
    • 
+ 
  • -moz-oriya
    • 
+ 
  • -moz-persian
    • 
+ 
  • -moz-simp-chinese-formal
    • 
+ 
  • -moz-simp-chinese-informal
    • 
+ 
  • -moz-tamil
    • 
+ 
  • -moz-telugu
    • 
+ 
  • -moz-thai
    • 
+ 
  • -moz-trad-chinese-formal
    • 
+ 
  • -moz-trad-chinese-informal
    • 
+ 
  • -moz-urdu
    • 
+

+

+
+
{{CSSxRef("overflow")}}

+
+

+
    
+ 
  • {{CSSxRef("-moz-scrollbars-none")}} {{Obsolete_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-scrollbars-horizontal")}} {{Deprecated_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-scrollbars-vertical")}} {{Deprecated_Inline}}
    • 
+ 
  • {{CSSxRef("-moz-hidden-unscrollable")}}
    • 
+

+

+
+
{{CSSxRef("text-align")}}

+
+

+
    
+ 
  • -moz-center
    • 
+ 
  • -moz-left
    • 
+ 
  • -moz-right
    • 
+

+

+
+
{{CSSxRef("text-decoration")}}

+
+

+
    
+ 
  • -moz-anchor-decoration
    • 
+

+

+
+
{{CSSxRef("-moz-user-select")}}

+
+

+
    
+ 
  • -moz-all
    • 
+ 
  • -moz-none
    • 
+

+

+
+
{{CSSxRef("width")}} および {{CSSxRef("min-width")}}, {{CSSxRef("max-width")}}

+
+

+
    
+ 
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-available {{Fx_minversion_inline(3)}}
    • 
+

+

+
+
疑似要素と疑似クラス

+
+

+
    
+ 
  • 
+  
    A – D
    
+ 
    • 
+ 
  • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
    • 
+ 
  • {{CSSxRef("::-moz-anonymous-positioned-block")}}
    • 
+ 
  • {{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-any-link")}} [:link と :visited に一致する]
    • 
+ 
  • {{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef("::-moz-canvas")}}
    • 
+ 
  • {{CSSxRef("::-moz-color-swatch")}}
    • 
+ 
  • {{CSSxRef("::-moz-cell-content")}}
    • 
+ 
  • {{CSSxRef(":-moz-drag-over")}}
    • 
+ 
  • 
+  
    F – I
    
+ 
    • 
+ 
  • {{CSSxRef(":-moz-first-node")}}
    • 
+ 
  • {{CSSxRef("::-moz-focus-inner")}}
    • 
+ 
  • {{CSSxRef("::-moz-focus-outer")}}
    • 
+ 
  • {{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{CSSxRef("::-moz-inline-table")}}
    • 
+ 
  • 
+  
    L
    
+ 
    • 
+ 
  • {{CSSxRef(":-moz-last-node")}}
    • 
+ 
  • {{CSSxRef(":-moz-list-bullet")}}
    • 
+ 
  • {{CSSxRef(":-moz-list-number")}}
    • 
+ 
  • {{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • 
+  
    N – R
    
+ 
    • 
+ 
  • {{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}
    • 
+ 
  • {{CSSxRef(":-moz-only-whitespace")}}
    • 
+ 
  • {{CSSxRef("::-moz-page")}}
    • 
+ 
  • {{CSSxRef("::-moz-page-sequence")}}
    • 
+ 
  • {{CSSxRef("::-moz-pagebreak")}}
    • 
+ 
  • {{CSSxRef("::-moz-pagecontent")}}
    • 
+ 
  • {{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}
    • 
+ 
  • {{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}
    • 
+ 
  • {{CSSxRef("::-moz-progress-bar")}}
    • 
+ 
  • {{CSSxRef("::-moz-range-progress")}}
    • 
+ 
  • {{CSSxRef("::-moz-range-thumb")}}
    • 
+ 
  • {{CSSxRef("::-moz-range-track")}}
    • 
+ 
  • {{CSSxRef(":-moz-read-only")}}
    • 
+ 
  • {{CSSxRef(":-moz-read-write")}}
    • 
+ 
  • 
+  
    S
    
+ 
    • 
+ 
  • {{CSSxRef("::-moz-scrolled-canvas")}}
    • 
+ 
  • {{CSSxRef("::-moz-scrolled-content")}}
    • 
+ 
  • {{CSSxRef("::-moz-scrolled-page-sequence")}}
    • 
+ 
  • {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
    • 
+ 
  • {{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef("::-moz-svg-foreign-content")}}
    • 
+ 
  • 
+  
    T
    
+ 
    • 
+ 
  • {{CSSxRef("::-moz-table")}}
    • 
+ 
  • {{CSSxRef("::-moz-table-cell")}}
    • 
+ 
  • {{CSSxRef("::-moz-table-column")}}
    • 
+ 
  • {{CSSxRef("::-moz-table-column-group")}}
    • 
+ 
  • {{CSSxRef("::-moz-table-outer")}}
    • 
+ 
  • {{CSSxRef("::-moz-table-row")}}
    • 
+ 
  • {{CSSxRef("::-moz-table-row-group")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-cell")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-cell-text")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-checkbox")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-column")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-drop-feedback")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-image")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-indentation")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-line")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-progressmeter")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-row")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-separator")}}
    • 
+ 
  • {{CSSxRef(":-moz-tree-twisty")}}
    • 
+ 
  • 
+  
    U – X
    
+ 
    • 
+ 
  • {{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{CSSxRef("::-moz-viewport")}}
    • 
+ 
  • {{CSSxRef("::-moz-viewport-scroll")}}
    • 
+ 
  • {{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef("::-moz-xul-anonymous-block")}}
    • 
+

+

+
+
@-規則

+
+

+
    
+ 
  • {{CSSxRef("@-moz-document")}}
    • 
+

+

+
+
メディア特性

+
+

+
    
+ 
  • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
    • 
+ 
  • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}
    • 
+

+

+
+
その他

+
+

+
    
+ 
  • {{CSSxRef("-moz-alt-content")}} (see {{Bug(11011)}})
    • 
+

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/none/index.html b/files/ja/web/css/none/index.html
new file mode 100644
index 0000000000..34dd66b6f6
--- /dev/null
+++ b/files/ja/web/css/none/index.html
@@ -0,0 +1,31 @@
+---
+title: none
+slug: Web/CSS/none
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/float
+---
+

+  {{CSSRef()}}

+
概要

+
none キーワードは、多くの CSS プロパティで使用される共通の値です。デフォルト値であることが多いですが、そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{ Cssxref("normal") }} が有ります。

+
none 値が使用可能な CSS プロパティ

+
    
+  
  • {{ Cssxref("float") }}
    
+    要素はフロートしません。
    • 
+  
  • {{ Cssxref("text-decoration") }}
    
+    要素の装飾を行いません。
    • 
+  
  • {{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}
    
+    高さ・幅を特定値で制限しません。
    • 
+  
  • {{ Cssxref("background-image") }}
    • 
+  
  • {{ Cssxref("border-style") }}
    • 
+  
  • {{ Cssxref("clear") }}
    • 
+  
  • {{ Cssxref("content") }}
    • 
+  
  • {{ Cssxref("counter-increment") }}
    • 
+  
  • {{ Cssxref("counter-reset") }}
    • 
+  
  • {{ Cssxref("display") }}
    • 
+  
  • {{ Cssxref("list-style-type") }}
    • 
+  
  • {{ Cssxref("quotes") }}
    • 
+  
  • {{ Cssxref("text-transform") }}
    • 
+

diff --git a/files/ja/web/css/normal/index.html b/files/ja/web/css/normal/index.html
new file mode 100644
index 0000000000..e7384cd4d9
--- /dev/null
+++ b/files/ja/web/css/normal/index.html
@@ -0,0 +1,36 @@
+---
+title: normal
+slug: Web/CSS/normal
+tags:
+  - CSS Reference
+translation_of: Web/CSS/font-variant
+---
+

+  {{CSSRef}}

+
概要

+
normal は幾つかの CSS プロパティで使用される一般的な値です。そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{Cssxref("none")}} が有ります。

+
normal が使用可能な CSS プロパティ

+

+  

+    {{Cssxref("font-weight")}}

+  

+    normal を指定した場合、font-weight プロパティの基準値（400）と同等となります。太字にも細字にもなりません。

+  

+    {{Cssxref("font-style")}}

+  

+    normal を指定した場合、italic や oblique でない、通常のスタイルで文字がレンダリングされます。

+  

+    {{Cssxref("word-spacing")}}

+  

+    normal を指定した場合、フォントの標準的な字間で文字がレンダリングされます。

+

+
他にも、以下の様なプロパティ等で normal が指定可能です。

+
    
+  
  • {{Cssxref("font-variant")}}
    • 
+  
  • {{Cssxref("letter-spacing")}}
    • 
+  
  • {{Cssxref("white-space")}}
    • 
+  
  • {{Cssxref("speak")}}
    • 
+  
  • {{Cssxref("unicode-bidi")}}
    • 
+  
  • {{Cssxref("line-height")}}
    • 
+  
  • {{Cssxref("content")}}
    • 
+

diff --git a/files/ja/web/css/number/index.html b/files/ja/web/css/number/index.html
new file mode 100644
index 0000000000..3c7aab98aa
--- /dev/null
+++ b/files/ja/web/css/number/index.html
@@ -0,0 +1,92 @@
+---
+title: 
+slug: Web/CSS/number
+tags:
+  - CSS
+  - CSS データ型
+  - Number
+  - Reference
+  - ウェブ
+  - レイアウト
+  - 数値
+translation_of: Web/CSS/number
+---
+
{{CSSRef}}

+
+
CSS の <number> データ型は、整数または小数部分のある数値を表します。

+
+
構文

+
+
<number> の構文は {{CSSxRef("<integer>")}} 構文を拡張したものです。小数は . と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。

+
+
補間

+
+
<number> データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられた timing function で決められます。

+
+
例

+
+
有効な数値

+
+
12          生の <integer> は <number> でもある
+4.01        正の実数
+-456.8      負の実数
+0.0         ゼロ
++0.0        + に続くゼロ
+-0.0        - に続くゼロ
+.60         前のゼロがない小数値
+10e3        Scientific notation
+-3.4e-2     Complicated scientific notation
+

+
+
無効な数値

+
+
12.         小数点の後ろには数字が続かなくてはなりません
++-12.2      前に置ける +/- は 1 つだけです
+12.1.1      小数点は1つしか置けません
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Values", "#numbers", "<number>")}}{{Spec2("CSS4 Values")}}重要な変更なし
{{SpecName("CSS3 Values", "#numbers", "<number>")}}{{Spec2("CSS3 Values")}}重要な変更なし
{{SpecName("CSS2.1", "syndata.html#numbers", "<number>")}}{{Spec2("CSS2.1")}}明示的な定義
{{SpecName("CSS1", "", "<number>")}}{{Spec2("CSS1")}}暗黙的な定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.number")}}

+
+
関連情報

+
+
    
+ 
  • {{CSSxRef("<integer>")}}
    • 
+

diff --git a/files/ja/web/css/object-fit/index.html b/files/ja/web/css/object-fit/index.html
new file mode 100644
index 0000000000..42e6f068cd
--- /dev/null
+++ b/files/ja/web/css/object-fit/index.html
@@ -0,0 +1,169 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 画像
+  - object-fit
+  - リファレンス
+  - レイアウト
+  - 寸法
+translation_of: Web/CSS/object-fit
+---
+
{{CSSRef}}

+
+
CSS の object-fit プロパティは、置換要素、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。

+
+
要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。

+
+
{{EmbedInteractiveExample("pages/css/object-fit.html")}}

+
+
+
+
構文

+
+
object-fit プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。

+
+
値

+
+

+ 
contain

+ 
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。

+ 
cover

+ 
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。

+ 
fill

+ 
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。

+ 
none

+ 
置換コンテンツは、拡大縮小されません。

+ 
scale-down

+ 
コンテンツは none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>

+
+
CSS

+
+
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+

+
+
出力結果

+
+
{{ EmbedLiveSample('Example', 500, 450) }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.object-fit")}}

+
+
関連情報

+
+
    
+ 
  • 他の画像関連 CSS プロパティ: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
    • 
+ 
  • {{cssxref("background-size")}}
    • 
+

diff --git a/files/ja/web/css/object-position/index.html b/files/ja/web/css/object-position/index.html
new file mode 100644
index 0000000000..c52de24924
--- /dev/null
+++ b/files/ja/web/css/object-position/index.html
@@ -0,0 +1,119 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+tags:
+  - CSS
+  - CSS Image
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/object-position
+---
+
{{CSSRef}}

+
+
object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

+
+
You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref("object-fit")}} property.

+
+
{{EmbedInteractiveExample("pages/css/object-position.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* <position> 値 */
+object-position: center top;
+object-position: 100px 50px;
+
+/* グローバル値 */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+

+
+
値

+
+

+ 
<position>

+ 
要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("<position>")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。

+

+
+

+
注: 要素がボックス外にはみ出る位置も指定できます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML コンテンツ

+
+
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+

+
+
CSS コンテンツ

+
+
img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+

+
+
The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

+
+
出力

+
+
{{EmbedLiveSample('Example', '100%','300px' )}}

+
+
仕様

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書策定状況コメント
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}最初期の定義

+
+
ブラウザ実装状況

+
+

+
+
+
{{Compat("css.properties.object-position")}}

+

+
+
関連情報

+
+
    
+ 
  • ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • 
+

diff --git a/files/ja/web/css/offset-distance/index.html b/files/ja/web/css/offset-distance/index.html
new file mode 100644
index 0000000000..f0c4b4f7e0
--- /dev/null
+++ b/files/ja/web/css/offset-distance/index.html
@@ -0,0 +1,103 @@
+---
+title: offset-distance
+slug: Web/CSS/offset-distance
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - CSS プロパティ
+  - CSS モーションパス
+  - Experimental
+  - Motion Path
+  - Reference
+  - motion-offset
+  - offset-distance
+  - 'recipe:css-property'
+  - モーションパス
+translation_of: Web/CSS/offset-distance
+---
+
{{CSSRef}}

+
+
offset-distance は CSS プロパティで、 {{CSSxRef("offset-path")}} 上の要素を配置する位置を指定します。

+
+
{{EmbedInteractiveExample("pages/css/offset-distance.html")}}

+
+
構文

+
+
/* 既定値 */
+offset-distance: 0;
+
+/* offset-path の途中 */
+offset-distance: 50%;
+
+/* パス上の固定距離の位置 */
+offset-distance: 40px;

+
+

+ 
{{cssxref('<length-percentage>')}}

+ 
要素が ({{cssxref('offset-path')}} で定義された) パス上のどのくらいの距離にあるかを指定する長さです。

+ 
100% はパスの全長を表します。 (offset-path が基本シェイプまたは path() として定義されている場合)。

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
CSS モーションパスのモーションアスペクトは、一般に offset-distance プロパティのアニメーションから来ています。要素をパス全体の上でアニメーションさせたい場合は、その {{cssxref('offset-path')}} を定義し、 offset-distance に 0% から 100% までを取るアニメーションを設定してください。

+
+
HTML

+
+
<div id="motion-demo"></div>
+

+
+
CSS

+
+
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}

+
+
結果

+
+
{{EmbedLiveSample('Examples', '100%', 150)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}}{{Spec2('Motion Path Level 1')}}初回定義

+
+
{{CSSInfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.offset-distance")}}

diff --git a/files/ja/web/css/offset-path/index.html b/files/ja/web/css/offset-path/index.html
new file mode 100644
index 0000000000..5826f9f32c
--- /dev/null
+++ b/files/ja/web/css/offset-path/index.html
@@ -0,0 +1,190 @@
+---
+title: offset-path
+slug: Web/CSS/offset-path
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS モーションパス
+  - Experimental
+  - Motion Path
+  - Reference
+  - motion-path
+  - offset-path
+  - 'recipe:css-property'
+  - モーションパス
+translation_of: Web/CSS/offset-path
+---
+
{{cssref}}

+
+
offset-path は CSS のプロパティで、要素がたどる移動経路と、親コンテナーまたは SVG 座標系の中での要素の配置を指定します。

+
+
{{EmbedInteractiveExample("pages/css/offset-path.html")}}

+
+
構文

+
+
/* 既定値 */
+offset-path: none;
+
+/* 関数値 */
+offset-path: ray(45deg closest-side contain);
+
+/* URL */
+offset-path: url(#path);
+
+/* 図形 */
+offset-path: circle(50% at 25% 25%);
+offset-path: inset(50% 50% 50% 50%);
+offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
+offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
+
+/* 位置ボックス */
+offset-path: margin-box;
+offset-path: stroke-box;
+
+/* グローバル値 */
+offset-path: inherit;
+offset-path: initial;
+offset-path: unset;
+

+
+
値

+
+

+ 
ray()

+ 
最大3つの値を取り、ボックスの位置から始まり、指定された角度で定義された方向に進む線分であるパスを定義します。定義は角度で、 CSS のグラデーションの角度と同様に、 0deg を上にして正の角度を時計回り方向に増加させます。続く寸法の値は CSS の半径方向のグラデーションの寸法の値に似ており、 closest-side から farthest-corner まで、そしてキーワード contain です。

+ 
url()

+ 
SVG 図形の ID の参照です。 -- circle, ellipse, line, path, polygon, polyline, rect -- のいずれかで、図形の形状をパスとして使用します。

+ 
<basic-shape>

+ 
CSS シェイプ、たとえば circle(), ellipse(), inset(), polygon(), path() を指定します。

+ 

+ 

+  
path()

+  
SVG 座標の構文で定義されたパス文字列です。

+ 

+ 

+ 
none

+ 
モーションパスを全く定義しません。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
解説

+
+
このプロパティは、移動する要素がたどることができる経路を定義します。オフセットの経路は1つまたは複数のサブ経路で指定された経路か、スタイル付けされていない基本図形の形状で指定します。オフセット経路上の要素の正確な位置は、 {{cssxref("offset-distance")}} プロパティで決定されます。それぞれの図形または経路は、初期位置を {{cssxref("offset-distance")}} の 0 の計算値で定義し、オブジェクトの回転方向を指定する初期方向を初期位置にします。

+
+
注: 仕様書の初期の版では、このプロパティを motion-path と呼んでいました。It was changed to offset-path because the property describe static positions, not motion.

+
+
例

+
+
以下の例は CodePen の例から抜粋しています。対応ブラウザーではライブ編集が可能です。

+
+
CSS コードサンプルの offset-path プロパティは、 SVG の <path> 要素と同じモーションパスを定義しています。このパスは、 SVG コードのレンダリングを見てもわかるように、煙突のある家の線画になっています。

+
+
CSS

+
+
.scissorHalf {
+  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
+  animation: followpath 4s linear infinite;
+}
+
+@keyframes followpath {
+   to {
+     motion-offset: 100%;
+     offset-distance: 100%;
+   }
+}

+
+
SVG

+
+
ハサミの上半分と下半分は、 offset-path で定義されたモーションパスの始点に沿って配置されていなければ、キャンバスの左上に表示されます。

+
+
<svg xmlns="http://www.w3.org/2000/svg"
+     width="700"
+     height="450"
+     viewBox="350 0 1400 900">
+  <title>House and Scissors</title>
+  <rect x="595"
+        y="423"
+        width="610"
+        height="377"
+        fill="blue" />
+  <polygon points="506,423 900,190 1294,423"
+           fill="yellow" />
+  <polygon points="993,245 993,190 1086,190 1086,300"
+           fill="red" />
+  <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
+        fill="none"
+        stroke="black"
+        stroke-width="13"
+        stroke-linejoin="round"
+        stroke-linecap="round" />
+  <path id="firstScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
+        transform="translate(0,0)"
+        fill="green"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" />
+  <path id="secondScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
+        transform="translate(0,0)"
+        fill="forestgreen"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" />
+</svg>

+
+
ライブ結果

+
+
{{EmbedLiveSample('Examples', '100%', '450')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}{{Spec2('Motion Path Level 1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.offset-path")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("offset")}}
    • 
+ 
  • {{cssxref("offset-distance")}}
    • 
+ 
  • {{cssxref("offset-rotation")}}
    • 
+ 
  • SVG <path> 
    • 
+

+
+
その他のデモ:

+
+
diff --git a/files/ja/web/css/offset-position/index.html b/files/ja/web/css/offset-position/index.html
new file mode 100644
index 0000000000..1ec10fb9fc
--- /dev/null
+++ b/files/ja/web/css/offset-position/index.html
@@ -0,0 +1,113 @@
+---
+title: offset-position
+slug: Web/CSS/offset-position
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - Experimental
+  - Property
+  - offset-position
+  - 'recipe:css-property'
+translation_of: Web/CSS/offset-position
+---
+
{{CSSRef}}{{seecompattable}}

+
+
offset-position は CSS のプロパティで、 {{cssxref("offset-path")}} の初期位置を定義します。

+
+
構文

+
+
/* キーワード値 */
+offset-position: auto;
+offset-position: top;
+offset-position: bottom;
+offset-position: left;
+offset-position: right;
+offset-position: center;
+
+/* <percentage> 値 */
+offset-position: 25% 75%;
+
+/* <length> 値 */
+offset-position: 0 0;
+offset-position: 1cm 2cm;
+offset-position: 10ch 8em;
+
+/* 辺とオフセット値 */
+offset-position: bottom 10px right 20px;
+offset-position: right 3em bottom 10px;
+offset-position: bottom 10px right;
+offset-position: top right 10px;
+
+/* グローバル値 */
+offset-position: inherit;
+offset-position: initial;
+offset-position: unset;
+

+
+
値

+
+

+ 
auto

+ 
初期位置は {{cssxref("position")}} プロパティで指定されたボックスの位置です。

+ 
<position>

+ 
{{cssxref("<position>")}} です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。1つから4つの値を使って定義することができます。キーワード以外の値を2つ指定した場合、1つ目の値は水平方向の位置を、2つ目の値は垂直方向の位置を表します。1つの値のみを指定した場合は、2番目の値は center とみなされます。3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 {{cssxref("background-position")}} を参照してください。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
初期オフセット位置の設定

+
+
<div id="motion-demo"></div>
+

+
+
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  offset-position: left top;
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}{{Spec2('Motion Path Level 1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.offset-position")}}

diff --git a/files/ja/web/css/offset-rotate/index.html b/files/ja/web/css/offset-rotate/index.html
new file mode 100644
index 0000000000..8b0742cf80
--- /dev/null
+++ b/files/ja/web/css/offset-rotate/index.html
@@ -0,0 +1,128 @@
+---
+title: offset-rotate
+slug: Web/CSS/offset-rotate
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - CSS プロパティ
+  - CSS モーションパス
+  - Experimental
+  - Reference
+  - offset-rotate
+  - 'recipe:css-property'
+translation_of: Web/CSS/offset-rotate
+---
+
{{CSSRef}}

+
+
offset-rotate は CSS のプロパティで、要素が {{cssxref("offset-path")}} に沿って配置された場合の向き/方向を定義します。

+
+
{{EmbedInteractiveExample("pages/css/offset-rotate.html")}}

+
+

+
注: 初期のころの仕様書では、このプロパティを motion-rotation と呼んでいました。

+

+
+
構文

+
+
/* パスの方向に従い、任意で角度を追加 */
+offset-rotate: auto;
+offset-rotate: auto 45deg;
+
+/* パスの方向に従うが、 auto とは逆の方向を向く */
+offset-rotate: reverse;
+
+/* パスの位置に関係なく、決められた回転を維持する */
+offset-rotate: 90deg;
+offset-rotate: .5turn;

+
+

+ 
auto

+ 

+ 
要素は正方向の X 軸から見た {{cssxref("offset-path")}} 方向の角度で回転します。これが既定値です。

+ 

+ 
{{cssxref("<angle>")}}

+ 

+ 
要素は指定された回転角によって、時計方向に固定値で回転変換されます。

+ 

+ 
auto <angle>

+ 

+ 
auto に {{cssxref("<angle>")}} が続いた場合、その角度がautoの計算値に加算されます。

+ 

+ 
reverse

+ 

+ 
要素は auto と同様に回転しますが、反対方向を向きます。 auto 180deg の値を指定したのと同等です。

+ 

+ 

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<div></div>
+<div></div>
+<div></div>

+
+
CSS

+
+
div {
+  width: 40px;
+  height: 40px;
+  background: #2BC4A2;
+  margin: 20px;
+  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
+  animation: move 5000ms infinite alternate ease-in-out;
+
+  offset-path: path('M20,20 C20,50 180,-10 180,20');
+}
+div:nth-child(1) {
+  offset-rotate: auto;
+}
+div:nth-child(2) {
+  offset-rotate: auto 90deg;
+}
+div:nth-child(3) {
+  offset-rotate: 30deg;
+}
+
+@keyframes move {
+  100% {
+    offset-distance: 100%;
+  }
+}

+
+
結果

+
+
{{EmbedLiveSample('Examples', '100%', '200')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}{{Spec2('Motion Path Level 1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.offset-rotate")}}

diff --git a/files/ja/web/css/offset/index.html b/files/ja/web/css/offset/index.html
new file mode 100644
index 0000000000..5d1bbba29d
--- /dev/null
+++ b/files/ja/web/css/offset/index.html
@@ -0,0 +1,122 @@
+---
+title: offset
+slug: Web/CSS/offset
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/offset
+---
+
{{CSSRef}}

+
+
offset は CSS の一括指定プロパティで、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。

+
+

+
注: 仕様書の早期の版では、このプロパティを motion と呼んでいました。

+

+
+
構成要素のプロパティ

+
+
このプロパティは以下の CSS プロパティの一括指定です。

+
+
    
+ 
  • {{cssxref("offset-anchor")}}
    • 
+ 
  • {{cssxref("offset-distance")}}
    • 
+ 
  • {{cssxref("offset-path")}}
    • 
+ 
  • {{cssxref("offset-position")}}
    • 
+ 
  • {{cssxref("offset-rotate")}}
    • 
+

+
+
構文

+
+
/* オフセット位置 */
+offset: auto;
+offset: 10px 30px;
+offset: none;
+
+/* オフセット経路 */
+offset: ray(45deg closest-side);
+offset: path('M 100 100 L 300 100 L 200 300 z');
+offset: url(arc.svg);
+
+/* オフセット経路に距離と回転が加わったもの */
+offset: url(circle.svg) 100px;
+offset: url(circle.svg) 40%;
+offset: url(circle.svg) 30deg;
+offset: url(circle.svg) 50px 20deg;
+
+/* オフセットアンカーを含む */
+offset: ray(45deg closest-side) / 40px 20px;
+offset: url(arc.svg) 2cm / 0.5cm 3cm;
+offset: url(arc.svg) 30deg / 50px 100px;
+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
経路に沿って要素を動かす

+
+
HTML

+
+
<div id="offsetElement"></div>
+

+
+
CSS

+
+
@keyframes move {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+#offsetElement {
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
+  animation: move 3s linear infinite;
+}
+

+
+
結果

+
+
{{EmbedLiveSample("Animating_an_element_along_a_path", 350, 350)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}{{Spec2('Motion Path Level 1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.offset")}}

diff --git a/files/ja/web/css/opacity/index.html b/files/ja/web/css/opacity/index.html
new file mode 100644
index 0000000000..68e73df742
--- /dev/null
+++ b/files/ja/web/css/opacity/index.html
@@ -0,0 +1,154 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS プロパティ
+  - Opacity
+  - Reference
+  - 不透明度
+translation_of: Web/CSS/opacity
+---
+
{{CSSRef}}

+
+
CSS の opacity プロパティは、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。

+
+
{{EmbedInteractiveExample("pages/css/opacity.html")}}

+
+
+
+
この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。

+
+
このプロパティを 1 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。

+
+
もし、子要素に透明度を適用したくない場合は、以下のように代わりに {{cssxref("background")}} プロパティを使用してください。

+
+
background: rgba(0, 0, 0, 0.4);

+
+
構文

+
+
値

+
+

+ 
<alpha-value>

+ 
{{cssxref("number")}} を 0.0 以上 1.0 以下で、また {{cssxref("percentage")}} を 0% 以上 100% 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値におさめられます。
+ 
+  
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+  
+ 
値意味
0要素は完全に透明です (つまり、不可視です)
{{cssxref("number")}} が 0 より大きく 1 未満の何れかの値要素は半透明です (つまり、要素の背後のコンテンツが見えます)。
1 (既定値)要素は完全に不透明です (中身が詰まって見えます)

+ 

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
基本的な例

+
+
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Barely see the text over the background */
+}
+.medium {
+  opacity: 0.5; /* See the text more clearly over the background */
+}
+.heavy {
+  opacity: 0.9; /* See the text very clearly over the background */
+}
+

+
+
<div class="light">You can barely see this.</div>
+<div class="medium">This is easier to see.</div>
+<div class="heavy">This is very easy to see.</div>
+

+
+
{{EmbedLiveSample('Basic_example', '640', '64')}}

+
+
:hover を使った透明度の変化

+
+
img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 and lower */
+  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}

+
+
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN ロゴ" width="128" height="146"
+  class="opacity">
+

+
+
{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}

+
+
アクセシビリティの考慮事項

+
+
文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。

+
+
色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Colors', '#transparency', 'opacity')}}{{Spec2('CSS4 Colors')}}opacity の値にパーセント値を定義。
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.opacity", 2)}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/order/index.html b/files/ja/web/css/order/index.html
new file mode 100644
index 0000000000..42a74e98ea
--- /dev/null
+++ b/files/ja/web/css/order/index.html
@@ -0,0 +1,113 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/order
+---
+
{{CSSRef}}

+
+
CSS の order プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。

+
+
{{EmbedInteractiveExample("pages/css/order.html")}}

+
+
+
+
構文

+
+
/* <integer> 値 */
+order: 5;
+order: -5;
+
+/* グローバル値 */
+order: inherit;
+order: initial;
+order: unset;

+
+

+
メモ: order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order を speech など、視覚的ではないメディアで使用してはいけません。

+

+
+
値

+
+

+ 
{{cssxref("<integer>")}}

+ 
アイテムが割り当てられる順序グループを表します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
基本的な HTML 一式:

+
+
<header>...</header>
+<main>
+  <article>Article</article>
+  <nav>Nav</nav>
+  <aside>Aside</aside>
+</main>
+<footer>...</footer>

+
+
以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。

+
+
main { display: flex;  text-align:center; }
+main > article { flex:1;        order: 2; }
+main > nav     { width: 200px;  order: 1; }
+main > aside   { width: 200px;  order: 3; }

+
+
結果

+
+
{{ EmbedLiveSample('Example') }}

+
+
アクセシビリティの考慮事項

+
+
order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.order")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/orphans/index.html b/files/ja/web/css/orphans/index.html
new file mode 100644
index 0000000000..1e57e7d183
--- /dev/null
+++ b/files/ja/web/css/orphans/index.html
@@ -0,0 +1,115 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 断片化
+  - Reference
+  - Web
+translation_of: Web/CSS/orphans
+---
+
{{CSSRef}}

+
+
orphans は CSS のプロパティで、ページ、領域、段の最下部に表示されるブロックコンテナーの最小行数を設定します。

+
+
/* <integer> 値 */
+orphans: 2;
+orphans: 3;
+
+/* Global values */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+

+
+

+
組版において、 orphan とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)

+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
{{cssxref("<integer>")}}

+ 
区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<div>
+  <p>これは幾らかのテキストを含む最初の段落です。</p>
+  <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。</p>
+  <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: #8cffa0;
+  height: 150px;
+  columns: 3;
+  orphans: 3;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+

+
+
結果

+
+
{{EmbedLiveSample("Example", 380, 150)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}{{Spec2('CSS3 Fragmentation')}}orphans をページ、領域、段など、断片の種類によらず適用するように拡張
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}{{Spec2('CSS2.1')}}初回定義

+
+
ブラウザーの対応

+
+

+
+
+
{{Compat("css.properties.orphans")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/other_resources/index.html b/files/ja/web/css/other_resources/index.html
new file mode 100644
index 0000000000..1a978eade2
--- /dev/null
+++ b/files/ja/web/css/other_resources/index.html
@@ -0,0 +1,27 @@
+---
+title: Other Resources
+slug: Web/CSS/Other_Resources
+tags:
+  - CSS
+translation_of: Web/CSS
+---
+
W3C の文書

+
+
+
+
その他の資料

+
diff --git a/files/ja/web/css/outline-color/index.html b/files/ja/web/css/outline-color/index.html
new file mode 100644
index 0000000000..6beb458ce2
--- /dev/null
+++ b/files/ja/web/css/outline-color/index.html
@@ -0,0 +1,138 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - CSS User Interace
+  - HTML Colors
+  - HTML Styles
+  - Outline
+  - Reference
+  - Styles
+  - Styling HTML
+  - outline-color
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-color
+---
+
{{CSSRef}}

+
+
outline-color は CSS のプロパティで、要素の輪郭線の色を設定します。

+
+
{{EmbedInteractiveExample("pages/css/outline-color.html")}}

+
+
+
+
構文

+
+
/* <color> 値 */
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+outline-color: blue;
+
+/* キーワード値 */
+outline-color: invert;
+
+/* グローバル値 */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+

+
+
outline-color プロパティは、以下に挙げた値のうちの一つで指定します。

+
+
値

+
+

+ 
{{cssxref("<color>")}}

+ 
輪郭線の色で、 <color> で指定します。

+ 
invert

+ 
輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。

+

+
+
解説

+
+
輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

+
+
輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。

+
+
アクセシビリティの考慮

+
+
独自のフォーカススタイルを作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

+
+
色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+
+
+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
青い実線の輪郭線の設定

+
+
HTML

+
+
<p>見ての通り、輪郭線は青です。</p>

+
+
CSS

+
+
p {
+  outline: 2px solid;      /* 輪郭線の幅と種類 */
+  outline-color: #0000FF;  /* 輪郭線を青にする */
+  margin: 5px;
+}

+
+
結果

+
+
{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}初回定義

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("css.properties.outline-color")}}

+

+
+
関連情報

+
+
    
+ 
  • {{cssxref("<color>")}} データ型
    • 
+ 
  • その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • 
+ 
  • CSS を使用した HTML の要素への色の適用
    • 
+

diff --git a/files/ja/web/css/outline-offset/index.html b/files/ja/web/css/outline-offset/index.html
new file mode 100644
index 0000000000..f0ce7a3177
--- /dev/null
+++ b/files/ja/web/css/outline-offset/index.html
@@ -0,0 +1,87 @@
+---
+title: outline-offset
+slug: Web/CSS/outline-offset
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - CSS プロパティ
+  - CSS 輪郭線
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-offset
+---
+
{{CSSRef}}

+
+
CSS の outline-offset プロパティは、要素の辺や境界線と輪郭線との空間の量を設定します。

+
+
{{EmbedInteractiveExample("pages/css/outline-offset.html")}}

+
+
+
+
輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線との空間は透明です。つまり、親要素の背景と同じになります。

+
+
構文

+
+
/* <length> 値 */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* グローバル値 */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 0 を指定すると輪郭線は要素との隙間を置かずに表示されます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
p {
+  outline: 1px dashed red;
+  outline-offset: 10px;
+  background: yellow;
+  border: 1px solid blue;
+  margin: 15px;
+}
+

+
+
<p>Gallia est omnis divisa in partes tres.</p>

+
+
{{EmbedLiveSample('Example')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.outline-offset")}}

diff --git a/files/ja/web/css/outline-style/index.html b/files/ja/web/css/outline-style/index.html
new file mode 100644
index 0000000000..b8b6f2a897
--- /dev/null
+++ b/files/ja/web/css/outline-style/index.html
@@ -0,0 +1,243 @@
+---
+title: outline-style
+slug: Web/CSS/outline-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 輪郭線
+  - Outline
+  - Reference
+  - outline-style
+translation_of: Web/CSS/outline-style
+---
+
{{CSSRef}}

+
+
CSS の outline-style プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。

+
+
{{EmbedInteractiveExample("pages/css/outline-style.html")}}

+
+
+
+
たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。

+
+
構文

+
+
/* キーワード値 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* グローバル値 */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+

+
+
outline-style プロパティは、以下に挙げた値のうちの一つで指定します。

+
+
値

+
+

+ 

+ 
auto

+ 

+ 
ユーザーエージェントに輪郭線の描画を任せます。

+ 

+ 
none

+ 

+ 
輪郭線を描きません。{{cssxref("outline-width")}} は 0 です。

+ 

+ 
dotted

+ 

+ 
点線の輪郭線です。

+ 

+ 
dashed

+ 

+ 
破線の輪郭線です。

+ 

+ 
solid

+ 

+ 
1本の実線の輪郭線です。

+ 

+ 
double

+ 

+ 
2本の実線の輪郭線です。{{cssxref("outline-width")}}は2本の線とその隙間の合計です。

+ 

+ 
groove

+ 

+ 
ページに刻まれたかのように見える輪郭線です。

+ 

+ 
ridge

+ 

+ 
grooveの逆で、ページから押し出されたように見える輪郭線です。

+ 

+ 
inset

+ 

+ 
領域がページに埋め込まれたかのように見える輪郭線です。

+ 

+ 
outset

+ 

+ 
insetの逆で、領域がページから隆起しているように見える輪郭線です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
例 0 - auto

+
+
値autoは、輪郭線スタイルがカスタムであることを表します。 — 典型的には、プラットフォーム用のユーザーインターフェースのデフォルトのスタイル、または、CSSで詳細に記述できるスタイルよりも表現豊かなスタイル(例:輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線)

+
+
HTML

+
+
<div>
+  <p class="auto">Outline Demo</p>
+</div> 

+
+
CSS

+
+
.auto {
+  outline-style: auto; /* "outline: auto" と同じ */
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; } 

+
+
{{ EmbedLiveSample('Example_0_-_auto') }}

+
+
例 1 - dotted と dashed

+
+
HTML

+
+
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div> 

+
+
CSS

+
+
.dotted {
+  outline-style: dotted; /* "outline: dotted" と同じ */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; } 

+
+
{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}

+
+
例 2 - solid と double

+
+
HTML

+
+
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div> 

+
+
CSS

+
+
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; } 

+
+
{{ EmbedLiveSample('Example_2_-_solid_and_double') }}

+
+
例 3 - groove と ridge

+
+
HTML

+
+
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>

+
+
CSS

+
+
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }

+
+
{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}

+
+
例 4 - inset と outset

+
+
HTML

+
+
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>

+
+
CSS

+
+
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }

+
+
{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}auto値を追加。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.outline-style")}}

diff --git a/files/ja/web/css/outline-width/index.html b/files/ja/web/css/outline-width/index.html
new file mode 100644
index 0000000000..d70fcf6658
--- /dev/null
+++ b/files/ja/web/css/outline-width/index.html
@@ -0,0 +1,141 @@
+---
+title: outline-width
+slug: Web/CSS/outline-width
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - Layout
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-width
+---
+
{{CSSRef}}

+
+
CSS の outline-width プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。

+
+
{{EmbedInteractiveExample("pages/css/outline-width.html")}}

+
+
+
+
たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。

+
+
構文

+
+
/* キーワード値 */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* <length> 値 */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* グローバル値 */
+outline-width: inherit;
+

+
+
outline-width プロパティは、以下に挙げた値のうちの一つで指定します。

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
輪郭線の太さを <length> で指定します。

+ 
thin

+ 
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 1px です。

+ 
medium

+ 
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 3px です。

+ 
thick

+ 
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 5px です。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
要素の輪郭線の幅の設定

+
+
HTML

+
+
<span id="thin">thin</span>
+<span id="medium">medium</span>
+<span id="thick">thick</span>
+<span id="twopixels">2px</span>
+<span id="oneex">1ex</span>
+<span id="em">1.2em</span>
+

+
+
CSS

+
+
span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#em {
+  outline-width: 1.2em;
+}
+
+

+
+
結果

+
+
{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.outline-width")}}

diff --git a/files/ja/web/css/outline/index.html b/files/ja/web/css/outline/index.html
new file mode 100644
index 0000000000..8d5b0c20e9
--- /dev/null
+++ b/files/ja/web/css/outline/index.html
@@ -0,0 +1,145 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - CSS 輪郭線
+  - Layout
+  - Reference
+  - レイアウト
+translation_of: Web/CSS/outline
+---
+
{{CSSRef}}

+
+
outline は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ ({{cssxref("outline-style")}}, {{cssxref("outline-width")}}, {{cssxref("outline-color")}}) を単一の宣言で設定するための一括指定です。

+
+
{{EmbedInteractiveExample("pages/css/outline.html")}}

+
+
+
+
他の一括指定プロパティと同様に、省略された値は初期値に設定されます。

+
+
境界線と輪郭線

+
+
境界線と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。

+
+
    
+ 
  • 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。
    • 
+ 
  • 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。
    • 
+

+
+
構文

+
+
/* 種類 */
+outline: solid;
+
+/* 色 | 種類 */
+outline: #f66 dashed;
+
+/* 種類 | 幅 */
+outline: inset thick;
+
+/* 色 | 種類 | 幅 */
+outline: green solid 3px;
+
+/* グローバル値 */
+outline: inherit;
+outline: initial;
+outline: unset;
+

+
+
outline プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。

+
+

+
メモ: 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が none だからです。特筆すべき例外は input 要素で、ブラウザーが既定のスタイルを与えます。

+

+
+
値

+
+

+ 
<'outline-color'>

+ 
輪郭線の色を設定します。未指定の場合の既定値は currentcolor です。 {{cssxref("outline-color")}} を参照してください。

+ 
<'outline-style'>

+ 
輪郭線の種類を設定します。未指定の場合の既定値は none です。 {{cssxref("outline-style")}} を参照してください。

+ 
<'outline-width'>

+ 
輪郭線の太さを設定します。未指定の場合の既定値は medium です。 {{cssxref("outline-width")}} を参照してください。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
+

+
+
CSS

+
+
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+

+
+
結果

+
+
{{EmbedLiveSample("Example", "100%", 60)}}

+
+
アクセシビリティの考慮事項

+
+
outline の値を 0 または none にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("css.properties.outline")}}

+

diff --git a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
new file mode 100644
index 0000000000..4ebcf8b854
--- /dev/null
+++ b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
@@ -0,0 +1,96 @@
+---
+title: スクロールアンカリングの紹介
+slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+tags:
+  - CSS
+  - Guide
+  - overflow-anchor
+  - scroll anchoring
+  - スクロールアンカリング
+translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+---
+
{{CSSRef}}

+
+
ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

+
+
スクロールアンカリング (scroll anchoring) はブラウザーの機能で、ユーザーが既に文書の新しい部分にスクロールした後で、コンテンツが読み込まれたことでページ内容の移動が発生してしまう問題を解決するためのものです。

+
+
どのように動作するか

+
+
スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにも関わらず、ユーザーが見ていた個所が表示域に留まり続けます。

+
+
スクロールアンカリングを有効にするには

+
+
何もする必要はありません。この機能は、対応しているブラウザーでは既定で有効になっています。ほとんどの場合において、スクロールを固定することは望み通りでしょう。 — コンテンツが急に移動してしまうのは、誰にとっても使い勝手が悪いものです。

+
+
デバッグする必要がある場合

+
+
スクロールアンカリングを有効にしてページの動作がうまくいかない場合は、一部の scroll イベントリスナーがアンカーノードの動きを補うための余分なスクロールをうまく処理していないことが原因とかもしれません。

+
+
Firefox では about:config で layout.css.scroll-anchoring.enabled を false に変更してスクロールアンカリングを無効にすることで、問題が解決するかどうかを確認できます。

+
+
解決した場合は、Firefox がアンカーとして使用しているノードを layout.css.scroll-anchoring.highlight スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。

+
+
あるノードがアンカーとして適切でないと思われる場合は、以下のように {{cssxref("overflow-anchor")}} を使用してそのノードを除外することができます。

+
+
無効にする必要がある場合は

+
+
仕様書では、新しいプロパティである {{cssxref("overflow-anchor")}} を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。

+
+
指定できる値は、 auto または none のどちらかです。

+
+
    
+ 
  • auto が初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。
    • 
+ 
  • none は、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。
    • 
+

+
+
文書全体でスクロールアンカリングを無効にするには、 {{htmlelement("body")}} 要素にプロパティを指定してください。。

+
+
body {
+  overflow-anchor: none;
+}

+
+
文書の特定の部分でスクロールアンカリングを無効にしたい場合は、そのコンテンツを囲む要素に overflow-anchor: none を指定します。

+
+
.container {
+  overflow-anchor: none;
+}

+
+

+
注: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。

+

+
+
抑制トリガー

+
+
仕様書では、問題になる可能性がある場合はその場でスクロールアンカリングを無効にする、抑制トリガー (suppression triggers) についても説明しています。スクロールアンカリングを指定したノードもしくはその祖先でトリガーが発生した場合、スクロールアンカリングが抑制されます。

+
+
抑制トリガーとなるのは、次のプロパティの計算値 (computed value) が変更された場合です。

+
+
    
+ 
  • {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("bottom")}}
    • 
+ 
  • {{cssxref("margin")}}, {{cssxref("padding")}}
    • 
+ 
  • {{cssxref("width")}} もしくは {{cssxref("height")}} に関連するプロパティすべて
    • 
+ 
  • {{cssxref("transform")}}
    • 
+

+
+
さらに、スクロールボックス内の任意の場所で {{cssxref("position")}} を変更した場合もスクロールアンカリングが無効になります。

+
+

+
バグ {{bug(1584285)}} で、Firefox Nightly に layout.css.scroll-anchoring.suppressions.enabled フラグが追加され、これらのトリガーを無効化できるようになりました。

+

+
+
その他の解説

+
+
+
+
ブラウザーの互換性

+
+
ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、特性クエリを使用して overflow-anchor プロパティに対応しているかどうかを検査してください。

+
+
+
+
{{Compat("css.properties.overflow-anchor")}}

diff --git a/files/ja/web/css/overflow-anchor/index.html b/files/ja/web/css/overflow-anchor/index.html
new file mode 100644
index 0000000000..2324422d27
--- /dev/null
+++ b/files/ja/web/css/overflow-anchor/index.html
@@ -0,0 +1,89 @@
+---
+title: overflow-anchor
+slug: Web/CSS/overflow-anchor
+tags:
+  - CSS
+  - CSS Property
+  - CSS Scroll Anchoring
+  - CSS スクロールアンカリング
+  - CSS プロパティ
+  - Reference
+  - overflow-anchor
+  - スクロールアンカリング
+translation_of: Web/CSS/overflow-anchor
+---
+
{{CSSRef}}

+
+
overflow-anchor は CSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。

+
+
スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。

+
+
構文

+
+
/* キーワード値 */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* グローバル値 */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+

+
+
値

+
+

+ 
auto

+ 
その要素は、スクロール位置を調整するときにアンカー候補になります。

+ 
none

+ 
その要素はアンカー候補として選択されません。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
文書内でスクロールアンカリングを抑止する場合は、 overflow-anchor プロパティを使用してください。

+
+
body {
+  overflow-anchor: none;
+}
+

+
+
    
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}{{Spec2('CSS Scroll Anchoring')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overflow-anchor")}}

+
+
関連項目

+
+
diff --git a/files/ja/web/css/overflow-block/index.html b/files/ja/web/css/overflow-block/index.html
new file mode 100644
index 0000000000..d9214a51bf
--- /dev/null
+++ b/files/ja/web/css/overflow-block/index.html
@@ -0,0 +1,145 @@
+---
+title: overflow-block
+slug: Web/CSS/overflow-block
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-block
+---
+
{{CSSRef}}

+
+
overflow-block は CSS プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。

+
+

+
overflow-block プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。

+

+
+
構文

+
+
/* キーワード値 */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* グローバル値 */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+

+
+
overflow-block プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+
+
値

+
+

+ 
visible

+ 
内容は切り取られず、パディングボックスのブロックの先頭とブロックの末尾の辺よりも外側に表示される可能性があります。

+ 
hidden

+ 
ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

+ 
scroll

+ 
ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

+ 
auto

+ 
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

+

+
+
公式定義

+
+
{{CSSInfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<ul>
+  <li><code>overflow-block:hidden</code> — ボックスの外側のテキストを隠す
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:scroll</code> — 常にスクロールバーを表示
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:visible</code> — 必要に応じてテキストをボックスの外に表示
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+

+
+
CSS

+
+
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 120px;}
+#div2 { overflow-block: scroll; margin-bottom: 120px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+

+
+
結果

+
+

+
{{EmbedLiveSample("Examples", "100%", "780")}}

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}{{ Spec2('CSS3 Overflow') }}

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overflow-block")}}

+
+
関連情報

+
+
    
+ 
  • 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • 
+ 
  • CSS 論理プロパティ
    • 
+ 
  • 書字方向
    • 
+

diff --git a/files/ja/web/css/overflow-inline/index.html b/files/ja/web/css/overflow-inline/index.html
new file mode 100644
index 0000000000..cef446a46c
--- /dev/null
+++ b/files/ja/web/css/overflow-inline/index.html
@@ -0,0 +1,141 @@
+---
+title: overflow-inline
+slug: Web/CSS/overflow-inline
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-inline
+---
+
{{CSSRef}}

+
+
overflow-inline は CSS のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。

+
+

+
overflow-inline プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。

+

+
+
構文

+
+
/* キーワード値 */
+overflow-inline: visible;
+overflow-inline: hidden;
+overflow-inline: scroll;
+overflow-inline: auto;
+
+/* グローバル値 */
+overflow-inline: inherit;
+overflow-inline: initial;
+overflow-inline: unset;
+

+
+
overflow-inline プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+
+
値

+
+

+ 
visible

+ 
内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。

+ 
hidden

+ 
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

+ 
scroll

+ 
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

+ 
auto

+ 
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
インライン方向のはみ出し動作の設定

+
+
HTML

+
+
<ul>
+  <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+    <div id="div4">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+</ul>
+

+
+
CSS

+
+
#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-inline: hidden;}
+#div2 { overflow-inline: scroll;}
+#div3 { overflow-inline: visible;}
+#div4 { overflow-inline: auto;}
+

+
+
結果

+
+

+
{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}}

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}{{Spec2('CSS3 Overflow')}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overflow-inline")}}

+
+
関連情報

+
+
    
+ 
  • 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-block")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • 
+ 
  • CSS 論理プロパティ
    • 
+ 
  • 書字方向
    • 
+

diff --git a/files/ja/web/css/overflow-wrap/index.html b/files/ja/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..8146dc3060
--- /dev/null
+++ b/files/ja/web/css/overflow-wrap/index.html
@@ -0,0 +1,146 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/overflow-wrap
+---
+
{{CSSRef}}

+
+
overflow-wrap は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。

+
+
{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}

+
+
+
+

+
メモ: {{cssxref("word-break")}} とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

+

+
+
このプロパティはもともと、標準外かつ接頭辞のない word-wrap と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 overflow-wrap に改名されたため、 word-wrap は別名になりました。

+
+
構文

+
+
/* キーワード値 */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* グローバル値 */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+

+
+
overflow-wrap プロパティは、下記の値一覧中の一つのキーワードで指定します。

+
+
値

+
+

+ 
normal

+ 
通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。

+ 
anywhere

+ 
あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。

+ 
break-word

+ 
anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
この例は、長い単語が分割されるときの overflow-wrap, word-break, and hyphens の結果を比較するものです。

+
+
HTML

+
+
<p>They say the fishing is excellent at
+  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>normal</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>word-break</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
+<p lang="en">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, English rules)</p>
+<p class="hyphens" lang="de">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, German rules)</p>
+

+
+
CSS

+
+
p {
+   width: 13em;
+   margin: 2px;
+   background: gold;
+}
+
+.ow-anywhere {
+   overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+   overflow-wrap: break-word;
+}
+
+.word-break {
+   word-break: break-all;
+}
+
+.hyphens {
+   hyphens: auto;
+}
+

+
+
結果

+
+
{{ EmbedLiveSample('Example', '100%', 260) }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}{{ Spec2('CSS3 Text') }}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overflow-wrap")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("word-break")}}
    • 
+ 
  • {{cssxref("hyphens")}}
    • 
+ 
  • {{cssxref("text-overflow")}}
    • 
+

diff --git a/files/ja/web/css/overflow-x/index.html b/files/ja/web/css/overflow-x/index.html
new file mode 100644
index 0000000000..6decff8aea
--- /dev/null
+++ b/files/ja/web/css/overflow-x/index.html
@@ -0,0 +1,141 @@
+---
+title: overflow-x
+slug: Web/CSS/overflow-x
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - CSS プロパティ
+  - CSS ボックスモデル
+  - Reference
+  - overflow
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-x
+---
+
{{CSSRef}}

+
+
overflow-x は CSS のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

+
+
{{EmbedInteractiveExample("pages/css/overflow-x.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+overflow-x: visible;
+overflow-x: hidden;
+overflow-x: clip;
+overflow-x: scroll;
+overflow-x: auto;
+
+/* グローバル値 */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+

+
+
overflow-x プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+
+
値

+
+

+ 
visible

+ 
内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 {{cssxref("overflow-y")}} が hidden, scroll, auto のいずれかであり、このプロパティが visible である場合は、暗黙に auto に計算します。

+ 
hidden

+ 
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

+ 
clip {{experimental_inline}}

+ 
hidden のように、内容が要素のパディングボックスで切り取られます。 clip と hidden の違いは、 clip キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。

+ 
scroll

+ 
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

+ 
auto

+ 
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<ul>
+  <li><code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:scroll</code> — 常にスクロールバーを表示
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+    <div id="div4">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+</ul>
+

+
+
CSS

+
+
#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-x: hidden;}
+#div2 { overflow-x: scroll;}
+#div3 { overflow-x: visible;}
+#div4 { overflow-x: auto;}
+

+
+
結果

+
+

+
{{EmbedLiveSample("Examples", "100%", "270")}}

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}{{Spec2('CSS3 Overflow')}}

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overflow-x")}}

+
+
関連情報

+
+
    
+ 
  • 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • 
+

diff --git a/files/ja/web/css/overflow-y/index.html b/files/ja/web/css/overflow-y/index.html
new file mode 100644
index 0000000000..4df48a8ea2
--- /dev/null
+++ b/files/ja/web/css/overflow-y/index.html
@@ -0,0 +1,146 @@
+---
+title: overflow-y
+slug: Web/CSS/overflow-y
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSS ボックスモデル
+  - Reference
+  - overflow
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-y
+---
+
{{CSSRef}}

+
+
overflow-y は CSS のプロパティで、ブロックレベル要素の内容が上下の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

+
+
{{EmbedInteractiveExample("pages/css/overflow-y.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: clip;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* グローバル値 */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+

+
+
overflow-y プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+
+
{{cssxref("overflow-x")}} が hidden, scroll, auto であり、このプロパティが visible (既定値) である場合は、暗黙的に auto と計算されます。

+
+
値

+
+

+ 
visible

+ 
内容は切り取られず、パディングボックスの上下の辺よりも外側に表示される可能性があります。

+ 
hidden

+ 
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

+ 
clip {{experimental_inline}}

+ 
hidden と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 clip と hidden の違いは、 clip キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。

+ 
scroll

+ 
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

+ 
auto

+ 
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<ul>
+  <li><code>overflow-y:hidden</code> — ボックスの外側のテキストを隠す
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:scroll</code> — 常にスクロールバーを表示
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — 必要に応じてテキストをボックスの外に表示
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+

+
+
CSS

+
+
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+

+
+
結果

+
+

+
{{EmbedLiveSample("Example", "100%", "780")}}

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}{{ Spec2('CSS3 Overflow') }}

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overflow-y")}}

+
+
関連情報

+
+
    
+ 
  • 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • 
+

diff --git a/files/ja/web/css/overflow/index.html b/files/ja/web/css/overflow/index.html
new file mode 100644
index 0000000000..cdf127ed15
--- /dev/null
+++ b/files/ja/web/css/overflow/index.html
@@ -0,0 +1,168 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ボックスモデル
+  - Reference
+  - overflow
+  - クリッピング
+  - スクロール
+  - レイアウト
+translation_of: Web/CSS/overflow
+---
+
{{CSSRef}}

+
+
CSS の overflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。これは {{cssxref("overflow-x")}} および {{cssxref("overflow-y")}} の一括指定です。

+
+
{{EmbedInteractiveExample("pages/css/overflow.html")}}

+
+
+
+
選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。

+
+
値を (既定値の) visible 以外の値に指定すると、新たなブロック整形コンテキストを生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。

+
+
overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか、 white-space を nowrap に設定することが必要です。

+
+

+
メモ: 一方の軸をvisible (既定値) に設定して、もう一方を他の値に設定すると、 visible は auto として動作する結果になります。

+

+
+

+
メモ: JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 overflow が hidden に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。

+

+
+
構文

+
+
/* キーワード値 */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* グローバル値 */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+

+
+
overflow プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が overflow-x で、二つ目の値が overflow-y になります。それ以外の場合、 overflow-x および overflow-y は同じ値に設定されます。

+
+
値

+
+

+ 
visible

+ 
内容はクリッピングされず、パディングボックスの外側に表示されることがあります。

+ 
hidden

+ 
内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 {{domxref("HTMLElement.offsetLeft", "offsetLeft")}} のようなプロパティの値を設定する方法などで) スクロールすることができますので、要素はスクロールコンテナーになります。

+ 
clip

+ 
hidden と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 clip と hidden の違いは、 clip キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。

+ 
scroll

+ 
内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。

+ 
auto

+ 
{{Glossary("user agent", "ユーザーエージェント")}}に依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。

+

+
+

+ 
overlay {{deprecated_inline}}

+ 
auto と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。

+

+
+
Mozilla 拡張

+
+

+ 
-moz-scrollbars-none {{obsolete_inline}}[1]

+ 
代わりに overflow:hidden を使ってください。

+ 
-moz-scrollbars-horizontal {{deprecated_inline}}[1]

+ 
{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください。

+ 
-moz-scrollbars-vertical {{deprecated_inline}}[1]

+ 
{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください

+ 
-moz-hidden-unscrollable {{non-standard_inline}}

+ 
内部使用、テーマ向けです。 XML のルート要素と <html>、 <body> が、矢印キーとマウスホイールでスクロールすることを禁止します。

+

+
+
[1] Firefox 63 において、この機能は機能設定に隠されています。 about:config の中で layout.css.overflow.moz-scrollbars.enabled を true に設定してください。

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+  overflow: visible; /* content is not clipped */
+}
+

+
+
visible (既定)

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
p { overflow: hidden; /* スクロールバー表示なし */ }
+

+
+
overflow: hidden

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
p { overflow: scroll; /* 常にスクロールバーを表示 */ }
+

+
+
overflow: scroll

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
p { overflow: auto; /* 必要に応じてスクロールバーを追加 */ }
+

+
+
overflow: auto

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}}
+    
キーワードを一つだけではなく一つまたは二つで利用できるように構文を変更

+   
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}変更なし
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.overflow")}}

+
+
関連情報

+
+
    
+ 
  • 関連 CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • 
+

diff --git a/files/ja/web/css/overscroll-behavior-block/index.html b/files/ja/web/css/overscroll-behavior-block/index.html
new file mode 100644
index 0000000000..e622f27b83
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-block/index.html
@@ -0,0 +1,142 @@
+---
+title: overscroll-behavior-block
+slug: Web/CSS/overscroll-behavior-block
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Logical Properties
+  - CSS Property
+  - NeedsExample
+  - Reference
+  - overscroll-behavior-block
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-block
+---
+
{{CSSRef}}

+
+
overscroll-behavior-block は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。

+
+
全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。

+
+
/* キーワード値 */
+overscroll-behavior-block: auto; /* 既定値 */
+overscroll-behavior-block: contain;
+overscroll-behavior-block: none;
+
+/* グローバル値 */
+overscroll-behavior-block: inherit;
+overscroll-behavior-block: initial;
+overscroll-behavior-block: unset;
+

+
+
構文

+
+
overscroll-behavior-block プロパティは、次の値の一覧のうち一つのキーワードで指定します。

+
+
値

+
+

+ 
auto

+ 
スクロールの末端における既定の振る舞いが通常通りに発生します。

+ 
contain

+ 
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

+ 
none

+ 
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
ブロック方向のオーバースクロールの抑止

+
+
このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と height) が小さく、ビューポート内にきちんと収まりますが、内容は広い height を持つため、垂直にスクロールします。

+
+
既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに overscroll-behavior-block: contain を設定しました。

+
+
HTML

+
+
<main>
+  <div>
+    <div>
+      <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
+    </div>
+  </div>
+</main>

+
+
CSS

+
+
main {
+  height: 3000px;
+  width: 500px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main > div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-block: contain;
+}
+
+div > div {
+  height: 1500px;
+  width: 100%;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 340px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}

+
+
結果

+
+
{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}{{Spec2('CSS Overscroll Behavior')}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overscroll-behavior-block")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/overscroll-behavior-inline/index.html b/files/ja/web/css/overscroll-behavior-inline/index.html
new file mode 100644
index 0000000000..b5def24b0c
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-inline/index.html
@@ -0,0 +1,142 @@
+---
+title: overscroll-behavior-inline
+slug: Web/CSS/overscroll-behavior-inline
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Logical Properties
+  - CSS Property
+  - NeedsExample
+  - Reference
+  - overscroll-behavior-inline
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-inline
+---
+
{{CSSRef}}

+
+
overscroll-behavior-inline は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。

+
+
全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。

+
+
/* キーワード値 */
+overscroll-behavior-inline: auto; /* default */
+overscroll-behavior-inline: contain;
+overscroll-behavior-inline: none;
+
+/* グローバル値 */
+overscroll-behavior-inline: inherit;
+overscroll-behavior-inline: initial;
+overscroll-behavior-inline: unset;
+

+
+
構文

+
+
overscroll-behavior-inline プロパティは、次の値の一覧のうち一つのキーワードで指定します。

+
+
値

+
+

+ 
auto

+ 
スクロールの末端における既定の振る舞いが通常通りに発生します。

+ 
contain

+ 
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

+ 
none

+ 
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
インライン方向のオーバースクロールの抑止

+
+
このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。

+
+
既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに overscroll-behavior-inline: contain を設定しました。

+
+
HTML

+
+
<main>
+  <div>
+    <div>
+      <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
+    </div>
+  </div>
+</main>

+
+
CSS

+
+
main {
+  height: 400px;
+  width: 3000px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main > div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-inline: contain;
+}
+
+div > div {
+  height: 100%;
+  width: 1500px;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 360px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}

+
+
結果

+
+
{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}{{Spec2('CSS Overscroll Behavior')}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overscroll-behavior-x")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/overscroll-behavior-x/index.html b/files/ja/web/css/overscroll-behavior-x/index.html
new file mode 100644
index 0000000000..c2e9bfe6f8
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-x/index.html
@@ -0,0 +1,101 @@
+---
+title: overscroll-behavior-x
+slug: Web/CSS/overscroll-behavior-x
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - overscroll-behavior-x
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-x
+---
+
{{CSSRef}}

+
+
overscroll-behavior-x は CSS のプロパティで、スクロール領域の水平方向の境界に達したときのブラウザーの挙動を設定します。

+
+
全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。

+
+
/* キーワード値 */
+overscroll-behavior-x: auto; /* 既定値 */
+overscroll-behavior-x: contain;
+overscroll-behavior-x: none;
+
+/* グローバル値 */
+overscroll-behavior-x: inherit;
+overscroll-behavior-x: initial;
+overscroll-behavior-x: unset;
+

+
+
構文

+
+
overscroll-behavior-x プロパティは、次の値の一覧のうち一つのキーワードで指定します。

+
+
値

+
+

+ 
auto

+ 
スクロールの末端における既定の振る舞いが通常通りに発生します。

+ 
contain

+ 
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

+ 
none

+ 
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
背後にある要素が横にスクロールするのを防ぐ

+
+
簡単な overscroll-behavior-x の例 (ソースコードも参照) の中で、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い width を持ち、水平にスクロールします。

+
+
既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。これを防ぐために、内側のボックスに overscroll-behavior-x: contain を設定することができます。

+
+
main > div {
+  height: 300px;
+  width: 500px;
+  overflow: auto;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  overscroll-behavior-x: contain;
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}{{Spec2('CSS Overscroll Behavior')}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overscroll-behavior-x")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/overscroll-behavior-y/index.html b/files/ja/web/css/overscroll-behavior-y/index.html
new file mode 100644
index 0000000000..cc58a30784
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-y/index.html
@@ -0,0 +1,95 @@
+---
+title: overscroll-behavior-y
+slug: Web/CSS/overscroll-behavior-y
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - overscroll-behavior-y
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-y
+---
+
{{CSSRef}}

+
+
overscroll-behavior-y は CSS のプロパティで、スクロール領域の垂直方向の境界に達したときのブラウザーの挙動を設定します。

+
+
全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。

+
+
/* キーワード値 */
+overscroll-behavior-y: auto; /* 既定値 */
+overscroll-behavior-y: contain;
+overscroll-behavior-y: none;
+
+/* グローバル値 */
+overscroll-behavior-y: inherit;
+overscroll-behavior-y: initial;
+overscroll-behavior-y: unset;
+

+
+
構文

+
+
overscroll-behavior-y プロパティは、次の値の一覧のうち一つのキーワードで指定します。

+
+
値

+
+

+ 
auto

+ 
スクロールの末端における既定の振る舞いが通常通りに発生します。

+ 
contain

+ 
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

+ 
none

+ 
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
背後にある要素の縦スクロールの抑止

+
+
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} 

+
+
完全な例と説明については、 {{cssxref("overscroll-behavior")}} を参照してください。

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}{{Spec2('CSS Overscroll Behavior')}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overscroll-behavior-y")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/overscroll-behavior/index.html b/files/ja/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..7f409ead4c
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior/index.html
@@ -0,0 +1,113 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - overscroll-behavior
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior
+---
+
{{CSSRef}}

+
+
CSS の overscroll-behavior プロパティは、スクロール領域の境界に達したときにブラウザーが何をするかを設定します。これは {{cssxref("overscroll-behavior-x")}} および {{cssxref("overscroll-behavior-y")}} の一括指定です。

+
+
/* キーワード値 */
+overscroll-behavior: auto; /* 既定 */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* 二つの値 */
+overscroll-behavior: auto contain;
+
+/* グローバル値 */
+overscroll-behavior: inherit;
+overscroll-behavior: initial;
+overscroll-behavior: unset;
+

+
+
既定では、モバイルブラウザーは「跳ね返る」効果を見せたり、ページの最上部又は最下部 (またはその他のスクロール領域) に達したときにページを更新したりする機能を提供する傾向があります。内容がスクロールするページの上に、内容がスクロールするダイアログが表示されている時、ダイアログボックスのスクロール境界に達したときに、下のページがスクロールし始めるという動きをするのに気が付いたかもしれません。 — これはスクロール連鎖と呼ばれています。

+
+
場合によっては、この動きが望ましくないことがあります。 overscroll-behavior を使用すると、望ましくないスクロール連鎖を抑止したり、ブラウザー版の Facebook や Twitter アプリなどに見られる「引いて更新」の類の動きを実現したりすることができます。

+
+
構文

+
+
overscroll-behavior プロパティは、次の値の一覧のうち１つまたは２つのキーワードで指定します。

+
+
２つのキーワードでは、 overscroll-behavior のそれぞれ x 及び y 軸の値を指定します。値が１つだけ指定された場合は、 x および y が同じ値とみなされます。

+
+
値

+
+

+ 
auto

+ 
スクロールの末端における既定の振る舞いが通常通りに発生します。

+ 
contain

+ 
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

+ 
none

+ 
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
下の要素がスクロールするのを抑止する

+
+
overscroll-behavior の例 (ソースコードはこちら) は、全画面で擬似連絡先の一覧を、ダイアログボックスでチャットウィンドウを表示します。

+
+

+
+
どちらの領域もスクロールします。ふつう、チャットウィンドウをスクロール境界に当たるまでスクロールすると、下の連絡先ウィンドウもスクロールを始めます。これは望ましくないことです。これは、次のようにチャットウィンドウに overscroll-behavior-y (overscroll-behavior でも可) を使用することで抑止することができます。

+
+
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} 

+
+
連絡先が冒頭又は末端までスクロールしたときの標準のスクロール末端効果を抑止したいかもしれません (例えば Android 版 Chrome は、冒頭の境界を超えてスクロールしようとするとページを再読み込みします)。これは {{htmlelement("body")}} 要素に overscroll-behavior: none を設定することで抑止することができます。

+
+
body {
+  margin: 0;
+  overscroll-behavior: none;
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('CSS Overscroll Behavior')}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.overscroll-behavior")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/padding-block-end/index.html b/files/ja/web/css/padding-block-end/index.html
new file mode 100644
index 0000000000..85ea817bc0
--- /dev/null
+++ b/files/ja/web/css/padding-block-end/index.html
@@ -0,0 +1,117 @@
+---
+title: padding-block-end
+slug: Web/CSS/padding-block-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-block
+  - padding-block-end
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-block-end
+---
+
{{CSSRef}}

+
+
padding-block-end は CSS のプロパティで、要素のブロック方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。

+
+
{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}

+
+
+
+
構文

+
+
/* <length> 値 */
+padding-block-end: 10px;   /* 絶対的な長さ */
+padding-block-end: 1em;    /* テキストの大きさに対する相対値 */
+
+/* パーセント値 */
+padding-block-end: 5%;     /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+

+
+
値

+
+
padding-block-end プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。

+
+
解説

+
+
これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+
+
+
+
関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きテキストにおけるブロック方向の末尾のパディングの設定

+
+
HTML

+
+
<div>
+  <p class="exampleText">Example text</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_block_end_padding_for_vertical_text", 140, 140)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-block-end")}}

+
+
関連情報

+
+
    
+ 
  • 対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • 
+

diff --git a/files/ja/web/css/padding-block-start/index.html b/files/ja/web/css/padding-block-start/index.html
new file mode 100644
index 0000000000..d937f99753
--- /dev/null
+++ b/files/ja/web/css/padding-block-start/index.html
@@ -0,0 +1,115 @@
+---
+title: padding-block-start
+slug: Web/CSS/padding-block-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-block
+  - padding-block-start
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-block-start
+---
+
{{CSSRef}}

+
+
padding-block-start は CSS のプロパティで、要素のブロック方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。

+
+
{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}

+
+
+
+
構文

+
+
/* <length> 値 */
+padding-block-start: 10px;      /* 絶対的な長さ */
+padding-block-start: 1em;       /* テキストの大きさに対する相対値 */
+
+/* パーセント値 */
+padding-block-start: 5%;        /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+

+
+
値

+
+
padding-block-start プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。

+
+
解説

+
+
これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+
+
関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きテキストにおけるブロック方向の先頭のパディングの設定

+
+
HTML

+
+
<div>
+  <p class="exampleText">Example text</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_block_start_padding_for_vertical_text", 140, 140)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-block-start")}}

+
+
関連情報

+
+
    
+ 
  • 対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • 
+

diff --git a/files/ja/web/css/padding-block/index.html b/files/ja/web/css/padding-block/index.html
new file mode 100644
index 0000000000..c7b929dcaa
--- /dev/null
+++ b/files/ja/web/css/padding-block/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-block
+slug: Web/CSS/padding-block
+tags:
+  - CSS
+  - padding-block
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/padding-block
+---
+
{{CSSRef}}

+
+
padding-block は CSS の一括指定プロパティで、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。

+
+
/* <length> 値 */
+padding-block: 10px 20px;  /* 絶対的な長さ */
+padding-block: 1em 2em;   /* テキストの大きさに対する相対値 */
+padding-block: 10px; /* 先頭と末尾の両方を設定 */
+
+/* <percentage> 値 */
+padding-block: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */
+
+/* グローバル値 */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+

+
+
構成要素のプロパティ

+
+
このプロパティは以下の CSS プロパティの一括指定です。

+
+
    
+ 
  • {{cssxref("padding-block-end")}}
    • 
+ 
  • {{cssxref("padding-block-start")}}
    • 
+

+
+
構文

+
+
値

+
+
padding-block プロパティは、 {{CSSxRef("padding-left")}} プロパティと同じ値を取ります。

+
+
解説

+
+
これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きテキストにおけるブロック方向のパディングの設定

+
+
HTML

+
+
<div>
+  <p class="exampleText">Example text</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_block_padding_for_vertical_text", 140, 140)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-block")}}

+
+
関連情報

+
+
    
+ 
  • 対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • 
+

diff --git a/files/ja/web/css/padding-bottom/index.html b/files/ja/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..08210127d8
--- /dev/null
+++ b/files/ja/web/css/padding-bottom/index.html
@@ -0,0 +1,112 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-bottom
+---
+
{{CSSRef}}

+
+
padding-bottom は CSS のプロパティで、要素のパディング領域における下側の高さを設定します。

+
+
{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}

+
+
+
+
要素のパディング領域とは、コンテンツと境界線の間の領域のことです。

+
+
CSS の padding-bottom プロパティの要素ボックスへの影響

+
+

+
注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

+

+
+
構文

+
+
/* <length> の値 */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> の値 */
+padding-bottom: 10%;
+
+/* グローバル値 */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+

+
+
padding-bottom プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
固定値によるパディングの寸法です。負の数であってはいけません。

+ 
{{cssxref("<percentage>")}}

+ 
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
ピクセル数とパーセント値で下パディングを設定

+
+
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-padding-bottom', 'padding-bottom')}}{{Spec2('CSS3 Box')}}変更なし。
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}{{Spec2('CSS2.1')}}変更なし。
{{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-bottom")}}

+
+
関連情報

+
+
    
+ 
  • CSS 基本ボックスモデルの紹介
    • 
+ 
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
    • 
+ 
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • 
+

diff --git a/files/ja/web/css/padding-inline-end/index.html b/files/ja/web/css/padding-inline-end/index.html
new file mode 100644
index 0000000000..f3003ab5f3
--- /dev/null
+++ b/files/ja/web/css/padding-inline-end/index.html
@@ -0,0 +1,115 @@
+---
+title: padding-inline-end
+slug: Web/CSS/padding-inline-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-inline
+  - padding-inline-end
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-inline-end
+---
+
{{CSSRef}}

+
+
padding-inline-end は CSS のプロパティで、要素のインライン方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。

+
+
{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}

+
+
+
+
構文

+
+
/* <length> 値 */
+padding-inline-end: 10px;     /* 絶対的な長さ */
+padding-inline-end: 1em;      /* テキストの大きさに対する相対値 */
+
+/* <percentage> 値 */
+padding-inline-end: 5%;       /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+

+
+
値

+
+
padding-inline-end プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。

+
+
解説

+
+これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。
+
+
関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} があります。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きテキストにおけるインライン方向の末尾のパディングの設定

+
+
HTML

+
+
<div>
+  <p class="exampleText">Example text</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_inline_end_padding_for_vertical_text", 140, 140)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-inline-end")}}

+
+
関連情報

+
+
    
+ 
  • 対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • 
+

diff --git a/files/ja/web/css/padding-inline-start/index.html b/files/ja/web/css/padding-inline-start/index.html
new file mode 100644
index 0000000000..c7b2a54067
--- /dev/null
+++ b/files/ja/web/css/padding-inline-start/index.html
@@ -0,0 +1,115 @@
+---
+title: padding-inline-start
+slug: Web/CSS/padding-inline-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-inline
+  - padding-inline-start
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-inline-start
+---
+
{{CSSRef}}

+
+
padding-inline-start は CSS のプロパティで、要素のインライン方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。

+
+
{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}

+
+
+
+
構文

+
+
/* <length> 値 */
+padding-inline-start: 10px;   /* 絶対的な長さ */
+padding-inline-start: 1em;    /* テキストの大きさに対する相対値 */
+
+/* パーセント値 */
+padding-inline-start: 5%;     /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+

+
+
値

+
+
padding-inline-start プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。

+
+
解説

+
+
これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+
+
関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-end")}} があります。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きテキストにおけるインライン方向の先頭のパディングの設定

+
+
HTML

+
+
<div>
+  <p class="exampleText">Example text</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_inline_start_padding_for_vertical_text", 140, 140)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-inline-start")}}

+
+
関連情報

+
+
    
+ 
  • 対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • 
+

diff --git a/files/ja/web/css/padding-inline/index.html b/files/ja/web/css/padding-inline/index.html
new file mode 100644
index 0000000000..922ac82887
--- /dev/null
+++ b/files/ja/web/css/padding-inline/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-inline
+slug: Web/CSS/padding-inline
+tags:
+  - CSS
+  - padding-inline
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/padding-inline
+---
+
{{CSSRef}}

+
+
padding-inline は CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。

+
+
/* <length> 値 */
+padding-inline: 10px 20px;  /* 絶対的な長さ */
+padding-inline: 1em 2em;   /* テキストの大きさに対する相対値 */
+padding-inline: 10px; /* 先頭と末尾の両方を設定 */
+
+/* <percentage> 値 */
+padding-block: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */
+
+/* グローバル値 */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+

+
+
構成要素のプロパティ

+
+
このプロパティは以下の CSS プロパティの一括指定です。

+
+
    
+ 
  • {{cssxref("padding-inline-end")}}
    • 
+ 
  • {{cssxref("padding-inline-start")}}
    • 
+

+
+
構文

+
+
値

+
+
padding-inline プロパティは、 {{CSSxRef("padding-left")}} プロパティと同じ値を取ります。

+
+
解説

+
+
これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
縦書きテキストにおけるインライン方向のパディングの設定

+
+
HTML

+
+
<div>
+  <p class="exampleText">Example text</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}

+
+
結果

+
+
{{EmbedLiveSample("Setting_inline_padding_for_vertical_text", 140, 140)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}{{Spec2("CSS Logical Properties")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-inline")}}

+
+
関連情報

+
+
    
+ 
  • 対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • 
+

diff --git a/files/ja/web/css/padding-left/index.html b/files/ja/web/css/padding-left/index.html
new file mode 100644
index 0000000000..92ac71fb52
--- /dev/null
+++ b/files/ja/web/css/padding-left/index.html
@@ -0,0 +1,110 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-left
+---
+
{{CSSRef}}

+
+
padding-left は CSS のプロパティで、要素のパディング領域における左側の幅を設定します。

+
+
{{EmbedInteractiveExample("pages/css/padding-left.html")}}

+
+
+
+
要素のパディング領域とは、コンテンツと境界線の間の領域のことです。

+
+

+
注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

+

+
+
構文

+
+
/* <length> の値 */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* <percentage> の値 */
+padding-left: 10%;
+
+/* グローバル値 */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+

+
+
padding-left プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
固定値によるパディングの寸法です。負の数であってはいけません。

+ 
{{cssxref("<percentage>")}}

+ 
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
左パディングをピクセル数とパーセント値で設定

+
+
.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-padding-left', 'padding-left')}}{{Spec2('CSS3 Box')}}変更なし。
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}}{{Spec2('CSS2.1')}}変更なし。
{{Specname('CSS1', '#padding-left', 'padding-left')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-left")}}

+
+
関連情報

+
+
    
+ 
  • CSS 基本ボックスモデルの紹介
    • 
+ 
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} および {{cssxref("padding")}} 一括指定
    • 
+ 
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • 
+

diff --git a/files/ja/web/css/padding-right/index.html b/files/ja/web/css/padding-right/index.html
new file mode 100644
index 0000000000..621db10f00
--- /dev/null
+++ b/files/ja/web/css/padding-right/index.html
@@ -0,0 +1,110 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-right
+---
+
{{CSSRef}}

+
+
padding-right は CSS のプロパティで、要素のパディング領域における右側の幅を設定します。

+
+
{{EmbedInteractiveExample("pages/css/padding-right.html")}}

+
+
+
+
要素のパディング領域とは、コンテンツと境界線の間の領域のことです。

+
+

+
注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

+

+
+
構文

+
+
/* <length> の値 */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* <percentage> の値 */
+padding-right: 10%;
+
+/* グローバル値 */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+

+
+
padding-right プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
固定値によるパディングの寸法です。負の数であってはいけません。

+ 
{{cssxref("<percentage>")}}

+ 
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
右パディングをピクセル数とパーセント値で設定

+
+
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-padding-right', 'padding-right')}}{{Spec2('CSS3 Box')}}変更なし。
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}}{{Spec2('CSS2.1')}}変更なし。
{{Specname('CSS1', '#padding-right', 'padding-right')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-right")}}

+
+
関連情報

+
+
    
+ 
  • CSS 基本ボックスモデルの紹介
    • 
+ 
  • {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
    • 
+ 
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • 
+

diff --git a/files/ja/web/css/padding-top/index.html b/files/ja/web/css/padding-top/index.html
new file mode 100644
index 0000000000..6ab459f59b
--- /dev/null
+++ b/files/ja/web/css/padding-top/index.html
@@ -0,0 +1,112 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-top
+---
+
{{CSSRef}}

+
+
padding-top は CSS のプロパティで、要素のパディング領域における上側の高さを設定します。

+
+
{{EmbedInteractiveExample("pages/css/padding-top.html")}}

+
+
+
+
要素のパディング領域とは、コンテンツと境界線との間の空間のことです。

+
+
CSS の padding-top プロパティの要素ボックスへの影響

+
+

+
注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

+

+
+
構文

+
+
/* <length> の値 */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* <percentage> の値 */
+padding-top: 10%;
+
+/* グローバル値 */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+

+
+
padding-top プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
固定値によるパディングの寸法です。負の数であってはいけません。

+ 
{{cssxref("<percentage>")}}

+ 
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
上パディングをピクセル数とパーセント値で設定

+
+
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-padding-top', 'padding-top')}}{{Spec2('CSS3 Box')}}変更なし。
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}{{Spec2('CSS2.1')}}変更なし。
{{Specname('CSS1', '#padding-top', 'padding-top')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding-top")}}

+
+
関連情報

+
+
    
+ 
  • CSS 基本ボックスモデルの紹介
    • 
+ 
  • {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
    • 
+ 
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • 
+

diff --git a/files/ja/web/css/padding/index.html b/files/ja/web/css/padding/index.html
new file mode 100644
index 0000000000..017db4e7c2
--- /dev/null
+++ b/files/ja/web/css/padding/index.html
@@ -0,0 +1,169 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/padding
+---
+
{{CSSRef}}

+
+
padding は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

+
+
{{EmbedInteractiveExample("pages/css/padding.html")}}

+
+
+
+
要素のパディング領域とは、コンテンツと境界線の間の領域のことです。

+
+

+
注: パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の周りに追加の領域を作成します。

+

+
+
構成要素のプロパティ

+
+
このプロパティは以下の CSS プロパティの一括指定です。

+
+
    
+ 
  • {{cssxref("padding-bottom")}}
    • 
+ 
  • {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("padding-right")}}}
    • 
+ 
  • {{cssxref("padding-top")}}
    • 
+

+
+
構文

+
+
/* 四辺すべてに適用 */
+padding: 1em;
+
+/* 上下 | 左右 */
+padding: 5% 10%;
+
+/* 上 | 左右 | 下 */
+padding: 1em 2em 2em;
+
+/* 上 | 右 | 下 | 左 */
+padding: 5px 1em 0 1em;
+
+/* グローバル値 */
+padding: inherit;
+padding: initial;
+padding: unset;
+

+
+
padding プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。それぞれの値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。負の数は無効です。

+
+
    
+ 
  • 値が1つ指定された場合、全四辺に同じパディングが適用される。
    • 
+ 
  • 値が2つ指定された場合、1つ目のパディングは上下、2つ目は左右の辺に適用される。
    • 
+ 
  • 値が3つ指定された場合、1つ目のパディングは上、2つ目は左右、3つ目は下の辺に適用される。
    • 
+ 
  • 値が4つ指定された場合、パディングはそれぞれ上、右、下、左の順 (時計回り) に適用される。
    • 
+

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
固定値によるパディングの寸法です。

+ 
{{cssxref("<percentage>")}}

+ 
コンテナーブロックの幅に対するパーセント値によるパディングの寸法です。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
パディングをピクセル数で設定

+
+
HTML

+
+
<h4>This element has moderate padding.</h4>
+<h3>The padding is huge in this element!</h3>
+

+
+
CSS

+
+
h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+

+
+
結果

+
+
{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}}

+
+
パディングをピクセル数とパーセント値で設定

+
+
padding: 5%;                /* 全辺: 5% のパディング */
+
+padding: 10px;              /* 全辺: 10px のパディング */
+
+padding: 10px 20px;         /* 上と下: 10px のパディング */
+                            /* 左と右: 20px のパディング */
+
+padding: 10px 3% 20px;      /* 上:     10px のパディング */
+                            /* 左と右: 3% のパディング   */
+                            /* 下:     20px のパディング */
+
+padding: 1em 3px 30px 5px;  /* 上:     1em のパディング  */
+                            /* 右:     3px のパディング  */
+                            /* 下:     30px のパディング */
+                            /* 右:     5px のパディング  */ 

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Box', '#padding-shorthand', 'padding')}}{{Spec2('CSS3 Box')}}変更なし。
{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}{{Spec2('CSS2.1')}}変更なし。
{{Specname('CSS1', '#padding', 'padding')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.padding")}}

+
+
関連情報

+
+
    
+ 
  • CSS 基本ボックスモデルの紹介
    • 
+ 
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
    • 
+ 
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • 
+

diff --git a/files/ja/web/css/page-break-after/index.html b/files/ja/web/css/page-break-after/index.html
new file mode 100644
index 0000000000..89851b198c
--- /dev/null
+++ b/files/ja/web/css/page-break-after/index.html
@@ -0,0 +1,147 @@
+---
+title: page-break-after
+slug: Web/CSS/page-break-after
+tags:
+  - CSS
+  - CSS Property
+  - Page Breaks
+  - Reference
+translation_of: Web/CSS/page-break-after
+---
+
{{CSSRef}}

+
+
このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。

+
+
page-break-after CSS プロパティは、現在の要素の後で改ページが行われるように調整します。

+
+
/* キーワード値 */
+page-break-after: auto;
+page-break-after: always;
+page-break-after: avoid;
+page-break-after: left;
+page-break-after: right;
+page-break-after: recto;
+page-break-after: verso;
+
+/* グローバル値 */
+page-break-after: inherit;
+page-break-after: initial;
+page-break-after: unset;
+

+
+
このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。

+
+
{{cssinfo}}

+
+
改ページの別名

+
+
page-break-after プロパティは古いプロパティとなり、 {{cssxref("break-after")}} によって置き換えられました。

+
+
互換性のため、 page-break-after はブラウザーから break-after の別名として扱われます。これにより、 page-break-after を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage

+
+
構文

+
+
値

+
+

+ 
auto

+ 
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

+ 
always

+ 
要素の後で必ず改ページが行われるように強制します。

+ 
avoid

+ 
要素の後で改ページされないようにします。

+ 
left

+ 
要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。

+ 
right

+ 
要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。

+ 
recto {{experimental_inline}}

+ 
左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。

+ 
verso {{experimental_inline}}

+ 
左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
/* footnotes の後で新しいページに移ります */
+div.footnotes {
+  page-break-after: always;
+}
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}recto と verso の追加
{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}{{Spec2('CSS3 Paged Media')}}プロパティが適用される要素を table rows と table row groups に拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}{{Spec2('CSS2.1')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.page-break-after")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}
    • 
+ 
  • {{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}}
    • 
+ 
  • {{cssxref("orphans")}}, {{cssxref("widows")}}
    • 
+

diff --git a/files/ja/web/css/page-break-before/index.html b/files/ja/web/css/page-break-before/index.html
new file mode 100644
index 0000000000..fa72a60cca
--- /dev/null
+++ b/files/ja/web/css/page-break-before/index.html
@@ -0,0 +1,148 @@
+---
+title: page-break-before
+slug: Web/CSS/page-break-before
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ページ付きメディア
+  - Reference
+  - 改ページ
+translation_of: Web/CSS/page-break-before
+---
+
{{CSSRef}}

+
+
このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。

+
+
page-break-before CSS プロパティは、現在の要素の前で改ページが行われるように調整します。

+
+
このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。

+
+
/* キーワード値 */
+page-break-before: auto;
+page-break-before: always;
+page-break-before: avoid;
+page-break-before: left;
+page-break-before: right;
+page-break-before: recto;
+page-break-before: verso;
+
+/* グローバル値 */
+page-break-before: inherit;
+page-break-before: initial;
+page-break-before: unset;
+

+
+
{{cssinfo}}

+
+
改ページの別名

+
+
page-break-before プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。

+
+
互換性のため、 page-break-before はブラウザーから break-before の別名として扱われます。これにより、 page-break-before を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
page-break-beforebreak-before
autoauto
leftleft
rightright
avoidavoid
alwayspage

+
+
構文

+
+
値

+
+

+ 
auto

+ 
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

+ 
always

+ 
要素の前で必ず改ページが行われるように強制します。

+ 
avoid

+ 
要素の前で改ページされないようにします。

+ 
left

+ 
要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。

+ 
right

+ 
要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。

+ 
recto {{experimental_inline}}

+ 
左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。

+ 
verso {{experimental_inline}}

+ 
左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
/* div の前で改ページされないようにします */
+div.note {
+    page-break-before: avoid;
+}
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}recto と verso の追加
{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}{{Spec2('CSS3 Paged Media')}}プロパティが適用される要素を table rows と table row groups に拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}{{Spec2('CSS2.1')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.page-break-before")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}
    • 
+ 
  • {{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}}
    • 
+ 
  • {{cssxref("orphans")}}, {{cssxref("widows")}}
    • 
+

diff --git a/files/ja/web/css/page-break-inside/index.html b/files/ja/web/css/page-break-inside/index.html
new file mode 100644
index 0000000000..f3ab2e1d65
--- /dev/null
+++ b/files/ja/web/css/page-break-inside/index.html
@@ -0,0 +1,160 @@
+---
+title: page-break-inside
+slug: Web/CSS/page-break-inside
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ページ付きメディア
+  - Reference
+  - 改ページ
+translation_of: Web/CSS/page-break-inside
+---
+
{{CSSRef}}

+
+
このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。

+
+
CSS の page-break-inside プロパティは、現在の要素の内側の 改ページを調整します。

+
+
/* キーワード値 */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* グローバル値 */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+

+
+
{{cssinfo}}

+
+
改ページの別名

+
+
page-break-inside プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。

+
+
互換性のため、 page-break-inside はブラウザーから break-inside の別名として扱われます。これにより、 page-break-inside を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
page-break-insidebreak-inside
autoauto
avoidavoid

+
+
構文

+
+
値

+
+

+ 
auto

+ 
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

+ 
avoid

+ 
要素の内側で改ページされないようにします。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<div class="page">
+  <p>これは最初の段落です。</p>
+  <section class="list">
+    <span>リスト</span>
+    <ol>
+      <li>順序付き項目1</li>
+<!--       <li>順序付き項目2</li> -->
+    </ol>
+  </section>
+  <ul>
+    <li>順序なし項目1</li>
+<!--     <li>順序なし項目2</li> -->
+  </ul>
+  <p>これは第二段落です。</p>
+  <p>これは第三段落です。文章の量が多くなっています。</p>
+  <p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p>
+</div>

+
+
CSS

+
+
.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}

+
+
結果

+
+
{{EmbedLiveSample("Example", 400, 160)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}より多くの要素に適用できるように拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.page-break-inside")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}
    • 
+ 
  • {{cssxref("page-break-after")}}, {{cssxref("page-break-before")}}
    • 
+ 
  • {{cssxref("orphans")}}, {{cssxref("widows")}}
    • 
+

diff --git a/files/ja/web/css/paged_media/index.html b/files/ja/web/css/paged_media/index.html
new file mode 100644
index 0000000000..e283297d1c
--- /dev/null
+++ b/files/ja/web/css/paged_media/index.html
@@ -0,0 +1,22 @@
+---
+title: ページ化メディア
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - CSS ページ化メディア
+  - ページ区切り
+  - リファレンス
+translation_of: Web/CSS/Paged_Media
+---
+
{{cssref}}

+
+
ページ化メディアのプロパティは、印刷物などの分離したページでコンテンツが分割されるメディアのコンテンツの表現を制御します。ページ区切り、印刷可能領域の制御、左と右のページの違い、要素内の改ページの制御などを設定することができます。広く対応されているプロパティは以下の通りです。

+
+
    
+ 
  • {{ cssxref("page-break-before") }}
    • 
+ 
  • {{ cssxref("page-break-after") }}
    • 
+ 
  • {{ cssxref("page-break-inside") }}
    • 
+ 
  • {{ cssxref("orphans") }}
    • 
+ 
  • {{ cssxref("widows") }}
    • 
+ 
  • {{ cssxref("@page") }}
    • 
+

diff --git a/files/ja/web/css/paint()/index.html b/files/ja/web/css/paint()/index.html
new file mode 100644
index 0000000000..1fbaf88aa9
--- /dev/null
+++ b/files/ja/web/css/paint()/index.html
@@ -0,0 +1,114 @@
+---
+title: paint()
+slug: Web/CSS/paint()
+tags:
+  - CSS
+  - CSS Function
+  - CSS 関数
+  - CSS4-images
+  - Houdini
+  - Reference
+  - Web
+  - ウェブ
+translation_of: Web/CSS/paint()
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
paint() は CSS の関数で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。

+
+
構文

+
+
paint(workletName, parameters)

+
+
凡例

+
+

+ 
workletName

+ 
登録された Worklet の名前です。

+ 
parameters

+ 
PaintWorklet へ渡される省略可能な追加の引数です。

+

+
+
例

+
+
CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。

+
+
+
+
+
+
li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}

+
+
boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。

+
+
{{EmbedLiveSample("Examples", 300, 300)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}{{Spec2('CSS Painting API')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.image.paint")}}

+
+
関連情報

+
+
    
+ 
  • {{domxref('PaintWorklet')}}
    • 
+ 
  • {{domxref('CSS Painting API')}}
    • 
+ 
  • CSS Painting API の使用
    • 
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{domxref("canvas")}}
    • 
+

diff --git a/files/ja/web/css/paint-order/index.html b/files/ja/web/css/paint-order/index.html
new file mode 100644
index 0000000000..6ec0316ebf
--- /dev/null
+++ b/files/ja/web/css/paint-order/index.html
@@ -0,0 +1,107 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - SVG
+  - ウェブ
+  - 描画順序
+translation_of: Web/CSS/paint-order
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
 paint-order は CSS のプロパティで、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができます。

+
+
構文

+
+
/* 通常 */
+paint-order: normal;
+
+/* 単一の値 */
+paint-order: stroke; /* 最初に輪郭、それから塗りつぶしとマーカーを描画 */
+paint-order: markers; /* 最初にマーカー、それから塗りつぶしと輪郭 */
+
+/* 複数の値 */
+paint-order: stroke fill; /* 最初に輪郭を、それから塗りつぶしを、そしてマーカーを描く */
+paint-order: markers stroke fill; /* マーカー、輪郭、塗りつぶしの順に描く */
+

+
+
値が指定されない場合、既定の描画順序は fill, stroke, markers です。

+
+
一つの値で指定されると、それが最初に描画され、続いて他の二つが互いの既定の順序で描画されます。二つの値が指定されると、指定された順序で描画を行い、続いて指定されなかった一つが描画されます。

+
+

+
メモ: このプロパティの場合、マーカーは marker-* プロパティ (例えば marker-start) および <marker> 要素を使用した SVG 図形を描く場合のみ適用されます。 HTML テキストには適用されませんので、その場合は stroke および fill の順序のみが指定できます。

+

+
+
値

+
+

+ 
normal

+ 
様々なアイテムを通常の描画順で描画します。

+ 
stroke (輪郭),

+ fill (塗りつぶし),

+ markers (マーカー)

+ 
これらの一部またはすべての値を用いて、描画したい順序を指定します。

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
SVG

+
+
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <text x="10" y="75">stroke in front</text>
+  <text x="10" y="150" class="stroke-behind">stroke behind</text>
+</svg>

+
+
CSS

+
+
text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}

+
+
結果

+
+
{{EmbedLiveSample("Examples", "100%", 165)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("SVG2", "painting.html#PaintOrder", "paint-order")}}{{Spec2("SVG2")}}初回定義

+
+
{{CSSInfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.paint-order")}}

diff --git a/files/ja/web/css/percentage/index.html b/files/ja/web/css/percentage/index.html
new file mode 100644
index 0000000000..4677321e72
--- /dev/null
+++ b/files/ja/web/css/percentage/index.html
@@ -0,0 +1,96 @@
+---
+title: 
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/percentage
+---
+
{{CSSRef}}

+
+
<percentage> は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 {{CSSxRef("width")}}、 {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}、 {{CSSxRef("font-size")}} など、たくさんのプロパティでパーセント値を使うことができます。

+
+
注: 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("<length>")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。

+
+
構文

+
+
<percentage> データ型は、 {{CSSxRef("<number>")}} とそれに続くパーセント記号 (%) から成ります。任意で、先行して符号 (+ または -) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。

+
+
補間

+
+
アニメーションをする時、 <percentage> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたタイミング関数で定義します。

+
+
例

+
+
幅と左マージン

+
+
<div style="background-color:navy;">
+  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
+    Width: 50%, Left margin: 20%
+  </div>
+  <div style="width:30%; margin-left:60%; background-color:pink;">
+    Width: 30%, Left margin: 60%
+  </div>
+</div>
+

+
+
以上の HTML は以下のような出力になります。

+
+
{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}

+
+
font-size

+
+
<div style="font-size:18px;">
+  <p>Full-size text (18px)</p>
+  <p><span style="font-size:50%;">50% (9px)</span></p>
+  <p><span style="font-size:200%;">200% (36px)</span></p>
+</div>
+

+
+
以上の HTML は以下のような出力になります。

+
+
{{EmbedLiveSample('Font-size', 'auto', 160)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Values', '#percentages', '<percentage>')}}{{Spec2('CSS4 Values')}}目立った変更はなし。
{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}CSS Level 2 (Revision 1) から目立った変更なし。
{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}CSS Level 1 から変更なし。
{{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}初回定義。

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.percentage")}}

diff --git a/files/ja/web/css/perspective-origin/index.html b/files/ja/web/css/perspective-origin/index.html
new file mode 100644
index 0000000000..22cf78f1ed
--- /dev/null
+++ b/files/ja/web/css/perspective-origin/index.html
@@ -0,0 +1,395 @@
+---
+title: perspective-origin
+slug: Web/CSS/perspective-origin
+tags:
+  - 3D
+  - CSS
+  - CSS プロパティ
+  - CSS 変形
+  - perspective
+  - perspective-origin
+  - リファレンス
+translation_of: Web/CSS/perspective-origin
+---
+
{{CSSRef}}

+
+
CSS の perspective-origin プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって消失点として使われます。

+
+
{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}

+
+
+
+
perspective-origin および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。

+
+
構文

+
+
/* １値構文 */
+perspective-origin: x-position;
+
+/* ２値構文 */
+perspective-origin: x-position y-position;
+
+/* x-position と y-position がキーワードである場合は、
+   以下の構文も有効 */
+perspective-origin: y-position x-position;
+
+/* グローバル値 */
+perspective-origin: inherit;
+perspective-origin: initial;
+perspective-origin: unset;
+

+
+
値

+
+

+ 
x-position

+ 
消失点の横座標上の位置を示します。次のいずれかの値です。
+ 
    
+  
  • {{cssxref("<length-percentage>")}} は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。
    • 
+  
  • left キーワードは、 length 値 0 を示すショートカットです。
    • 
+  
  • center キーワードは、パーセント値 50% を示すショートカットです。
    • 
+  
  • right キーワードは、パーセント値 100% を示すショートカットです。
    • 
+ 

+ 

+ 
y-position

+ 
消失点の縦座標上の位置を示します。次のいずれかの値です。
+ 
    
+  
  • {{cssxref("<length>")}} は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。
    • 
+  
  • top キーワードは、 length 値 0 を示すショートカットです。
    • 
+  
  • center キーワードは、パーセント値 50% を示すショートカットです。
    • 
+  
  • bottom キーワードは、パーセント値 100% を示すキーワードです。
    • 
+ 

+ 

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
視点の変更

+
+
この例は主要な perspective-origin 値で立方体を表示します。

+
+
結果

+
+
{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}

+
+
HTML

+
+
<section>
+<figure>
+  <caption><code>perspective-origin: top left;</code></caption>
+    <div class="container">
+    <div class="cube potl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top;</code></caption>
+   <div class="container">
+    <div class="cube potm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top right;</code></caption>
+  <div class="container">
+    <div class="cube potr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: left;</code></caption>
+  <div class="container">
+    <div class="cube poml">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 50% 50%;</code></caption>
+  <div class="container">
+    <div class="cube pomm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: right;</code></caption>
+  <div class="container">
+    <div class="cube pomr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom left;</code></caption>
+  <div class="container">
+    <div class="cube pobl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom;</code></caption>
+  <div class="container">
+    <div class="cube pobm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom right;</code></caption>
+  <div class="container">
+    <div class="cube pobr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: -200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200neg">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% 200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200pos">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+</section>
+

+
+
CSS

+
+
/* perspective-origin の値 (例ごとに異なる) */
+.potl {
+  perspective-origin: top left;
+}
+.potm {
+  perspective-origin: top;
+}
+.potr {
+  perspective-origin: top right;
+}
+.poml {
+  perspective-origin: left;
+}
+.pomm {
+  perspective-origin: 50% 50%;
+}
+.pomr {
+  perspective-origin: right;
+}
+.pobl {
+  perspective-origin: bottom left;
+}
+.pobm {
+  perspective-origin: bottom;
+}
+.pobr {
+  perspective-origin: bottom right;
+}
+.po200200neg {
+  perspective-origin: -200% -200%;
+}
+.po200200pos {
+  perspective-origin: 200% 200%;
+}
+.po200200 {
+  perspective-origin: 200% -200%;
+}
+
+/* コンテナーの div、立方体の div、面の一般的な設定 */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* レイアウトの見栄えをよくする */
+section {
+  background-color: #EEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("css.properties.perspective-origin")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/perspective/index.html b/files/ja/web/css/perspective/index.html
new file mode 100644
index 0000000000..3d51b9620a
--- /dev/null
+++ b/files/ja/web/css/perspective/index.html
@@ -0,0 +1,261 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 変形
+  - Reference
+  - グラフィック
+  - プロパティ
+  - 距離
+translation_of: Web/CSS/perspective
+---
+
{{CSSRef}}

+
+
perspective は CSS のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。 z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

+
+
{{EmbedInteractiveExample("pages/css/perspective.html")}}

+
+
+
+
ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の perspective プロパティの値より大きい要素は描画されません。

+
+
消失点は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。

+
+
このプロパティを 0 と none 以外の値で使用すると、新たな重ね合わせコンテキストを生成します。また、その場合、オブジェクトはそれを含む position: fixed の要素の包含ブロックとして動作します。

+
+
構文

+
+
/* キーワード値 */
+perspective: none;
+
+/* <length> 値 */
+perspective: 20px;
+perspective: 3.5em;
+
+/* グローバル値 */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+

+
+
値

+
+

+ 
none

+ 
立体的な変形を一切適用しないことを示すキーワードです。

+ 
<length>

+ 
ユーザーと z=0 平面間の距離を表す {{cssxref("<length>")}} です。立体的な変形を要素とその内容に適用するときに使います。 0 や負の値ならば、立体的な変形は適用されません。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
視点の設定

+
+
この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。

+
+
結果

+
+
{{EmbedLiveSample('Setting_perspective', 660, 700)}}

+
+
HTML

+
+
以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。

+
+
<table>
+  <tbody>
+    <tr>
+      <th><code>perspective: 250px;</code>
+      </th>
+      <th><code>perspective: 350px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers250">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers350">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>perspective: 500px;</code>
+      </th>
+      <th><code>perspective: 650px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers500">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers650">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+

+
+
CSS

+
+
様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。

+
+
/* さまざまな perspective の値のためのショートハンドクラス */
+.pers250 {
+  perspective: 250px;
+}
+
+.pers350 {
+  perspective: 350px;
+}
+
+.pers500 {
+  perspective: 500px;
+}
+
+.pers650 {
+  perspective: 650px;
+}
+
+/* コンテナーの div、立方体の div、面の一般的な設定 */
+.container {
+  width: 200px;
+  height: 200px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* テーブルの見栄えをよくする */
+th, p, td {
+  background-color: #EEEEEE;
+  padding: 10px;
+  font-family: sans-serif;
+   text-align: left;
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}{{Spec2('CSS Transforms 2')}}初回定義。

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.perspective")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/place-content/index.html b/files/ja/web/css/place-content/index.html
new file mode 100644
index 0000000000..97e92102d4
--- /dev/null
+++ b/files/ja/web/css/place-content/index.html
@@ -0,0 +1,254 @@
+---
+title: place-content
+slug: Web/CSS/place-content
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+  - align-content
+  - justify-content
+  - place-content
+  - リファレンス
+translation_of: Web/CSS/place-content
+---
+
{{CSSRef}}

+
+
CSS の place-content プロパティは、 {{CSSxRef("align-content")}} および {{CSSxRef("justify-content")}} の一括指定です。これらの配置方法を利用するどのレイアウト方法でも使用することができます。

+
+
{{EmbedInteractiveExample("pages/css/place-content.html")}}

+
+
+
+
構文

+
+
/* 位置による配置 */
+/* align-content は left 及び right の値を取りません */
+place-content: center start;
+place-content: start center;
+place-content: end left;
+place-content: flex-start center;
+place-content: flex-end center;
+
+/* ベースラインによる配置 */
+/* justify-content は baseline の値を取りません */
+place-content: baseline center;
+place-content: first baseline space-evenly;
+place-content: last baseline right;
+
+/* 均等配置 */
+place-content: space-between space-evenly;
+place-content: space-around space-evenly;
+place-content: space-evenly stretch;
+place-content: stretch space-evenly;
+
+/* グローバル値 */
+place-content: inherit;
+place-content: initial;
+place-content: unset;

+
+
最初の値は {{CSSxRef("align-content")}} プロパティ値で、二番目の値は {{CSSxRef("justify-content")}} の値です。

+
+

+
重要: 二番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。

+

+
+
値

+
+

+ 
start

+ 
各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

+ 
end

+ 
各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

+ 
flex-start

+ 
各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。

+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。

+ 
flex-end

+ 
各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。

+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。

+ 
center

+ 
各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。

+ 
left

+ 
各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。

+ 
right

+ 
各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。

+ 
space-between

+ 
各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。

+ 
baseline

+ first baseline

+ last baseline

+ 
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。

+ first baseline の代替配置は start、last baseline の代替配置は end です。

+ 
space-around

+ 
各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。

+ 
space-evenly

+ 
各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。

+ 
stretch

+ 
各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
CSS

+
+
#container {
+  display: flex;
+  height:240px;
+  width: 240px;
+  flex-wrap: wrap;
+  background-color: #8c8c8c;
+  writing-mode: horizontal-tb; /* Can be changed in the live sample */
+  direction: ltr; /* Can be changed in the live sample */
+  place-content: flex-end center; /* Can be changed in the live sample */
+}
+
+div > div {
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  background-color: #a0c8ff;
+}
+
+.small {
+  font-size: 12px;
+  height: 40px;
+}
+
+.large {
+  font-size: 14px;
+  height: 50px;
+}
+

+
+
HTML

+
+
<div id="container">
+  <div class="small">Lorem</div>
+  <div class="small">Lorem<br/>ipsum</div>
+  <div class="large">Lorem</div>
+  <div class="large">Lorem<br/>impsum</div>
+  <div class="large"></div>
+  <div class="large"></div>
+</div>
+

+
+
+
+
結果

+
+
{{EmbedLiveSample("Example", "370", "300")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}{{Spec2("CSS3 Box Alignment")}}初回定義

+
+
{{CSSInfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.place-content")}}

+
+
フレックスレイアウトでの対応

+
+
{{Compat("css.properties.place-content.flex_context")}}

+
+
グリッドレイアウトでの対応

+
+
{{Compat("css.properties.place-content.grid_context")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/place-items/index.html b/files/ja/web/css/place-items/index.html
new file mode 100644
index 0000000000..f77643455b
--- /dev/null
+++ b/files/ja/web/css/place-items/index.html
@@ -0,0 +1,279 @@
+---
+title: place-items
+slug: Web/CSS/place-items
+tags:
+  - CSS
+  - CSS グリッドレイアウト
+  - CSS フレックスボックスレイアウト
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+translation_of: Web/CSS/place-items
+---
+
{{CSSRef}}

+
+
CSS の place-items 一括指定プロパティは、 {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティをそれぞれ設定します。二番目の値が設定されていない場合、最初の値がそちらにも使用されます。

+
+
{{EmbedInteractiveExample("pages/css/place-items.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+place-items: auto center;
+place-items: normal start;
+
+/* 位置による配置 */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* ベースラインによる配置 */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* グローバル値 */
+place-items: inherit;
+place-items: initial;
+place-items: unset;
+

+
+
値

+
+

+ 
auto

+ 
使用される値は、ボックスに親があれば、親ボックスの justify-items プロパティ、そうでなければ絶対位置であり、このような場合、 auto は normal を表します。

+ 
normal

+ 
このキーワードの効果は、現在のレイアウトモードに依存します。
+ 
    
+  
  • ブロックレベルレイアウトでは、このキーワードは start の別名です。
    • 
+  
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように動作し、その他の絶対位置ボックスには stretch のように動作します。
    • 
+  
  • 表のセルレイアウトでは、このキーワードは意味を持たず、無視されます。
    • 
+  
  • フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、無視されます。
    • 
+  
  • グリッドレイアウトでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように振舞います。
    • 
+ 

+ 

+ 
start

+ 
各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

+ 
end

+ 
各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

+ 
flex-start

+ 
アイテムは、配置コンテナーの主軸または交差軸の先頭側の端に向けて、互いに寄せて配置されます。

+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。

+ 
flex-end

+ 
アイテムは、配置コンテナーの主軸または交差軸の末尾側の端に向けて、互いに寄せて配置されます。

+ これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。

+ 
self-start

+ 
アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。

+ 
self-end

+ 
アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。

+ 
center

+ 
各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。

+ 
left

+ 
各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。

+ 
right

+ 
各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。

+ 
baseline

+ first baseline

+ last baseline

+ 
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。

+ first baseline の代替配置は start、last baseline の代替配置は end です。

+ 
stretch

+ 
各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
CSS

+
+
#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* You can change this value by selecting another option in the list */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+

+
+
+
+
Result

+
+
{{EmbedLiveSample("Examples", 260, 290)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2("CSS3 Box Alignment")}}初回定義

+
+
{{CSSInfo}}

+
+
ブラウザーの互換性

+
+
+
+
フレックスレイアウトでの対応

+
+
{{Compat("css.properties.place-items.flex_context")}}

+
+
グリッドレイアウトでの対応

+
+
{{Compat("css.properties.place-items.grid_context")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/place-self/index.html b/files/ja/web/css/place-self/index.html
new file mode 100644
index 0000000000..c9eb65a548
--- /dev/null
+++ b/files/ja/web/css/place-self/index.html
@@ -0,0 +1,128 @@
+---
+title: place-self
+slug: Web/CSS/place-self
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ボックス配置
+  - place-self
+  - リファレンス
+translation_of: Web/CSS/place-self
+---
+
{{CSSRef}}

+
+
CSS の place-self プロパティは、 {{cssxref("align-self")}} および {{cssxref("justify-self")}} プロパティの両方を設定する一括指定プロパティです。最初の値は align-self プロパティの値で、二番目の値は justify-self プロパティの値です。二番目の値が存在しない場合、最初の値がそちらにも使用されます。

+
+
{{EmbedInteractiveExample("pages/css/place-self.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+place-self: auto center;
+place-self: normal start;
+
+/* 位置による配置 */
+place-self: center normal;
+place-self: start auto;
+place-self: end normal;
+place-self: self-start auto;
+place-self: self-end normal;
+place-self: flex-start auto;
+place-self: flex-end normal;
+place-self: left auto;
+place-self: right normal;
+
+/* ベースラインによる配置 */
+place-self: baseline normal;
+place-self: first baseline auto;
+place-self: last baseline normal;
+place-self: stretch auto;
+
+/* グローバル値 */
+place-self: inherit;
+place-self: initial;
+place-self: unset;

+
+
値

+
+

+ 
auto

+ 
親の {{cssxref("align-items")}} の値で計算します。

+ 
normal

+ 
このキーワードの効果は、現在のレイアウトモードに依存します。
+ 
    
+  
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように動作し、その他の絶対位置ボックスには stretch のように動作します。
    • 
+  
  • 絶対位置指定レイアウトの固定位置指定時は、このキーワードは stretch と同様に動作します。
    • 
+  
  • フレックスアイテムでは、このキーワードは stretch と同様に動作します。
    • 
+  
  • グリッドアイテムでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように動作します。
    • 
+  
  • ブロックレベルボックスと表のセルでは、プロパティは適用されません。
    • 
+ 

+ 

+ 
self-start

+ 
アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。

+ 
self-end

+ 
アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。

+ 
flex-start

+ 
このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。

+ 
flex-end

+ 
このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。

+ 
center

+ 
このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。

+ 
baseline

+ first baseline

+ last baseline

+ 
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。

+ first baseline の代替配置は start、last baseline の代替配置は end です。

+ 
stretch

+ 
アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が auto であった場合、アイテムの寸法は {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 auto が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}}{{Spec2("CSS3 Box Alignment")}}初回定義

+
+
{{CSSInfo}}

+
+
ブラウザーの対応

+
+
+
+
フレックスレイアウトでの対応

+
+
{{Compat("css.properties.place-self.flex_context")}}

+
+
グリッドレイアウトでの対応

+
+
{{Compat("css.properties.place-self.grid_context")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/pointer-events/index.html b/files/ja/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..805d07dd34
--- /dev/null
+++ b/files/ja/web/css/pointer-events/index.html
@@ -0,0 +1,164 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - SVG
+  - pointer-events
+  - 'recipe:css-property'
+translation_of: Web/CSS/pointer-events
+---
+
{{CSSRef}}

+
+
pointer-events は CSS のプロパティで、特定のグラフィック要素がポインターイベントの対象になる可能性のある環境 (存在する場合) を設定します。

+
+
{{EmbedInteractiveExample("pages/css/pointer-events.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG のみ */
+pointer-events: visibleFill;    /* SVG のみ */
+pointer-events: visibleStroke;  /* SVG のみ */
+pointer-events: visible;        /* SVG のみ */
+pointer-events: painted;        /* SVG のみ */
+pointer-events: fill;           /* SVG のみ */
+pointer-events: stroke;         /* SVG のみ */
+pointer-events: all;            /* SVG のみ */
+
+/* グローバル値 */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+

+
+
pointer-events プロパティは、以下の値の一覧から選択した単一のキーワードとして指定します。

+
+
値

+
+

+ 
auto

+ 
要素は、 pointer-events プロパティが指定されていないときと同様にふるまいます。SVGコンテンツ内では visiblePainted を指定したときと同じ効果になります。

+ 
none

+ 
要素がポインターイベントの対象になることはありません。しかし、子孫要素が pointer-events の別の値をセットされていた場合は、その子孫要素自体はポインターイベントのターゲットとなりえます。その場合、ポインターイベントはイベントキャプチャ/バブリングの過程で必要に応じて親要素のイベントリスナーをトリガーします。

+

+
+
SVG のみ(HTML では実験的)

+
+

+ 
visiblePainted

+ 
SVG の場合のみ (HTML では実験的) の値です。要素の visibility プロパティに visible が設定されていて、かつ、例えば fill プロパティに none 以外の値が設定されている時の塗り (fill)、もしくは stroke プロパティが none 以外の時の線 (stroke) の上にマウスカーソルがある場合のみ、要素がポインターイベントのターゲットになりえます。

+ 
visibleFill

+ 
SVG の場合のみの値です。 visibility プロパティが visible にセットされていて、塗り (fill) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 fill プロパティの値でイベント処理が変化することはありません。

+ 
visibleStroke

+ 
SVG の場合のみの値です。 visibility プロパティが visible にセットされていて、線 (stroke) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 stroke プロパティの値でイベント処理が変化することはありません。

+ 
visible

+ 
SVG の場合のみ (HTML では実験的) の値です。 visibility プロパティが visible にセットされていて、塗り (fill) か線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill プロパティや stroke プロパティの値でイベント処理が変化することはありません。

+ 
painted

+ 
SVG の場合のみ (HTML では実験的) の値です。 fill プロパティが none 以外にセットされている塗りの（すなわち fill ）要素、もしくは stroke のプロパティが none 以外にセットされている線の（すなわち stroke ）要素の上にマウスカーソルがいる場合にのみ要素がポインターイベントのターゲットになりえます。 visibility プロパティの値はイベントプロセスに影響を与えません。

+ 
fill

+ 
SVGの場合のみの値です。塗り (fill) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill プロパティや visibility プロパティの値でイベント処理が変化することはありません。

+ 
stroke

+ 
SVGの場合のみの値です。線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 stroke プロパティや visibility の値でイベント処理が変化することはありません。

+ 
all

+ 
SVG の場合のみ (HTML では実験的) の値です。塗り (fill) と線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill や stroke や visibility の値でイベント処理が変化することはありません。

+

+
+
解説

+
+
このプロパティが指定されないと、 visiblePainted の値の同じ性質が SVG コンテンツに適用されます。

+
+
値を none に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

+
+
pointer-events を使用して要素がポインターイベントのターゲットとなることを防止するということは、必ずしもその要素のイベントリスナーが起動されない、することができないという意味ではありません。仮に要素の子要素のひとつで、 pointer-events がポインターイベントのターゲットになるよう明示的に設定されていた場合、その子要素をターゲットにするどのようなイベントも親要素を通過し、その際に親要素に設定されたイベントリスナーを起動します。もちろん、これらの子要素に触れず親要素にだけ触れるマウスの動きは、子要素と親要素のどちらにも捕まえられることはありません (親要素を「通過」し、その下にあるものがターゲットになります)。

+
+
pointer-events: none を持った要素は、 Tab キーを使用したキーボードナビゲーションによってフォーカスを受け取ります。

+
+
私たちは HTML で、どのような要素が、どんな時に、ポインターイベントを「捕まえる」かを (auto と none だけではなく) より細かく制御できるようにしたいと思っています。今後の HTML で pointer-events をどのように拡張すべきかを決めるうえで、このプロパティで実現したい具体例があれば、この wiki ページの Use Cases セクションに記入してください (きれいに整理してからなどと気にしなくても大丈夫です)。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
基本的な例

+
+
この例では、すべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。

+
+
img {
+  pointer-events: none;
+}

+
+
+
+
この例では、 http://example.com へのリンクのポインターイベントを無効にします。

+
+
HTML

+
+
<ul>
+  <li><a href="https://developer.mozilla.org">MDN</a></li>
+  <li><a href="http://example.com">example.com</a></li>
+</ul>

+
+
CSS

+
+
a[href="http://example.com"] {
+  pointer-events: none;
+}

+
+
結果

+
+
{{EmbedLiveSample("Disabling_links", "500", "100")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}}初回定義

+
+
このプロパティは HTML 要素に対する拡張であり、 CSS Basic User Interface Module Level 3 の草稿に記述がありますが、現在では同標準の Level 4 に組み込まれています。

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.pointer-events")}}

+
+
関連情報

+
+
    
+ 
  • SVG 属性 {{SVGAttr("pointer-events")}}
    • 
+ 
  • SVG 属性 {{SVGAttr("visibility")}}
    • 
+ 
  • (X)HTML で使うことを踏まえた WebKit の PointerEventsProperty の仕様書
    • 
+ 
  • {{cssxref("user-select")}} - ユーザーがテキストを選択できるかどうかの制御
    • 
+

diff --git a/files/ja/web/css/position/index.html b/files/ja/web/css/position/index.html
new file mode 100644
index 0000000000..e6ed408e56
--- /dev/null
+++ b/files/ja/web/css/position/index.html
@@ -0,0 +1,347 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/position
+---
+
{{CSSRef}}

+
+
position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティが、配置された要素の最終的な位置を決めます。

+
+
{{EmbedInteractiveExample("pages/css/position.html")}}

+
+
+
+
構文

+
+
position プロパティは以下のキーワード値、グローバル値から１つを指定します。

+
+
値

+
+

+ 
static

+ 
要素は文書の通常のフローに従って配置されます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} プロパティは効果がありません。これが既定値です。

+ 
relative

+ 
要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が static であった時と同じです。

+ 
z-index の値が auto でない場合、新しい重ね合わせコンテキストを生成します。 table-*-group, table-row, table-column, table-cell, table-caption の要素における効果は未定義です。

+ 
absolute

+ 
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。

+ 
この値では、 z-index の値が auto ではない場合、新しい重ね合わせコンテキストを作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと相殺されません。

+ 
fixed

+ 
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。{{glossary("viewport", "ビューポート")}}によって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している perspective と filter に矛盾のあるブラウザーがあります。) 最終的な位置は top, right, bottom, left の値によって決定されます。

+ 
この値は、常に新しい重ね合わせコンテキストを作成します。印刷文書の場合、要素は各ページの同じ位置に配置されます。

+ 
sticky

+ 
要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。

+ 
この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (GitHub issue on W3C CSSWG を参照)。

+

+
+
解説

+
+
位置の種類

+
+
    
+ 
  • 位置指定要素 (positioned element) とは、 position の計算値が relative, absolute, fixed, sticky のいずれかである要素です。 (言い換えれば、 static 以外の全てです。)
    • 
+ 
  • 相対位置指定要素 (relatively positioned element) とは、 position の計算値が relative である要素です。 {{Cssxref("top")}} および {{Cssxref("bottom")}} プロパティは、通常の位置からの垂直方向のオフセットを指定します。 {{Cssxref("left")}} および {{Cssxref("right")}} プロパティは、水平方向のオフセットを指定します。
    • 
+ 
  • 絶対位置指定要素 (absolutely positioned element) とは、 position の計算値が absolute または fixed である要素です。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティは、この要素の包含ブロックの端からのオフセットを指定します。 (包含ブロックは配置される要素の祖先です。) 要素にマージンがある場合は、オフセットにマージンが追加されます。この要素は内容のために新しい ブロック整形コンテキスト (BFC) を生成します。
    • 
+ 
  • 粘着位置指定要素 (stickily positioned element) とは、 position の計算値が sticky である要素です。これは包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば {{Cssxref("top")}} に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱われます。
    • 
+

+
+
ほとんどの場合、絶対位置指定要素に {{Cssxref("height")}} および {{Cssxref("width")}} が auto が設定されると、内容に合うように大きさが調整されます。しかし、非置換要素で絶対位置指定要素は、 {{Cssxref("top")}} および {{Cssxref("bottom")}} を指定して {{Cssxref("height")}} を指定しない (つまり auto の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 {{Cssxref("left")}} および {{Cssxref("right")}} を指定して {{Cssxref("width")}} を auto のままにすることで、利用できる水平の空間を埋めることができます。

+
+
以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。

+
+
    
+ 
  • top と bottom の両方を指定すると (autoではなく)、 top が優先されます。
    • 
+ 
  • left と right の両方を指定すると、 {{Cssxref("direction")}} が ltr (英語、横書き日本語、など) の場合は left が優先され、 {{Cssxref("direction")}} が rtl (ペルシャ語、アラビア語、ヘブライ語、 など)の場合は right が優先されます。
    • 
+

+
+
アクセシビリティの考慮

+
+
absolute または fixed の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。

+
+
+
+
パフォーマンスとアクセシビリティ

+
+
fixed または sticky を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 fps で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置配置要素に {{cssxref("will-change", "will-change: transform")}} を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
相対位置指定

+
+
相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。

+
+
HTML

+
+
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+

+
+
CSS

+
+
* {
+  box-sizing: border-box;
+}
+
+.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+

+
+
{{EmbedLiveSample('Relative_positioning', '', '200px')}}

+
+
絶対位置指定

+
+
相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は配置された直近の祖先 (つまり、 static ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — W3C の定義も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。

+
+
HTML

+
+
<h1>Absolute positioning</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

+
+
CSS

+
+
* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}

+
+
結果

+
+
{{EmbedLiveSample('Absolute_positioning', '', '420px')}}

+
+
固定位置指定

+
+
固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。

+
+
HTML

+
+
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <div class="box" id="one">One</div>
+</div>
+

+
+
CSS

+
+
* {
+  box-sizing: border-box;
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+

+
+
結果

+
+
{{EmbedLiveSample('Fixed_positioning', '', '300px')}}

+
+
粘着位置指定

+
+
粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば・・・

+
+
#one { position: sticky; top: 10px; }

+
+
例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。

+
+
粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。

+
+
粘着位置指定を想定したとおりに動作させるためには、 top, right, bottom, left のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。

+
+
HTML

+
+
<dl>
+  <div>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo &amp; The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+

+
+
CSS

+
+
* {
+  box-sizing: border-box;
+}
+
+dl > div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+

+
+
結果

+
+
{{EmbedLiveSample('Sticky_positioning', '', '300px')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}sticky 値を追加。

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.position")}}

diff --git a/files/ja/web/css/position_value/index.html b/files/ja/web/css/position_value/index.html
new file mode 100644
index 0000000000..6b72b16c08
--- /dev/null
+++ b/files/ja/web/css/position_value/index.html
@@ -0,0 +1,138 @@
+---
+title: 
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - データ型
+translation_of: Web/CSS/position_value
+---
+
{{CSSRef}}

+
+
<position> (または <bg-position>) は CSS の データ型で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。

+
+

+
注: <position> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。

+

+
+
構文

+
+
The <position> データ型は1～2つのキーワードと、任意のオフセットで定義されます。

+
+
キーワード値は center、 top、 right、 bottom、 left です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 center は左右の辺の中心か、上下の辺の中心を表します。

+
+
オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。

+
+
単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の center に設定されます。

+
+
/* 値1つの構文 */
+keyword                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
+value                    /* X 座標の位置。 Y 座標は既定値の 50% になる */
+
+/* 値2つの構文 */
+keyword keyword          /* それぞれの方向のキーワード（順不同） */
+keyword value            /* キーワードで定義された辺からのオフセット */
+value keyword            /* 水平位置を表す値、垂直位置を表すキーワード */
+value value              /* それぞれの方向（水平、垂直）の距離の値 */
+
+/* 値4つの構文 */
+keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */
+

+
+
形式文法

+
+
[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | <length> | <percentage> ]
+ [ top | center | bottom | <length> | <percentage> ]?
+|
+ [ [ left | right ] [ <length> | <percentage> ] ] &&
+ [ [ top | bottom ] [ <length> | <percentage> ] ]
+]
+

+
+

+
注: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <position> を使用する他のプロパティでは許可されません。

+

+
+
補間

+
+
アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つのタイミング関数が用いられるため、座標は直線に移動します。

+
+
例

+
+
有効な位置

+
+
center
+left
+center top
+
+right 8.5%
+bottom 12vmin right -6px
+
+10% 20%
+8rem 14px
+

+
+
無効な位置

+
+
left right
+bottom top
+10px 15px 20px 15px
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <position> の定義も使用される。
{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}{{Spec2('CSS3 Backgrounds')}}<position> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}キーワードと {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値の組み合わせを許可。
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> を {{cssxref("background-position")}} の値として無名で定義。

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.position")}}

+
+
See also

+
+
diff --git a/files/ja/web/css/privacy_and_the__colon_visited_selector/index.html b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.html
new file mode 100644
index 0000000000..8f29cc6752
--- /dev/null
+++ b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.html
@@ -0,0 +1,75 @@
+---
+title: 'プライバシーと :visited セレクター'
+slug: 'Web/CSS/Privacy_and_the_:visited_selector'
+tags:
+  - CSS
+  - Guide
+  - Pseudo-class
+  - Reference
+  - Security
+  - Selectors
+translation_of: 'Web/CSS/Privacy_and_the_:visited_selector'
+---
+
{{cssref}}

+
+
およそ 2010 年よりも前、 CSS の {{cssxref(":visited")}} セレクターによって、ウェブサイトがユーザーの閲覧履歴を明らかにし、ユーザーがどのサイトを訪問したかを把握することができました。これは {{domxref("window.getComputedStyle")}} およびその他の技術を用いて行われていました。この処理はすばやく実行され、ユーザーがどこを訪れたかを特定できるだけでなく、ユーザーの身元に関する多くの情報を推測することも可能になりました。

+
+
この問題を緩和するために、ブラウザーは訪問済みリンクから受け取ることができる情報量を制限されるようになりました。

+
+
ちょっとした善意の嘘

+
+
ユーザーのプライバシーを保護するために、Firefox や他のブラウザーは特定の状況下でウェブアプリケーションに嘘をつきます。

+
+
    
+ 
  • window.getComputedStyle メソッドや、 {{ domxref("element.querySelector") }} などの類似の関数は、ユーザーがページ上のリンクを訪れたことがないことを示す値を常に返します。
    • 
+ 
  • :visited + span のような兄弟セレクターを使用した場合、隣接する要素 (この例では span) は、リンクが未訪問であるかのようにスタイル付けされます。
    • 
+ 
  • 稀なケースですが、入れ子になったリンク要素を使用していて、マッチしている要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であったかのようにレンダリングされます。
    • 
+

+
+
+
+
訪問済みリンクの視覚的なスタイルづけを行うことはまだできますが、使えるスタイルは制限されています。訪問済みリンクに用いることができるのは次のプロパティだけです:

+
+
    
+ 
  • {{cssxref("color")}}
    • 
+ 
  • {{cssxref("background-color")}}
    • 
+ 
  • {{cssxref("border-color")}} (およびそのサブプロパティ)
    • 
+ 
  • {{cssxref("column-rule-color")}}
    • 
+ 
  • {{cssxref("outline-color")}}
    • 
+ 
  • {{SVGAttr("fill")}} および {{SVGAttr("stroke")}} プロパティの色の部分
    • 
+

+
+
さらに、訪問済みリンクにセットできるプロパティであっても、未訪問リンクと訪問済みリンク間で不透明度を変えることはできません。これは、別の状況なら、rgba() や hsla() のカラー値、もしくは transparent キーワードを使ってできた操作でした。

+
+
制限内でスタイルづけをする方法を、次の例で示します。

+
+
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* The default value of background-color is `transparent`. You need to
+     specify a different value, otherwise changes on :visited won't apply. */
+}
+
+:visited {
+  outline-color: orange;    /* オレンジのアウトライン */
+  background-color: green;  /* グリーンの背景 */
+  color: yellow;            /* イエローのテキスト */
+}
+

+
+
ウェブ開発者への影響度

+
+
全体として、ウェブ開発者にそれほど大きな影響はないでしょう。しかしながら、サイトの変更が必要になるような特殊なケースが少しだけあります。

+
+
    
+ 
  • 背景画像を使ってリンクをスタイルづけし、訪問済みかどうかを表示する方法はもう動作しないでしょう。訪問済みリンクのスタイルには色以外は使えないからです。
    • 
+ 
  • それ以外の透明な色は、 :visited セレクター内でスタイル付けした場合には表示されません。
    • 
+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/pseudo-classes/index.html b/files/ja/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..2be624f4d8
--- /dev/null
+++ b/files/ja/web/css/pseudo-classes/index.html
@@ -0,0 +1,167 @@
+---
+title: 擬似クラス
+slug: Web/CSS/Pseudo-classes
+tags:
+  - CSS
+  - Reference
+  - セレクター
+  - 擬似クラス
+  - 概要
+  - 疑似クラス
+translation_of: Web/CSS/Pseudo-classes
+---
+
{{CSSRef}}

+
+
CSS の擬似クラス (Pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。

+
+
/* ユーザーのポインターが当たっているすべてのボタン */
+button:hover {
+  color: blue;
+}

+
+
擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。

+
+

+
メモ: 擬似要素は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の特定の部分にスタイルを適用するために使用します。

+

+
+
構文

+
+
selector:pseudo-class {
+  property: value;
+}
+

+
+
通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。

+
+
標準擬似クラスの索引

+
+

+
    
+ 
  • {{CSSxRef(":active")}}
    • 
+ 
  • {{CSSxRef(":any-link")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":blank")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":checked")}}
    • 
+ 
  • {{CSSxRef(":current")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":default")}}
    • 
+ 
  • {{CSSxRef(":defined")}}
    • 
+ 
  • {{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":disabled")}}
    • 
+ 
  • {{CSSxRef(":drop")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":empty")}}
    • 
+ 
  • {{CSSxRef(":enabled")}}
    • 
+ 
  • {{CSSxRef(":first")}}
    • 
+ 
  • {{CSSxRef(":first-child")}}
    • 
+ 
  • {{CSSxRef(":first-of-type")}}
    • 
+ 
  • {{CSSxRef(":fullscreen")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":future")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":focus")}}
    • 
+ 
  • {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":focus-within")}}
    • 
+ 
  • {{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":host")}}
    • 
+ 
  • {{CSSxRef(":host()")}}
    • 
+ 
  • {{CSSxRef(":host-context()")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":hover")}}
    • 
+ 
  • {{CSSxRef(":indeterminate")}}
    • 
+ 
  • {{CSSxRef(":in-range")}}
    • 
+ 
  • {{CSSxRef(":invalid")}}
    • 
+ 
  • {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":lang", ":lang()")}}
    • 
+ 
  • {{CSSxRef(":last-child")}}
    • 
+ 
  • {{CSSxRef(":last-of-type")}}
    • 
+ 
  • {{CSSxRef(":left")}}
    • 
+ 
  • {{CSSxRef(":link")}}
    • 
+ 
  • {{CSSxRef(":local-link")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":not", ":not()")}}
    • 
+ 
  • {{CSSxRef(":nth-child", ":nth-child()")}}
    • 
+ 
  • {{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":nth-last-child", ":nth-last-child()")}}
    • 
+ 
  • {{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
    • 
+ 
  • {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
    • 
+ 
  • {{CSSxRef(":only-child")}}
    • 
+ 
  • {{CSSxRef(":only-of-type")}}
    • 
+ 
  • {{CSSxRef(":optional")}}
    • 
+ 
  • {{CSSxRef(":out-of-range")}}
    • 
+ 
  • {{CSSxRef(":past")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":read-only")}}
    • 
+ 
  • {{CSSxRef(":read-write")}}
    • 
+ 
  • {{CSSxRef(":required")}}
    • 
+ 
  • {{CSSxRef(":right")}}
    • 
+ 
  • {{CSSxRef(":root")}}
    • 
+ 
  • {{CSSxRef(":scope")}}
    • 
+ 
  • {{CSSxRef(":target")}}
    • 
+ 
  • {{CSSxRef(":target-within")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":user-invalid")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef(":valid")}}
    • 
+ 
  • {{CSSxRef(":visited")}}
    • 
+ 
  • {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}
    • 
+

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}:fullscreen を定義。
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}いつ特定のセレクターが HTML 要素に一致するのかを定義。
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}:any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where() を定義

+    :empty の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。

+    {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}正規の (WHATWG) HTML 仕様書から関連する節を複写。
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write を定義。ただし意味論的な意味は定義していません。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}:target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not() を定義。

+    :enabled, :disabled, :checked, :indeterminate の構文を定義。ただし意味論的な意味は定義していません。

+    {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}:lang(), :first-child, :hover, :focus を定義。

+    {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}:link, :visited, :active を定義。ただし意味論的な意味は定義していません。

+
+
関連情報

+
+
diff --git a/files/ja/web/css/pseudo-elements/index.html b/files/ja/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..d46d32bce6
--- /dev/null
+++ b/files/ja/web/css/pseudo-elements/index.html
@@ -0,0 +1,125 @@
+---
+title: 擬似要素 (Pseudo-elements)
+slug: Web/CSS/Pseudo-elements
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Pseudo-element
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Pseudo-elements
+---
+
{{CSSRef}}

+
+
CSS の 擬似要素 (Pseudo-elements) はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

+
+
/* 各 <p> 要素の最初の行です。 */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}

+
+

+
注: 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の状態に基づいてスタイル付けを行うことができます。

+

+
+
構文

+
+
selector::pseudo-element {
+  property: value;
+}

+
+
擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。

+
+

+
注: 規則として、単一コロン (:) の代わりに二重コロン (::) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の文法に対応しています。

+

+
+
標準の擬似要素の索引

+
+

+
    
+ 
  • {{CSSxRef("::after", "::after (:after)")}}
    • 
+ 
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("::before", "::before (:before)")}}
    • 
+ 
  • {{CSSxRef("::cue")}}
    • 
+ 
  • {{CSSxRef("::cue-region")}}
    • 
+ 
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • 
+ 
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • 
+ 
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("::selection")}}
    • 
+ 
  • {{CSSxRef("::slotted", "::slotted()")}}
    • 
+ 
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • 
+

+

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
ブラウザー対応開始バージョン対応内容
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS1")}}{{Spec2("CSS1")}}擬似クラスと擬似要素を定義した。

+
+
関連情報

+
+
diff --git a/files/ja/web/css/quotes/index.html b/files/ja/web/css/quotes/index.html
new file mode 100644
index 0000000000..81545bf8d1
--- /dev/null
+++ b/files/ja/web/css/quotes/index.html
@@ -0,0 +1,141 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 生成コンテンツ
+  - Reference
+  - ウェブ
+  - レイアウト
+  - 生成コンテンツ
+translation_of: Web/CSS/quotes
+---
+
{{CSSRef}}

+
+
quotes は CSS のプロパティで、引用符がどのように表示されるかを設定します。

+
+
{{EmbedInteractiveExample("pages/css/quotes.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+quotes: none;
+quotes: auto;
+
+/* <string> 値 */
+quotes: "«" "»";           /* open-quote および close-quote をフランス語の引用符に設定 */
+quotes: "«" "»" "‹" "›";   /* ２レベルの引用符を設定 */
+
+/* グローバル値 */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+

+
+
値

+
+

+ 
none

+ 
{{cssxref("content")}} プロパティの open-quote および close-quote の値が引用符を生成しません。

+ 
auto

+ 
選択された用途に設定された言語の値 (すなわち、 {{htmlattrxref("lang")}} 属性) で使用される適切な引用符が使用されます。

+ 
[<string> <string>]+

+ 
open-quote および close-quote を表す {{cssxref("<string>")}} の１つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表す。以下、順次下位レベルの引用符に対応する。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
基本的な引用符

+
+
<q>To be or not to be. That's the question!</q>
+

+
+
q {
+  quotes: '"' '"' "'" "'";
+}
+q::before {
+  content: open-quote;
+}
+q::after {
+  content: close-quote;
+}

+
+
{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}

+
+
自動引用符

+
+
<div lang="fr">
+  <q>Ceci est une citation française.</q>
+<div>
+<hr>
+<div lang="ru">
+  <q>Это русская цитата</q>
+<div>
+<hr>
+<div lang="ja">
+  <q>これは日本語の引用符です。</q>
+<div>
+<hr>
+<div lang="en">
+  <q>This is an English quote.</q>
+<div>
+

+
+
/*q {
+  quotes: auto;
+}*/
+

+
+
{{EmbedLiveSample('Auto_quotes', "100%", 200)}}

+
+
メモ

+
+
    
+ 
  • (Firefox 70 以降) では quotes の既定値はどのような場合も auto であり、その他のブラウザー (Chromium, Safari, Edge) もこの動作をしますので、多くのブラウザーでは明示的に設定しなくても上記の例が動作します。
    • 
+ 
  • Firefox 3.5 以降では、 quotes プロパティの初期値は -moz-initial を使用して読み出すことができます。これはそれより前のバージョンの Firefox では有効ではありません。
    • 
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS3 Content", "#quotes", "quotes")}}{{Spec2("CSS3 Content")}}
{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}{{ Spec2('CSS2.1') }}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.quotes")}}

+
+
関連情報

+
+
    
+ 
  • {{ Cssxref("content") }} プロパティ
    • 
+

diff --git a/files/ja/web/css/radial-gradient()/index.html b/files/ja/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..cd31362e49
--- /dev/null
+++ b/files/ja/web/css/radial-gradient()/index.html
@@ -0,0 +1,174 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - gradient
+translation_of: Web/CSS/radial-gradient()
+---
+
{{CSSRef}}

+
+
CSS の radial-gradient() 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。

+
+
{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}

+
+
+
+
構文

+
+
/* コンテナーの中央にあるグラデーション、
+   赤で始まり、青へ変わり、緑で終わる */
+radial-gradient(circle at center, red 0, blue, green 100%)

+
+
値

+
+

+ 
{{cssxref("<position>")}}

+ 
グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は center です。

+ 
<shape>

+ 
グラデーションの形状です。値は circle (つまり、グラデーションの形状が一定の半径の円) か ellipse (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は ellipse です。

+ 
<extent-keyword>

+ 
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。
+ 
+  
+   
+    
+    
+   
+  
+  
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+  
+ 
キーワード説明
closest-sideグラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-cornerグラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-sideclosest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-corner既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。

+
+ 

+ 
注: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。

+ 

+ 

+ 
<linear-color-stop>

+ 
色経由点の {{cssxref("<color>")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。

+ 
<color-hint>

+ 
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。

+

+
+
解説

+
+
他のグラデーションと同様、放射グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。

+
+
繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。

+
+
<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 radial-gradient() は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

+
+
放射グラデーションの構成

+
+
放射グラデーションは中心位置、最終的な形状、および二つ以上の色経由点で定義されます。

+
+
滑らかなグラデーションを生成するために、 radial-gradient() 関数は中央から最終的な形状 (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。

+
+
色経由点は、中心から右方向に水平に延びる仮想的なグラデーション光の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を 100% としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。

+
+
例

+
+
シンプルなグラデーション

+
+
+
+
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} 

+
+
{{EmbedLiveSample('Simple_gradient', 120, 120)}}

+
+
中央から外れたグラデーション

+
+
+
+
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}

+
+
{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

+
+
他の radial-gradient の例

+
+
他の例は CSS グラデーションの使用を参照してください。

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.image.gradient.radial-gradient")}}

+
+
Quantum CSS のメモ

+
+
Gecko は radial-gradient(circle gold,red) のような放射グラデーションが動きそうで、 circle と gold との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が radial-gradient() 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (Quantum CSS または Stylo とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。

+
+
関連情報

+
+
    
+ 
  • CSS グラデーションの利用
    • 
+ 
  • 他のグラデーション関数: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}
    • 
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{cssxref("_image","image()")}}
    • 
+ 
  • {{cssxref("element()")}}
    • 
+ 
  • {{cssxref("image-set","image-set()")}}
    • 
+ 
  • {{cssxref("cross-fade")}}
    • 
+

diff --git a/files/ja/web/css/ratio/index.html b/files/ja/web/css/ratio/index.html
new file mode 100644
index 0000000000..dcd59c98ab
--- /dev/null
+++ b/files/ja/web/css/ratio/index.html
@@ -0,0 +1,97 @@
+---
+title: 
+slug: Web/CSS/ratio
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/ratio
+---
+
{{CSSRef}}

+
+
<ratio> は CSS のデータ型で、アスペクト比をメディアクエリ内で記述するために使用し、2つの単位のない値で比率を記述します。

+
+
構文

+
+
メディアクエリ Level 3 では、<ratio> データ型は、厳密な正の {{cssxref("<integer>")}}、スラッシュ ('/', Unicode の U+002F SOLIDUS)、2 番目の厳密な正の {{cssxref("<integer>")}} の順に記述します。スラッシュの前後にはスペースを入れてもかまいません。最初の数値は幅を、2番目の数値は高さを表します。

+
+
メディアクエリ Level 4 では、<ratio> データ型が更新され、厳密な正の {{cssxref("<number>")}}、スラッシュ ('/', Unicode の U+002F SOLIDUS)、2 番目の厳密な正の {{cssxref("<number>")}} の順に記述します。それに加えて、単独の {{cssxref("<number>")}} の値が許可されています。

+
+
例

+
+
メディアクエリでの使用

+
+
@media screen and (min-aspect-ratio: 16/9) { ... }

+
+
一般的なアスペクト比

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
比率用例
Ratio4_3.png4/320 世紀における伝統的な TV 画面の形状です。
Ratio16_9.png16/9現代の「ワイド画面」の TV の形状です。
Ratio1_1.85.png185/100 = 91/501960 年代から用いられている最も一般的な映画スクリーンの形状です。
Ratio1_2.39.png239/100「ワイドスクリーン」、アナモルフィックな映画スクリーンの形状です。

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS4 Media Queries')}}
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.ratio")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/reference/index.html b/files/ja/web/css/reference/index.html
new file mode 100644
index 0000000000..a9bc022589
--- /dev/null
+++ b/files/ja/web/css/reference/index.html
@@ -0,0 +1,192 @@
+---
+title: CSS リファレンス
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Reference
+  - 'l10n:priority'
+translation_of: Web/CSS/Reference
+---
+
{{CSSRef}}

+
+
この CSS リファレンス は、すべての標準 CSS プロパティ、擬似クラス、擬似要素、データ型、関数記法、アット規則 の アルファベット順の索引 として利用できます。また、すべての CSS 種類別セレクター の一覧および 重要な CSS の概念 の一覧もあります。また、簡単な DOM-CSS / CSSOM リファレンス も含まれています。

+
+
基本的な規則と構文

+
+
スタイル規則の構文

+
+
スタイル規則 ::=
+    セレクターリスト {
+      プロパティリスト
+    }
+

+
+
... ここで

+
+
セレクターリスト ::=
+    セレクター[:擬似クラス] [::擬似要素]
+    [, セレクターリスト]
+
+プロパティリスト ::=
+    [プロパティ : 値] [; プロパティリスト]
+

+
+
下記の セレクター、疑似クラス、疑似要素 の一覧を参照してください。 各指定値の構文は、各指定プロパティに定義されたデータ型に依存します。

+
+
スタイル規則の例

+
+
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+

+
+
初心者レベルの CSS セレクター構文への入門については、 CSS セレクターのガイドをご覧ください。規則定義内での CSS 構文 エラーは、その規則全体を無効にするので十分に注意してください。無効な規則はブラウザーにより無視されます。 CSS 規則の定義はすべて (ASCII) テキストベース であり、DOM-CSS / CSSOM (規則管理システム) は オブジェクトベース なので注意してください。

+
+
アット規則構文

+
+
これには多くの異なる構造的な書式があるため、その各構文は アット規則 のページをご覧ください。

+
+
索引

+
+

+
注: この索引のプロパティ名には、CSS 標準の名前と異なる JavaScript 名 は含まれていません。

+

+
+
{{CSS_Ref}}

+
+
セレクター

+
+
以下は様々なセレクターで、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。

+
+
基本セレクター

+
+
基本セレクターは基礎的なセレクターです。これらは最も基本的なセレクターで、他のより複雑なセレクターを作成するために頻繁に組み合わせられます。

+
+
+
+
グループ化セレクター

+
+

+ 
セレクターリスト A, B

+ 
A と B の両方の要素が選択されることを指定します。これは複数の一致する要素をグループ化する方法です。

+

+
+
結合子

+
+
結合子 (Combinators) は二つ以上の単純セレクターの関係、例えば「A は B の子である」や「A はis B の子孫である」などを確立するためのセレクターです。

+
+

+ 
隣接兄弟結合子 A + B

+ 
A と B のそれぞれで選択された要素が同じ親を持ち、かつ B で選択された要素が A で選択された要素の水平的な直後にあることを指定します。

+ 
一般兄弟結合子 A ~ B

+ 
A と B のそれぞれで選択された要素が同じ親を共有しており、かつ A で選択された要素が B の前に — ただし直前である必要はありませんが — 来た場合を指定します。

+ 
子結合子 A > B

+ 
B で選択された要素のうち、 A で選択された要素の直接の子であるものを指定します。

+ 
子孫結合子 A B

+ 
B で選択された要素のうち、 A, but is not necessarily a direct child.

+ 
列結合子 A || B {{Experimental_Inline}}

+ 
B で指定された要素のうち、 A で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。

+

+
+
擬似クラスと擬似要素

+
+

+ 
擬似クラス :

+ 
選択された要素が特別な状態にあることを指定します。

+ 
擬似要素 ::

+ 
HTML に含まれていないエンティティを表します。

+

+
+

+
関連情報: Selectors Level 4 仕様書におけるセレクター。

+

+
+
概念

+
+
構文と意味

+
+
+
+
値

+
+
+
+
レイアウト

+
+
+
+
DOM-CSS / CSSOM

+
+
主なオブジェクトの種類

+
+
    
+ 
  • {{DOMxRef("DocumentOrShadowRoot.styleSheets")}}
    • 
+ 
  • {{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}
    • 
+ 
  • cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}} (セレクターとスタイル)
    • 
+ 
  • cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}
    • 
+ 
  • {{DOMxRef("HTMLElement.style")}}
    • 
+ 
  • HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}} (スタイルのみ)
    • 
+ 
  • {{DOMxRef("Element.className")}}
    • 
+ 
  • {{DOMxRef("Element.classList")}}
    • 
+

+
+
重要なメソッド

+
+
    
+ 
  • {{DOMxRef("CSSStyleSheet.insertRule()")}}
    • 
+ 
  • {{DOMxRef("CSSStyleSheet.deleteRule()")}}
    • 
+

+
+
関連情報

+
+
+
+
+
+
diff --git a/files/ja/web/css/repeat()/index.html b/files/ja/web/css/repeat()/index.html
new file mode 100644
index 0000000000..5a247377a9
--- /dev/null
+++ b/files/ja/web/css/repeat()/index.html
@@ -0,0 +1,157 @@
+---
+title: repeat()
+slug: Web/CSS/repeat()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Grid
+  - Function
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/repeat()
+---
+
{{cssref}}

+
+
repeat() は CSS の関数で、トラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。

+
+
この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。

+
+
/* <track-repeat> 値 */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* <auto-repeat> 値 */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* <fixed-repeat> 値 */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+

+
+
構文

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
正の整数で表される長さ。

+ 
{{cssxref("<percentage>")}}

+ 
負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 <percentage> は auto として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。

+ 
{{cssxref("<flex>")}}

+ 
トラックのフレックス要素を明示している fr 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りのスペースを配分する。

+ 
max-content

+ 
グリッドトラックにあるグリッドアイテムの最も大きい max-content を表す。

+ 
min-content

+ 
グリッドトラックにあるグリッドアイテムの最も大きい min-content を表す。

+ 
auto

+ 
最大値としては、 max-content と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。

+ 
auto-fill

+ 
グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になる。各トラックは定義されているならば、最大トラック幅を調整する関数 (grid-template-rows または grid-template-columns を定義するために使用されるそれぞれ独立した値) として扱われる。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れる。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になる。その他の場合は、指定されたトラックリストは 1 回のみ繰り返す。

+ 
auto-fit

+ 

+ 
auto-fill と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。)

+
+ 
折り畳まれたトラックは、 0px　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。

+
+ 
自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば 1px) に切り下げます。

+ 

+

+
+
例

+
+
repeat() を使用したグリッド列の指

+
+
HTML

+
+
<div id="container">
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    Inflexible item of 100 pixels width.
+  </div>
+</div>

+
+
CSS

+
+
#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+

+
+
結果

+
+
{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.grid-template-columns.repeat")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/repeating-linear-gradient()/index.html b/files/ja/web/css/repeating-linear-gradient()/index.html
new file mode 100644
index 0000000000..a34d03a051
--- /dev/null
+++ b/files/ja/web/css/repeating-linear-gradient()/index.html
@@ -0,0 +1,166 @@
+---
+title: repeating-linear-gradient()
+slug: Web/CSS/repeating-linear-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Reference
+  - ウェブ
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/repeating-linear-gradient()
+---
+
{{CSSRef}}

+
+
CSS の repeating-linear-gradient() 関数は、反復線形グラデーションによる画像を生成します。 {{cssxref("linear-gradient")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。

+
+
{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}

+
+
+
+
繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。

+
+
他のグラデーションと同じく、線形反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

+
+
<gradient> は CSS の <image> データ型に所属しますので、 <image> が使用できるところでのみ使用できます。このため、 repeating-linear-gradient() は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。

+
+
構文

+
+
/* 45度方向に軸を延ばし、青で始め赤で終わり、
+   3回繰り返す反復グラデーション */
+repeating-linear-gradient(45deg, blue, red 33.3%);
+
+/* 右下から左上に延び、青で始め赤で終わり、
+   20px ごとに繰り返す反復グラデーション */
+repeating-linear-gradient(to left top, blue, red 20px);
+
+/* 下から上に延び、青で始め、 40% から緑になり、赤で終わる
+   グラデーション。最後の色経由点が既定で 100% なので、
+   グラデーションは繰り返されない */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+/* 5回繰り返し、左から右に、赤で始まり、緑に変わり、
+   赤に戻るグラデーション */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
+

+
+
値

+
+

+ 
<side-or-corner>

+ 
グラデーション線の開始点の位置。指定する場合は、 to に続けて2つ以下のキーワードを指定します。一つは水平方向の辺 (left または right)、もう一方は垂直方向の辺 (top または bottom) です。辺を表すキーワードは順不同です。指定しない場合は、 to bottom が既定になります。

+ 
to top, to bottom, to left, to right の値は、 0deg, 180deg, 270deg, 90deg の角度にそれぞれ対応します。他の値は角度に変換されます。

+ 
{{cssxref("<angle>")}}

+ 
グラデーション線の方向を角度で示します。 0deg の値は to top と等価で、値が増加するとそこから時計回りに回ります。

+ 
<linear-color-stop>

+ 
色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 0% のパーセント値または 0 の長さは、グラデーションの先頭を表します。 100% の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。

+ 
<color-hint>

+ 
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。

+ 

+ 

+ 
メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

+ 

+ 

+

+
+
形式文法

+
+
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+                            \---------------------------------/ \---------------/
+                              Definition of the gradient line   List of color stops
+
+where <side-or-corner> = [left | right] || [top | bottom]
+  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  and <linear-color-stop> = <color> [ <color-stop-length> ]?
+  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  and <color-hint> = [ <percentage> | <length> ]
+

+
+
例

+
+
縞模様

+
+
+
+
body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* 複数の色経由点の位置 */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+

+
+
{{EmbedLiveSample('Zebra_stripes', 120, 120)}}

+
+
10回繰り返す水平線

+
+
+
+
body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+

+
+
{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}}

+
+
最後の色経由点が10%であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは10%の高さになり、10本の水平線に相当します。

+
+

+
メモ: 他の例は CSS グラデーションの使用を参照してください。

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}

+
+
関連情報

+
+
    
+ 
  • CSS グラデーションの使用
    • 
+ 
  • 他のグラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}
    • 
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{cssxref("_image","image()")}}
    • 
+ 
  • {{cssxref("element()")}}
    • 
+ 
  • {{cssxref("image-set","image-set()")}}
    • 
+ 
  • {{cssxref("cross-fade")}}
    • 
+

diff --git a/files/ja/web/css/repeating-radial-gradient()/index.html b/files/ja/web/css/repeating-radial-gradient()/index.html
new file mode 100644
index 0000000000..651c432c2b
--- /dev/null
+++ b/files/ja/web/css/repeating-radial-gradient()/index.html
@@ -0,0 +1,186 @@
+---
+title: repeating-radial-gradient()
+slug: Web/CSS/repeating-radial-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Reference
+  - ウェブ
+  - グラデーション
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/repeating-radial-gradient()
+---
+
{{CSSRef}}

+
+
CSS の repeating-radial-gradient() 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。

+
+
{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}

+
+
+
+
それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。

+
+
他のグラデーションと同じく、放射反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

+
+
<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 repeating-radial-gradient() は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

+
+
構文

+
+
/* コンテナーの中央からのグラデーションで、
+   赤で始まり、青に変化し、緑で終わり、
+   それぞれ 30px ごとに色が繰り返される */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* 左上の角付近の楕円形のグラデーションで、
+   赤で始まり、緑に変化し、また戻り、
+   中央と右下の角の間で5回繰り返され、
+   中央と左上の角の間は1回だけ */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+

+
+
値

+
+

+ 
{{cssxref("<position>")}}

+ 
グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は centerです。

+ 
<shape>

+ 
グラデーションの形状です。 circle (グラデーションの形状が一定の半径の円の意味) か ellipse (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は ellipse です。

+ 
<extent-keyword>

+ 
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。

+ 

+ 
+  
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+  
+ 
キーワード説明
closest-sideグラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-cornerグラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-sideclosest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-cornerグラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。

+
+ 

+ 
メモ: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。

+ 

+ 

+ 
<color-stop>

+ 
色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。

+

+
+
形式文法

+
+
repeating-radial-gradient(
+       [[ circle  || <length> ]                     [at <position>]? , |
+        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
+        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
+                                                     at <position>   ,    <color-stop-list> )
+        \---------------------------------------------------------------/\-----------------/
+                  Contour, size and position of the ending shape          List of color stops
+
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+   and <linear-color-stop> = <color> [ <color-stop-length> ]?
+   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+   and <color-hint> = [ <percentage> | <length> ]

+
+
例

+
+
白と黒のグラデーション

+
+
+
+
.radial-gradient {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+

+
+
{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}

+
+
最も遠い角

+
+
+
+
.radial-gradient {
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red, black 5%, blue 5%, green 10%);
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red 0 5%, green 5% 10%);
+}
+

+
+
{{EmbedLiveSample('Farthest-corner', 120, 120)}}

+
+
楕円のグラデーションは左上から20％の位置が中心となり、中心と最も遠い角 (右下の角) の間で10回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。

+
+

+
メモ: 他の例は CSS グラデーションの使用 をご覧ください。

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.types.image.gradient.repeating-radial-gradient")}}

+
+
関連情報

+
+
    
+ 
  • CSS グラデーションの使用
    • 
+ 
  • 他のグラデーション関数: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}
    • 
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{cssxref("_image","image()")}}
    • 
+ 
  • {{cssxref("element()")}}
    • 
+ 
  • {{cssxref("image-set","image-set()")}}
    • 
+ 
  • {{cssxref("cross-fade")}}
    • 
+

diff --git a/files/ja/web/css/replaced_element/index.html b/files/ja/web/css/replaced_element/index.html
new file mode 100644
index 0000000000..0f5d5526fc
--- /dev/null
+++ b/files/ja/web/css/replaced_element/index.html
@@ -0,0 +1,66 @@
+---
+title: 置換要素
+slug: Web/CSS/Replaced_element
+tags:
+  - CSS
+  - Reference
+  - 置換要素
+  - 配置
+translation_of: Web/CSS/Replaced_element
+---
+
{{CSSRef}}

+
+
CSS において、置換要素は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。

+
+
もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。 {{HTMLElement("iframe")}} のような一部の置換要素では、独自のスタイルシートを持つことができますが、親文書のスタイルは継承されません。

+
+
CSS が置換要素において影響できることは、要素のボックス内におけるコンテンツの位置の制御に対応するプロパティがあることだけです。詳しい情報は{{anch("Controlling object position within the content box", "コンテンツボックス内のオブジェクト位置の制御")}}をご覧ください。

+
+
置換要素

+
+
一般的な置換要素は以下の通りです。

+
+
    
+ 
  • {{HTMLElement("iframe")}}
    • 
+ 
  • {{HTMLElement("video")}}
    • 
+ 
  • {{HTMLElement("embed")}}
    • 
+ 
  • {{HTMLElement("img")}}
    • 
+

+
+
一部の要素は、特定の場合に限って置換要素として扱われます。

+
+
    
+ 
  • {{HTMLElement("option")}}
    • 
+ 
  • {{HTMLElement("audio")}}
    • 
+ 
  • {{HTMLElement("canvas")}}
    • 
+ 
  • {{HTMLElement("object")}}
    • 
+ 
  • {{HTMLElement("applet")}}
    • 
+

+
+
HTML 仕様書では {{HTMLElement("input")}} 要素も置換要素になることがあるとしており、これは "image" 型の {{HTMLElement("input")}} 要素が {{HTMLElement("img")}} と同様に置換要素であるためです。しかし、他のフォームコントロールは、他の型の {{HTMLElement("input")}} 要素も含め、明示的に非置換要素として挙げられています (仕様書では、プラットフォームに依存した既定のレンダリングを「ウィジェット」という用語で記述しています)。

+
+
CSS の {{cssxref("content")}} プロパティを使用して挿入されるオブジェクトは無名置換要素です。 HTML のマークアップには存在しないので、「無名」です。

+
+
置換要素における CSS の使用

+
+
CSS はマージンの計算時や一部の auto 値の時など場合によって、特別に置換要素を扱います。

+
+
なお、一部の置換要素は、すべてではありませんが、 {{cssxref("vertical-align")}} のように一部の CSS プロパティで使用される固有の寸法やベースラインの定義を持っていることがあります。置換要素のみが固有の寸法を持つことがあります。

+
+
コンテンツボックス内のオブジェクト位置の制御

+
+
置換要素内に含まれたオブジェクトが要素のボックスエリア内で、どのように配置されるかを指定するために、特定の CSS プロパティを使用することができます。これらは {{SpecName("CSS3 Images")}} 及び {{SpecName("CSS4 Images")}} 仕様書で定義されています。

+
+

+ 
{{cssxref("object-fit")}}

+ 
置換要素の中身のオブジェクトがどのように要素の内包ボックスに合わせられるかを指定します。

+ 
{{cssxref("object-position")}}

+ 
要素のボックス内で置換要素の中身のオブジェクトが配置される位置を指定します。

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/resize/index.html b/files/ja/web/css/resize/index.html
new file mode 100644
index 0000000000..ad5e111cc5
--- /dev/null
+++ b/files/ja/web/css/resize/index.html
@@ -0,0 +1,158 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - Reference
+translation_of: Web/CSS/resize
+---
+
{{CSSRef}}

+
+
CSS の resize プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

+
+
{{EmbedInteractiveExample("pages/css/resize.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* グローバル値 */
+resize: inherit;
+resize: initial;
+resize: unset;

+
+
resize プロパティは以下の挙げた単一のキーワード値で指定します。

+
+
値

+
+

+ 
none

+ 
ユーザーが要素の寸法を制御する方法を提供しません。

+ 
both

+ 
要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。

+ 
horizontal

+ 
要素はユーザーが寸法を変更できる仕組みを、水平方向について表示します。

+ 
vertical

+ 
要素はユーザーが寸法を変更できる仕組みを、垂直方向について表示します。

+ 
block {{experimental_inline}}

+ 
要素はユーザーが寸法を変更できる仕組みを、ブロック方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。

+ 
inline {{experimental_inline}}

+ 
要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。

+

+
+

+
メモ: resize は以下の場合は適用されません。

+
+
    
+ 
  • インライン要素
    • 
+ 
  • {{cssxref("overflow")}} プロパティが visible に設定されたブロック要素
    • 
+

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
テキストエリアの寸法の変更を無効化

+
+
多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 resize プロパティでこの動作を上書きすることができます。

+
+
CSS

+
+
textarea {
+  resize: none; /* Disables resizability */
+}
+

+
+
HTML

+
+
<textarea>Type some text here.</textarea>

+
+
結果

+
+
{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+
+
任意の要素に対する resize の使用

+
+
resize プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。

+
+
CSS

+
+
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  

+
+
HTML

+
+
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  </p>
+</div>  

+
+
結果

+
+
{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}block と inline の値を追加
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.resize")}}

+
+
関連情報

+
+
    
+ 
  • {{HTMLElement("textarea")}}
    • 
+

diff --git a/files/ja/web/css/resolution/index.html b/files/ja/web/css/resolution/index.html
new file mode 100644
index 0000000000..3cffaa63d7
--- /dev/null
+++ b/files/ja/web/css/resolution/index.html
@@ -0,0 +1,101 @@
+---
+title: 
+slug: Web/CSS/resolution
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/resolution
+---
+
{{CSSRef}}

+
+
<resolution> は CSS の データ型 で、メディアクエリの resolution で使われ、出力端末のピクセル密度である、解像度を表します。

+
+
画面では、長さは物理的な値ではなく、 CSS のインチ、センチメートル、またはピクセルと関連づけられます。

+
+
構文

+
+
<resolution> データ型は、厳密に正の {{cssxref("<number>")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

+
+
単位

+
+

+ 
dpi

+ 
1 インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 0.39dpcm です。

+ 
dpcm

+ 
センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、1dpcm ≈ 2.54dpi です。

+ 
dppx

+ 
ピクセル (px) あたりのドット数を表します。CSS の in と CSS の px の比率は 1:96 で固定なので、1dppx は 96dpi と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。

+ 
x

+ 
dppx の別名です。

+

+
+

+
注記: 仮に値 0 に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると 0 は無効で、0dpi、0dpcm、0dppx のどれも表しません。

+

+
+
例

+
+
メディアクエリで使用する

+
+
@media print and (min-resolution: 300dpi) { ... }

+
+
有効な解像度

+
+
96dpi
+50.82dpcm
+3dppx
+

+
+
無効な解像度

+
+
72 dpi     数値と単位の間に空白は許可されていません。
+ten dpi    数値は10進数しか使えません。
+0          単位は必須です。
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Values', '#resolution', '<resolution>')}}{{Spec2('CSS4 Values')}}x 単位を追加
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}dppx 単位を追加
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}初回定義

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("css.types.resolution")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/resolved_value/index.html b/files/ja/web/css/resolved_value/index.html
new file mode 100644
index 0000000000..3442a82d93
--- /dev/null
+++ b/files/ja/web/css/resolved_value/index.html
@@ -0,0 +1,39 @@
+---
+title: 解析値
+slug: Web/CSS/resolved_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/resolved_value
+---
+
{{cssref}}

+
+
CSS プロパティの解析値 は、{{domxref("Window.getComputedStyle", "getComputedStyle()")}}によって返される値です。

+
+
ほとんどのプロパティでは計算値がそのまま解析値となりますが、古いプロパティ({{cssxref("width")}} と {{cssxref("height")}} を含む)では、代わりに使用値が解析値となります。プロパティごとの詳細については、以下の仕様のリンクを参照してください。

+
+
仕様

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書策定状況コメント
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}初期定義

+
+
関連情報

+
+
    
+ 
  • {{domxref("window.getComputedStyle")}}
    • 
+ 
  • {{CSS_key_concepts}}
    • 
+

diff --git a/files/ja/web/css/right/index.html b/files/ja/web/css/right/index.html
new file mode 100644
index 0000000000..3b18fbb610
--- /dev/null
+++ b/files/ja/web/css/right/index.html
@@ -0,0 +1,143 @@
+---
+title: right
+slug: Web/CSS/right
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 位置指定レイアウト
+  - Reference
+  - ウェブ
+translation_of: Web/CSS/right
+---
+
{{CSSRef}}

+
+
CSS の right プロパティは、位置指定要素 (positioned elements) の水平位置の決定に関与します。位置指定されていない要素には効果はありません。

+
+
{{EmbedInteractiveExample("pages/css/right.html")}}

+
+
+
+
right の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。

+
+
    
+ 
  • position が absolute 又は fixed に設定されている場合、 right プロパティは要素の右辺と包含ブロックの右辺との間の距離を指定します。
    • 
+ 
  • position が relative に設定されている場合、 right プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。
    • 
+ 
  • position が sticky に設定されている場合、 right プロパティは要素がビューポート内にある場合は position が relative であるかのように、外の場合は position が fixed の場合と同様に動作します。
    • 
+ 
  • position が static に設定されている場合、 right プロパティは効果がありません。
    • 
+

+
+
{{cssxref("left")}} と right の両方が定義された場合、要素の位置は過剰指定になります。内包ブロックが左書きの場合 (つまり、 right の計算値が -left に設定されていた場合)、 left の値が優先されます。内包ブロックが右書きの場合 (つまり、 left の計算値が -right に設定されていた場合)、 right の値が優先されます。

+
+
構文

+
+
/* <length> 値 */
+right: 3px;
+right: 2.4em;
+
+/* 内包ブロックの幅に対する <percentage> */
+right: 10%;
+
+/* キーワード値 */
+right: auto;
+
+/* グローバル値 */
+right: inherit;
+right: initial;
+right: unset;
+

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。
+ 
    
+  
  • 絶対位置指定要素の場合は、包含ブロックの右辺までの距離。
    • 
+  
  • 相対位置指定要素の場合は、通常の位置からの左方向への移動量。
    • 
+ 

+ 

+ 
{{cssxref("<percentage>")}}

+ 
包含ブロックの幅に対する {{cssxref("<percentage>")}} です。

+ 
auto

+ 
以下のように指定します。
+ 
    
+  
  • 絶対位置指定要素では、要素の位置は {{Cssxref("left")}} プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 left も auto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
    • 
+  
  • 相対位置指定要素では、通常の位置から要素までの距離は {{Cssxref("left")}} に基づきます。また、 left も auto であった場合は、水平方向には移動しません。
    • 
+ 

+ 

+ 
inherit

+ 
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 又は auto キーワードと同様に扱われます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
#example_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#example_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}

+
+
<div id="example_3">Example 3</div>
+<div id="example_4">Example 4</div>
+

+
+
{{ EmbedLiveSample('Examples', 500, 220) }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}right をアニメーション可能として定義
{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}{{Spec2('CSS3 Positioning')}}sticky の位置の動作を追加
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.right")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}
    • 
+

diff --git a/files/ja/web/css/rotate/index.html b/files/ja/web/css/rotate/index.html
new file mode 100644
index 0000000000..bf54017d55
--- /dev/null
+++ b/files/ja/web/css/rotate/index.html
@@ -0,0 +1,122 @@
+---
+title: rotate
+slug: Web/CSS/rotate
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Transforms
+translation_of: Web/CSS/rotate
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS の rotate プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。

+
+
構文

+
+
/* キーワード値 */
+rotate: none;
+
+/* 角度値 */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* x, y, z 軸名と角度 */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* ベクトルと角度の値 */
+rotate: 1 1 1 90deg;

+
+
値

+
+

+ 
角度値

+ 
{{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。rotate() (2次元回転) 関数と等価です。

+ 
x, y, z 軸と角度値

+ 
該当する要素を回転する軸の名前 ("x", "y", "z") と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 rotateX()/rotateY()/rotateZ() (3次元回転) 関数と等価です。

+ 
ベクトルと角度値

+ 
要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 rotate3d() (3次元回転) 関数と等価です。

+ 
none

+ 
回転を適用しないことを表します。

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
HTML

+
+
<div>
+  <p class="rotate">Rotation</p>
+</div>

+
+
CSS

+
+
+
+
.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}

+
+
結果

+
+
{{EmbedLiveSample("Examples")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}初回定義

+
+
{{CSSInfo}}

+
+
ブラウザー実装状況

+
+
+
+
{{Compat("css.properties.rotate")}}

diff --git a/files/ja/web/css/row-gap/index.html b/files/ja/web/css/row-gap/index.html
new file mode 100644
index 0000000000..8ab3d2224d
--- /dev/null
+++ b/files/ja/web/css/row-gap/index.html
@@ -0,0 +1,168 @@
+---
+title: row-gap (grid-row-gap)
+slug: Web/CSS/row-gap
+tags:
+  - CSS
+  - CSS グリッドレイアウト
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - Reference
+  - row-gap
+translation_of: Web/CSS/row-gap
+---
+
{{CSSRef}}

+
+
row-gap は CSS のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。

+
+
{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}

+
+
+
+

+
CSS グリッドレイアウトでは、当初は grid-row-gap プロパティを定義していました。この接頭辞付きのプロパティは row-gap に置き換えられました。しかし、グリッドで grid-row-gap を実装していても row-gap を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。

+

+
+
構文

+
+
/* <length> 値 */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* <percentage> 値 */
+row-gap: 10%;
+
+/* Global values */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
フレックスレイアウト

+
+
{{SeeCompatTable}}

+
+
HTML

+
+
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+

+
+
CSS

+
+
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}
+

+
+
結果

+
+
{{EmbedLiveSample('Flex_layout', "auto", "120px")}}

+
+
グリッドレイアウト

+
+
HTML

+
+
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+
+
CSS

+
+
+
+
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+

+
+
結果

+
+
{{EmbedLiveSample('Grid_layout', 'auto', 120)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義

+
+
{{CSSInfo}}

+
+
ブラウザーの互換性

+
+
+
+
フレックスレイアウトでの対応

+
+
{{Compat("css.properties.row-gap.flex_context")}}

+
+
グリッドレイアウトでの対応

+
+
{{Compat("css.properties.row-gap.grid_context")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/ruby-align/index.html b/files/ja/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..d12b41aa1b
--- /dev/null
+++ b/files/ja/web/css/ruby-align/index.html
@@ -0,0 +1,152 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ルビ
+  - Reference
+translation_of: Web/CSS/ruby-align
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS の ruby-align プロパティは、ベースに対するさまざまなルビの配分を定義します。

+
+
/* キーワード値 */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* グローバル値 */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
start

+ 
ルビをベーステキストの始点に揃えることを示すキーワードです。

+ 
center

+ 
ルビをベーステキストの中央に揃えることを示すキーワードです。

+ 
space-between

+ 
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。

+ 
space-around

+ 
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
この HTML を、ruby-align のそれぞれの値でレンダリングします。

+
+
<ruby>
+  <rb>確認用の長いテキスト</rb>
+  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
+</ruby>
+

+
+
ルビをベーステキストの始点に揃える

+
+
+
+
ruby {
+  ruby-align: start;
+}

+
+
結果は以下のとおりです。

+
+
{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}

+
+
ルビをベーステキストの中央に揃える

+
+
+
+
ruby {
+  ruby-align: center;
+}

+
+
結果は以下のとおりです。

+
+
{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}

+
+
ルビ要素の範囲内にスペースを配分する

+
+
+
+
ruby {
+  ruby-align: space-between;
+}

+
+
結果は以下のとおりです。

+
+
{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}

+
+
ルビ要素内および周囲にスペースを配分する

+
+
+
+
ruby {
+  ruby-align: space-around;
+}

+
+
結果は以下のとおりです。

+
+
{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_elements", 180, 40)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}{{Spec2('CSS3 Ruby')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.ruby-align")}}

+
+
関連情報

+
+
    
+ 
  • HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}}
    • 
+ 
  • CSS のルビ関連プロパティ: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}
    • 
+

diff --git a/files/ja/web/css/ruby-position/index.html b/files/ja/web/css/ruby-position/index.html
new file mode 100644
index 0000000000..b2135adb09
--- /dev/null
+++ b/files/ja/web/css/ruby-position/index.html
@@ -0,0 +1,117 @@
+---
+title: ruby-position
+slug: Web/CSS/ruby-position
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ルビ
+  - リファレンス
+translation_of: Web/CSS/ruby-position
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS の ruby-position プロパティは、ベース要素に対するルビ要素の位置を定義します。要素の上方 (over)、下方 (under)、文字の間の右側 (inter-character) に配置できます。

+
+
/* キーワード値 */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* グローバル値 */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
over

+ 
over の例ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。

+ 
under

+ 
under の例ルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。

+ 
inter-character

+ 
ルビをそれぞれの文字の間に配置することを示すキーワードです。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
この HTML は、 ruby-position のそれぞれの値でレンダリングします。

+
+
<ruby>
+  <rb>超電磁砲</rb>
+  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
+</ruby>
+

+
+
テキストの上に配置したルビ

+
+
+
+
ruby {
+    ruby-position:over;
+}

+
+
結果は以下のとおりです。

+
+
{{EmbedLiveSample("Ruby_positioned_over_the_text", 100, 40)}}

+
+
テキストの下に配置したルビ

+
+
+
+
ruby {
+    ruby-position:under;
+}

+
+
結果は以下のとおりです。

+
+
{{EmbedLiveSample("Ruby_positioned_under_the_text", 100, 40)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}}{{Spec2('CSS3 Ruby')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.ruby-position")}}

+
+
関連情報

+
+
    
+ 
  • HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}}
    • 
+ 
  • CSS のルビ関連プロパティ: {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}
    • 
+

diff --git a/files/ja/web/css/scale/index.html b/files/ja/web/css/scale/index.html
new file mode 100644
index 0000000000..7385f5cd6a
--- /dev/null
+++ b/files/ja/web/css/scale/index.html
@@ -0,0 +1,134 @@
+---
+title: scale
+slug: Web/CSS/scale
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Transforms
+  - 'recipe:css-property'
+translation_of: Web/CSS/scale
+---
+
{{CSSRef}}

+
+
scale は CSS のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で変換関数を指定する実際の順序を思い出す手間を軽減します。

+
+
構文

+
+
/* キーワード値 */
+scale: none;
+
+/* １つの値 */
+/* 1より大きい値で要素を拡大 */
+scale: 2;
+/* 1より小さい値で要素を縮小 */
+scale: 0.5;
+
+/* ２つの値 */
+scale: 2 0.5;
+
+/* ３つの値 */
+scale: 2 0.5 2;

+
+
値

+
+

+ 
１つの数値

+ 
該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X 及び Y 軸で同じ倍率になります。 scale() (2D 倍率) 関数に１つの値を指定した場合と等価です。

+ 
２つの長さ/パーセント値

+ 
２つの {{CSSxRef("<number>")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 scale() (2D 倍率) 関数に２つの値を指定した場合と等価です。

+ 
３つの長さ/パーセント値

+ 
３つの {{CSSxRef("<number>")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 translate3d() (3D 倍率) 関数と等価です。

+ 
none

+ 
拡大率が適用されないことを示します。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
上に乗った際の要素の拡大Scaling an element on hover

+
+
HTML

+
+
<div>
+  <p class="scale">Scaling</p>
+</div>

+
+
CSS

+
+
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+

+
+
結果

+
+
{{EmbedLiveSample("Scaling_an_element_on_hover")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}{{Spec2("CSS Transforms 2")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scale")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref('translate')}}
    • 
+ 
  • {{cssxref('rotate')}}
    • 
+ 
  • {{cssxref('transform')}}
    • 
+

+
+
注: skew は独立した変形値ではありません

diff --git a/files/ja/web/css/scaling_background_images/index.html b/files/ja/web/css/scaling_background_images/index.html
new file mode 100644
index 0000000000..93a268e1c6
--- /dev/null
+++ b/files/ja/web/css/scaling_background_images/index.html
@@ -0,0 +1,102 @@
+---
+title: 背景画像の拡大縮小
+slug: Web/CSS/Scaling_background_images
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+
CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。

+
+
大きな画像をタイル状に配置する

+
+
1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。

+
+
screenshot1.png

+
+
これは以下の CSS を使うことで達成されます。

+
+
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(fxlogo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+

+
+
もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。

+
+
画像を引き伸ばす

+
+
以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。

+
+
background-size: 300px 150px;
+

+
+
その結果はこのようになります。

+
+
screenshot3.png

+
+
画像を拡大する

+
+
この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。

+
+
screenshot2.png

+
+
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+

+
+
ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。

+
+
特別な値の「contain」と「cover」

+
+
CSS の {{cssxref("background-size")}} には、 {{cssxref("<length>")}} の値の他に、 contain と cover の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。

+
+
contain

+
+
contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は　コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。

+
+

+
このウィンドウのサイズを変えて、何が起こるかを見て下さい。

+

+
+
上の例の CSS は以下のようなものです。

+
+
width: 100%;
+height: 200px;
+background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
+background-size: contain;
+border: solid 2px;
+

+
+
cover

+
+
cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。

+
+

+
このウィンドウのサイズを変えて、何が起こるかを見て下さい。

+

+
+
この例では以下の CSS を使用しています。

+
+
width: 100%;
+height: 200px;
+background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
+background-size: cover;
+border: solid 2px;
+

+
+
関連情報

+
+
    
+ 
  • {{cssxref("background-size")}}
    • 
+ 
  • {{cssxref("background")}}
    • 
+

diff --git a/files/ja/web/css/scroll-behavior/index.html b/files/ja/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..8103e98b17
--- /dev/null
+++ b/files/ja/web/css/scroll-behavior/index.html
@@ -0,0 +1,133 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSSOM View
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/scroll-behavior
+---
+
{{CSSRef}}

+
+
scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。

+
+
{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}

+
+
+
+
なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが body 要素に指定された場合は、ビューポートには適用されません。

+
+
ユーザーエージェントは、このプロパティを無視することができます。

+
+
構文

+
+
/* キーワード値 */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* グローバル値 */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+

+
+
scroll-behavior プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+
+
値

+
+

+ 
auto

+ 
スクロールするボックスは瞬時にスクロールします。

+ 
smooth

+ 
スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑ににスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
スクロールの動きをスムーズに設定

+
+
HTML

+
+
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>

+
+
CSS

+
+
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+

+
+
結果

+
+
{{ EmbedLiveSample("Setting_smooth_scroll_behavior", "100%", 250) }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-behavior")}}

diff --git a/files/ja/web/css/scroll-margin-bottom/index.html b/files/ja/web/css/scroll-margin-bottom/index.html
new file mode 100644
index 0000000000..4d2b2bcbaf
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-bottom/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin-bottom
+slug: Web/CSS/scroll-margin-bottom
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-bottom
+translation_of: Web/CSS/scroll-margin-bottom
+---
+
{{CSSRef}}

+
+
scroll-margin-bottom プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin-bottom: 10px;
+scroll-margin-bottom: 1em;
+
+/* グローバル値 */
+scroll-margin-bottom: inherit;
+scroll-margin-bottom: initial;
+scroll-margin-bottom: unset;
+

+
+
値

+
+

+ 
<length>

+ 
スクロールコンテナーの下側の辺からみた外部の距離です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-margin-bottom")}}

diff --git a/files/ja/web/css/scroll-margin-inline-end/index.html b/files/ja/web/css/scroll-margin-inline-end/index.html
new file mode 100644
index 0000000000..919ec6c03f
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-inline-end/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-inline-end
+slug: Web/CSS/scroll-margin-inline-end
+tags:
+  - Advanced
+  - CSS
+  - NeedsExample
+  - Reference
+  - 上級者
+translation_of: Web/CSS/scroll-margin-inline-end
+---
+
{{CSSRef}}

+
+
scroll-margin-inline-end プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin-inline-end: 10px;
+scroll-margin-inline-end: 1em;
+
+/* グローバル値 */
+scroll-margin-inline-end: inherit;
+scroll-margin-inline-end: initial;
+scroll-margin-inline-end: unset;
+

+
+
値

+
+

+ 
<length>

+ 
スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-margin-inline-end")}}

diff --git a/files/ja/web/css/scroll-margin-inline-start/index.html b/files/ja/web/css/scroll-margin-inline-start/index.html
new file mode 100644
index 0000000000..e8329858b7
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-inline-start/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin-inline-start
+slug: Web/CSS/scroll-margin-inline-start
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-margin-inline
+  - scroll-margin-inline-start
+translation_of: Web/CSS/scroll-margin-inline-start
+---
+
{{CSSRef}}

+
+
scroll-margin-inline-start プロパティは、スクロールスナップ領域のインライン方向における開始側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin-inline-start: 10px;
+scroll-margin-inline-start: 1em;
+
+/* グローバル値 */
+scroll-margin-inline-start: inherit;
+scroll-margin-inline-start: initial;
+scroll-margin-inline-start: unset;
+

+
+
値

+
+

+ 
<length>

+ 
スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-margin-inline-start")}}

diff --git a/files/ja/web/css/scroll-margin-inline/index.html b/files/ja/web/css/scroll-margin-inline/index.html
new file mode 100644
index 0000000000..ce8b1db68a
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-inline/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-inline
+slug: Web/CSS/scroll-margin-inline
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-inline
+translation_of: Web/CSS/scroll-margin-inline
+---
+
{{CSSRef}}

+
+
scroll-margin-inline プロパティは、インライン方向の scroll-margin の個別指定を設定する一括指定プロパティです。

+
+
scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin-inline: 10px;
+scroll-margin-inline: 1em .5em ;
+
+/* グローバル値 */
+scroll-margin-inline: inherit;
+scroll-margin-inline: initial;
+scroll-margin-inline: unset;
+

+
+
値

+
+

+ 
<length>

+ 
スクロールコンテナーの対応する辺からの距離です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-margin-inline")}}

diff --git a/files/ja/web/css/scroll-margin-left/index.html b/files/ja/web/css/scroll-margin-left/index.html
new file mode 100644
index 0000000000..262ad77a8d
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-left/index.html
@@ -0,0 +1,71 @@
+---
+title: scroll-margin-left
+slug: Web/CSS/scroll-margin-left
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Scroll margin left
+  - Web
+  - scroll-margin
+  - scroll-margin-left
+translation_of: Web/CSS/scroll-margin-left
+---
+
{{CSSRef}}

+
+
scroll-margin-left プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin-left: 10px;
+scroll-margin-left: 1em;
+
+/* グローバル値 */
+scroll-margin-left: inherit;
+scroll-margin-left: initial;
+scroll-margin-left: unset;
+

+
+
値

+
+

+ 
<length>

+ 
スクロールコンテナーの左側の辺からみた外部の距離です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-margin-left")}}

diff --git a/files/ja/web/css/scroll-margin-right/index.html b/files/ja/web/css/scroll-margin-right/index.html
new file mode 100644
index 0000000000..121d50a284
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-right/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-right
+slug: Web/CSS/scroll-margin-right
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-right
+translation_of: Web/CSS/scroll-margin-right
+---
+
{{CSSRef}}

+
+
scroll-margin-right プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin-right: 10px;
+scroll-margin-right: 1em;
+
+/* グローバル値 */
+scroll-margin-right: inherit;
+scroll-margin-right: initial;
+scroll-margin-right: unset;
+

+
+
値

+
+

+ 
<length>

+ 
スクロールコンテナーの右側の辺からみた外部の距離です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-margin-right")}}

diff --git a/files/ja/web/css/scroll-margin-top/index.html b/files/ja/web/css/scroll-margin-top/index.html
new file mode 100644
index 0000000000..a79d19eb93
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-top/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin-top
+slug: Web/CSS/scroll-margin-top
+tags:
+  - CSS
+  - CSS Property
+  - CodingScripting
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-top
+translation_of: Web/CSS/scroll-margin-top
+---
+
{{CSSRef}}

+
+
scroll-margin-top プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin-top: 10px;
+scroll-margin-top: 1em;
+
+/* グローバル値 */
+scroll-margin-top: inherit;
+scroll-margin-top: initial;
+scroll-margin-top: unset;
+

+
+
値

+
+

+ 
<length>

+ 
スクロールコンテナーの上側の辺からみた外部の距離です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-margin-top")}}

diff --git a/files/ja/web/css/scroll-margin/index.html b/files/ja/web/css/scroll-margin/index.html
new file mode 100644
index 0000000000..3097d93f26
--- /dev/null
+++ b/files/ja/web/css/scroll-margin/index.html
@@ -0,0 +1,64 @@
+---
+title: scroll-margin
+slug: Web/CSS/scroll-margin
+tags:
+  - CSS
+  - Reference
+  - scroll-margin
+translation_of: Web/CSS/scroll-margin
+---
+
{{CSSRef}}

+
+
scroll-margin プロパティは一括指定プロパティであり、すべての個別指定の scroll-margin プロパティに対して、ちょうど margin プロパティが個別指定の margin-* に値を割り当てるように、値を割り当てます。

+
+
scroll-margin の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。

+
+
{{cssinfo}}

+
+
構文

+
+
/* <length> 値 */
+scroll-margin: 10px;
+scroll-margin: 1em .5em 1em 1em;
+
+/* グローバル値 */
+scroll-margin: inherit;
+scroll-margin: initial;
+scroll-margin: unset;
+

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
スクロールコンテナーの辺からの張り出し部分です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.scroll-margin")}}

diff --git a/files/ja/web/css/scroll-padding-block-end/index.html b/files/ja/web/css/scroll-padding-block-end/index.html
new file mode 100644
index 0000000000..a088012aff
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-block-end/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-block-end
+slug: Web/CSS/scroll-padding-block-end
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Web
+  - 'recipe:css-property'
+  - scroll-padding-block
+  - scroll-padding-block-end
+translation_of: Web/CSS/scroll-padding-block-end
+---
+
{{CSSRef}}

+
+
scroll-padding-block-end プロパティは、スクロールポートの最適表示領域のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+scroll-padding-block-end: auto;
+
+/* <length> 値 */
+scroll-padding-block-end: 10px;
+scroll-padding-block-end: 1em;
+scroll-padding-block-end: 10%;
+
+/* グローバル値 */
+scroll-padding-block-end: inherit;
+scroll-padding-block-end: initial;
+scroll-padding-block-end: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-block-end")}}

diff --git a/files/ja/web/css/scroll-padding-block-start/index.html b/files/ja/web/css/scroll-padding-block-start/index.html
new file mode 100644
index 0000000000..ca9de2a0bd
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-block-start/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding-block-start
+slug: Web/CSS/scroll-padding-block-start
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-padding-block
+  - scroll-padding-block-start
+translation_of: Web/CSS/scroll-padding-block-start
+---
+
{{CSSRef}}

+
+
scroll-padding-block-start プロパティは、スクロールポートの最適表示領域のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-block-start: auto;
+
+/* <length> 値 */
+scroll-padding-block-start: 10px;
+scroll-padding-block-start: 1em;
+scroll-padding-block-start: 10%;
+
+/* グローバル値 */
+scroll-padding-block-start: inherit;
+scroll-padding-block-start: initial;
+scroll-padding-block-start: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-block-start")}}

diff --git a/files/ja/web/css/scroll-padding-block/index.html b/files/ja/web/css/scroll-padding-block/index.html
new file mode 100644
index 0000000000..bd02946514
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-block/index.html
@@ -0,0 +1,74 @@
+---
+title: scroll-padding-block
+slug: Web/CSS/scroll-padding-block
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Property
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-block
+translation_of: Web/CSS/scroll-padding-block
+---
+
{{CSSRef}}

+
+
scroll-padding-block プロパティは、ブロック軸の scroll-padding 個別指定を設定する一括指定プロパティです。

+
+
scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-block: auto;
+
+/* <length> 値 */
+scroll-padding-block: 10px;
+scroll-padding-block: 1em .5em;
+scroll-padding-block: 10%;
+
+/* グローバル値 */
+scroll-padding-block: inherit;
+scroll-padding-block: initial;
+scroll-padding-block: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.scroll-padding-block")}}

diff --git a/files/ja/web/css/scroll-padding-bottom/index.html b/files/ja/web/css/scroll-padding-bottom/index.html
new file mode 100644
index 0000000000..e0fd1afbf2
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-bottom/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding-bottom
+slug: Web/CSS/scroll-padding-bottom
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-bottom
+translation_of: Web/CSS/scroll-padding-bottom
+---
+
{{CSSRef}}

+
+
scroll-padding-bottom プロパティは、スクロールポートの最適表示領域の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-bottom: auto;
+
+/* <length> 値 */
+scroll-padding-bottom: 10px;
+scroll-padding-bottom: 1em;
+scroll-padding-bottom: 10%;
+
+/* グローバル値 */
+scroll-padding-bottom: inherit;
+scroll-padding-bottom: initial;
+scroll-padding-bottom: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-bottom")}}

diff --git a/files/ja/web/css/scroll-padding-inline-end/index.html b/files/ja/web/css/scroll-padding-inline-end/index.html
new file mode 100644
index 0000000000..86a5891f2f
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-inline-end/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-inline-end
+slug: Web/CSS/scroll-padding-inline-end
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Web
+  - scroll-padding-inline
+  - scroll-padding-inline-end
+translation_of: Web/CSS/scroll-padding-inline-end
+---
+
{{CSSRef}}

+
+
scroll-padding-inline-end プロパティは、スクロールポートの最適表示領域のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-inline-end: auto;
+
+/* <length> 値 */
+scroll-padding-inline-end: 10px;
+scroll-padding-inline-end: 1em;
+scroll-padding-inline-end: 10%;
+
+/* グローバル値 */
+scroll-padding-inline-end: inherit;
+scroll-padding-inline-end: initial;
+scroll-padding-inline-end: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-inline-end")}}

diff --git a/files/ja/web/css/scroll-padding-inline-start/index.html b/files/ja/web/css/scroll-padding-inline-start/index.html
new file mode 100644
index 0000000000..108e325ef5
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-inline-start/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-inline-start
+slug: Web/CSS/scroll-padding-inline-start
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Web
+  - scroll-padding-inline
+  - scroll-padding-inline-start
+translation_of: Web/CSS/scroll-padding-inline-start
+---
+
{{CSSRef}}

+
+
scroll-padding-inline-start プロパティは、スクロールポートの最適表示領域のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-inline-start: auto;
+
+/* <length> 値 */
+scroll-padding-inline-start: 10px;
+scroll-padding-inline-start: 1em;
+scroll-padding-inline-start: 10%;
+
+/* グローバル値 */
+scroll-padding-inline-start: inherit;
+scroll-padding-inline-start: initial;
+scroll-padding-inline-start: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-inline-start")}}

diff --git a/files/ja/web/css/scroll-padding-inline/index.html b/files/ja/web/css/scroll-padding-inline/index.html
new file mode 100644
index 0000000000..80b6f84804
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-inline/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline
+slug: Web/CSS/scroll-padding-inline
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Web
+  - scroll-padding-inline
+  - scroll-padding-inline-end
+  - scroll-padding-inline-start
+translation_of: Web/CSS/scroll-padding-inline
+---
+
{{CSSRef}}

+
+
scroll-padding-inline プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}

+
+
+
+
scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-inline: auto;
+
+/* <length> 値 */
+scroll-padding-inline: 10px;
+scroll-padding-inline: 1em .5em;
+scroll-padding-inline: 10%;
+
+/* グローバル値 */
+scroll-padding-inline: inherit;
+scroll-padding-inline: initial;
+scroll-padding-inline: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-inline")}}

diff --git a/files/ja/web/css/scroll-padding-left/index.html b/files/ja/web/css/scroll-padding-left/index.html
new file mode 100644
index 0000000000..fbd13252c2
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-left/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-left
+slug: Web/CSS/scroll-padding-left
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - scroll-padding
+  - scroll-padding-left
+translation_of: Web/CSS/scroll-padding-left
+---
+
{{CSSRef}}

+
+
scroll-padding-left プロパティは、スクロールポートの最適表示領域の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-left: auto;
+
+/* <length> 値 */
+scroll-padding-left: 10px;
+scroll-padding-left: 1em;
+scroll-padding-left: 10%;
+
+/* グローバル値 */
+scroll-padding-left: inherit;
+scroll-padding-left: initial;
+scroll-padding-left: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-left")}}

diff --git a/files/ja/web/css/scroll-padding-right/index.html b/files/ja/web/css/scroll-padding-right/index.html
new file mode 100644
index 0000000000..908780a908
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-right/index.html
@@ -0,0 +1,74 @@
+---
+title: scroll-padding-right
+slug: Web/CSS/scroll-padding-right
+tags:
+  - CSS
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-right
+translation_of: Web/CSS/scroll-padding-right
+---
+
{{CSSRef}}

+
+
scroll-padding-right プロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-right: auto;
+
+/* <length> 値 */
+scroll-padding-right: 10px;
+scroll-padding-right: 1em;
+scroll-padding-right: 10%;
+
+/* グローバル値 */
+scroll-padding-right: inherit;
+scroll-padding-right: initial;
+scroll-padding-right: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-right")}}

diff --git a/files/ja/web/css/scroll-padding-top/index.html b/files/ja/web/css/scroll-padding-top/index.html
new file mode 100644
index 0000000000..10258d7eb3
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-top/index.html
@@ -0,0 +1,74 @@
+---
+title: scroll-padding-top
+slug: Web/CSS/scroll-padding-top
+tags:
+  - CSS
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-top
+translation_of: Web/CSS/scroll-padding-top
+---
+
{{CSSRef}}

+
+
scroll-padding-top プロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}

+
+
+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-padding-top: auto;
+
+/* <length> 値 */
+scroll-padding-top: 10px;
+scroll-padding-top: 1em;
+scroll-padding-top: 10%;
+
+/* グローバル値 */
+scroll-padding-top: inherit;
+scroll-padding-top: initial;
+scroll-padding-top: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。

+ 
auto

+ 
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding-top")}}

diff --git a/files/ja/web/css/scroll-padding/index.html b/files/ja/web/css/scroll-padding/index.html
new file mode 100644
index 0000000000..f1cfd2d44c
--- /dev/null
+++ b/files/ja/web/css/scroll-padding/index.html
@@ -0,0 +1,88 @@
+---
+title: scroll-padding
+slug: Web/CSS/scroll-padding
+tags:
+  - CSS
+  - CSS Property
+  - 'recipe:css-shorthand-property'
+  - scroll-snap
+translation_of: Web/CSS/scroll-padding
+---
+
{{CSSRef}}

+
+
scroll-padding は一括指定プロパティで、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。

+
+
{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}

+
+
+
+
scroll-padding-* プロパティは、スクロールポートの最適な表示領域のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。

+
+
構成するプロパティ

+
+
このプロパティは以下の CSS プロパティの一括指定です。

+
+
    
+ 
  • {{cssxref("scroll-padding-bottom")}}
    • 
+ 
  • {{cssxref("scroll-padding-left")}}
    • 
+ 
  • {{cssxref("scroll-padding-right")}}
    • 
+ 
  • {{cssxref("scroll-padding-top")}}
    • 
+

+
+
構文

+
+
/* キーワード値 */
+scroll-padding: auto;
+
+/* <length> 値 */
+scroll-padding: 10px;
+scroll-padding: 1em .5em 1em 1em;
+scroll-padding: 10%;
+
+/* グローバル値 */
+scroll-padding: inherit;
+scroll-padding: initial;
+scroll-padding: unset;
+

+
+
値

+
+

+ 
{{cssxref("<length-percentage>")}}

+ 
スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("<length>")}} または {{cssxref("<percentage>")}} として指定します。

+ 
auto

+ 
オフセットがユーザーエージェントによって決定されます。これは一般的には 0px になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。

+

+
+
公式定義

+
+
{{CSSInfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-padding")}}

diff --git a/files/ja/web/css/scroll-snap-align/index.html b/files/ja/web/css/scroll-snap-align/index.html
new file mode 100644
index 0000000000..43896d458d
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-align/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-snap-align
+slug: Web/CSS/scroll-snap-align
+tags:
+  - Advanced
+  - CSS
+  - Example
+  - NeedsLiveSample
+  - Reference
+  - 上級者
+translation_of: Web/CSS/scroll-snap-align
+---
+
{{CSSRef}}

+
+
scroll-snap-align プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。

+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scroll-snap-align: none;
+scroll-snap-align: start end; /* 2つの値を指定すると、1番目がブロック、2番目がインラインとなる */
+scroll-snap-align: center;
+
+/* グローバル値 */
+scroll-snap-align: inherit;
+scroll-snap-align: initial;
+scroll-snap-align: unset;
+

+
+
値

+
+

+ 
none

+ 
このボックスでは、その軸のスナップ位置を定義しません。

+ 
start

+ 
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。

+ 
end

+ 
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。

+ 
center

+ 
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+

+
Safari は現在のところ、値2つの構文が誤った順になっており、1番目の値がインラインで2番目の値がブロックになっています。 バグ #191865 を参照してください。

+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scroll-snap-align")}}

diff --git a/files/ja/web/css/scroll-snap-coordinate/index.html b/files/ja/web/css/scroll-snap-coordinate/index.html
new file mode 100644
index 0000000000..45bac430de
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-coordinate/index.html
@@ -0,0 +1,156 @@
+---
+title: scroll-snap-coordinate
+slug: Web/CSS/scroll-snap-coordinate
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - CSS プロパティ
+  - Deprecated
+  - Reference
+  - scroll-snap-coordinate
+translation_of: Web/CSS/scroll-snap-coordinate
+---
+
{{CSSRef}}{{deprecated_header}}

+
+
CSS の scroll-snap-coordinate プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。

+
+
/* キーワード値 */
+scroll-snap-coordinate: none;
+
+/* <position> 値 */
+scroll-snap-coordinate: 50px 50px;                   /* 単一の座標 */
+scroll-snap-coordinate: 100px 100px, 100px bottom;   /* 複数の座標 */
+
+/* グローバル値 */
+scroll-snap-coordinate: inherit;
+scroll-snap-coordinate: initial;
+scroll-snap-coordinate: unset;

+
+
要素が変形されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
none

+ 
要素がスナップ点を提供しないことを示します。

+ 
{{cssxref("<position>")}}

+ 
スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<div id="container">
+  <div>
+    <p>At coordinate (0, 0)</p>
+    <div class="scrollContainer coordinate0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (25, 0)</p>
+    <div class="scrollContainer coordinate25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (50, 0)</p>
+    <div class="scrollContainer coordinate50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+

+
+
CSS

+
+
#container {
+  display: flex;
+}
+
+#container > div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+.scrollContainer > div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.coordinate0 > div {
+  scroll-snap-coordinate: 0 0;
+}
+
+.coordinate25 > div {
+  scroll-snap-coordinate: 25px 0;
+}
+
+.coordinate50 > div {
+  scroll-snap-coordinate: 50px 0;
+}
+
+.scrollContainer > div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+.scrollContainer > div:nth-child(odd) {
+  background-color: #87ccea;
+}

+
+
Result

+
+
{{EmbedLiveSample("Example", "100%", "170")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.scroll-snap-coordinate")}}

diff --git a/files/ja/web/css/scroll-snap-destination/index.html b/files/ja/web/css/scroll-snap-destination/index.html
new file mode 100644
index 0000000000..8b652a802a
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-destination/index.html
@@ -0,0 +1,148 @@
+---
+title: scroll-snap-destination
+slug: Web/CSS/scroll-snap-destination
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - CSS プロパティ
+  - Deprecated
+  - Reference
+translation_of: Web/CSS/scroll-snap-destination
+---
+
{{CSSRef}}{{deprecated_header}}

+
+
CSS の scroll-snap-destination プロパティは、スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。

+
+
/* <position> 値 */
+scroll-snap-destination: 400px 600px;
+
+/* グローバル値 */
+scroll-snap-destination: inherit;
+scroll-snap-destination: initial;
+scroll-snap-destination: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
<position>

+ 
スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<div id="container">
+  <div>
+    <p>At coordinate (0, 0)</p>
+    <div class="scrollContainer destination0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (25, 0)</p>
+    <div class="scrollContainer destination25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (50, 0)</p>
+    <div class="scrollContainer destination50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+

+
+
CSS

+
+
#container {
+  display: flex;
+}
+
+#container > div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  scroll-snap-destination: 20px 0;
+  font-size: 0;
+}
+
+.destination0 {
+  scroll-snap-destination: 0 0;
+}
+
+.destination25 {
+  scroll-snap-destination: 25px 0;
+}
+
+.destination50 {
+  scroll-snap-destination: 50px 0;
+}
+
+.scrollContainer > div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.scrollContainer > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.scrollContainer > div:nth-child(odd) {
+  background-color: #87CCEA;
+}

+
+
{{EmbedLiveSample("Example", "100%", "170")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.scroll-snap-destination")}}

diff --git a/files/ja/web/css/scroll-snap-stop/index.html b/files/ja/web/css/scroll-snap-stop/index.html
new file mode 100644
index 0000000000..25ba842a38
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-stop/index.html
@@ -0,0 +1,226 @@
+---
+title: scroll-snap-stop
+slug: Web/CSS/scroll-snap-stop
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - Reference
+  - scroll-snap-stop
+  - ウェブ
+translation_of: Web/CSS/scroll-snap-stop
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS の scroll-snap-stop プロパティは、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。

+
+
/* キーワード値 */
+scroll-snap-stop: normal;
+scroll-snap-stop: always;
+
+/* グローバル値 */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
normal

+ 
スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことがあります。

+ 
always

+ 
スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことはありません。最初の要素のスナップ位置にスナップします。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。

+
+
CSS

+
+
/* setup */
+:root, body {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* definite scroll snap */
+.mandatory-scroll-snapping {
+  scroll-snap-stop: always;
+}
+.proximity-scroll-snapping {
+  scroll-snap-stop: normal;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container > div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container > div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container > div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 256px;
+}
+/* appearance fixes */
+.y.container > div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+

+
+
HTML

+
+
<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR </div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Proximity LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mandatory RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Proximity RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+

+
+
{{EmbedLiveSample("Example", "100%", "1630")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.scroll-snap-stop")}}

diff --git a/files/ja/web/css/scroll-snap-type/index.html b/files/ja/web/css/scroll-snap-type/index.html
new file mode 100644
index 0000000000..06c6161a90
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-type/index.html
@@ -0,0 +1,246 @@
+---
+title: scroll-snap-type
+slug: Web/CSS/scroll-snap-type
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/scroll-snap-type
+---
+
{{CSSRef}}

+
+
scroll-snap-type は CSS のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。

+
+
スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、代わりにユーザーエージェントに委ねられます。

+
+
/* キーワード値 */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* 任意の mandatory | proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+
+/* など */
+
+/* グローバル値 */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
none

+ 
このスクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。

+ 
x

+ 
スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。

+ 
y

+ 
スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。

+ 
block

+ 
スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。

+ 
inline

+ 
スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。

+ 
both

+ 
スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。

+ 
mandatory

+ 
このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。

+ 
proximity

+ 
このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML コンテンツ

+
+
<div class="holster">
+<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+</div>
+

+
+
CSS コンテンツ

+
+
/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container > div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container > div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container > div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container > div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+

+
+
{{EmbedLiveSample("Example", "100%", "1630")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}{{Spec2("CSS Scroll Snap Points")}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.scroll-snap-type")}}

diff --git a/files/ja/web/css/scrollbar-color/index.html b/files/ja/web/css/scrollbar-color/index.html
new file mode 100644
index 0000000000..d4367e769e
--- /dev/null
+++ b/files/ja/web/css/scrollbar-color/index.html
@@ -0,0 +1,123 @@
+---
+title: scrollbar-color
+slug: Web/CSS/scrollbar-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+  - scrollbar-color
+  - スクロールバー
+translation_of: Web/CSS/scrollbar-color
+---
+
{{CSSRef}}

+
+
CSS の scrollbar-color プロパティは、スクロールバーのトラックとつまみの色を設定します。

+
+
トラックはスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。

+
+
つまみはスクロールバーの動く部分で、ふつうはトラックの上を動きます。

+
+
{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}

+
+
{{CSSInfo}}

+
+
構文

+
+
/* キーワード値 */
+scrollbar-color: auto;
+scrollbar-color: dark;
+scrollbar-color: light;
+
+/* <color> 値 */
+scrollbar-color: rebeccapurple green;   /* 二つの有効な色。
+一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 */
+
+/* グローバル値 */
+scrollbar-color: inherit;
+scrollbar-color: initial;
+scrollbar-color: unset;
+

+
+
値

+
+

+ 
<scrollbar-color>

+ 
スクロールバーの色を定義します。
+ 
+  
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+  
+ 
auto他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。
dark暗い色のスクロールバーを示し、プラットフォームで提供している暗い色のスクロールバー化、暗い色のカスタムスクロールバーのどちらかになります。
light明るい色のスクロールバーを示し、プラットフォームで提供している明るい色のスクロールバー化、明るい色のカスタムスクロールバーのどちらかになります。
<color> <color>最初の色をスクロールバーのつまみに、二番目の色をスクロールバーのトラックに適用します。

+
+ 

+ 
メモ: ユーザーエージェントはビューポートのルート要素に、何らかの scrollbar-color の値を適用しなければなりません。

+ 

+ 

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
CSS

+
+
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+}

+
+
HTML

+
+
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>

+
+
結果

+
+
{{EmbedLiveSample("Example")}}

+
+
アクセシビリティの考慮事項

+
+
scrollbar-color プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを確認してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}{{Spec2("CSS Scrollbars")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scrollbar-color")}}

diff --git a/files/ja/web/css/scrollbar-width/index.html b/files/ja/web/css/scrollbar-width/index.html
new file mode 100644
index 0000000000..441af136f1
--- /dev/null
+++ b/files/ja/web/css/scrollbar-width/index.html
@@ -0,0 +1,130 @@
+---
+title: scrollbar-width
+slug: Web/CSS/scrollbar-width
+tags:
+  - CSS
+  - CSS Property
+  - CSS スクロールバー
+  - CSS プロパティ
+  - Reference
+  - css scrollbars
+  - 'recipe:css-property'
+  - scrollbar-width
+translation_of: Web/CSS/scrollbar-width
+---
+
{{CSSRef}}

+
+
scrollbar-width プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。

+
+
{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}

+
+
{{cssinfo}}

+
+
構文

+
+
/* キーワード値 */
+scrollbar-width: auto;
+scrollbar-width: thin;
+scrollbar-width: none;
+
+/* グローバル値 */
+scrollbar-width: inherit;
+scrollbar-width: initial;
+scrollbar-width: unset;
+

+
+
値

+
+

+ 
<scrollbar-width>

+ 
スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。
+ 
+  
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+  
+ 
autoプラットフォーム既定のスクロールバーの幅です。
thinプラットフォームが提供している細いスクロールバー、またはプラットフォーム既定のスクロールバーの幅よりも細いスクロールバーです。
noneスクロールバーが表示されませんが、要素はスクロール可能です。

+
+ 

+ 
注: ユーザーエージェントは、ビューポートのルート要素に何らかの scrollbar-width の値を設定する必要があります。

+ 

+ 

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
CSS

+
+
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}

+
+
HTML

+
+
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>

+
+
結果

+
+
{{EmbedLiveSample("Example")}}

+
+
アクセシビリティの考慮事項

+
+
このプロパティは注意して使用してください。 — scrollbar-width を thin または none に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。

+
+
WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}{{Spec2("CSS Scrollbars")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.scrollbar-width")}}

+
+
関連情報

+
+
    
+ 
  • {{CSSxRef("-ms-overflow-style")}}
    • 
+ 
  • {{CSSxRef("::-webkit-scrollbar")}}
    • 
+

diff --git a/files/ja/web/css/selector_list/index.html b/files/ja/web/css/selector_list/index.html
new file mode 100644
index 0000000000..d98542e8d1
--- /dev/null
+++ b/files/ja/web/css/selector_list/index.html
@@ -0,0 +1,101 @@
+---
+title: セレクターリスト
+slug: Web/CSS/Selector_list
+tags:
+  - CSS
+  - Selector
+  - Selector Lists
+  - Selectors
+translation_of: Web/CSS/Selector_list
+---
+
{{CSSRef}}

+
+
CSS の セレクターリスト (selector list) (,) は，すべての一致するノードを選択します。

+
+
/* すべての一致する要素を選択 */
+span,
+div {
+  border: red 2px solid;
+}

+
+
スタイルシートの大きさを縮小するために、グループセレクターをカンマ区切りのリストにすることができます。

+
+
構文

+
+
element, element, element { style properties }

+
+
事例

+
+
単一行のグループ化

+
+
カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。

+
+
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+

+
+
複数行のグループ化

+
+
カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。

+
+
#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+

+
+
セレクターリストの無効化

+
+
セレクターリストを使用する欠点は、以下のものが等価ではないことです。

+
+
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }

+
+
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }

+
+
これは、セレクターリスト内に未対応のセレクターが一つでもあった場合は、規則全体が無効化されてしまうためです。

+
+
この対策方法としては、 {{CSSxRef(":is", ":is()")}} セレクターを使用すれば、単純に引数内の無効なセレクターを無視しますが、 {{CSSxRef(":is", ":is()")}} の詳細度の計算方法の影響で、すべてのセレクターの重みが同じ詳細度になります。

+
+
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }

+
+
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}}「セレクターリスト」に改名
{{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.selectors.list")}}

+
+
関連情報

+
+
    
+ 
  • The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 擬似クラスは、セレクターリストの無効化の古い間違いを起こしません。
    • 
+

diff --git a/files/ja/web/css/shape-image-threshold/index.html b/files/ja/web/css/shape-image-threshold/index.html
new file mode 100644
index 0000000000..fe262be09a
--- /dev/null
+++ b/files/ja/web/css/shape-image-threshold/index.html
@@ -0,0 +1,133 @@
+---
+title: shape-image-threshold
+slug: Web/CSS/shape-image-threshold
+tags:
+  - Boundaries
+  - CSS
+  - CSS Property
+  - CSS Shapes
+  - Float Area
+  - Opacity
+  - Property
+  - Reference
+  - Shape
+  - 'recipe:css-property'
+  - shape-image-threshold
+translation_of: Web/CSS/shape-image-threshold
+---
+
{{CSSRef}}

+
+
shape-image-threshold は CSS のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。

+
+
{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}

+
+
+
+
アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 0.5 の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。

+
+
構文

+
+
/* <number> 値 */
+shape-image-threshold: 0.7;
+
+/* グローバル値 */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+

+
+
値

+
+

+ 
{{cssxref("<alpha-value>")}}

+ 
画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。

+

+
+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
グラデーションへのテキストの配置

+
+
この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは shape-outside を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。

+
+
HTML

+
+
<div id="gradient-shape"></div>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
+  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
+  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
+  accusamus iusto dolore, at provident eius alias maxime pariatur non
+  deleniti ipsum sequi rem eveniet laboriosam magni expedita?
+</p>

+
+
CSS

+
+
#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-outside: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-image-threshold: 0.2;
+}

+
+
シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。

+
+
シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 shape-image-threadhold の値を 0.2 にして使用して作成しています。

+
+
結果

+
+
{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}{{Spec2('CSS Shapes')}}初回定義

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("css.properties.shape-image-threshold")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/shape-margin/index.html b/files/ja/web/css/shape-margin/index.html
new file mode 100644
index 0000000000..01ca907161
--- /dev/null
+++ b/files/ja/web/css/shape-margin/index.html
@@ -0,0 +1,125 @@
+---
+title: shape-margin
+slug: Web/CSS/shape-margin
+tags:
+  - CSS
+  - CSS シェイプ
+  - CSS プロパティ
+  - Reference
+  - float
+  - margin
+  - shape-margin
+  - シェイプ
+  - プロパティ
+  - 境界
+  - 浮動領域
+translation_of: Web/CSS/shape-margin
+---
+
{{CSSRef}}

+
+
CSS の shape-margin プロパティは、 {{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。

+
+
{{EmbedInteractiveExample("pages/css/shape-margin.html")}}

+
+
+
+
マージンで、シェイプ (浮動要素) の縁と周囲のコンテンツとの間隔を調整することができます。

+
+
構文

+
+
/* <length> 値 */
+shape-margin: 10px;
+shape-margin: 20mm;
+
+/* <percentage> 値 */
+shape-margin: 60%;
+
+/* グローバル値 */
+shape-margin: inherit;
+shape-margin: initial;
+shape-margin: unset;
+

+
+
値

+
+

+ 
<length-percentage>

+ 
シェイプのマージンを {{cssxref("<length>")}} 値又は要素の内包ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<section>
+<div class="shape"></div>
+We are not quite sure of any one thing in biology; our knowledge of geology
+is relatively very slight, and the economic laws of society are
+uncertain to every one except some individual who attempts to set them
+forth; but before the world was fashioned the square on the hypotenuse
+was equal to the sum of the squares on the other two sides of a right
+triangle, and it will be so after this world is dead; and the inhabitant
+of Mars, if he exists, probably knows its truth as we know it.</section>

+
+
CSS

+
+
section {
+  max-width: 400px;
+}
+
+.shape {
+  float: left;
+  width: 150px;
+  height: 150px;
+  background-color: maroon;
+  clip-path: polygon(0 0, 150px 150px, 0 150px);
+  shape-outside: polygon(0 0, 150px 150px, 0 150px);
+  shape-margin: 20px;
+}

+
+
結果

+
+
{{EmbedLiveSample("Example", 500, 250)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}{{Spec2('CSS Shapes')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("css.properties.shape-margin")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/shape/index.html b/files/ja/web/css/shape/index.html
new file mode 100644
index 0000000000..5691317b29
--- /dev/null
+++ b/files/ja/web/css/shape/index.html
@@ -0,0 +1,81 @@
+---
+title: 
+slug: Web/CSS/shape
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/shape
+---
+
{{CSSRef}}

+
+
<shape> CSS データ型は、ある領域の具体的な形状を表します。この領域は、要素のどの部分で {{Cssxref("clip")}} のようなプロパティが用いられるのか、定義するのに使われます。

+
+

+
Note:  <shape> and rect() は廃止された{{cssxref("clip")}}と連動しますが、 {{cssxref("clip-path")}}が支持されました。 可能であれば、代わりにclip-pathと{{cssxref("<basic-shape>")}}データ型を使用してください。

+

+
+
構文

+
+
rect() 関数記法は、矩形の領域を作ります。

+
+
rect() 関数

+
+
rect(top, right, bottom, left)
+

+
+
引数は次の長さを表します: 

+
+

+ 
top

+ 
要素のボックスのボーダーの top と、矩形の top との差を表す {{cssxref("<length>")}}

+ 
right

+ 
要素のボックスのボーダーの left と、矩形の right との差を表す {{cssxref("<length>")}}

+ 
bottom

+ 
要素のボックスのボーダーの top と、矩形の bottom との差を表す {{cssxref("<length>")}}。

+ 
left

+ 
要素のボックスのボーダーの left と、矩形の left との差を表す {{cssxref("<length>")}}

+

+
+
補間

+
+
矩形の <shape> CSS データ型の値は、アニメーション用に補間可能です。top、right、bottom 、left のそれぞれが実数（浮動小数点数）として扱われ、補間されます。補間速度は、アニメーションに結びつけられた timing function で決められます。

+
+
例

+
+
img.clip04 {
+  clip: rect(10px, 20px, 20px, 10px);
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書策定状況コメント
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}{{cssxref("clip")}} プロパティと同時に定義

+
+
ブラウザ実装状況

+
+

+
+
+
{{Compat("css.types.shape")}}

+

+
+
関連情報

+
+
    
+ 
  • 関連 CSS プロパティ: {{Cssxref("clip")}}
    • 
+ 
  • -moz-image-rect() 関数は rect()と似た座標を使います
    • 
+

diff --git a/files/ja/web/css/shorthand_properties/index.html b/files/ja/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..36faf7a5d5
--- /dev/null
+++ b/files/ja/web/css/shorthand_properties/index.html
@@ -0,0 +1,166 @@
+---
+title: 一括指定プロパティ
+slug: Web/CSS/Shorthand_properties
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - Reference
+  - Shorthand Properties
+  - properties
+  - shorthand
+translation_of: Web/CSS/Shorthand_properties
+---
+
{{cssref}}

+
+
一括指定プロパティ (shorthand property) は、他の幾つかの CSS プロパティを一度に設定できる CSS プロパティです。一括指定プロパティを用いると、もっと簡単に (そして普通はもっと読みやすく) スタイルシートが書け、時間や労力を節約することができます。

+
+
CSS 仕様書では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。例えば、 {{cssxref("background")}} プロパティは {{cssxref("background-color")}}、 {{cssxref("background-image")}}、 {{cssxref("background-repeat")}}、{{cssxref("background-position")}} の値を定義することができる一括指定プロパティです。同様に、フォントに関連したプロパティは一括指定の {{cssxref("font")}} を使用して定義することができ、ボックスの周囲のマージンは一括指定の {{cssxref("margin")}} を使用して定義することができます。

+
+
注意するべき場合

+
+
一括指定プロパティはとても便利なものですが、使用するにあたって注意しておかなければならない場合が若干あります。

+
+
    
+ 
  1. その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。それは当たり前に聞こえますが、以前設定した値を上書きすることになります。つまり、
+
+  
    background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+
    
+  とすると背景色を red に設定するのではなく、2番目のルールが優先されて {{cssxref("background-color")}} の既定値である transparent となります。
    2. 
+ 
  2. 継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 inherit キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、1つ1つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで inherit キーワードを指定するしかありません。
    3. 
+ 
  3. 一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。
+  
      
+   
    1. ボックスの境界に関するプロパティを扱う一括指定 ({{cssxref("border-style")}}, {{cssxref("margin")}}, {{cssxref("padding")}}) は、それぞれの辺を表すために、一貫して1～4つの値の構文を使用します。
+    
+     
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+     
+    
      border1.png値1つの構文: border-width: 1em — 1つの値ですべての辺を表します
      border2.png値2つの構文: border-width: 1em 2em — 最初の値は垂直、すなわち上下の辺を、2番目の値は水平、すなわち左右の辺を表します。
      border3.png値3つの構文: border-width: 1em 2em 3em — 最初の値は上辺、 2番目の値は水平、すなわち左右の辺、3番目の値は下辺を表します。
      border4.png
+        
      値4つの構文: border-width: 1em 2em 3em 4em — 4つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です (頭文字が Top-Right-Bottom-Left で、これは trouble の子音 TRBL の順と一致します) (また、時計の上で針が回転する順番として覚えることもできます。 1em は12時の位置で始まり、3時の位置で 2em、それから6時の位置で 3em、そして9時の位置で 4em です)。
      
+       
      
+   
      2. 
+   
    2. 同様に、ボックスの角に関する一括指定プロパティ ({{cssxref("border-radius")}} など) は、それぞれの角を表すために一貫して1～4つの値を使用します。
+    
+     
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+     
+    
      corner1.png値1つの構文: border-radius: 1em — 1つの値がすべての角を表現します
      corner2.png値2つの構文: border-radius: 1em 2em — 最初の値は左上と右下の角、2番目の値は右上と左下の角を表します。
      corner3.png値3つの構文: border-radius: 1em 2em 3em — 最初の値は左上、2番目の値は右上と左下、3番目の値は右下の角をそれぞれ表します。
      corner4.png
+        
      値4つの構文: border-radius: 1em 2em 3em 4em — 4つの値がそれぞれ左上、右上、右下、左下を表し、これは左上を起点に時計回りの順です。
      
+       
      
+   
      3. 
+  
    
+ 
    4. 
+

+
+
background プロパティ

+
+
以下のプロパティによる背景の指定は...

+
+
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;

+
+
...1つの宣言で一括指定することができます。

+
+
background: #000 url(images/bg.gif) no-repeat left top;

+
+
(一括指定の形式は、実際は上記の個別指定に加えて、 background-attachment: scroll や、 CSS3 ではいくつかの追加プロパティと等価になります。)

+
+
CSS3 のプロパティを含む詳しい情報は、 {{cssxref("background")}} をご覧ください。

+
+
font プロパティ

+
+
以下の宣言は ...

+
+
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;

+
+
... 以下のように一括指定することができます。

+
+
font: italic bold .8em/1.2 Arial, sans-serif;

+
+
この一括指定宣言は、実際には上記の個別指定宣言に加えて、 font-variant: normal と font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3) と等価になります。

+
+
border プロパティ

+
+
境界線の幅、色、スタイルについては1つの宣言にまとめることができます。例えば、以下の CSS ...

+
+
border-width: 1px;
+border-style: solid;
+border-color: #000;

+
+
... は、以下のように簡略化できます。

+
+
border: 1px solid #000;

+
+
margin プロパティと padding プロパティ

+
+
margin と padding の一括指定も同様に動作します。 margin プロパティでは、1 つ、2 つ、3 つ、または 4 つの値を使用して短縮値を指定することができます。以下の CSS 宣言は ...

+
+
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;

+
+
... は以下の値4つの一括指定を使用した宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。

+
+
margin: 10px 5px 10px 5px;

+
+
マージンの値1つ、2つ、3つ、4つの一括指定宣言は次の通りです。

+
+
    
+ 
  • 値が1つ指定された場合、全四辺に同じマージンが適用される。
    • 
+ 
  • 値が2つ指定された場合、1つ目のマージンは上下、2つ目は左右の辺に適用される。
    • 
+ 
  • 値が3つ指定された場合、1つ目のマージンは上、2つ目は左右、3つ目は下の辺に適用される。
    • 
+ 
  • 値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
    • 
+

+
+
全体一括指定プロパティ

+
+
CSS は全体の一括指定プロパティとして {{cssxref("all")}} を提供しており、値を文書中のすべてのプロパティに適用させます。これは、プロパティの継承モデルを以下のいずれかに変更するためのものです。

+
+
{{page("/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

+
+
CSS の継承がどのように動作するかについての詳細については、カスケードと継承または CSS カスケード入門をご覧ください。

+
+
関連情報

+
+
    
+ 
  • {{css_key_concepts}}
    • 
+ 
  • 一括指定プロパティ: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • 
+

diff --git a/files/ja/web/css/specificity/index.html b/files/ja/web/css/specificity/index.html
new file mode 100644
index 0000000000..0432121930
--- /dev/null
+++ b/files/ja/web/css/specificity/index.html
@@ -0,0 +1,348 @@
+---
+title: 詳細度
+slug: Web/CSS/Specificity
+tags:
+  - CSS
+  - Example
+  - Reference
+  - Web
+  - ウェブ
+  - ガイド
+translation_of: Web/CSS/Specificity
+---
+
{{CSSRef}}

+
+
詳細度 (Specificity) は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。

+
+
詳細度の計算方法

+
+
詳細度は CSS 宣言が適用される際の重みであり、一致するセレクターそれぞれの種類の数によって特定されます。複数の宣言が同じ詳細度であれば、 CSS の中で最後に宣言されたものが要素に適用されます。詳細度は同じ要素に対して複数の宣言が行われている場合のみ適用されます。 CSS の規則として、直接対象となった要素は要素が祖先から継承した規則よりも常に優先されます。

+
+

+
メモ: 文書ツリー内における要素の近接性は、詳細度には影響を与えません。

+

+
+
詳細度の序列（昇順）

+
+
以下のリストは、セレクターを詳細度の小さな順に並べたものです。

+
+
    
+ 
  1. 要素型セレクター (例えば h1) と 擬似要素 (例えば ::before)
    2. 
+ 
  2. クラスセレクター (例えば .example)、属性セレクター (例えば [type="radio"])、擬似クラス (例えば :hover)
    3. 
+ 
  3. ID セレクター (例えば #example)
    4. 
+

+
+
全称セレクター ({{CSSxRef("Universal_selectors", "*")}}), 結合子 ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}), 否定擬似クラス ({{CSSxRef(":not", ":not()")}}) は詳細度に影響を与えません。 (但し、 :not() の中で宣言されたセレクターは影響を与えます。)

+
+
詳しくは「カスケードと継承」の「詳細度」または https://specifishity.com をご覧ください。

+
+
要素に追加されたインラインスタイル (例えば style="font-weight: bold;") は、常に外部スタイルシートの中のスタイルを上書きしますので、最も高い詳細度を持っていると考えることもできます。

+
+
!important の例外

+
+
!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には !important は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然のカスケードを破壊するためデバッグが難しくなるので、 !important を使用することは悪い習慣であり、使用を避けるべきです。同じ要素に二つの競合する宣言が !important 規則付きで適用された場合、より高い詳細度の宣言が適用されます。

+
+
いくつかの経験則

+
+
    
+ 
  • !important を考える前に、常に詳細度を使用する方法を探しましょう。
    • 
+ 
  • ページ固有の CSS が外部の CSS (ブートストラップや正規化 CSS などの外部ライブラリなど) を上書きする場合のみ、 !important を使用しましょう。
    • 
+ 
  • 決してプラグインやマッシュアップを書いている時に、 !important を使わないようにしましょう。
    • 
+ 
  • 決してサイト全体の CSS で !important を使わないようにしましょう。
    • 
+

+
+
!important を使用する代わりに、以下のことを検討してください。

+
+
    
+ 
  1. CSS のカスケードをもっと利用する
    2. 
+ 
  2. 
+  
    もっと詳細な規則を使う。規則の選択時に要素の前に１つまたは複数の要素を示すと、詳細度が上がり、より優先度が高くなります。
    
+
+  
    <div id="test">
+  <span>Text</span>
+</div>
+
    
+
+  
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    
+
+  
    順番に関わらず、テキストは最も詳細度が高い規則である緑色になります。 (また、青の規則は規則の順番にかかわらず、赤の規則を上書きします)
    
+ 
    3. 
+ 
  3. (2)のナンセンスの特殊なケースとして、何も指定する必要がない場合には、単純にセレクターを複製することで詳細度を高めることができます。
+  
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    
+ 
    4. 
+

+
+
!important の用途

+
+
A) インラインスタイルの上書き

+
+
サイトの視覚的な側面をグローバルに設定するグローバル CSS ファイルは、それぞれの要素に直接定義されたインラインスタイルによって上書きされることがあります。インラインスタイルと !important はどちらもとても悪い習慣とみなされていますが、時には前者を上書きするために後者が必要とされることがあります。

+
+
この場合、特定のスタイルをグローバル CSS ファイルの中で !important として設定することで、要素に直接設定されたインラインスタイルを上書きすることができます。

+
+
<div class="foo" style="color: red;">What color am I?</div>
+

+
+
.foo[style*="color: red"] {
+  color: firebrick !important;
+}
+

+
+
多くの JavaScript フレームワークやライブラリがインラインスタイルを追加します。 !important をとても限定的なセレクターで使用することは、これらのインラインスタイルを上書きする方法の一つです。

+
+
B) 高い詳細度の上書き

+
+
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}

+
+
#someElement の中にある場合であっても、 awesome の段落を常に赤くするにはどうすればよいでしょうか。 !important がないと、第一の規則がより詳細度が高いので、第二の規則に勝ちます。

+
+
!important を上書きする方法

+
+
A) !important の付いた CSS 規則と、それにより高い詳細度のセレクターを与えるか (タグ、 id、 class のセレクターへの追加)、同じセレクターで既存の位置より後に CSS 規則を追加するかします。これが動作するのは、詳細度が同じであるとき、最後に定義された規則が勝つからです。

+
+
詳細度を高める例です。

+
+
table td    { height: 50px !important; }
+.myTable td { height: 50px !important; }
+#myTable td { height: 50px !important; }
+

+
+
B) または、既存の物の後に同じセレクターを追加します。

+
+
td { height: 50px !important; }

+
+
C) また、できれば、元の規則を書き換えて、どちらも !important を使用しないようにします。

+
+
[id="someElement"] p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}

+
+
ID セレクターの代わりとして属性セレクターの一部に id を入れると、クラスと同じ詳細度になります。上記の両方のセレクターとも同じ重みをもつようになりました。詳細度が同等の場合、後に定義された規則が優先されます。

+
+
詳細情報

+
+
+
+
:is() および :not() の例外

+
+
全一致の擬似クラス {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および否定擬似クラスの {{CSSxRef(":not", ":not()")}} は、詳細度の計算では擬似クラスとは見なされません。しかし、セレクターの種類の数を数える時には、これらの擬似クラスの中に置かれたセレクターは、通常のセレクターのように計算されます。

+
+

+
以下の CSS を...

+
+
div.outer p {
+  color: orange;
+}
+
+div:not(.outer) p {
+  color: blueviolet;
+}
+

+
+
以下の HTML に適用した場合...

+
+
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+

+
+
画面では、以下のように表示されるでしょう。

+
+
{{EmbedLiveSample("The_not_exception-example")}}

+

+
+
:where() の例外 {{Experimental_Inline}}

+
+
{{SeeCompatTable}}

+
+
詳細度を調整する擬似クラス {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} は、自分自身の詳細度が常にゼロで置き換えられます。

+
+
この一連の CSS で...

+
+
div:where(.outer) p {
+  color: orange;
+}
+
+div p {
+  color: blueviolet;
+}
+

+
+
+
+
... 以下の HTML と一緒に使用されたとき ...

+
+
+
+
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+

+
+
... このように画面に表示されます。

+
+
{{EmbedLiveSample("The_where_exception")}}

+
+
形ベースの詳細度

+
+
詳細度は、セレクターの形に基づきます。次の場合、セレクター *[id="foo"] は ID を選択しているにもかかわらず、セレクターの詳細度を決定する目的においては属性セレクターとして計算されます。

+
+
以下のスタイル宣言を...

+
+
*#foo {
+  color: green;
+}
+
+*[id="foo"] {
+  color: purple;
+}
+

+
+
この HTML に対して適用すると...

+
+
<p id="foo">I am a sample text.</p>
+

+
+
このようになってしまうでしょう。

+
+
{{EmbedLiveSample("Form-based_specificity")}}

+
+
なぜなら、それは同じ要素に一致しますが、 ID セレクターがより高い詳細度をもっているからです。

+
+
文書ツリー内の近接性の無視

+
+
指定されたセレクターで参照される要素と他の要素との近接性は、詳細度には影響を与えません。以下のスタイル宣言と...

+
+
body h1 {
+  color: green;
+}
+
+html h1 {
+  color: purple;
+}
+

+
+
... 以下の HTML で...

+
+
<html>
+  <body>
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+

+
+
... このように描画されるでしょう。

+
+
{{EmbedLiveSample("Tree_proximity_ignorance")}}

+
+
これは、二つの宣言が同じセレクター型数ですが、 html h1 セレクターが最後に宣言されているからです。

+
+
直接対象の要素と継承されたスタイル

+
+
直接対象となる要素のスタイル付けは、継承された規則の詳細度に関わらず、常に継承されたスタイルより優先されます。この CSS は ...

+
+
#parent {
+  color: green;
+}
+
+h1 {
+  color: purple;
+}

+
+
... 以下の HTML と共に使用します ...

+
+
<html>
+  <body id="parent">
+    <h1>Here is a title!</h1>
+  </body>
+</html>

+
+
... 以下のように表示されます。

+
+
{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}

+
+
これは、 h1 セレクターが要素を具体的に対象としていますが、緑のセレクターは親から継承されているだけだからです。

+
+
仕様書

+
+

+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}{{Spec2("CSS4 Selectors")}}詳細度調整セレクター {{CSSxRef(":where", ":where()")}} を追加
{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS3 Selectors")}}擬似要素を追加
{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS2.1")}}擬似クラスを追加
{{SpecName("CSS1", "#cascading-order", "Cascading order")}}{{Spec2("CSS1")}}初回定義

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/specified_value/index.html b/files/ja/web/css/specified_value/index.html
new file mode 100644
index 0000000000..81e1552aea
--- /dev/null
+++ b/files/ja/web/css/specified_value/index.html
@@ -0,0 +1,79 @@
+---
+title: 指定値
+slug: Web/CSS/specified_value
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/specified_value
+---
+
{{CSSRef}}

+
+
指定値 (specified value) は、 CSS プロパティにおいて文書のスタイルシートから受け取る値です。指定されたプロパティの指定値は、以下の規則に従って決定されます。

+
+
    
+ 
  1. 文書のスタイルシートが明示的にプロパティに値を指定した場合は、その値が使用されます。
    2. 
+ 
  2. 文書のスタイルシートが値を指定しなかった場合、可能であれば親要素から値を継承します。
    3. 
+ 
  3. 上記のいずれも利用できない場合、要素の初期値が使用されます。
    4. 
+

+
+
例

+
+
HTML

+
+
<p>My specified color is given explicitly in the CSS.</p>
+
+<div>The specified values of all my properties default to their
+    initial values, because none of them are given in the CSS.</div>
+
+<div class="fun">
+  <p>The specified value of my font family is not given explicitly
+      in the CSS, so it is inherited from my parent. However,
+      the border is not an inheriting property.</p>
+</div>

+
+
CSS

+
+
.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+

+
+
結果

+
+
{{EmbedLiveSample("Examples", 500, 220)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}初回定義

+
+
関連情報

+
+
    
+ 
  • {{CSS_key_concepts}}
    • 
+

diff --git a/files/ja/web/css/string/index.html b/files/ja/web/css/string/index.html
new file mode 100644
index 0000000000..0f874eec29
--- /dev/null
+++ b/files/ja/web/css/string/index.html
@@ -0,0 +1,94 @@
+---
+title: 
+slug: Web/CSS/string
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - Web
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/string
+---
+
{{CSSRef}}

+
+
<string> は CSS のデータ型で、一連の文字列を表します。文字列は {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, {{CSSxRef("quotes")}} など、数々の CSS プロパティで使用されます。

+
+
構文

+
+
<string> データ型は任意の数の Unicode 文字を、二重引用符 (") 又は単一引用符 (') で囲んで構成します。

+
+
多くの文字は文字通りに表現されます。またすべての文字は、それぞれの16進数の Unicode コードポイントで表現することもできます。例えば、 \22 は二重引用符を表し、 \27 は単一引用符 (')、 \A9 は著作権記号 (©) を表します。

+
+
重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、及びバックスラッシュ自身です。例えば、 \\ は単一のバックスラッシュを生成します。

+
+
改行文字を出力するには、 \A 又は \00000A のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として \ でエスケープすると、コード内で文字列を複数行に渡らせることができます。

+
+

+
メモ: HTML エンティティ (&nbsp; や &#8212; など) は、 CSS の <string> の中で使用することはできません。

+

+
+
例

+
+
/* 単純な文字列 */
+"This string is demarcated by double quotes."
+'This string is demarcated by single quotes.'
+
+/* 文字のエスケープ */
+"This is a string with \" an escaped double quote."
+"This string also has \22 an escaped double quote."
+'This is a string with \' an escaped single quote.'
+'This string also has \27 an escaped single quote.'
+"This is a string with \\ an escaped backslash."
+
+/* 文字列内の改行 */
+"This string has a \Aline break in it."
+
+/* 2行にわたる文字列 (これら二つの文字列は同じ出力になります) */
+"A really long \
+awesome string"
+"A really long awesome string"
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Values', '#strings', '<string>')}}{{Spec2('CSS3 Values')}}CSS Level 2 (Revision 1)から重要な変更なし
{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}{{Spec2('CSS2.1')}}明示的定義; Unicode の6桁エスケープ文字を許容
{{SpecName('CSS1', '', '<string>')}}{{Spec2('CSS1')}}暗黙的定義; Unicode の4桁エスケープ文字を許容

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.string")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/syntax/index.html b/files/ja/web/css/syntax/index.html
new file mode 100644
index 0000000000..12a2ce4efd
--- /dev/null
+++ b/files/ja/web/css/syntax/index.html
@@ -0,0 +1,83 @@
+---
+title: 構文
+slug: Web/CSS/Syntax
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - Web
+translation_of: Web/CSS/Syntax
+---
+
{{cssref}}

+
+
カスケーディングスタイルシート (CSS) 言語の基本的な狙いは、ブラウザーのエンジンがページの要素を、色、位置、装飾などの特定の特性をもって描けるようにすることです。 CSS の構文はこの狙いを反映し、以下のような基本的な構成要素があります。

+
+
    
+ 
  • 識別子であるプロパティ。人間が読むことができ、どのような特性か考えることのできる名前を定義します。
    • 
+ 
  • 特性がどのようにエンジンに操作されなければならないか表す値。どのプロパティも、形式文法及び意味論的な意味で定義され、ブラウザーに実装された、妥当な値を対として持ちます。
    • 
+

+
+
CSS の宣言

+
+
CSS のプロパティを特定の値に設定することは、 CSS 言語の核となる仕組みです。プロパティと値の組は宣言と呼ばれ、どの CSS エンジンも、1つ1つのページの要素を適切に配置し、形作るために、どの宣言を要素に適用するかを計算します。

+
+
CSS では、プロパティと値の両方とも、既定で大文字と小文字を区別しません。組はコロン ':' (U+003A COLON) で分割され、プロパティと値の前、間、後のホワイトスペースは (内部のものを除き) 無視されます。

+
+
css syntax - declaration.png

+
+
CSS には100を超える種類のプロパティと、無限に近い種類の値があります。すべてのプロパティと値の組み合わせが許されるわけではなく、どのプロパティも、何が妥当な値であるか定義されています。与えられたプロパティの値が妥当ではなかったとき、その宣言は妥当ではないと見なされ、 CSS エンジンから完全に無視されます。

+
+
CSS の宣言ブロック

+
+
宣言は、左中括弧 '{' (U+007B LEFT CURLY BRACKET) と右中括弧 '}' (U+007D RIGHT CURLY BRACKET) で区切られた構造の中で、ブロックにグループ化されます。ブロックは入れ子になることがあるため、左中括弧と右中括弧が対応していなければなりません。

+
+
css syntax - block.png

+
+
このようなブロックは必然的に宣言ブロックと呼ばれ、その中の宣言はセミコロン ';' (U+003B SEMICOLON) で区切ります。宣言ブロックは宣言を持たず、空になることもあります。宣言の周囲のホワイトスペースは無視されます。ブロックの最後の宣言は、セミコロンで終わらせる必要はありませんが、セミコロンで終わらせればブロックを他の宣言で拡張するときにセミコロンを付け忘れることを防げるため、良い書き方とみなされます。

+
+
CSS 宣言ブロックは以下の図のように表すことができます。

+
+
css syntax - declarations block.png

+
+
注: 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の {{htmlattrxref("style")}} 属性の中に置くことができます。

+
+
CSS の規則セット

+
+
もしスタイルシートが、1つの宣言をウェブページのどの要素にも適用するとしたら、それはひどく使えないものになるでしょう。本当の目的は、それぞれの宣言を文書のそれぞれの部品に適用することです。

+
+
CSS ではこれを、宣言ブロックと条件を関連付けることで実現します。それぞれの (妥当な) 宣言ブロックの前に、ページの要素を選択する条件であるセレクターを置きます。セレクターのグループと宣言ブロックの組を規則セット、またはしばしば単に規則と呼びます。

+
+
CSS の規則セット (または規則) は下記の図のように表現することができます。

+
+
css syntax - ruleset.png

+
+
ページの要素は複数のセレクターに一致する可能性があるため、複数の規則によってあるプロパティが異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用されなければならないことを定義しています。これをカスケードアルゴリズムと呼びます。

+
+
単一のセレクターで構成される規則セットを複数まとめて表記する方法の一つとして、規則セットをセレクターの集合で記述することが挙げられますが、各規則セットの妥当性を上手くまとめるものではない点に注意しましょう。

+

+基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、セレクター全体が妥当ではないこととなり、規則全体も (妥当ではないものとして) 無視されます。

+
+
CSS の文

+
+
規則セットはスタイルシートの主な構成要素であり、よく大きな一連の規則セットのみから成ります。しかし、ウェブ制作者がスタイルシートで伝えたい情報としては、他にも文字セット、インポートする他の外部スタイルシート、フォントフェイス、リストカウンターの記述などがあります。このためには別の、特定の種類の文を使用します。

+
+
文は、空白ではないすべての文字で始まり、 (文字列の外にあり、エスケープされておらず、別の {} または () または [] の対の中に含まれていない) 最初の右中括弧またはセミコロンで終わる構成要素です。

+
+
css syntax - statements Venn diag.png

+
+
文には二種類があります。

+
+
    
+ 
  • 規則セット (または規則)。ここまで見てきたように、 CSS の宣言の集合を、セレクターによって表現された状態に関連付けています。
    • 
+ 
  • アット規則。アットマーク '@' (U+0040 COMMERCIAL AT) で始まり、識別子が後続し、ブロックの外のセミコロンまたは次のブロックの終わりに至るまで続きます。それぞれの種類の アット規則は、識別子によって定義され、当然ながら独自の内部構文や意味を持つことがあります。アット規則はメタデータ情報 ({{ cssxref("@charset") }} や {{ cssxref("@import") }} など) を伝えたり、条件情報 ({{ cssxref("@media") }} や {{ cssxref("@document") }}) など) を伝えたり、記述的情報 ({{ cssxref("@font-face") }} など) を伝えたりするために使用します。
    • 
+

+
+
規則またはアット規則ではない文は、すべて妥当ではなく、無視されます。

+
+
他にも文のグループとして、入れ子文があります。これらはアット規則特有のサブセットである条件付きグループ規則の中で使用することができます。これらの文は、特定の条件が一致した場合にのみ適用されます。例えば、 @mediaアット規則の内容は、示された条件に一致するブラウザーが実行されている端末でのみ適用されるなどです。 CSS1 と CSS2.1 では、条件付きグループ規則内では規則セットのみが利用できました。それではあまりに厳しかったので、 CSS Conditionals Level 3 では、この制約は撤廃されました。現在、それは今でも試験的でどのブラウザーでも対応しているわけではないものの、条件付きグループ規則はより広い範囲の内容を持つことができ、規則セットだけではなく、すべてではないものの、一部のアット規則を含むこともできます。

+
+
関連情報

+
+
    
+ 
  • {{ CSS_key_concepts()}}
    • 
+

diff --git a/files/ja/web/css/tab-size/index.html b/files/ja/web/css/tab-size/index.html
new file mode 100644
index 0000000000..8f510eb9de
--- /dev/null
+++ b/files/ja/web/css/tab-size/index.html
@@ -0,0 +1,96 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - CSS Property
+  - CSS テキスト
+  - CSS プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/tab-size
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS の tab-size プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

+
+
/* <integer> 値 */
+tab-size: 4;
+tab-size: 0;
+
+/* <length> 値 */
+tab-size: 10px;
+tab-size: 2em;
+
+/* グローバル値 */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+

+
+
{{CSSInfo}}

+
+
構文

+
+
値

+
+

+ 
{{CSSxRef("<integer>")}}

+ 
タブの空白文字の文字数です。正の数でなければなりません。

+ 
{{CSSxRef("<length>")}}

+ 
タブの幅です。正の数でなければなりません。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
pre {
+  tab-size: 4; /* スペース 4 つ分となります */
+}
+

+
+
pre {
+  tab-size: 0; /* インデント除去 */
+}
+

+
+
pre {
+  tab-size: 2; /* タブの幅をスペース 2 個分に設定 */
+}
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.tab-size")}}

+
+
 

+
+
関連情報

+
+
diff --git a/files/ja/web/css/table-layout/index.html b/files/ja/web/css/table-layout/index.html
new file mode 100644
index 0000000000..77f39e854d
--- /dev/null
+++ b/files/ja/web/css/table-layout/index.html
@@ -0,0 +1,106 @@
+---
+title: table-layout
+slug: Web/CSS/table-layout
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 表
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/table-layout
+---
+
{{CSSRef}}

+
+
CSS の table-layout プロパティは、 {{htmlelement("table")}} のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。

+
+
{{EmbedInteractiveExample("pages/css/table-layout.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+table-layout: auto;
+table-layout: fixed;
+
+/* グローバル値 */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+

+
+
値

+
+

+ 
{{Cssxref("auto")}}

+ 
既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。

+ 
fixed

+ 
表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列幅の設定に影響しません。

+ 
"fixed" レイアウト方法に於いては、一度テーブルの一行目のみをダウンロードして解析した後、テーブル全体をレンダリングします。これは自動テーブルレイアウトアルゴリズムよりレンダリング速度を速くする事が出来ますが、後続するセルのコンテンツが用意された列幅に収まらないかもしれません。セルは {{Cssxref("overflow")}} プロパティを使用して、表の幅が分かっている場合、はみ出すコンテンツを切り取るかどうかを定めます。そうでなければ、セルははみ出しません。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
この例は表の固定レイアウトを使用し、 {{cssxref("width")}} プロパティとの組み合わせで、表の幅を制限しています。 {{cssxref("text-overflow")}} プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。

+
+
表のレイアウトが auto である場合、表は指定された width よりも内容に合わせて広がります。

+
+
HTML

+
+
<table>
+  <tr><td>Ed</td><td>Wood</td></tr>
+  <tr><td>Albert</td><td>Schweitzer</td></tr>
+  <tr><td>Jane</td><td>Fonda</td></tr>
+  <tr><td>William</td><td>Shakespeare</td></tr>
+</table>

+
+
CSS

+
+
table {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

+
+
Result

+
+
{{EmbedLiveSample('Example')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.table-layout")}}

diff --git a/files/ja/web/css/text-align-last/index.html b/files/ja/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..b0497e1fa5
--- /dev/null
+++ b/files/ja/web/css/text-align-last/index.html
@@ -0,0 +1,106 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+tags:
+  - CSS
+  - CSS Property
+  - CSS テキスト
+  - Experimental
+  - Reference
+translation_of: Web/CSS/text-align-last
+---
+
{{CSSRef}}

+
+
CSS の text-align-last プロパティは、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

+
+
{{EmbedInteractiveExample("pages/css/text-align-last.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* グローバル値 */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+

+
+
値

+
+

+ 
auto

+ 
{{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が justify である場合は、text-align-last に start を設定した場合と同じ効果になります。

+ 
start

+ 
文章の記述方向が左から右であれば left、右から左であれば right と同じです。

+ 
end

+ 
文章の記述方向が左から右であれば right、右から左であれば left と同じです。

+ 
left

+ 
インライン要素は行ボックスの左端に配置されます。

+ 
right

+ 
インライン要素は行ボックスの右端に配置されます。

+ 
center

+ 
インラインコンテンツは行ボックスの中央に配置されます。

+ 
justify

+ 
テキストは行末揃えになります。テキストは段落の左端から右端までに配置されるでしょう。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
+
+
p {
+  font-size: 1.4em;
+  text-align: justify;
+  text-align-last: center;
+}

+
+
{{EmbedLiveSample('Example','560')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}{{Spec2('CSS3 Text')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-align-last")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("text-align")}}
    • 
+

diff --git a/files/ja/web/css/text-align/index.html b/files/ja/web/css/text-align/index.html
new file mode 100644
index 0000000000..e0a47131a7
--- /dev/null
+++ b/files/ja/web/css/text-align/index.html
@@ -0,0 +1,231 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/text-align
+---
+
{{CSSRef}}

+
+
text-align は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。

+
+
{{EmbedInteractiveExample("pages/css/text-align.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* 表の列における文字ベースの配置 */
+text-align: ".";
+text-align: "." center;
+
+/* ブロック配置の値 (標準外の構文) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* グローバル値 */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+

+
+
text-align プロパティは、以下の方法のうちの一つで指定されます。

+
+
+
+
値

+
+

+ 
start {{experimental_inline}}

+ 
書字方向が左から右であれば left と、右から左であれば right と同じです。

+ 
end {{experimental_inline}}

+ 
書字方向が左から右であれば right と、右から左であれば left と同じです。

+ 
left

+ 
インラインコンテンツは行ボックスの左辺に寄せられます。

+ 
+ 
インラインコンテンツは行ボックスの右辺に寄せられます。

+ 
center

+ 
インラインコンテンツは行ボックス内で中央寄せされます。

+ 
justify

+ 
インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。

+ 
justify-all {{experimental_inline}}

+ 
justify と同じですが、最終行も強制的に両端揃えされます。

+ 
match-parent {{experimental_inline}}

+ 
inherit に似ていますが、 start と end 値が親要素の {{cssxref("direction")}} に従って計算され、適切な left か right 値に置き換えられます。

+ 
{{cssxref("<string>")}} {{experimental_inline}}

+ 
表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。

+

+
+
アクセシビリティの考慮

+
+
両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。

+
+
+
+
公式定義

+
+
{{CSSInfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
左揃え

+
+
HTML

+
+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: left;
+  border: solid;
+}

+
+
結果

+
+
{{EmbedLiveSample("Left_alignment","100%","100%")}}

+
+
中央揃え

+
+
HTML

+
+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: center;
+  border: solid;
+}

+
+
結果

+
+
{{EmbedLiveSample("Centered_text","100%","100%")}}

+
+
両端揃え

+
+
HTML

+
+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: justify;
+  border: solid;
+}

+
+
結果

+
+
{{EmbedLiveSample("Justify","100%","100%")}}

+
+
注

+
+
インラインコンテンツを中央揃えせずにブロック自体を中央揃えする標準互換の方法は、次のように、 left 及び right {{cssxref("margin")}} を auto に設定することです。

+
+
.something {
+  margin: auto;
+}
+

+
+
.something {
+  margin: 0 auto;
+}
+

+
+
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}変更なし
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}<string> 値を追加。
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}start と end、match-parent キーワードを追加。名前のなかった初期値を（まさにそれである）start に変更。
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-align")}}

+
+
関連情報

+
+
    
+ 
  • {{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}
    • 
+

diff --git a/files/ja/web/css/text-combine-upright/index.html b/files/ja/web/css/text-combine-upright/index.html
new file mode 100644
index 0000000000..907fb4de0b
--- /dev/null
+++ b/files/ja/web/css/text-combine-upright/index.html
@@ -0,0 +1,115 @@
+---
+title: text-combine-upright
+slug: Web/CSS/text-combine-upright
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 書字方向
+  - Experimental
+  - Reference
+translation_of: Web/CSS/text-combine-upright
+---
+
{{CSSRef}}

+
+
text-combine-upright は CSS のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収める必要があります。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。

+
+
これは、日本語の縦中横 (tate-chū-yoko)、中国語の 直書橫向 として知られる効果をもたらすために使用されます。

+
+
/* キーワード値 */
+text-combine-upright: none;
+text-combine-upright: all;
+
+/* Digits 値 */
+text-combine-upright: digits;     /* 2 桁の数字を垂直テキスト内に水平に収めます */
+text-combine-upright: digits 4;   /* 4 桁までの数字を垂直テキスト内に水平に収めます */
+
+/* グローバル値 */
+text-combine-upright: inherit;
+text-combine-upright: initial;
+text-combine-upright: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
none

+ 
何も特別な処理をしません。

+ 
all

+ 
タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。

+ 
digits <integer>?

+ 
指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例 (digits)

+
+
digits 値は、数字の桁だけを組み合わせる場合に使用し、all 値よりも必要なマークアップが少なくてすみます。現在、これをサポートしているブラウザーはあまりありません。

+
+
<p lang="ja" class="exampleText">平成20年4月16日に</p>
+

+
+
.exampleText {
+  writing-mode: vertical-lr;
+  text-combine-upright: digits 2;
+  font: 36px serif;
+}

+
+
{{EmbedLiveSample("Example_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}

+
+
例 (all)

+
+
all 値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーでサポートされています。

+
+
<p lang="zh-Hant">民國<span class="num">105</span
+>年<span class="num">4</span
+>月<span class="num">29</span>日</p>
+

+
+
html { writing-mode: vertical-rl; font: 24px serif }
+.num { text-combine-upright: all }
+

+
+
{{EmbedLiveSample("Example_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS4 Writing Modes")}}digits 値の追加
{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS3 Writing Modes")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-combine-upright")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("writing-mode")}}, {{cssxref("text-orientation")}}
    • 
+

diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..b4def7fe00
--- /dev/null
+++ b/files/ja/web/css/text-decoration-color/index.html
@@ -0,0 +1,118 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - HTML スタイル
+  - HTML 色
+  - Reference
+  - text-decoration-color
+  - 色
+translation_of: Web/CSS/text-decoration-color
+---
+
{{ CSSRef }}

+
+
text-decoration-color は CSS のプロパティで、 {{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。

+
+
色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。

+
+
{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}

+
+
+
+
CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。

+
+
構文

+
+
/* <color> 値 */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* グローバル値 */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+

+
+
値

+
+

+ 
{{cssxref("<color>")}}

+ 
装飾線の色です。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
<p>This paragraph has <s>some erroneous text</s>
+    inside it that I want to call attention to.</p>

+
+
p {
+  text-decoration-line: underline;
+  text-decoration-color: cyan;
+}
+
+s {
+  text-decoration-line: line-through;
+  text-decoration-color: red;
+  text-decoration-style: wavy;
+}

+
+
{{ EmbedLiveSample('Examples') }}

+
+
アクセシビリティの考慮事項

+
+
テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。

+
+
色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}{{ Spec2('CSS3 Text Decoration') }}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-decoration-color")}}

+
+
関連情報

+
+
    
+ 
  • 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。
    • 
+ 
  • {{cssxref("<color>")}} データ型
    • 
+ 
  • 色に関する他のプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • 
+ 
  • CSS を使用した HTML 要素への色の適用
    • 
+

diff --git a/files/ja/web/css/text-decoration-line/index.html b/files/ja/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..f7ab8d370e
--- /dev/null
+++ b/files/ja/web/css/text-decoration-line/index.html
@@ -0,0 +1,109 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/text-decoration-line
+---
+
{{CSSRef}}

+
+
CSS の text-decoration-line プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

+
+
{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}

+
+
+
+
複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。

+
+
構文

+
+
/* 単一のキーワード */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: blink;
+
+/* 複数のキーワード */
+text-decoration-line: underline overline;               /* 2つの装飾線 */
+text-decoration-line: overline underline line-through;  /* 複数の装飾線 */
+
+/* グローバル値 */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+

+
+
text-decoration-line プロパティは none または以下のリストにある1つ以上の空白で区切られた値を指定します。

+
+
値

+
+

+ 
none

+ 
テキストの装飾を行いません。

+ 
underline

+ 
テキストの各行に下線を引きます。

+ 
overline

+ 
テキストの各行の上線を引きます。

+ 
line-through

+ 
テキストの各行の中央を貫く線を引きます。

+ 
blink {{deprecated_inline}}

+ 
テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は非推奨であり、 CSS アニメーションに取って代わりました。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
<p class="wavy">Here's some text with wavy red underline!</p>
+<p class="both">This text has lines both above and below it.</p>

+
+
.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+.both {
+  text-decoration-line: underline overline;
+}

+
+
{{ EmbedLiveSample('Examples', '', '', '') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-decoration-line")}}

+
+
関連情報

+
+
    
+ 
  • 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。
    • 
+

diff --git a/files/ja/web/css/text-decoration-skip-ink/index.html b/files/ja/web/css/text-decoration-skip-ink/index.html
new file mode 100644
index 0000000000..a0c130adbb
--- /dev/null
+++ b/files/ja/web/css/text-decoration-skip-ink/index.html
@@ -0,0 +1,118 @@
+---
+title: text-decoration-skip-ink
+slug: Web/CSS/text-decoration-skip-ink
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Experimental
+  - Reference
+  - Web
+  - text-decoration-skip-ink
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/text-decoration-skip-ink
+---
+
{{CSSRef}}

+
+
CSS の text-decoration-skip-ink プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

+
+
{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}}

+
+
+
+
text-decoration-skip-ink は {{cssxref("text-decoration")}} 一括指定の一部ではありません。

+
+
構文

+
+
/* 単一キーワード */
+text-decoration-skip-ink: none;
+text-decoration-skip-ink: auto;
+text-decoration-skip-ink: all;
+
+/* グローバルキーワード */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+

+
+
値

+
+

+ 
none

+ 
下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。

+ 
auto

+ 
既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う可能性があります。つまり、線が文字を横切ろうとするところで中断されます。

+ 
all

+ 
ブラウザーは、下線や上線が文字に触れたり近づいたりしないように必ず中断を行います。これは、 auto の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。

+ 
"text-decoration-skip-ink" の例

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<p>You should go on a quest for a cup of coffee.</p>
+<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
+<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
+<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>
+

+
+
CSS

+
+
p {
+  font-size: 1.5em;
+  text-decoration: underline blue;
+  text-decoration-skip-ink: auto; /* this is the default anyway */
+}
+
+.no-skip-ink {
+  text-decoration-skip-ink: none;
+}
+
+.skip-ink-all{
+  text-decoration-skip-ink: all;
+}
+

+
+
結果

+
+
{{EmbedLiveSample("Examples", "100%", 250)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}{{Spec2("CSS4 Text Decoration")}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-decoration-skip-ink")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref('text-decoration')}}
    • 
+ 
  • {{cssxref('text-decoration-skip')}}
    • 
+

diff --git a/files/ja/web/css/text-decoration-skip/index.html b/files/ja/web/css/text-decoration-skip/index.html
new file mode 100644
index 0000000000..f39fe86f4f
--- /dev/null
+++ b/files/ja/web/css/text-decoration-skip/index.html
@@ -0,0 +1,110 @@
+---
+title: text-decoration-skip
+slug: Web/CSS/text-decoration-skip
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Experimental
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/text-decoration-skip
+---
+
{{CSSRef}}

+
+
text-decoration-skip は CSS のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。

+
+

+
メモ: 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。

+

+
+
/* キーワード値 */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: spaces;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+
+/* 複数のキーワード */
+text-decoration-skip: objects spaces;
+text-decoration-skip: leading-spaces trailing-spaces;
+text-decoration-skip: objects edges box-decoration;
+
+/* グローバル値 */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
none

+ 
何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。

+ 
objects

+ 
要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。

+ 
spaces

+ 
すべての空白をスキップします。すべての Unicode ホワイトスペース文字、すべての単語区切りに加えて、子孫の {{cssxref("letter-spacing")}} または {{cssxref("word-spacing")}} すべてです。

+ 
leading-spaces

+ 
先頭の空白のみがスキップされるという点を除いて、 spaces と同じです。

+ 
trailing-spaces

+ 
末尾の空白のみがスキップされるという点を除いて、 spaces と同じです。

+ 
edges

+ 
テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語で、区切って下線を引くのに重要です。)

+ 
"text-decoration-skip: edges;" の例です。

+ 
box-decoration

+ 
テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。装飾ボックスはボックスの装飾の上に描画を行いません。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<p>Hey, grab a cup of <em>coffee!</em></p>

+
+
CSS

+
+
p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: edges;
+}

+
+
結果

+
+
{{EmbedLiveSample("Example", "100%", 150)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}{{Spec2("CSS4 Text Decoration")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-decoration-skip")}}

diff --git a/files/ja/web/css/text-decoration-style/index.html b/files/ja/web/css/text-decoration-style/index.html
new file mode 100644
index 0000000000..5473f5af42
--- /dev/null
+++ b/files/ja/web/css/text-decoration-style/index.html
@@ -0,0 +1,115 @@
+---
+title: text-decoration-style
+slug: Web/CSS/text-decoration-style
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Layout
+  - Reference
+  - レイアウト
+translation_of: Web/CSS/text-decoration-style
+---
+
{{CSSRef}}

+
+
CSS の text-decoration-style プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され text-decoration-line で定義された線ごとに異なる種類を定義する方法はありません。

+
+
{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}

+
+
+
+
文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{HTMLElement("del")}} や {{HTMLElement("s")}} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。

+
+
線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。

+
+
構文

+
+
/* キーワード値 */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* グローバル値 */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+

+
+
値

+
+

+ 
solid

+ 
単独線を描画します。

+ 
double

+ 
二重線を描画します。

+ 
dotted

+ 
点線を描画します。

+ 
dashed

+ 
破線を描画します。

+ 
wavy

+ 
波線を描画します。

+ 
-moz-none{{ non-standard_inline }}

+ 
線を描画しません。代わりに {{ cssxref("text-decoration-line") }}: none を使用してください。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
+
+
.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+

+
+
<p class="wavy">This text has a wavy red line beneath it.</p>
+

+
+
{{ EmbedLiveSample('Examples', '', '', '') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}{{ Spec2('CSS3 Text Decoration') }}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義するための一括指定になりました。

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-decoration-style")}}

+
+
関連情報

+
+
    
+ 
  • 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。
    • 
+

diff --git a/files/ja/web/css/text-decoration/index.html b/files/ja/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..f13e611120
--- /dev/null
+++ b/files/ja/web/css/text-decoration/index.html
@@ -0,0 +1,139 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+  - text-decoration
+  - text-decoration-color
+  - text-decoration-line
+  - text-decoration-style
+translation_of: Web/CSS/text-decoration
+---
+
{{CSSRef}}

+
+
text-decoration は CSS の 一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。

+
+
{{EmbedInteractiveExample("pages/css/text-decoration.html")}}

+
+
+
+
文字列装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <p>This text has <em>some emphasized words</em> in it.</p> という文と、 p { text-decoration: underline; } のスタイル規則では、段落全体に下線が引かれます。 em { text-decoration: none; } のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 em { text-decoration: overline; } の規則で "some emphasized words" に第二の装飾が施されます。

+
+
構文

+
+
text-decoration プロパティは、個別指定の text-decoration プロパティを表す1つまたは複数の値を空白で区切って指定します。

+
+
値

+
+

+ 
{{cssxref("text-decoration-line")}}

+ 
使用する装飾の種類を設定します。 underline や line-through などです。

+ 
{{cssxref("text-decoration-color")}}

+ 
装飾の色を設定します。

+ 
{{cssxref("text-decoration-style")}}

+ 
装飾に使用する線のスタイルを設定します。 solid, wavy, dashed などです。

+ 
{{cssxref("text-decoration-thickness")}}

+ 
装飾に使われる線の太さを設定します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+

+
+
<p class="under">This text has a line underneath it.</p>
+<p class="over">This text has a line over it.</p>
+<p class="line">This text has a line going through it.</p>
+<p>This <a class="plain" href="#">link will not be underlined</a>,
+    as links generally are by default. Be careful when removing
+    the text decoration on anchors since users often depend on
+    the underline to denote hyperlinks.</p>
+<p class="underover">This text has lines above <em>and</em> below it.</p>
+<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
+<p class="blink">This text might blink for you,
+    depending on the browser you use.</p>
+

+
+
{{EmbedLiveSample('Examples','auto','320')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}{{cssxref("text-decoration-thickness")}} を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}一括指定プロパティへ変更。 {{cssxref('text-decoration-style')}} の値への対応を追加。
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}実質的な変更なし。
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-decoration")}}

+
+
関連情報

+
+
    
+ 
  • text-decoration の個別指定プロパティは、 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} です。
    • 
+ 
  • {{cssxref("list-style")}} 属性は HTML の {{HTMLElement("ol")}} および {{HTMLElement("ul")}} のリストの表示方法を制御します。
    • 
+

diff --git a/files/ja/web/css/text-emphasis-color/index.html b/files/ja/web/css/text-emphasis-color/index.html
new file mode 100644
index 0000000000..8eaa6de6d8
--- /dev/null
+++ b/files/ja/web/css/text-emphasis-color/index.html
@@ -0,0 +1,101 @@
+---
+title: text-emphasis-color
+slug: Web/CSS/text-emphasis-color
+tags:
+  - CSS
+  - CSS スタイル
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - HTML 色
+  - Reference
+  - 文字列強調
+translation_of: Web/CSS/text-emphasis-color
+---
+
{{CSSRef}}

+
+
CSS の text-emphasis-color プロパティは、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。

+
+
/* 初期値 */
+text-emphasis-color: currentColor;
+
+/* <color> */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* グローバル値 */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
<color>

+ 
記号の色を定義します。 color が存在しない場合、既定で currentColor になります。

+

+
+
形式文法

+
+
{{csssyntax}}
+

+
+
例

+
+
CSS

+
+
h3 {
+  text-emphasis-color: #555;
+  text-emphasis-style: "*";
+}

+
+
HTML

+
+
<p>Here's an example:</p>
+
+<h3>This has emphasis marks!</h3>
+

+
+
結果

+
+
{{EmbedLiveSample("Examples", 450, 100)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-emphasis-color")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("<color>")}} データ型
    • 
+ 
  • 他の強調記号に関するプロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, {{cssxref("text-emphasis-position")}}.
    • 
+ 
  • 色に関する他のプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • 
+ 
  • CSS を使用した HTML 要素への色の適用
    • 
+

diff --git a/files/ja/web/css/text-emphasis-position/index.html b/files/ja/web/css/text-emphasis-position/index.html
new file mode 100644
index 0000000000..2a0ee36975
--- /dev/null
+++ b/files/ja/web/css/text-emphasis-position/index.html
@@ -0,0 +1,144 @@
+---
+title: text-emphasis-position
+slug: Web/CSS/text-emphasis-position
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/text-emphasis-position
+---
+
{{CSSRef}}

+
+
CSS の text-emphasis-position プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。

+
+
/* 初期値 */
+text-emphasis-position: over right;
+
+/* キーワード値 */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* グローバル値 */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: unset;
+

+
+
{{cssinfo}}

+
+
望ましい位置

+
+
圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は over right です。一方中国語では、望ましい位置は under right となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。

+
+
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+  
+  
+   
+   
+   
+   
+  
+ 
+
望ましい圏点とルビの位置
言語望ましい位置説明
横書き縦書き
日本語overright日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。
モンゴル語
中国語underright中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。

+
+

+
メモ: {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 text-emphasis-position を設定することはできず、また初期化されることもありません。

+

+
+
構文

+
+
値

+
+

+ 
over

+ 
横書きモードでテキストの上に圏点を描きます。

+ 
under

+ 
横書きモードでテキストの下に圏点を描きます。

+ 
right

+ 
縦書きモードでテキストの右に圏点を描きます。

+ 
left

+ 
縦書きモードでテキストの左に圏点を描きます。

+

+
+
形式文法

+
+
{{csssyntax}}
+

+
+
例

+
+
編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。

+
+
ruby {
+  text-emphasis: none;
+}
+

+
+
編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。

+
+
em {
+  text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */
+}
+
+em rt {
+  display: none; /* <em> 要素内のルビを隠す */
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-emphasis-position")}}

+
+
関連情報

+
+
    
+ 
  • 個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}
    • 
+

diff --git a/files/ja/web/css/text-emphasis-style/index.html b/files/ja/web/css/text-emphasis-style/index.html
new file mode 100644
index 0000000000..23aebe92d6
--- /dev/null
+++ b/files/ja/web/css/text-emphasis-style/index.html
@@ -0,0 +1,110 @@
+---
+title: text-emphasis-style
+slug: Web/CSS/text-emphasis-style
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+  - text-emphasis
+translation_of: Web/CSS/text-emphasis-style
+---
+
{{CSSRef}}

+
+
CSS の text-emphasis-style プロパティは、圏点の表示を設定します。設定や解除に一括指定の {{cssxref("text-emphasis")}} を使用することもできます。

+
+
/* 初期値 */
+text-emphasis-style: none; /* 圏点なし */
+
+/* <string> 値 */
+text-emphasis-style: 'x';
+text-emphasis-style: '点';
+text-emphasis-style: '\25B2';
+text-emphasis-style: '*';
+text-emphasis-style: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+
+/* キーワード値 */
+text-emphasis-style: filled;
+text-emphasis-style: open;
+text-emphasis-style: dot;
+text-emphasis-style: circle;
+text-emphasis-style: double-circle;
+text-emphasis-style: triangle;
+text-emphasis-style: filled sesame;
+text-emphasis-style: open sesame;
+
+/* グローバル値 */
+text-emphasis-style: inherit;
+text-emphasis-style: initial;
+text-emphasis-style: unset;
+

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
none

+ 
圏点なし。

+ 
filled

+ 
図形は単色で塗りつぶされます。 filled も open も指定されない場合は、これが既定値です。

+ 
open

+ 
図形は中抜きになります。

+ 
dot

+ 
記号として小さな円を表示します。 filled dot は '•' (U+2022)、 open dot は '◦' (U+25E6) です。

+ 
circle

+ 
記号として大きな円を表示します。 filled circle は '●' (U+25CF)、 open circle は '○' (U+25CB) です。

+ 
double-circle

+ 
記号として二重丸を表示します。 filled double-circle は '◉' (U+25C9)、 open double-circle は '◎' (U+25CE) です。

+ 
triangle

+ 
記号として三角形を表示します。 filled triangle は '▲' (U+25B2)、 open triangle は '△' (U+25B3) です。

+ 
sesame

+ 
記号としてゴマを表示します。 filled sesame は '﹅' (U+FE45)、 open sesame は '﹆' (U+FE46) です。

+ 
<string>

+ 
記号として文字列を表示します。 <string> には1文字を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

+

+
+
形式文法

+
+
{{csssyntax}}
+

+
+
例

+
+
h2 {
+  text-emphasis-style: sesame;
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-emphasis-color")}}

+
+
関連情報

+
+
    
+ 
  • 関連プロパティ: {{cssxref('text-emphasis-color')}}, {{cssxref('text-emphasis')}}
    • 
+ 
  • 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。
    • 
+

diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html
new file mode 100644
index 0000000000..62fb199b05
--- /dev/null
+++ b/files/ja/web/css/text-emphasis/index.html
@@ -0,0 +1,140 @@
+---
+title: text-emphasis
+slug: Web/CSS/text-emphasis
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+  - text-emphasis
+  - text-emphasis-color
+  - text-emphasis-style
+  - 一括指定プロパティ
+translation_of: Web/CSS/text-emphasis
+---
+
{{CSSRef}}

+
+
CSS の text-emphasis プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の一括指定です。

+
+
{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}

+
+
+
+
text-emphasis プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 text-decoration プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 text-emphasis は継承されます。これは、子孫に対して圏点を変更できることを意味します。

+
+
圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 text-emphasis は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

+
+

+
text-emphasis は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。

+

+
+
構文

+
+
/* 初期値 */
+text-emphasis: none; /* 圏点なし */
+
+/* <string> 値 */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+
+/* キーワード値 */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* 色と組み合わせたキーワード値 */
+text-emphasis: filled sesame #555;
+
+/* グローバル値 */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+

+
+
値

+
+

+ 
none

+ 
圏点なし。

+ 
filled

+ 
図形は単色で塗りつぶされます。 filled も open も指定されない場合は、これが既定値です。

+ 
open

+ 
図形は中抜きになります。

+ 
dot

+ 
記号として小さな円を表示します。 filled dot は '•' (U+2022)、 open dot は '◦' (U+25E6) です。

+ 
circle

+ 
記号として大きな円を表示します。 filled circle は '●' (U+25CF)、 open circle は '○' (U+25CB) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。

+ 
double-circle

+ 
記号として二重丸を表示します。 filled double-circle は '◉' (U+25C9)、 open double-circle は '◎' (U+25CE) です。

+ 
triangle

+ 
記号として三角形を表示します。 filled triangle は '▲' (U+25B2)、 open triangle は '△' (U+25B3) です。

+ 
sesame

+ 
記号としてゴマを表示します。 filled sesame は '﹅' (U+FE45)、 open sesame は'﹆' (U+FE46) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。

+ 
<string>

+ 
記号として文字列を表示します。 <string> には1文字を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

+ 
<color>

+ 
記号の色を定義します。 color を指定しない場合、既定では currentColor です。

+

+
+
形式文法

+
+
{{csssyntax}}
+

+
+
例

+
+
強調して色を付けた見出し

+
+
この例は、見出しの各文字に三角形の圏点を付けて描画します。

+
+
CSS

+
+
h2 {
+  text-emphasis: triangle #D55;
+}

+
+
HTML

+
+
<h2>これは重要です！</h2>

+
+
結果

+
+
{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-emphasis")}}

+
+
関連情報

+
+
    
+ 
  • 個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}
    • 
+ 
  • 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。
    • 
+

diff --git a/files/ja/web/css/text-indent/index.html b/files/ja/web/css/text-indent/index.html
new file mode 100644
index 0000000000..72f47374bf
--- /dev/null
+++ b/files/ja/web/css/text-indent/index.html
@@ -0,0 +1,137 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+  - レイアウト
+translation_of: Web/CSS/text-indent
+---
+
{{CSSRef}}

+
+
CSS の text-indent プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。

+
+
{{EmbedInteractiveExample("pages/css/text-indent.html")}}

+
+
+
+
包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。

+
+
構文

+
+
/* <length> 値 */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* <percentage> 値
+   包含ブロックの幅に対する割合 */
+text-indent: 15%;
+
+/* Keyword values */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* Global values */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+

+
+
値

+
+

+ 
{{cssxref("<length>")}}

+ 
{{cssxref("<length>")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("<length>")}} をご覧ください。

+ 
{{cssxref("<percentage>")}}

+ 
包含ブロックの幅の {{cssxref("<percentage>")}} 分だけ字下げされます。

+ 
each-line {{experimental_inline}}

+ 
強制的な改行の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし自動折り返しの次の行はインデントしません。

+ 
hanging {{experimental_inline}}

+ 
インデントされる行が逆になります。つまり、先頭行以外のすべての行を字下げします。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
単純なインデントの例

+
+
HTML

+
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+

+
+
CSS

+
+
p {
+  text-indent: 5em;
+  background: powderblue;
+}

+
+
{{ EmbedLiveSample('Simple_indent','100%','100%') }}

+
+
パーセント表記のインデントの例

+
+
HTML

+
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

+
+
CSS

+
+
p {
+  text-indent: 30%;
+  background: plum;
+}

+
+
{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}{{Spec2('CSS3 Text')}}hanging と each-line キーワードを追加。
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent がアニメーション可能に。
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}display: inline-block と無名ブロックボックスの場合の動作が明確に定義されるようになりました。
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Initial definition.

+
+
{{cssinfo}}

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-indent")}}

diff --git a/files/ja/web/css/text-justify/index.html b/files/ja/web/css/text-justify/index.html
new file mode 100644
index 0000000000..f121ff0d09
--- /dev/null
+++ b/files/ja/web/css/text-justify/index.html
@@ -0,0 +1,118 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+  - text-justify
+translation_of: Web/CSS/text-justify
+---
+
{{CSSRef}}

+
+
CSS の text-justify プロパティは、要素に {{cssxref("text-align")}}: justify; が設定された時にテキストに適用される両端揃えの種類を設定します。

+
+
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* 非推奨の値 */
+

+
+
{{cssinfo}}

+
+
構文

+
+
text-justify プロパティは、以下の値のリストのうち一つのキーワードで指定します。

+
+
値

+
+

+ 
none

+ 
テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。

+ 
auto

+ 
ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは text-justify をまったく設定しない場合に使われる既定の揃え方です。

+ 
inter-word

+ 
単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。

+ 
inter-character

+ 
文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。

+ 
distribute {{deprecated_inline}}

+ 
inter-character と同じ動作を見せます。この値は後方互換性のためのものです。

+

+
+
形式文法

+
+
{{CSSSyntax}}

+
+
例

+
+
+
+
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}

+
+
{{EmbedLiveSample("Examples","100%",400)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}} 

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-justify")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("text-align")}}
    • 
+

diff --git a/files/ja/web/css/text-orientation/index.html b/files/ja/web/css/text-orientation/index.html
new file mode 100644
index 0000000000..8ac5a69a73
--- /dev/null
+++ b/files/ja/web/css/text-orientation/index.html
@@ -0,0 +1,107 @@
+---
+title: text-orientation
+slug: Web/CSS/text-orientation
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 書字方向
+  - Reference
+  - 日本語処理
+translation_of: Web/CSS/text-orientation
+---
+
{{CSSRef}}

+
+
text-orientation は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト ({{cssxref("writing-mode")}} が horizontal-tb 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。

+
+
{{EmbedInteractiveExample("pages/css/text-orientation.html")}}

+
+
+
+
構文

+
+
/* キーワード値 */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* グローバル値 */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+

+
+
text-orientation プロパティは、以下のリストから単一のキーワードとして指定されます。

+
+
値

+
+

+ 
mixed

+ 
このキーワードは、横書きのみの文字を右に 90°回転させ、縦書き文字のグリフは自然にレイアウトされます。

+ 
upright

+ 
このキーワードは、横書きのみの文字を、縦書き文字と同様に自然にレイアウト (正立) させます。このキーワードは、すべての文字が ltr (左から右へ) で書かれているものとみなすので注意してください。これは、ユーザ側でどのように設定されていても、対象のテキストの {{cssxref("direction")}} に ltr が指定されているものとします。

+ 
sideways

+ 
このキーワードは、全行を横書きで書いて 90°回転したようにレイアウトします。{{cssxref("writing-mode")}} が vertical-rl の場合は右へ回転、vertical-lr の場合は左へ回転します。

+ 
sideways-right

+ 
これは、互換性を維持するためのキーワードであり、sideways の別名です。

+ 
use-glyph-orientation

+ 
SVG 要素上で、このキーワードは、非推奨の SVG プロパティ glyph-orientation-vertical と glyph-orientation-horizontal の値を使用します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
HTML

+
+
<p>Lorem ipsum dolet semper quisquam.</p>

+
+
CSS

+
+
p {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}

+
+
結果

+
+
{{EmbedLiveSample('Examples')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}{{Spec2('CSS3 Writing Modes')}}初回定義

+
+
{{cssinfo}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-orientation")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/text-overflow/index.html b/files/ja/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..b6b8699236
--- /dev/null
+++ b/files/ja/web/css/text-overflow/index.html
@@ -0,0 +1,319 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - Reference
+translation_of: Web/CSS/text-overflow
+---
+
{{CSSRef}}

+
+
text-overflow は CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('…') を表示するか、独自の文字列を表示するかです。

+
+
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}

+
+
+
+
text-overflow プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。

+
+
overflow: hidden;
+white-space: nowrap;

+
+
text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。

+
+
構文

+
+
text-overflow プロパティは、一つまたは二つの値を使用して指定することができます。一つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。二つの値が指定された場合は、最初の値が行の左端、二番目の値が行の右端のあふれの動作を指定します。

+
+
それぞれの値は以下のうちの一つです。

+
+
    
+ 
  • キーワード値のうちの一つ: clip, ellipsis, fade
    • 
+ 
  • フェードの長さを制御するための fade() 関数に {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が渡されたもの
    • 
+ 
  • <string>
    • 
+

+
+
値

+
+

+ 
clip

+ 
このプロパティの既定値です。このキーワード値はコンテンツ領域の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが text-overflow の空文字列に対応していれば、 text-overflow: ''; を指定することができます。

+ 
ellipsis

+ 
このキーワード値は、切り取られたテキストを表現するために省略記号 ('…', U+2026 Horizontal Ellipsis) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。

+ 
<string> {{experimental_inline}}

+ 
クリップされたテキストを表すために使われる {{cssxref("<string>")}} です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。

+ 
fade {{experimental_inline}}

+ 
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。

+ 
fade( <length> | <percentage> ) {{experimental_inline}}

+ 
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。

+ 
引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 0 よりも小さい値は 0 に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。

+

+
+
公式定義

+
+
{{CSSInfo}}

+
+
形式文法

+
+
{{csssyntax}}
+

+
+
例

+
+
CSS

+
+
p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Not supported in most browsers,
+     see the 'Browser compatibility' section below */
+  text-overflow: " [..]";
+}
+

+
+
HTML

+
+
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+

+
+
結果

+
+
{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

+
+
注: 以下の表の「実際の結果」は、 MDN エディターが文字列値の text-overflow プロパティを持つ style 属性の中身をすべて削除するという制限があるため、正しく表示されないことがあります。

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+ 
+
CSS valuedirection: ltrdirection: rtl
期待される結果実際の結果期待される結果実際の結果
visible overflow1234567890
+    
1234567890

+   		0987654321
+    
1234567890

+   
text-overflow: clipt-o_clip.png
+    
1234567890

+   		t-o_clip_rtl.png
+    
1234567890

+   
text-overflow: ''12345
+    
1234567890

+   		54321
+    
1234567890

+   
text-overflow: ellipsis1234…
+    
1234567890

+   		…4321
+    
1234567890

+   
text-overflow: '.'1234.
+    
1234567890

+   		.4321
+    
1234567890

+   
text-overflow: clip clip123456
+    
1234567890

+   		654321
+    
1234567890

+   
text-overflow: clip ellipsis1234…
+    
1234567890

+   		6543…
+    
1234567890

+   
text-overflow: clip '.'1234.
+    
1234567890

+   		6543.
+    
1234567890

+   
text-overflow: ellipsis clip…3456
+    
1234567890

+   		…4321
+    
1234567890

+   
text-overflow: ellipsis ellipsis…34…
+    
1234567890

+   		…43…
+    
1234567890

+   
text-overflow: ellipsis '.'…34.
+    
1234567890

+   		…43.
+    
1234567890

+   
text-overflow: ',' clip,3456
+    
1234567890

+   		,4321
+    
1234567890

+   
text-overflow: ',' ellipsis,34…
+    
1234567890

+   		,43…
+    
1234567890

+   
text-overflow: ',' '.',34.
+    
1234567890

+   		,43.
+    
1234567890

+   

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
CSS Overflow Module Level 4<string> および fade の値と fade() 関数を追加
{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 Overflow')}}初回定義

+
+
以前の版のこのインターフェイスは 勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は "草案" レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-overflow")}}

+
+
関連情報

+
+
    
+ 
  • 関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}}
    • 
+ 
  • 単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}
    • 
+

diff --git a/files/ja/web/css/text-rendering/index.html b/files/ja/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..581c2fd82e
--- /dev/null
+++ b/files/ja/web/css/text-rendering/index.html
@@ -0,0 +1,130 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+tags:
+  - CSS
+  - SVG
+translation_of: Web/CSS/text-rendering
+---
+
{{CSSRef}}

+
+
CSS の text-rendering プロパティは、テキストを描画するときの最適化方法に関する情報をレンダリングエンジンに提供します。

+
+
ブラウザーは速さ、読みやすさ、位置の正確さをトレードオフにします。

+
+
/* キーワード値 */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* グローバル値 */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+

+
+

+
メモ: text-rendering プロパティは SVG のプロパティであり、 CSS 標準では定義されていません。しかしながら、 Windows, MacOS, Linux の Gecko や WebKit のブラウザーは、このプロパティを HTML 及び XML コンテンツに適用することができます。

+

+
+
とても目に見えやすい効果は optimizeLegibility で、一部のフォント (例えば、 Microsoft Calibri, Candara, Constantia, Corbel, または DejaVu フォントファミリ) において 20px より小さい文字に合字 (ff, fi, fl, など) を適用します。

+
+
{{cssinfo}}

+
+
構文

+
+
値

+
+

+ 
auto

+ 
ブラウザーはテキストを描画する際に、速さ、読みやすさ、位置の正確さの最適化について経験的な推測を行います。この値のブラウザーによる解釈の違いについては、ブラウザーの対応をご覧ください。

+ 
optimizeSpeed

+ 
ブラウザーは文字を描画する際に、読みやすさや位置の正確さよりも、速さを強調します。カーニングや合字を無効にします。

+ 
optimizeLegibility

+ 
ブラウザーは速さや位置の正確さよりも、読みやすさを強調します。カーニングを有効にし、合字は任意です。

+ 
geometricPrecision

+ 

+ 
ブラウザーは速さや読みやすさよりも、位置の正確さを強調します。フォントの一部の側面 — カーニングなど — は、倍率に比例しません。そのため、この値はこれらのフォントを使ったテキストを美しくすることができます。

+
+ 
SVG では、テキストが拡大または縮小されるとき、ブラウザーはテキストの最終的な寸法 (特定のフォントの大きさと適用される倍率によって決まる) を計算し、プラットフォームのフォントシステムに計算値のフォントを要求します。しかし、大きさ9で倍率140%のフォントを要求すると、フォントの大きさの結果は12.6となり、フォントシステムに存在するものではなくなるので、ブラウザーはフォントの大きさを12に丸めます。結果的に、テキストは段階的な倍率になります。

+
+ 
しかし、 geometricPrecision は — レンダリングエンジンが完全に対応していれば — なめらかにテキストを拡縮できます。倍率が大きい場合、文字列の描画があまり美しくならないかもしれませんが、寸法は Windows や Linux が対応しているフォントの大きさに切り上げられたり切り捨てられたりせず、期待通りになります。

+
+ 
メモ: WebKit は指定された値を厳密に適用しますが、 Gecko は値を optimizeLegibility と同様に扱います。

+ 

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
optimizeLegibility の自動的な適用

+
+
font-size が 20px 未満の場合にブラウザーが自動的に optimizeLegibility を使用する方法を紹介します。

+
+
HTML

+
+
<p class="small">LYoWAT - ff fi fl ffl</p>
+<p class="big">LYoWAT - ff fi fl ffl</p>

+
+
CSS

+
+
.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
+.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }

+
+
結果

+
+
{{ EmbedLiveSample('Automatic_application_of_optimizeLegibility') }}

+
+
optimizeSpeed と optimizeLegibility

+
+
この例は、 optimizeSpeed と optimizeLegibility の (このブラウザーでの) 表示方法の違いを紹介します (ブラウザーによって違います)。

+
+
HTML

+
+
<p class="speed">LYoWAT - ff fi fl ffl</p>
+<p class="legibility">LYoWAT - ff fi fl ffl</p>

+
+
CSS

+
+
p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
+
+.speed       { text-rendering: optimizeSpeed; }
+.legibility  { text-rendering: optimizeLegibility; }

+
+
結果

+
+
{{ EmbedLiveSample('optimizeSpeed_vs_optimizeLegibility') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG2')}}変更なし
{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG1.1')}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-rendering")}}

diff --git a/files/ja/web/css/text-shadow/index.html b/files/ja/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..fdd7a81eba
--- /dev/null
+++ b/files/ja/web/css/text-shadow/index.html
@@ -0,0 +1,152 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - CSS Property
+  - CSS Styles
+  - CSS Text Decoration
+  - CSS スタイル
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - HTML Colors
+  - HTML Styles
+  - HTML スタイル
+  - HTML 色
+  - Reference
+  - Styles
+  - Styling HTML
+  - color
+  - 'recipe:css-property'
+  - スタイル
+translation_of: Web/CSS/text-shadow
+---
+
{{CSSRef}}

+
+
text-shadow は CSS のプロパティで、テキストに影を追加します。文字列及びその装飾に適用される影のカンマで区切られたリストを受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。

+
+
{{EmbedInteractiveExample("pages/css/text-shadow.html")}}

+
+
+
+
構文

+
+
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* color および blur-radius は既定値を使用 */
+text-shadow: 5px 10px;
+
+/* グローバル値 */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+

+
+
このプロパティは、影のカンマで区切られたリストとして指定します。

+
+
それぞれの影は2つ又は3つの <length> 値と、任意でその後に <color> 値を続けることで指定します。最初の2つの <length> 値は、 <offset-x> 及び <offset-y> の値です。3番目の <length> 値は、任意で、 <blur-radius> です。 <color> 値は影の色です。

+
+
複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。

+
+
このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の擬似要素に適用されます。

+
+
値

+
+

+ 
{{cssxref("<color>")}}

+ 
省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。

+ 
<offset-x> <offset-y>

+ 
必須。これらの <length> 値はテキストに対する影のオフセットを指定します。 <offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの真後ろに配置されますが、 <blur-radius> の効果により一部だけが見えるかもしれません。

+ 
<blur-radius>

+ 
省略可。これは {{ cssxref("<length>") }} 値です。指定されなければ、既定では 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

+

+
+
公式定義

+
+
{{CSSInfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
単純な影

+
+

+
.red-text-shadow {
+  text-shadow: red 0 -2px;
+}

+
+
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

+

+
+
{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}

+
+
複数の影

+
+

+
.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}

+
+
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

+

+
+
{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}CSS プロパティ text-shadow は CSS2 で不適切に定義され、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 CSS Text Decoration Module Level 3 に移動しました。

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-shadow")}}

+
+
Quantum CSS のメモ

+
+
    
+ 
  • Gecko には {{cssxref("transition")}} にバグがあり、色が指定された text-shadow から色が指定されていない text-shadow への移行が動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン (Quantum CSS 又は Stylo とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。
    • 
+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/text-size-adjust/index.html b/files/ja/web/css/text-size-adjust/index.html
new file mode 100644
index 0000000000..42a5364f7a
--- /dev/null
+++ b/files/ja/web/css/text-size-adjust/index.html
@@ -0,0 +1,86 @@
+---
+title: text-size-adjust
+slug: Web/CSS/text-size-adjust
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS モバイル文字サイズ調整
+  - Experimental
+  - NeedsExample
+  - リファレンス
+translation_of: Web/CSS/text-size-adjust
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
text-size-adjust プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。

+
+
/* キーワード値 */
+text-size-adjust: none;
+text-size-adjust: auto;
+
+/* <percentage> 値 */
+text-size-adjust: 80%;
+
+/* グローバル値 */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+

+
+
モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800pxや1000pxなどのより広い幅の{{glossary("viewport", "ビューポート")}}でレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。

+
+
こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 text-size-adjust プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。

+
+
{{cssinfo}}

+
+
構文

+
+
text-size-adjust プロパティは none, auto, <percentage> の何れかで指定します。

+
+
値

+
+

+ 
none

+ 
ブラウザーのテキスト自動拡大アルゴリズムを無効化します。WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。

+ 
auto

+ 
ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した none 値を取り消すのに使います。

+ 
<percentage>

+ 
ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書策定状況コメント
{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}{{Spec2("CSS Text Size Adjust")}}初回定義

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.properties.text-size-adjust")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/text-transform/index.html b/files/ja/web/css/text-transform/index.html
new file mode 100644
index 0000000000..bcd53bafe2
--- /dev/null
+++ b/files/ja/web/css/text-transform/index.html
@@ -0,0 +1,373 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Reference
+  - Text
+  - 'recipe:css-property'
+  - 日本語処理
+translation_of: Web/CSS/text-transform
+---
+
{{CSSRef}}

+
+
CSS の text-transform プロパティは、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。

+
+
{{EmbedInteractiveExample("pages/css/text-transform.html")}}

+
+
+
+
text-transform プロパティは、以下のように言語固有の大文字・小文字の扱いを考慮します。

+
+
    
+ 
  • 
+  
    トルコ語 (tr)、アゼルバイジャン語 (az)、クリミア・タタール語 (crh)、ヴォルガ・タタール語 (tt)、バシキール語 (ba) などのチュルク語族にはドットの有無が異なる 2 種類の i があり、大文字・小文字のペアも i/İ と ı/I の 2 組があります。
    
+ 
    • 
+ 
  • 
+  
    ドイツ語 (de) では、ß の大文字が SS になります。
    
+ 
    • 
+ 
  • 
+  
    オランダ語 (nl) では二重音字 ij が、単語の最初の文字のみ大文字にする text-transform: capitalize を指定しても IJ になります。
    
+ 
    • 
+ 
  • 
+  
    ギリシャ語 (el) では離接的接続のエータ (ή/Ή) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (ά/Α)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (άι/ΑΪ)。
    
+ 
    • 
+ 
  • 
+  
    ギリシャ語 (el) で、小文字のシグマは σ と ς の 2 種類あります。ς は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (Σ) に text-transform: lowercase を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。
    
+ 
    • 
+ 
  • アイルランド語 (ga) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば text-transform: uppercase は ar aon tslí を、予想される AR AON TSLÍ  ではなく AR AON tSLÍ にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、an t-uisce は AN tUISCE  になります (また、text-transform: lowercase ではハイフンが適切に再挿入されます)。
    • 
+

+
+
言語は HTML の lang 属性や XML の xml:lang 属性で定義します。

+
+

+
注: これらの特定のケースはブラウザーにより異なりますので、ブラウザーの互換性を確認してください。

+

+
+
構文

+
+
/* キーワード値 */
+text-transform: none;
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: full-width;
+text-transform: full-size-kana;
+
+/* グローバル値 */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+

+
+

+ 
capitalize

+ 

+ 
それぞれの単語の最初の文字を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。

+
+ 
capitalize が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。

+
+ 
capitalize キーワードは CSS 1 及び CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は - および _ を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は ⓐ のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の capitalize の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。

+ 

+ 
uppercase

+ 
すべての文字を大文字に変換させるキーワードです。

+ 
lowercase

+ 
すべての文字を小文字に変換させるキーワードです。

+ 
none

+ 
すべての文字を変換させないキーワードです。

+ 
full-width

+ 
一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。

+ 
full-size-kana

+ 
このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。

+

+
+
アクセシビリティの考慮

+
+
テキストの長い区間に text-transform の値を uppercase で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。

+
+
+
+
公式定義

+
+
{{CSSInfo}}

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
none

+
+
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: none
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+

+
+
span {
+  text-transform: none;
+}
+strong { float: right; }

+
+
文字を変換しない例です。

+
+
{{ EmbedLiveSample('none', '100%', '100px') }}

+
+
capitalize (一般的)

+
+
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>

+
+
span {
+  text-transform: capitalize;
+}
+strong { float: right; }

+
+
頭文字を大文字にする例です。

+
+
{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}

+
+
capitalize (句読点)

+
+
<p>Initial String
+  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
+</p>

+
+
span {
+  text-transform: capitalize;
+}
+strong { float: right; }

+
+
単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。

+
+
{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}

+
+
capitalize (記号)

+
+
<p>Initial String
+  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
+</p>

+
+
span {
+  text-transform: capitalize;
+}
+strong { float: right; }

+
+
頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。

+
+
{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}

+
+
capitalize (オランダ語の二重音字 ij)

+
+
<p>Initial String
+  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
+</p>

+
+
span {
+  text-transform: capitalize;
+}
+strong { float: right; }

+
+
オランダ語の二重音字 ij を1文字として扱わなければならないことを示す例です。

+
+
{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}

+
+
uppercase (一般的)

+
+
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>

+
+
span {
+  text-transform: uppercase;
+}
+strong { float: right; }

+
+
テキストを大文字に変換する例です。

+
+
{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}

+
+
uppercase> (ギリシャ語の母音字)

+
+
<p>Initial String
+  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
+</p>

+
+
span {
+  text-transform: uppercase;
+}
+strong { float: right; }

+
+
離接的接続の eta を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。

+
+
{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}

+
+
lowercase (一般的)

+
+
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>

+
+
span {
+  text-transform: lowercase;
+}
+strong { float: right; }

+
+
テキストを小文字に変換する例です。

+
+
{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}

+
+
lowercase (ギリシャ文字 Σ)

+
+
<p>Initial String
+  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
+</p>

+
+
span {
+  text-transform: lowercase;
+}
+strong { float: right; }

+
+
ギリシャ文字のシグマ (Σ) が、状況に応じて一般的な小文字のシグマ (σ) または単語の末尾での表記 (ς) に変換される例です。

+
+
{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}

+
+
lowercase (リヒテンシュタイン語)

+
+
<p>Initial String
+  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
+</p>

+
+
span {
+  text-transform: lowercase;
+}
+strong { float: right; }

+
+
これはリヒテンシュタインの文字 Ĩ および J́ が小文字に変換されるとドットを保持する様子を示します。

+
+
{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}

+
+
full-width (一般)

+
+
<p>Initial String
+  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
+</p>
+<p>text-transform: full-width
+  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
+</p>

+
+
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }

+
+
一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

+
+
{{ EmbedLiveSample('full-width_General', '100%', '175px') }}

+
+
full-width (日本語の半角カタカナ)

+
+
<p>Initial String
+  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
+</p>
+<p>text-transform: full-width
+  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
+</p>

+
+
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }

+
+
日本語の半角カタカナは、8ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の2つのコードポイントで表現されます。 full-width は、これらの文字を全角に変換する際に、1つのコードポイントにまとめます。

+
+
{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}

+
+
full-size-kana

+
+
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+</p>

+
+
p:nth-of-type(2) {
+  text-transform: full-size-kana;
+}

+
+
{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}対象の文字を {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} から、 Unicode の数字又は文字一般のカテゴリーに属するすべての文字に拡張。 capitalize の動作を、最初の区切り文字や記号を無視して単語の先頭の文字に適用するように変更。表意文字とアルファベット文字を自然な形で混在させるための full-width および full-size-kana キーワードを追加。
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}対象の文字を {{SpecName('CSS1', '#text-transform', 'text-transform')}} から、2 種類の表記を持つ非ラテン文字に拡張。
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-transform")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("font-variant")}}
    • 
+

diff --git a/files/ja/web/css/text-underline-offset/index.html b/files/ja/web/css/text-underline-offset/index.html
new file mode 100644
index 0000000000..46dab30ce4
--- /dev/null
+++ b/files/ja/web/css/text-underline-offset/index.html
@@ -0,0 +1,104 @@
+---
+title: text-underline-offset
+slug: Web/CSS/text-underline-offset
+tags:
+  - CSS
+  - CSS Text Decoration
+  - CSS テキスト装飾
+  - Property
+  - Reference
+  - text-decoration
+  - text-underline-offset
+  - プロパティ
+translation_of: Web/CSS/text-underline-offset
+---
+
{{CSSRef}}

+
+
text-underline-offset は CSS のプロパティで、 ({{cssxref("text-decoration")}} を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

+
+
text-underline-offset は {{cssxref('text-decoration')}} の一括指定の一部ではありません。一つの要素が複数の text-decoration による線を持つため、 text-underline-offset は下線のみに影響し、 overline や line-through などの他の装飾線には影響しません。

+
+
構文

+
+
/* 単一のキーワード */
+text-underline-offset: auto;
+
+/* 長さ */
+text-underline-offset: 0.1em;
+text-underline-offset: 3px;
+
+/* パーセント値 */
+text-underline-offset: 20%;
+
+/* グローバル値 */
+text-underline-offset: inherit;
+text-underline-offset: initial;
+text-underline-offset: unset;
+

+
+
text-underline-offset プロパティは、以下のリストのうち一つの値で指定します。

+
+
値

+
+

+ 
auto

+ 
ブラウザーが下線の適切なオフセットを選択します。

+ 
<length>

+ 
下線のオフセットを {{cssxref('length')}} で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 em 単位を使用することを推奨します。

+ 
<percentage>

+ 
下線のオフセットを、要素のフォントにおける 1 em に対する {{cssxref('percentage')}} で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。

+

+
+
形式文法

+
+
{{csssyntax}}

+
+
例

+
+
<p class="oneline">Here's some text with an offset wavy red underline!</p>
+<br>
+<p class="twolines">This text has lines both above and below it. Only the bottom one is offset.</p>

+
+
p {
+  text-decoration: underline wavy red;
+  text-underline-offset: 1em;
+}
+
+.twolines {
+  text-decoration-color: purple;
+  text-decoration-line: underline overline;
+}

+
+
{{ EmbedLiveSample('Examples', '', '', '') }}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Text Decoration', '#underline-offset', 'text-underline-offset')}}{{Spec2('CSS4 Text Decoration')}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.properties.text-underline-offset")}}

+
+
関連情報

+
+
    
+ 
  • {{cssxref("text-decoration")}}
    • 
+ 
  • {{cssxref("text-decoration-thickness")}}
    • 
+

diff --git a/files/ja/web/css/time-percentage/index.html b/files/ja/web/css/time-percentage/index.html
new file mode 100644
index 0000000000..c5f9254b40
--- /dev/null
+++ b/files/ja/web/css/time-percentage/index.html
@@ -0,0 +1,56 @@
+---
+title: 
+slug: Web/CSS/time-percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Reference
+  - time-percentage
+  - units
+  - values
+  - 値
+  - 単位
+translation_of: Web/CSS/time-percentage
+---
+
{{CSSRef}}

+
+
<time-percentage> は CSS のデータ型で、 {{Cssxref("time")}} または {{Cssxref("percentage")}} が取りうる値を表します。

+
+
構文

+
+
この型に利用できる個々の構文の詳細は、 {{Cssxref("time")}} および {{Cssxref("percentage")}} の文書を参照してください。

+
+
calc() での使用

+
+
許可されている型として <time-percentage> が指定されているところでは、これはパーセント値が時間として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS3 Values')}}<time-percentage> を定義。 calc() を追加

+
+
ブラウザーの対応

+
+
+
+
{{Compat("css.types.time-percentage")}}

diff --git a/files/ja/web/css/time/index.html b/files/ja/web/css/time/index.html
new file mode 100644
index 0000000000..8be9e47e20
--- /dev/null
+++ b/files/ja/web/css/time/index.html
@@ -0,0 +1,92 @@
+---
+title: