| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3LdJl1XxUT2UgZD5y3IADzmz48Y7zdyiFM1jiA71owDttAHQP5kt1A5Rh6U4JcFYMyG
x-goog-generation: 1760058714737899
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 276225
x-goog-meta-goog-reserved-file-mtime: 1760056735
x-goog-hash: crc32c=QAvdIg==, md5=McCunkM5Sw0aaGswYFkoIg==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Sun, 12 Oct 2025 03:10:28 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:11:54 GMT
etag: W/"31c0ae9e43394b0d1a686b3060592822"
content-type: text/html
age: 0
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: 5edc361867ccca78fd883403ac30676a
date: Sun, 12 Oct 2025 02:10:28 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
rem() - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
rem()
Baseline
2024
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
rem() は CSS の関数で、最初の引数を 2 つ目の引数で割ったときの剰余を返します。これは、JavaScript の剰余演算子 (%) と似ています。剰余は、1 つのオペランド（被除数）を 2 つ目のオペランド（除数）で割ったときに残る値です。常に被除数の符号を取ります。
メモ:
単位 rem については、 <length> ページをご覧ください。
例えば、CSS の rem(27, 5) 関数は、剰余として 2 を返します。 27 を 5 で割ると、結果は 5 で、剰余は 2 になります。完全な計算は 27 / 5 = 5 * 5 + 2 です。
構文
css
/* 単位なしの <number> */
line-height: rem(21, 2); /* 1 */
line-height: rem(14, 5); /* 4 */
line-height: rem(5.5, 2); /* 1.5 */
/* <percentage> や <dimension> に基づく単位 */
margin: rem(14%, 3%); /* 2% */
margin: rem(18px, 5px); /* 3px */
margin: rem(10rem, 6rem); /* 4rem */
margin: rem(26vmin, 7vmin); /* 5vmin */
margin: rem(1000px, 29rem); /* 72px - ルートの font-size が 16px の場合 */
/* 負の値・正の値 */
rotate: rem(200deg, 30deg); /* 20deg */
rotate: rem(140deg, -90deg); /* 50deg */
rotate: rem(-90deg, 20deg); /* -10deg */
rotate: rem(-55deg, -15deg); /* -10deg */
/* 計算 */
scale: rem(10 * 2, 1.7); /* 1.3 */
rotate: rem(10turn, 18turn / 3); /* 4turn */
transition-duration: rem(20s / 2, 3000ms * 2); /* 4s */
引数
関数 mod(dividend, divisor) は、カンマで区切られた 2 つの値を引数として受け入れます。関数が有効であるためには、両方の引数は同じ型、数値、サイズ、<percentage> のいずれかである必要があります。2 つの引数の単位は同じである必要はありませんが、<length>、<angle>、<time>、<frequency> などの同じサイズの型である必要があります。
dividend-
被除数を表す
<number>、<dimension>、<percentage>に解決される計算式。 divisor-
除数として表される
<number>、<dimension>、<percentage>に解決される計算式。
返値
剰余、つまり余りの演算を、<number>、<dimension>、<percentage> （引数の型に応じて）で表して返します。
divisorが0の場合、結果はNaNです。dividendがinfiniteの場合、結果はNaNです。dividendが正の値の場合、結果は正の値 (0⁺) となり、dividendが負の値の場合、結果は負の値 (0⁻) となります。
形式文法
<rem()> =
rem( <calc-sum> , <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # funcdef-rem |
ブラウザーの互換性
Loading…