{"id":5534,"date":"2019-11-18T09:00:00","date_gmt":"2019-11-18T00:00:00","guid":{"rendered":"https:\/\/iseed.jp\/wp\/?p=1170"},"modified":"2025-09-02T11:21:41","modified_gmt":"2025-09-02T02:21:41","slug":"css3-calc","status":"publish","type":"post","link":"https:\/\/iseed.jp\/blog\/css3-calc\/","title":{"rendered":"\u5e45\u3084\u9ad8\u3055\u306e\u8a08\u7b97\u306a\u3089CSS3\u306ecalc()\u95a2\u6570\u304c\u4fbf\u5229"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u672c\u65e5\u306fCSS3\u306e\u8d85\u4fbf\u5229\u306a\u95a2\u6570calc()\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">calc()\u3063\u3066\u306a\u3093\u3060\uff1f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS\u3067\u56db\u5247\u6f14\u7b97\u304c\u3067\u304d\u308b\u95a2\u6570\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">calc()\u3067\u56db\u5247\u6f14\u7b97\u304c\u3067\u304d\u308b\u30e1\u30ea\u30c3\u30c8\u3063\u3066\uff1f<\/h3>\n\n\n\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u30dc\u30c3\u30af\u30b9\u3092\u5747\u7b49\u306a\u5e45\u304b\u3064\u53ef\u5909\u30b5\u30a4\u30ba\u3067\u3001\u4f59\u767d\u306f\u56fa\u5b9apx\u3067\u4e26\u3079\u305f\u3044\u6642<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u5de6\u53f3\u306b20px\u306e\u4f59\u767d\u3092\u53d6\u308a\u3064\u3064\u753b\u9762\u3044\u3063\u3071\u3044\u306b\u8981\u7d20\u3092\u8868\u793a\u3057\u305f\u3044\u6642<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u56fa\u5b9a\u5e45\u306e\u30dc\u30c3\u30af\u30b9+\u53ef\u5909\u5e45\u306e\u30dc\u30c3\u30af\u30b9\u3092\u6a2a\u4e26\u3073\u306b\u3057\u305f\u3044\u6642<\/span><\/li><\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u7b49\u306b\u81ea\u5206\u3067\u8a08\u7b97\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306aWeb\u30b5\u30a4\u30c8\u304c\u5897\u3048\u305f\u4eca\u3001\u304b\u306a\u308a\u4f7f\u3044\u52dd\u624b\u304c\u3088\u304f\u4fbf\u5229\u306a\u95a2\u6570\u3067\u3059\uff01<\/p>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/calc\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">calc()\u306e\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u5024\u3092\u6307\u5b9a\u3057\u305f\u3044\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4e2d\u306bcalc()\u3092\u5165\u308c\u308b\u3060\u3051\uff01<br>\u6570\u5b57\u3067\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306a\u3089\u3069\u3053\u3067\u3082\u4f7f\u3048\u308b(\u306f\u305a)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\u306e\u4f8b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3093\u306a\u611f\u3058<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  width:100%;\n  padding:0 20px;\n}\n\n\/* \u89aa\u8981\u7d20\u304c\u53d6\u3063\u3066\u3044\u308b\u4f59\u767d\u304b\u3089\u306f\u307f\u51fa\u3057\u3066\u753b\u9762\u3044\u3063\u3071\u3044\u306b\u8868\u793a\u3055\u305b\u305f\u3044\u6642\u3068\u304b *\/\n.child{\n  margin: 0 -10px;\n  width: calc(100% + 20px);\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3067\u6307\u5b9a\u3057\u305f\u8981\u7d20\u306e\u5e45\u304c\u81ea\u52d5\u7684\u306b100%\uff0b20px\u306b\u306a\u308b\u3088\u3046\u306b\u8a08\u7b97\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f7f\u3048\u308b\u5f0f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">calc()\u3067\u4f7f\u3048\u308b\u5f0f\u306f<\/p>\n\n\n\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u8db3\u3057\u7b97( + )<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u5f15\u304d\u7b97( &#8211; )<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u4e57\u7b97( * )<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u9664\u7b97( \/ )<\/span><\/li><\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u306e4\u7a2e\u985e\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<p class=\"has-black-color has-text-color has-link-color has-small-font-size wp-elements-1 wp-block-paragraph\"><span data-icon=\"LsWarning\" data-id=\"0\" style=\"--the-icon-svg: url(data:image\/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjQgMUMxMS4zIDEgMSAxMS4zIDEgMjRzMTAuMyAyMyAyMyAyMyAyMy0xMC4zIDIzLTIzUzM2LjcgMSAyNCAxem0tMi41IDE0YzAtMS40IDEuMS0yLjUgMi41LTIuNXMyLjUgMS4xIDIuNSAyLjV2MTBjMCAxLjQtMS4xIDIuNS0yLjUgMi41cy0yLjUtMS4xLTIuNS0yLjVWMTV6TTI0IDM1LjVjLTEuNyAwLTMtMS4zLTMtM3MxLjMtMyAzLTMgMyAxLjMgMyAzLTEuMyAzLTMgM3oiPjwvcGF0aD48L3N2Zz4=)\" aria-hidden=\"true\" class=\"swl-inline-icon\">\u2003<\/span>\u8db3\u3057\u7b97\u3068\u5f15\u304d\u7b97\u306e\u524d\u5f8c\u306f\u30b9\u30da\u30fc\u30b9\u3042\u3051\u306a\u3044\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<br>\u4e57\u7b97\u3068\u9664\u7b97\u306f\u3042\u3051\u306a\u304f\u3066\u3082\u5927\u4e08\u592b\u3067\u3059\u304c\u3001\u79c1\u306f\u6642\u3005\u3053\u3093\u304c\u3089\u304c\u308b\u306e\u3067\u4e00\u5f8b\u7a7a\u3051\u3066\u307e\u3059\u3002<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<p class=\"has-black-color has-text-color has-link-color has-small-font-size wp-elements-2 wp-block-paragraph\"><span data-icon=\"LsWarning\" data-id=\"0\" style=\"--the-icon-svg: url(data:image\/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjQgMUMxMS4zIDEgMSAxMS4zIDEgMjRzMTAuMyAyMyAyMyAyMyAyMy0xMC4zIDIzLTIzUzM2LjcgMSAyNCAxem0tMi41IDE0YzAtMS40IDEuMS0yLjUgMi41LTIuNXMyLjUgMS4xIDIuNSAyLjV2MTBjMCAxLjQtMS4xIDIuNS0yLjUgMi41cy0yLjUtMS4xLTIuNS0yLjVWMTV6TTI0IDM1LjVjLTEuNyAwLTMtMS4zLTMtM3MxLjMtMyAzLTMgMyAxLjMgMyAzLTEuMyAzLTMgM3oiPjwvcGF0aD48L3N2Zz4=)\" aria-hidden=\"true\" class=\"swl-inline-icon\">\u2003<\/span>\u9664\u7b97\u3092\u4f7f\u3046\u3068\u304d\u3001\u8a08\u7b97\u5f0f\u306e\u53f3\u5074\u306b\u5165\u308c\u3089\u308c\u308b\u306e\u306f\u6570\u5b57\u3060\u3051\u3067\u3059\u3002<br>\u4e57\u7b97\u3092\u4f7f\u3046\u3068\u304d\u3082\u3069\u3061\u3089\u304b\u7247\u65b9\u306e\u6570\u5024\u304c\u5358\u4f4d\u306e\u306a\u3044\u6570\u5b57\u3067\u306a\u3044\u3068\u3044\u3051\u307e\u305b\u3093\u3002<br>\u3053\u3053\u306b\u300cem\u300d\u3084\u300cvw\u300d\u306a\u3069\u4f55\u304b\u3057\u3089\u5358\u4f4d\u3092\u5165\u308c\u305f\u3089\u8868\u793a\u304c\u5d29\u308c\u308b\u306e\u3067\u3084\u3081\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u5165\u308c\u5b50\u306e\u8a08\u7b97\u3082OK\uff01<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">calc()\u306f\u5165\u308c\u5b50\u306e\u8a08\u7b97\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\u3048\u30704\u3064\u306e\u30ab\u30e9\u30e0\u3092\u4e26\u3079\u3001\u9593\u306e\u4f59\u767d\u306f20px\u305a\u3064\u53d6\u308a\u306a\u304c\u3089\u3001\u6700\u521d\u306e\u30ab\u30e9\u30e0\u3068\u6700\u5f8c\u306e\u30ab\u30e9\u30e0\u306f\u4e21\u7aef\u306b\u4e26\u3079\u305f\u3044\u6642\u306a\u3069\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">HTML<\/h4>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">&lt;div class=\"parent\">\n  &lt;div class=\"child\">\n    &lt;p>\u7bb1\u3067\u3059&lt;\/p>\n  &lt;\/div>\n  &lt;div class=\"child\">\n    &lt;p>\u7bb1\u3067\u3059&lt;\/p>\n  &lt;\/div>\n  &lt;div class=\"child\">\n    &lt;p>\u7bb1\u3067\u3059&lt;\/p>\n  &lt;\/div>\n  &lt;div class=\"child\">\n    &lt;p>\u7bb1\u3067\u3059&lt;\/p>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">CSS<\/h4>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  background: gray;\n  margin:auto;\n  overflow:hidden;\n  padding:10px;\n  width:100%;\n}\n\n.child{\n  background: white;\n  float:left;\n  text-align:center;\n  width:calc((100% - 60px) \/ 4);\n}\n\n\/* \u6700\u521d\u306e\u8981\u7d20\u4ee5\u5916\u306b\u5de6\u30de\u30fc\u30b8\u30f3\u3092\u8ffd\u52a0 *\/\n.child + .child{\n  margin-left: 20px;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">\u8868\u793a<\/h4>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<style>\n.parent{\n  background: gray;\n  margin:auto;\n  overflow:hidden;\n  padding:10px;\n  width:100%;\n}\n\n.child{\n  background: white;\n  float:left;\n  text-align:center;\n  width:calc((100% - 60px) \/ 4);\n}\n\n\/* \u6700\u521d\u306e\u8981\u7d20\u4ee5\u5916\u306b\u5de6\u30de\u30fc\u30b8\u30f3\u3092\u8ffd\u52a0 *\/\n.child + .child{\n  margin-left: 20px;\n}\n<\/style>\n\n<div class=\"parent\">\n<div class=\"child\">\u7bb1\u3067\u3059<\/div>\n<div class=\"child\">\u7bb1\u3067\u3059<\/div>\n<div class=\"child\">\u7bb1\u3067\u3059<\/div>\n<div class=\"child\">\u7bb1\u3067\u3059<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3046\u3044\u3046\u6642\u306f\u5927\u4f53FlexBox\u306ejustify-content\u3067space-between\u3092\u4f7f\u3046\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u4e8b\u60c5\u304c\u3042\u3063\u3066Float\u3057\u304b\u4f7f\u3048\u306a\u3044\u6642\u7b49\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5404\u30d6\u30e9\u30a6\u30b6\u306e\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/10\/Can_I_use_Support_tables_for_HTML5CSS3etc-1024x576.gif\" alt=\"calc()\u95a2\u6570\u306e\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1\" class=\"wp-image-1951\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/10\/Can_I_use_Support_tables_for_HTML5CSS3etc-1024x576.gif 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/10\/Can_I_use_Support_tables_for_HTML5CSS3etc-300x169.gif 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/10\/Can_I_use_Support_tables_for_HTML5CSS3etc-768x432.gif 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u307b\u307c\u3059\u3079\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u304c\u5b8c\u5168\u5bfe\u5fdc\u3057\u3066\u304a\u308a\u30012019\u5e7410\u6708\u73fe\u5728\u306e\u6642\u70b9\u3067\u306f\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3082\u5fc5\u8981\u306a\u3055\u305d\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u306f\u672a\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u306e\u30b5\u30dd\u30fc\u30c8\u3082\u7d42\u4e86\u3057\u3066\u304a\u308a\u307e\u3059\u306e\u3067\u3001\u3069\u3093\u3069\u3053\u4f7f\u3063\u3066\u3044\u304d\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/caniuse.com\/#feat=calc\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u3057\u304b\u3057\u2026<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">IE11\u3067calc()\u95a2\u6570\u3092\u4f7f\u7528\u3057\u305f\u30da\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b\u5834\u5408\u3001\u8868\u793a\u304c\u5d29\u308c\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.child{\n  width: calc(100% \/ 3);\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3068\u8868\u8a18\u3057\u305f\u5834\u5408\u3001\u4ed6\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u8981\u7d20\u304c3\u7b49\u5206\u3055\u308c\u3066\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3059\u304c\u3001IE11\u3067\u306f\u30ab\u30e9\u30e0\u843d\u3061\u3057\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"640\" height=\"427\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/10\/calc-comparison-1.gif\" alt=\"\" class=\"wp-image-1952\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">IE\u3067\u306fcalc()\u95a2\u6570\u3092\u4f7f\u3046\u969b\u306b\u3001\u5272\u308a\u5207\u308c\u306a\u3044\u6570\u5b57\u3067\u5272\u308d\u3046\u3068\u3059\u308b\u3068\u3001\u6570\u5b57\u304c\u7e70\u308a\u4e0a\u304c\u3063\u3066\u3057\u307e\u3046\u3088\u3046\u3067\u3059\u3002<br>\u3053\u306e\u5834\u5408\u306f100\u30923\u3067\u5272\u308d\u3046\u3068\u3057\u305f\u305f\u3081\u3001\u8868\u793a\u304c\u5d29\u308c\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u5834\u5408<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.child{\n  width: calc((100% \/ 3) - .01px);\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3068\u8a18\u8f09\u3059\u308b\u4e8b\u3067\u56de\u907f\u3067\u304d\u307e\u3059\u3002<br>(\u3067\u3082\u306a\u3093\u304b\u30a4\u30e4\u306a\u3093\u3067\u3059\u3088\u306d\u3048)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"640\" height=\"427\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/10\/calc-comparison-2.gif\" alt=\"\" class=\"wp-image-1953\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u306e\u4ed6\u306b\u3082<\/p>\n\n\n\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u5165\u308c\u5b50\u306e\u5f0f\u304c\u6b63\u3057\u304f\u6a5f\u80fd\u3057\u306a\u3044\u6642\u304c\u3042\u308b<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">calc(% + vw)\u306e\u5f62\u5f0f\u3067\u8a18\u8ff0\u3059\u308b\u3068\u6b63\u5e38\u306b\u8a08\u7b97\u3067\u304d\u306a\u3044<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">transform\u306e\u5024\u3067calc\u3092\u4f7f\u3046\u3068\u52b9\u304b\u306a\u3044<\/span><\/li><\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u7b49\u3005\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3069\u3093\u3069\u3093\u51fa\u3066\u304f\u308b(\u30fd&#8217;A`)<br>calc()\u4ee5\u5916\u306e\u30d0\u30b0\u3082<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">IE\u306f\u5f90\u3005\u306b\u30b7\u30a7\u30a2\u304c\u843d\u3061\u3066\u3044\u308b\u3068\u3053\u308d\u3067\u3059\u304c\u3001\u4f9d\u7136\u65e5\u672c\u3067\u306f10%\u4ee5\u4e0a\u306e\u30b7\u30a7\u30a2\u304c\u3042\u308a\u3001\u307e\u3060\u7121\u8996\u3067\u304d\u306a\u3044\u72b6\u6cc1\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/gs.statcounter.com\/browser-market-share\/desktop\/japan\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u3055\u3089\u306bWindows10\u306eIE11\u306f2025\u5e74\u307e\u3067\u6b63\u5f0f\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u308b\u305f\u3081\u3001\u5411\u3053\u30465\u5e74\u306fIE\u3092\u8003\u616e\u3057\u3066\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3068\u306f\u3044\u3048\u4fbf\u5229\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u3042\u308b\u4e8b\u306b\u306f\u5909\u308f\u308a\u306a\u3044\u306e\u3067\u3001IE\u306b\u3082\u5bfe\u5fdc\u3057\u305f\u8a18\u8ff0\u306b\u3059\u308b\u3001\u305d\u3082\u305d\u3082Web\u30b5\u30a4\u30c8\u306e\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u304b\u3089IE\u3092\u5916\u3059\u7b49\u3067\u5bfe\u7b56\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u65e5\u306fCSS3\u306e\u8d85\u4fbf\u5229\u306a\u95a2\u6570calc()\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 calc()\u3063\u3066\u306a\u3093\u3060\uff1f CSS\u3067\u56db\u5247\u6f14\u7b97\u304c\u3067\u304d\u308b\u95a2\u6570\u3067\u3059\u3002 calc()\u3067\u56db\u5247\u6f14\u7b97\u304c\u3067\u304d\u308b\u30e1\u30ea\u30c3\u30c8\u3063\u3066\uff1f \u7b49\u306b\u81ea\u5206\u3067\u8a08\u7b97\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u307e\u3059\u3002 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1954,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[3],"tags":[40],"class_list":["post-5534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-html-css"],"_links":{"self":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/comments?post=5534"}],"version-history":[{"count":5,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5534\/revisions"}],"predecessor-version":[{"id":5655,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5534\/revisions\/5655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/media\/1954"}],"wp:attachment":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/media?parent=5534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/categories?post=5534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/tags?post=5534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}