CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3Lg7u228zOVcBdJAfYRURB0ddSUPFj3lGkCC-K2-GVejY8_ZX_Do7N4iAG0PcDgrg0W
cache-control: public, max-age=3600
expires: Tue, 07 Oct 2025 10:25:33 GMT
last-modified: Tue, 07 Oct 2025 01:15:34 GMT
etag: W/"846f9cfdbed7a1347777f3e3fb7a3070"
x-goog-generation: 1759799734869956
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 272625
x-goog-meta-goog-reserved-file-mtime: 1759797522
x-goog-hash: crc32c=IW7t/w==, md5=hG+c/b7XoTR3d/Pj+3owcA==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: ec14bbe57837ada493a69d4d83b1a6ee
date: Tue, 07 Oct 2025 09:25:34 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
overflow-clip-margin - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
>
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
overflow-clip-margin
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
overflow-clip-margin
は CSS のプロパティで、 overflow: clip
を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。 このプロパティで定義される境界は、ボックスのオーバーフロークリップ枠と呼ばれます。
構文
css
/* <length> 値 */
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;
/* <visual-box> | <length> */
overflow-clip-margin: content-box 5px;
/* グローバル値 */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;
<visual-box>
値(既定値は padding-box
)は、オーバーフロークリップ枠の原点として使用するボックス枠を指定します。 overflow-clip-margin
で指定する <length>
の値は負の値であってはなりません。
メモ:
overflow: clip
を持たない要素では、このプロパティは無視されます。
公式定義
初期値 | 0px |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | the computed <length> and a <visual-box> keyword |
アニメーションの種類 | 離散値 |
形式文法
overflow-clip-margin =
<visual-box> ||
<length [0,∞]>
<visual-box> =
content-box |
padding-box |
border-box
例
>HTML
html
<div class="box">
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>
CSS
css
.box {
border: 3px solid black;
width: 250px;
height: 100px;
overflow: clip;
overflow-clip-margin: 20px;
}
例
仕様書
Specification |
---|
CSS Overflow Module Level 3> # overflow-clip-margin> |
ブラウザーの互換性
Loading…
関連情報
- 関連する CSS プロパティ:
text-overflow
,white-space
,overflow
,overflow-inline
,overflow-x
,overflow-y
,clip
,display