{"id":1265,"date":"2018-04-20T18:48:09","date_gmt":"2018-04-20T09:48:09","guid":{"rendered":"http:\/\/4koma-web.com\/coding\/?p=1265"},"modified":"2018-04-20T18:52:56","modified_gmt":"2018-04-20T09:52:56","slug":"css%e5%a4%89%e6%95%b0","status":"publish","type":"post","link":"https:\/\/4koma-web.com\/coding\/css%e5%a4%89%e6%95%b0\/","title":{"rendered":"CSS\u5909\u6570"},"content":{"rendered":"<p>CSS\u5909\u6570\u3068\u306f\u3001\u300c\u30ab\u30b9\u30b1\u30fc\u30c9\u5909\u6570\u306e\u305f\u3081\u306eCSS\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\uff08CSS custom properties for cascading variables\uff09\u300d\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u5909\u6570\u306b\u306f\u6587\u5b57\u5217\u3084\u6570\u5024\u306a\u3069\u3092\u5165\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u3053\u306e\u5909\u6570\u306b\u3001\u7e70\u308a\u8fd4\u3057\u5229\u7528\u3059\u308b\u6570\u5024\u3084\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306a\u3069\u3092CSS\u5909\u6570\u3092\u4f7f\u3048\u3070\u3001<br \/>\n\u5b9a\u7fa9\u3057\u3066\u304a\u3044\u305f\u5909\u6570\u306e\u4e2d\u8eab\u3060\u3051\u5909\u3048\u308b\u3060\u3051\u3067\u3001\u5909\u66f4\u304c\u53ef\u80fd\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>CSS\u5909\u6570\u306e\u5b9a\u7fa9<br \/>\n\u5229\u7528\u3057\u305f\u3044\u90e8\u5206\u3067 var(&#8211;\u5909\u6570\u540d) \u3068\u8a18\u8ff0\u3059\u308b\u3068\u3001\u5b9a\u7fa9\u3057\u305f\u5024\u3092\u5f53\u3066\u306f\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n<pre>\r\n:root {\r\n  --text-position: center;  \/*text-position\u306f\u5909\u6570\u540d*\/\r\n}\r\n.test {\r\n  width: 200px;\r\n  height: 100px;\r\n  text-align: var(--text-position);\r\n}\r\n<\/pre>\n<p>CSS\u5909\u6570\u306f\u52d5\u7684\u306b\u5229\u7528\u3067\u304d\u3001JavaScript\u306b\u6d41\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u4e0b\u8a18\u3067\u306f.test\u306e\u5909\u6570&#8211;text-position\u306e\u4e2d\u8eab\u3092\u53d6\u5f97\u3059\u308b\u8a18\u8ff0\u3067\u3059\u3002<\/p>\n<pre>\r\nconst boxElement = document.querySelector('.test');\r\nconst cssStyle = getComputedStyle(boxElement);\r\nconst cssValue = String(cssStyle.getPropertyValue('--text-position')).trim(); \r\n \r\nconsole.log(cssValue);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS\u5909\u6570\u3068\u306f\u3001\u300c\u30ab\u30b9\u30b1\u30fc\u30c9\u5909\u6570\u306e\u305f\u3081\u306eCSS\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\uff08CSS custom properties for cascading variables\uff09\u300d\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002 \u5909\u6570\u306b\u306f\u6587\u5b57\u5217\u3084\u6570\u5024\u306a\u3069\u3092\u5165\u308c\u308b\u3053\u3068\u304c\u3067\u304d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"","_original_post":"","footnotes":""},"categories":[1],"tags":[],"publishpress_future_action":{"enabled":false,"date":"2026-04-21 23:07:33","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1265"}],"collection":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/comments?post=1265"}],"version-history":[{"count":0,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1265\/revisions"}],"wp:attachment":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/media?parent=1265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/categories?post=1265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/tags?post=1265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}