{"id":1589,"date":"2025-03-24T08:50:19","date_gmt":"2025-03-23T23:50:19","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=1589"},"modified":"2025-03-24T08:50:19","modified_gmt":"2025-03-23T23:50:19","slug":"2024%e5%b9%b4%e7%89%88%ef%bc%81%e7%8f%be%e4%bb%a3%e3%81%aecss%e3%81%a0%e3%81%91%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%a7%e3%81%8d%e3%82%8b7%e3%81%a4%e3%81%ae%e7%90%86%e7%94%b1-sass%e3%81%8c%e5%bf%85","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=1589","title":{"rendered":"2024\u5e74\u7248\uff01\u73fe\u4ee3\u306eCSS\u3060\u3051\u3067\u5b9f\u73fe\u3067\u304d\u308b7\u3064\u306e\u7406\u7531 &#8211; Sass\u304c\u5fc5\u8981\u306a\u3044\u6642\u4ee3\u306e\u65b0\u3057\u3044\u30a2\u30d7\u30ed\u30fc\u30c1"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">\u6700\u65b0\u306eCSS\u9032\u5316\u306b\u3088\u308aSass\u304c\u4e0d\u8981\u306b\u306a\u3063\u305f\u80cc\u666f<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">CSS\u5909\u6570\u3084nesting\u306a\u3069\u3001\u30e2\u30c0\u30f3CSS\u306e\u9032\u5316\u304c\u8457\u3057\u3044\u73fe\u72b6<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-3\">\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u72b6\u6cc1\u304b\u3089\u898b\u308b\u5b9f\u8df5\u6295\u5165\u306e\u5224\u65ad\u57fa\u6e96<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-6\">Sass\u304c\u5fc5\u8981\u3067\u306a\u3051\u308c\u3070\u5224\u65ad\u3067\u304d\u308b7\u3064\u306e\u30b1\u30fc\u30b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-7\">1. \u5909\u6570\u7ba1\u7406\u306fCSS Custom Properties\u3067\u5341\u5206<\/a>      <\/li>      <li>        <a href=\"#i-8\">2. nesting\u306f\u30cd\u30a4\u30c6\u30a3\u30d6CSS\u3067\u65b0\u3057\u304f\u30ab\u30d0\u30fc\u53ef\u80fd\u306b<\/a>      <\/li>      <li>        <a href=\"#i-9\">3. mixin\u306e\u4ee3\u308f\u308a\u306b@supports\u3068@layer\u3067\u5bfe\u5fdc<\/a>      <\/li>      <li>        <a href=\"#i-10\">4. \u30ab\u30e9\u30fc\u95a2\u6570\u306fCSS\u30ab\u30e9\u30fc\u6a5f\u80fd\u3067\u5b9f\u73fe<\/a>      <\/li>      <li>        <a href=\"#i-11\">5. \u5c0f\u898f\u6a21\u304b\u3089\u4e2d\u898f\u6a21\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306a\u3089\u30d7\u30ec\u30fc\u30f3CSS<\/a>      <\/li>      <li>        <a href=\"#i-12\">6. CSS Modules\u306b\u3088\u308b\u5c40\u6240\u7684\u306a\u30b9\u30b3\u30fc\u30d7\u7ba1\u7406<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-13\">7. PostCSS\u306b\u3088\u308b\u5fc5\u9808\u306e\u5909\u63db\u51e6\u7406<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-14\">Sass\u306a\u3057\u3067\u958b\u767a\u52b9\u7387\u3092\u4e0a\u3052\u308b\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-15\">\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\u3068CSS\u8a2d\u8a08\u306e\u91cd\u8981\u6027<\/a>      <\/li>      <li>        <a href=\"#i-18\">\u30e2\u30c0\u30f3CSS\u30c4\u30fc\u30eb\u30c1\u30a7\u30fc\u30f3\u306e\u69cb\u7bc9\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-20\">\u30c1\u30fc\u30e0\u958b\u767a\u306b\u304a\u3051\u308b\u4e00\u8cab\u6027\u306e\u78ba\u7acb<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-23\">Sass\u304b\u3089\u306e\u79fb\u884c\u6226\u7565\u3068\u6ce8\u610f\u70b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-24\">\u6bb5\u968e\u7684\u306a\u79fb\u884c\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u5177\u4f53\u4f8b<\/a>      <\/li>      <li>        <a href=\"#i-27\">\u79fb\u884c\u6642\u306e\u4e00\u822c\u7684\u306a\u8ab2\u984c\u3068\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-31\">\u30ec\u30ac\u30b7\u30fc\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u304c\u5fc5\u8981\u306a\u5834\u5408\u306e\u6226\u7565<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-35\">Sass\u304c\u6709\u52b9\u306a\u30b1\u30fc\u30b9\u3068\u5224\u65ad\u57fa\u6e96<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-36\">\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u8907\u96d1\u306a\u5909\u6570\u7ba1\u7406<\/a>      <\/li>      <li>        <a href=\"#i-38\">\u9ad8\u5ea6\u306a\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u3084\u6a5f\u80fd\u6d3b\u7528\u304c\u5fc5\u8981\u306a\u5834\u5408<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-40\">\u30c1\u30fc\u30e0\u306e\u8cc7\u7523\u3084\u30c1\u30fc\u30e0\u306e\u7fd2\u719f\u5ea6\u3092\u8003\u616e\u3057\u305f\u5224\u65ad<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">\u6700\u65b0\u306eCSS\u9032\u5316\u306b\u3088\u308aSass\u304c\u4e0d\u8981\u306b\u306a\u3063\u305f\u80cc\u666f<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">CSS\u5909\u6570\u3084nesting\u306a\u3069\u3001\u30e2\u30c0\u30f3CSS\u306e\u9032\u5316\u304c\u8457\u3057\u3044\u73fe\u72b6<\/h3>\n\n\n\n<p>\u8fd1\u5e74\u306eCSS\u4ed5\u69d8\u306e\u9032\u5316\u306f\u76ee\u899a\u307e\u3057\u304f\u3001\u304b\u3064\u3066Sass\u304c\u63d0\u4f9b\u3057\u3066\u3044\u305f\u591a\u304f\u306e\u6a5f\u80fd\u304c\u3001\u73fe\u5728\u3067\u306f\u6a19\u6e96\u306eCSS\u3067\u30cd\u30a4\u30c6\u30a3\u30d6\u306b\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u3053\u306e\u9032\u5316\u306b\u3088\u308a\u3001\u591a\u304f\u306e\u958b\u767a\u73fe\u5834\u3067Sass\u306e\u5fc5\u8981\u6027\u304c\u4f4e\u4e0b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-2\">\u30cd\u30a4\u30c6\u30a3\u30d6CSS\u6a5f\u80fd\u306e\u4e3b\u306a\u9032\u5316\u30dd\u30a4\u30f3\u30c8<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>CSS Custom Properties\uff08CSS\u5909\u6570\uff09<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u52d5\u7684\u306a\u5024\u306e\u5909\u66f4\u304c\u53ef\u80fd<\/li>\n\n\n\n<li>JavaScript \u3068\u306e\u9023\u643a\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u30ab\u30b9\u30b1\u30fc\u30c7\u30a3\u30f3\u30b0\u3068\u30b9\u30b3\u30fc\u30d7\u306e\u5236\u5fa1\u304c\u67d4\u8edf<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>CSS Nesting\uff08\u5165\u308c\u5b50\u69cb\u9020\uff09<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   .card {\n     padding: 16px;\n\n     .title {\n       font-size: 1.5em;\n     }\n\n     &amp;:hover {\n       background: #f0f0f0;\n     }\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u65b0\u3057\u3044\u30ab\u30e9\u30fc\u95a2\u6570<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>rgb()<\/code>, <code>hsl()<\/code>\u306e\u65b0\u3057\u3044\u69cb\u6587<\/li>\n\n\n\n<li><code>color-mix()<\/code>\u306b\u3088\u308b\u8272\u306e\u6df7\u5408<\/li>\n\n\n\n<li><code>color-contrast()<\/code>\u306b\u3088\u308b\u6700\u9069\u306a\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u8a08\u7b97<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u8a08\u7b97\u6a5f\u80fd\u306e\u5f37\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>calc()<\/code>\u306e\u9ad8\u5ea6\u306a\u6570\u5024\u8a08\u7b97<\/li>\n\n\n\n<li><code>min()<\/code>, <code>max()<\/code>, <code>clamp()<\/code>\u95a2\u6570\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-3\">\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u72b6\u6cc1\u304b\u3089\u898b\u308b\u5b9f\u8df5\u6295\u5165\u306e\u5224\u65ad\u57fa\u6e96<\/h3>\n\n\n\n<p>\u6700\u65b0\u306eCSS\u6a5f\u80fd\u306e\u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1\u306f\u3001\u5b9f\u52d9\u3067\u306e\u63a1\u7528\u5224\u65ad\u306b\u5927\u304d\u304f\u5f71\u97ff\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-4\">\u4e3b\u8981\u6a5f\u80fd\u306e\u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1\uff082024\u5e74\u73fe\u5728\uff09<\/h4>\n\n\n<div id=\"id-a5f5f2d0-de60-4945-8a88-41674a72142e\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6a5f\u80fd<\/th><th>Chrome<\/th><th>Firefox<\/th><th>Safari<\/th><th>Edge<\/th><\/tr><\/thead><tbody><tr><td>CSS Custom Properties<\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><\/tr><tr><td>CSS Nesting<\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><\/tr><tr><td>Color Functions<\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u90e8\u5206\u7684<\/td><td>\u2705<\/td><\/tr><tr><td>Container Queries<\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"i-5\">\u5b9f\u8df5\u6295\u5165\u306e\u5224\u65ad\u30dd\u30a4\u30f3\u30c8<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30bf\u30fc\u30b2\u30c3\u30c8\u30d6\u30e9\u30a6\u30b6\u306e\u7bc4\u56f2<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30e2\u30c0\u30f3\u30d6\u30e9\u30a6\u30b6\u306e\u307f\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u5834\u5408\u306f\u3001\u30cd\u30a4\u30c6\u30a3\u30d6CSS\u6a5f\u80fd\u306e\u63a1\u7528\u304c\u63a8\u5968<\/li>\n\n\n\n<li>\u30ec\u30ac\u30b7\u30fc\u30d6\u30e9\u30a6\u30b6\u306e\u30b5\u30dd\u30fc\u30c8\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001PostCSS\u306a\u3069\u306e\u30c4\u30fc\u30eb\u3067\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u5bfe\u5fdc<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6027\u8cea<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\uff1a\u30e2\u30c0\u30f3CSS\u6a5f\u80fd\u306e\u7a4d\u6975\u7684\u306a\u6d3b\u7528\u3092\u63a8\u5968<\/li>\n\n\n\n<li>\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\uff1a\u6bb5\u968e\u7684\u306a\u79fb\u884c\u3092\u691c\u8a0e<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u30c1\u30fc\u30e0\u306e\u6e96\u5099\u72b6\u6cc1<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c1\u30fc\u30e0\u30e1\u30f3\u30d0\u30fc\u306e\u30b9\u30ad\u30eb\u30bb\u30c3\u30c8<\/li>\n\n\n\n<li>\u5b66\u7fd2\u30b3\u30b9\u30c8\u3068\u79fb\u884c\u30b3\u30b9\u30c8\u306e\u8a55\u4fa1<\/li>\n\n\n\n<li>\u958b\u767a\u52b9\u7387\u3078\u306e\u5f71\u97ff\u5206\u6790<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306a\u30e2\u30c0\u30f3CSS\u306e\u9032\u5316\u306b\u3088\u308a\u3001\u591a\u304f\u306e\u958b\u767a\u73fe\u5834\u3067Sass\u306e\u5fc5\u8981\u6027\u306f\u4ee5\u524d\u3068\u6bd4\u3079\u3066\u5927\u304d\u304f\u4f4e\u4e0b\u3057\u3066\u3044\u307e\u3059\u3002\u7279\u306b\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u304a\u3044\u3066\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u306a\u958b\u767a\u74b0\u5883\u3068\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u306e\u5411\u4e0a\u3092\u76ee\u6307\u3057\u3066\u3001\u30cd\u30a4\u30c6\u30a3\u30d6CSS\u306e\u63a1\u7528\u3092\u7a4d\u6975\u7684\u306b\u691c\u8a0e\u3059\u308b\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-6\">Sass\u304c\u5fc5\u8981\u3067\u306a\u3051\u308c\u3070\u5224\u65ad\u3067\u304d\u308b7\u3064\u306e\u30b1\u30fc\u30b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">1. \u5909\u6570\u7ba1\u7406\u306fCSS Custom Properties\u3067\u5341\u5206<\/h3>\n\n\n\n<p>\u30e2\u30c0\u30f3CSS\u306eCustom Properties\uff08CSS\u5909\u6570\uff09\u306f\u3001Sass\u306e\u5909\u6570\u6a5f\u80fd\u3092\u5b8c\u5168\u306b\u7f6e\u304d\u63db\u3048\u3089\u308c\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u3088\u308a\u5f37\u529b\u306a\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \u30b0\u30ed\u30fc\u30d0\u30eb\u306a\u5909\u6570\u5b9a\u7fa9 *\/\n:root {\n  --primary-color: #3498db;\n  --secondary-color: #2ecc71;\n  --spacing-unit: 8px;\n  --font-size-base: 16px;\n}\n\n\/* \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u56fa\u6709\u306e\u5909\u6570 *\/\n.card {\n  --card-padding: calc(var(--spacing-unit) * 2);\n  background-color: var(--primary-color);\n  padding: var(--card-padding);\n  font-size: var(--font-size-base);\n}<\/pre>\n\n\n\n<p>\u7279\u7b46\u3059\u3079\u304d\u5229\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript\u304b\u3089\u306e\u52d5\u7684\u306a\u5024\u306e\u5909\u66f4\u304c\u53ef\u80fd<\/li>\n\n\n\n<li>\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u5185\u3067\u306e\u5024\u306e\u4e0a\u66f8\u304d\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3054\u3068\u306e\u30b9\u30b3\u30fc\u30d7\u7ba1\u7406\u304c\u53ef\u80fd<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">2. nesting\u306f\u30cd\u30a4\u30c6\u30a3\u30d6CSS\u3067\u65b0\u3057\u304f\u30ab\u30d0\u30fc\u53ef\u80fd\u306b<\/h3>\n\n\n\n<p>CSS Nesting\u306e\u4ed5\u69d8\u304c\u6b63\u5f0f\u306b\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3001Sass\u306e\u4e3b\u8981\u306a\u6a5f\u80fd\u306e1\u3064\u3060\u3063\u305f\u5165\u308c\u5b50\u69cb\u9020\u304c\u6a19\u6e96CSS\u3067\u5b9f\u73fe\u53ef\u80fd\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \u30e2\u30c0\u30f3\u306aCSS Nesting *\/\n.navbar {\n  background: #fff;\n  padding: 1rem;\n\n  &amp; .logo {\n    max-width: 120px;\n  }\n\n  &amp; .menu {\n    display: flex;\n    gap: 1rem;\n\n    &amp; a {\n      color: #333;\n\n      &amp;:hover {\n        color: #007bff;\n      }\n    }\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">3. mixin\u306e\u4ee3\u308f\u308a\u306b@supports\u3068@layer\u3067\u5bfe\u5fdc<\/h3>\n\n\n\n<p>\u5f93\u6765Sass\u306emixin\u3067\u884c\u3063\u3066\u3044\u305f\u6a5f\u80fd\u306e\u591a\u304f\u306f\u3001\u30e2\u30c0\u30f3CSS\u306e@supports\u3068@layer\u3067\u4ee3\u66ff\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u7ba1\u7406 *\/\n@supports (display: grid) {\n  .grid-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 1rem;\n  }\n}\n\n\/* \u30ec\u30a4\u30e4\u30fc\u7ba1\u7406\u306b\u3088\u308b\u512a\u5148\u9806\u4f4d\u306e\u5236\u5fa1 *\/\n@layer base, components, utilities;\n\n@layer components {\n  .button {\n    padding: 0.5em 1em;\n    border-radius: 4px;\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">4. \u30ab\u30e9\u30fc\u95a2\u6570\u306fCSS\u30ab\u30e9\u30fc\u6a5f\u80fd\u3067\u5b9f\u73fe<\/h3>\n\n\n\n<p>\u65b0\u3057\u3044CSS\u30ab\u30e9\u30fc\u95a2\u6570\u7fa4\u306b\u3088\u308a\u3001Sass\u306ecolor\u64cd\u4f5c\u6a5f\u80fd\u304c\u4e0d\u8981\u306b\u306a\u308a\u3064\u3064\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button {\n  \/* \u8272\u306e\u6df7\u5408 *\/\n  background-color: color-mix(in srgb, #3498db 70%, #ffffff);\n\n  \/* \u900f\u660e\u5ea6\u306e\u8abf\u6574 *\/\n  border-color: rgb(52 152 219 \/ 0.5);\n\n  &amp;:hover {\n    \/* \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u306e\u81ea\u52d5\u8abf\u6574 *\/\n    color: color-contrast(var(--background-color) vs white, black);\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">5. \u5c0f\u898f\u6a21\u304b\u3089\u4e2d\u898f\u6a21\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306a\u3089\u30d7\u30ec\u30fc\u30f3CSS<\/h3>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u6761\u4ef6\u3092\u6e80\u305f\u3059\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u30d7\u30ec\u30fc\u30f3CSS\u306e\u63a1\u7528\u3092\u7a4d\u6975\u7684\u306b\u691c\u8a0e\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u6570\u304c100\u672a\u6e80<\/li>\n\n\n\n<li>\u958b\u767a\u8005\u304c5\u4eba\u4ee5\u4e0b\u306e\u30c1\u30fc\u30e0<\/li>\n\n\n\n<li>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u304c\u6bd4\u8f03\u7684\u30b7\u30f3\u30d7\u30eb<\/li>\n\n\n\n<li>\u77ed\u671f\u7684\u306a\u958b\u767a\u30b5\u30a4\u30af\u30eb<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">6. CSS Modules\u306b\u3088\u308b\u5c40\u6240\u7684\u306a\u30b9\u30b3\u30fc\u30d7\u7ba1\u7406<\/h3>\n\n\n\n<p>CSS Modules\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001Sass\u306e\u540d\u524d\u7a7a\u9593\u7ba1\u7406\u304c\u4e0d\u8981\u306b\u306a\u308a\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ React component example\nimport styles from '.\/Button.module.css';\n\nfunction Button() {\n  return &lt;button className={styles.button}&gt;Click me&lt;\/button&gt;;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* Button.module.css *\/\n.button {\n  background: var(--primary-color);\n  padding: var(--spacing-unit);\n}\n\n.button:hover {\n  background: color-mix(in srgb, var(--primary-color) 80%, black);\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">7. PostCSS\u306b\u3088\u308b\u5fc5\u9808\u306e\u5909\u63db\u51e6\u7406<\/h3>\n\n\n\n<p>PostCSS\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u5fc5\u8981\u6700\u5c0f\u9650\u306e\u5909\u63db\u51e6\u7406\u3092\u67d4\u8edf\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ postcss.config.js\nmodule.exports = {\n  plugins: [\n    'postcss-preset-env',\n    'autoprefixer',\n    'cssnano'\n  ]\n}<\/pre>\n\n\n\n<p>\u4e3b\u306a\u5229\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5fc5\u8981\u306a\u6a5f\u80fd\u306e\u307f\u3092\u9078\u629e\u53ef\u80fd<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u30e2\u30c0\u30f3CSS\u6a5f\u80fd\u306e\u6bb5\u968e\u7684\u306a\u5c0e\u5165\u304c\u53ef\u80fd<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6761\u4ef6\u304c\u63c3\u3063\u3066\u3044\u308b\u5834\u5408\u3001Sass\u3092\u4f7f\u7528\u305b\u305a\u3068\u3082\u30e2\u30c0\u30f3CSS\u3068\u30c4\u30fc\u30eb\u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u5341\u5206\u306a\u958b\u767a\u4f53\u9a13\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u306a\u69cb\u6210\u3067\u30b9\u30bf\u30fc\u30c8\u3057\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u3066\u3044\u304f\u65b9\u6cd5\u3092\u63a8\u5968\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-14\">Sass\u306a\u3057\u3067\u958b\u767a\u52b9\u7387\u3092\u4e0a\u3052\u308b\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\u3068CSS\u8a2d\u8a08\u306e\u91cd\u8981\u6027<\/h3>\n\n\n\n<p>\u52b9\u7387\u7684\u306aCSS\u958b\u767a\u306b\u306f\u3001\u9069\u5207\u306a\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\u3068\u8a2d\u8a08\u65b9\u91dd\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-16\">\u63a8\u5968\u3055\u308c\u308b\u30d5\u30a1\u30a4\u30eb\u69cb\u6210<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">styles\/\n\u251c\u2500\u2500 base\/\n\u2502   \u251c\u2500\u2500 reset.css\n\u2502   \u251c\u2500\u2500 typography.css\n\u2502   \u2514\u2500\u2500 variables.css\n\u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 button.css\n\u2502   \u251c\u2500\u2500 card.css\n\u2502   \u2514\u2500\u2500 navigation.css\n\u251c\u2500\u2500 layouts\/\n\u2502   \u251c\u2500\u2500 grid.css\n\u2502   \u2514\u2500\u2500 container.css\n\u2514\u2500\u2500 utilities\/\n    \u251c\u2500\u2500 spacing.css\n    \u2514\u2500\u2500 colors.css<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-17\">CSS\u8a2d\u8a08\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5909\u6570\u306e\u547d\u540d\u898f\u5247<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:root {\n  \/* \u30b5\u30a4\u30ba\u95a2\u9023 *\/\n  --size-xs: 0.25rem;\n  --size-sm: 0.5rem;\n  --size-md: 1rem;\n\n  \/* \u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8 *\/\n  --color-primary-100: #e3f2fd;\n  --color-primary-500: #2196f3;\n  --color-primary-900: #0d47a1;\n\n  \/* \u30d6\u30ec\u30a4\u30af\u30dd\u30a4\u30f3\u30c8 *\/\n  --breakpoint-tablet: 768px;\n  --breakpoint-desktop: 1024px;\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\u306e\u539f\u5247<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5358\u4e00\u8cac\u4efb\u306e\u539f\u5247\u3092\u5b88\u308b<\/li>\n\n\n\n<li>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30bf\u30a4\u30eb\u306e\u62bd\u51fa<\/li>\n\n\n\n<li>\u30b9\u30b3\u30fc\u30d7\u3092\u660e\u78ba\u306b\u5b9a\u7fa9<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30e2\u30c0\u30f3CSS\u30c4\u30fc\u30eb\u30c1\u30a7\u30fc\u30f3\u306e\u69cb\u7bc9\u65b9\u6cd5<\/h3>\n\n\n\n<p>\u52b9\u7387\u7684\u306a\u958b\u767a\u74b0\u5883\u3092\u6574\u3048\u308b\u305f\u3081\u306e\u4e3b\u8981\u306a\u30c4\u30fc\u30eb\u69cb\u6210\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ package.json\n{\n  \"scripts\": {\n    \"build:css\": \"postcss src\/css\/main.css -o dist\/style.css\",\n    \"watch:css\": \"postcss src\/css\/main.css -o dist\/style.css --watch\"\n  },\n  \"devDependencies\": {\n    \"postcss\": \"^8.4.31\",\n    \"postcss-cli\": \"^10.1.0\",\n    \"postcss-preset-env\": \"^9.3.0\",\n    \"autoprefixer\": \"^10.4.16\",\n    \"cssnano\": \"^6.0.1\"\n  }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-19\">\u63a8\u5968\u3055\u308c\u308b\u958b\u767a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30fc\u30c9\u54c1\u8cea\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Stylelint\u306b\u3088\u308b\u4e00\u8cab\u6027\u306e\u78ba\u4fdd<\/li>\n\n\n\n<li>CSSComb\u306b\u3088\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u6574\u7406<\/li>\n\n\n\n<li>Prettier\u306b\u3088\u308b\u81ea\u52d5\u30d5\u30a9\u30fc\u30de\u30c3\u30c8<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Critical CSS\u306e\u62bd\u51fa<\/li>\n\n\n\n<li>\u672a\u4f7f\u7528CSS\u306e\u524a\u9664<\/li>\n\n\n\n<li>\u753b\u50cf\u6700\u9069\u5316\u306e\u81ea\u52d5\u5316<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-20\">\u30c1\u30fc\u30e0\u958b\u767a\u306b\u304a\u3051\u308b\u4e00\u8cab\u6027\u306e\u78ba\u7acb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-21\">\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3\u306e\u4f8b<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \ud83d\udc4d \u63a8\u5968\u3055\u308c\u308b\u66f8\u304d\u65b9 *\/\n.component {\n  \/* \u30ec\u30a4\u30a2\u30a6\u30c8\u30d7\u30ed\u30d1\u30c6\u30a3 *\/\n  display: flex;\n  gap: var(--spacing-md);\n\n  \/* \u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb *\/\n  padding: var(--spacing-sm);\n  border: 1px solid var(--color-border);\n\n  \/* \u8996\u899a\u7684\u30b9\u30bf\u30a4\u30eb *\/\n  background: var(--color-background);\n  box-shadow: var(--shadow-sm);\n}\n\n\/* \ud83d\udeab \u907f\u3051\u308b\u3079\u304d\u66f8\u304d\u65b9 *\/\n.component {\n  \/* \u30de\u30b8\u30c3\u30af\u30ca\u30f3\u30d0\u30fc\u306e\u4f7f\u7528 *\/\n  margin: 13px;\n  \/* \u30cf\u30fc\u30c9\u30b3\u30fc\u30c9\u3055\u308c\u305f\u5024 *\/\n  color: #333;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-22\">\u30c1\u30fc\u30e0\u958b\u767a\u306e\u305f\u3081\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u547d\u540d\u898f\u5247\u306e\u7d71\u4e00<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>BEM\u307e\u305f\u306f\u305d\u306e\u4ed6\u306e\u547d\u540d\u898f\u5247\u306e\u63a1\u7528<\/li>\n\n\n\n<li>\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u4e00\u8cab\u3057\u305f\u4f7f\u7528<\/li>\n\n\n\n<li>\u76ee\u7684\u306b\u5fdc\u3058\u305f\u547d\u540d\u306e\u968e\u5c64\u5316<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ec\u30d3\u30e5\u30fc\u30d7\u30ed\u30bb\u30b9\u306e\u78ba\u7acb<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS\u30ec\u30d3\u30e5\u30fc\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u81ea\u52d5\u5316\u3055\u308c\u305f\u30ea\u30f3\u30c8\u30c1\u30a7\u30c3\u30af<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6307\u6a19\u306e\u76e3\u8996<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30a4\u30eb\u30ac\u30a4\u30c9\u306e\u7dad\u6301<\/li>\n\n\n\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30ab\u30bf\u30ed\u30b0\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u5909\u66f4\u5c65\u6b74\u306e\u7ba1\u7406<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u5c0e\u5165\u3059\u308b\u3053\u3068\u3067\u3001Sass\u306a\u3057\u3067\u3082\u52b9\u7387\u7684\u306aCSS\u958b\u767a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u91cd\u8981\u306a\u306e\u306f\u3001\u30c1\u30fc\u30e0\u5168\u4f53\u3067\u4e00\u8cab\u6027\u306e\u3042\u308b\u65b9\u91dd\u3092\u5171\u6709\u3057\u3001\u7d99\u7d9a\u7684\u306a\u6539\u5584\u3092\u56f3\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-23\">Sass\u304b\u3089\u306e\u79fb\u884c\u6226\u7565\u3068\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-24\">\u6bb5\u968e\u7684\u306a\u79fb\u884c\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u5177\u4f53\u4f8b<\/h3>\n\n\n\n<p>\u79fb\u884c\u3092\u6210\u529f\u3055\u305b\u308b\u305f\u3081\u306b\u306f\u3001\u8a08\u753b\u7684\u304b\u3064\u6bb5\u968e\u7684\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u304c\u91cd\u8981\u3067\u3059\u3002\u4ee5\u4e0b\u306b\u5177\u4f53\u7684\u306a\u79fb\u884c\u30b9\u30c6\u30c3\u30d7\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-25\">\u30d5\u30a7\u30fc\u30ba1: \u6e96\u5099\u3068\u5206\u6790<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u73fe\u72b6\u306e\u8abf\u67fb<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sass\u7279\u6709\u306e\u6a5f\u80fd\u306e\u4f7f\u7528\u72b6\u6cc1\u306e\u68da\u5378\u3057<\/li>\n\n\n\n<li>\u5909\u6570\u3001mixin\u3001\u95a2\u6570\u306e\u5229\u7528\u30d1\u30bf\u30fc\u30f3\u306e\u5206\u6790<\/li>\n\n\n\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u6d17\u3044\u51fa\u3057<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u79fb\u884c\u8a08\u753b\u306e\u7b56\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u79fb\u884c\u512a\u5148\u5ea6\u306e\u8a2d\u5b9a\uff1a\n\u9ad8\uff1a\u5909\u6570\u3001\u30ab\u30e9\u30fc\u95a2\u6570\n\u4e2d\uff1a\u30cd\u30b9\u30c6\u30a3\u30f3\u30b0\u3001\u5358\u7d14\u306amixin\n\u4f4e\uff1a\u8907\u96d1\u306amixin\u3001\u95a2\u6570<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-26\">\u30d5\u30a7\u30fc\u30ba2: \u6bb5\u968e\u7684\u306a\u7f6e\u304d\u63db\u3048<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5909\u6570\u306e\u79fb\u884c<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* Before (Sass) *\/\n$primary-color: #3498db;\n$spacing-unit: 8px;\n\n\/* After (CSS Custom Properties) *\/\n:root {\n  --primary-color: #3498db;\n  --spacing-unit: 8px;\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30cd\u30b9\u30c6\u30a3\u30f3\u30b0\u306e\u79fb\u884c<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* Before (Sass) *\/\n.card {\n  .title {\n    font-size: 1.2em;\n    &amp;:hover {\n      color: $primary-color;\n    }\n  }\n}\n\n\/* After (Modern CSS) *\/\n.card {\n  &amp; .title {\n    font-size: 1.2em;\n\n    &amp;:hover {\n      color: var(--primary-color);\n    }\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-27\">\u79fb\u884c\u6642\u306e\u4e00\u822c\u7684\u306a\u8ab2\u984c\u3068\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-28\">1. \u8907\u96d1\u306aMixin\u306e\u7f6e\u304d\u63db\u3048<\/h4>\n\n\n\n<p><strong>\u8ab2\u984c<\/strong>: \u8907\u96d1\u306a\u30ed\u30b8\u30c3\u30af\u3092\u542b\u3080mixin\u306e\u79fb\u884c<br><strong>\u89e3\u6c7a\u7b56<\/strong>:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u8a08\u7b97\u95a2\u6570\u306e\u7d44\u307f\u5408\u308f\u305b *\/\n:root {\n  --button-padding-base: 0.5rem;\n  --button-scale-factor: 1.2;\n}\n\n.button {\n  padding: calc(var(--button-padding-base) * var(--button-scale-factor));\n}\n\n\/* \u6761\u4ef6\u5206\u5c90\u304c\u5fc5\u8981\u306a\u5834\u5408 *\/\n@supports (background: color-mix(in srgb, white, black)) {\n  .button {\n    background: color-mix(in srgb, var(--primary-color) 85%, white);\n  }\n} @else {\n  .button {\n    background: var(--primary-color);\n  }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-29\">2. \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/h4>\n\n\n\n<p><strong>\u5bfe\u7b56<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Critical CSS\u306e\u62bd\u51fa<\/li>\n\n\n\n<li>Code Splitting\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u52b9\u7387\u7684\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-30\">3. \u30c1\u30fc\u30e0\u6559\u80b2\u3068\u7fd2\u719f\u5ea6\u5411\u4e0a<\/h4>\n\n\n\n<p><strong>\u65bd\u7b56<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b9a\u671f\u7684\u306a\u30cf\u30f3\u30ba\u30aa\u30f3\u30bb\u30c3\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u6574\u5099<\/li>\n\n\n\n<li>\u30ec\u30d3\u30e5\u30fc\u57fa\u6e96\u306e\u660e\u78ba\u5316<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-31\">\u30ec\u30ac\u30b7\u30fc\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u304c\u5fc5\u8981\u306a\u5834\u5408\u306e\u6226\u7565<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-32\">1. PostCSS\u306b\u3088\u308b\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u5bfe\u5fdc<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ postcss.config.js\nmodule.exports = {\n  plugins: [\n    ['postcss-preset-env', {\n      features: {\n        'nesting-rules': true,\n        'custom-properties': true,\n        'color-function': true\n      },\n      browsers: ['&gt; 1%', 'last 2 versions', 'not dead']\n    }],\n    'autoprefixer'\n  ]\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-33\">2. \u30d7\u30ed\u30b0\u30ec\u30c3\u30b7\u30d6\u30fb\u30a8\u30f3\u30cf\u30f3\u30b9\u30e1\u30f3\u30c8\u306e\u9069\u7528<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \u30d9\u30fc\u30b9\u306e\u30b9\u30bf\u30a4\u30eb *\/\n.layout {\n  display: block;\n}\n\n\/* \u30e2\u30c0\u30f3\u30d6\u30e9\u30a6\u30b6\u5411\u3051\u62e1\u5f35 *\/\n@supports (display: grid) {\n  .layout {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 1rem;\n  }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-34\">3. \u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u5024\u306e\u8a2d\u5b9a<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.component {\n  \/* \u30ec\u30ac\u30b7\u30fc\u5bfe\u5fdc *\/\n  padding: 1rem;\n  \/* \u30e2\u30c0\u30f3\u5bfe\u5fdc *\/\n  padding: clamp(1rem, 2vw, 2rem);\n\n  \/* \u30ab\u30e9\u30fc\u5bfe\u5fdc *\/\n  color: #333;\n  color: var(--text-color, #333);\n}<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6226\u7565\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30b9\u30e0\u30fc\u30ba\u306a\u79fb\u884c\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u91cd\u8981\u306a\u306e\u306f\u3001\u5404\u30d5\u30a7\u30fc\u30ba\u3067\u306e\u78ba\u5b9f\u306a\u691c\u8a3c\u3068\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u305f\u8a08\u753b\u306e\u8abf\u6574\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-35\">Sass\u304c\u6709\u52b9\u306a\u30b1\u30fc\u30b9\u3068\u5224\u65ad\u57fa\u6e96<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-36\">\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u8907\u96d1\u306a\u5909\u6570\u7ba1\u7406<\/h3>\n\n\n\n<p>\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u72b6\u6cc1\u3067Sass\u306e\u4f7f\u7528\u304c\u6b63\u5f53\u5316\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-37\">\u8907\u96d1\u306a\u5909\u6570\u7ba1\u7406\u304c\u5fc5\u8981\u306a\u30b1\u30fc\u30b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u591a\u968e\u5c64\u306e\u30c6\u30fc\u30de\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Sass\u306b\u3088\u308b\u52b9\u7387\u7684\u306a\u30c6\u30fc\u30de\u7ba1\u7406\n$themes: (\n  'light': (\n    'background': (\n      'primary': #ffffff,\n      'secondary': #f5f5f5,\n      'tertiary': #eeeeee\n    ),\n    'text': (\n      'primary': #333333,\n      'secondary': #666666,\n      'disabled': #999999\n    )\n  ),\n  'dark': (\n    'background': (\n      'primary': #1a1a1a,\n      'secondary': #2d2d2d,\n      'tertiary': #404040\n    ),\n    'text': (\n      'primary': #ffffff,\n      'secondary': #cccccc,\n      'disabled': #888888\n    )\n  )\n);\n\n\/\/ \u30c6\u30fc\u30de\u5909\u6570\u3078\u306e\u30a2\u30af\u30bb\u30b9\u95a2\u6570\n@function theme-value($theme, $category, $property) {\n  @return map-get(map-get(map-get($themes, $theme), $category), $property);\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u5927\u898f\u6a21\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>100\u4ee5\u4e0a\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/li>\n\n\n\n<li>\u8907\u6570\u306e\u30d6\u30e9\u30f3\u30c9\u30c6\u30fc\u30de<\/li>\n\n\n\n<li>\u53b3\u5bc6\u306a\u578b\u30c1\u30a7\u30c3\u30af\u304c\u5fc5\u8981\u306a\u5909\u6570<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-38\">\u9ad8\u5ea6\u306a\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u3084\u6a5f\u80fd\u6d3b\u7528\u304c\u5fc5\u8981\u306a\u5834\u5408<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-39\">\u8907\u96d1\u306a\u30b9\u30bf\u30a4\u30eb\u751f\u6210\u304c\u5fc5\u8981\u306a\u30b1\u30fc\u30b9<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30bf\u30a4\u30dd\u30b0\u30e9\u30d5\u30a3\u30b7\u30b9\u30c6\u30e0\n@mixin fluid-type($min-vw, $max-vw, $min-size, $max-size) {\n  $slope: ($max-size - $min-size) \/ ($max-vw - $min-vw);\n  $y-intersection: -1 * $min-vw * $slope + $min-size;\n\n  font-size: $min-size;\n\n  @media screen and (min-width: #{$min-vw}px) {\n    font-size: calc(#{$y-intersection}px + #{$slope} * 100vw);\n  }\n\n  @media screen and (min-width: #{$max-vw}px) {\n    font-size: $max-size;\n  }\n}\n\n\/\/ \u9ad8\u5ea6\u306a\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\n@mixin grid-generator($columns: 12, $breakpoints: ()) {\n  @each $breakpoint, $width in $breakpoints {\n    @media (min-width: $width) {\n      @for $i from 1 through $columns {\n        .col-#{$breakpoint}-#{$i} {\n          width: percentage($i \/ $columns);\n        }\n      }\n    }\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-40\">\u30c1\u30fc\u30e0\u306e\u8cc7\u7523\u3084\u30c1\u30fc\u30e0\u306e\u7fd2\u719f\u5ea6\u3092\u8003\u616e\u3057\u305f\u5224\u65ad<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-41\">Sass\u3092\u7d99\u7d9a\u4f7f\u7528\u3059\u3079\u304d\u72b6\u6cc1<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c1\u30fc\u30e0\u306e\u6280\u8853\u7684\u80cc\u666f<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c1\u30fc\u30e0\u5168\u4f53\u304cSass\u306b\u7cbe\u901a\u3057\u3066\u3044\u308b<\/li>\n\n\n\n<li>\u65e2\u5b58\u306eSass\u30d9\u30fc\u30b9\u306e\u8cc7\u7523\u304c\u8c4a\u5bcc<\/li>\n\n\n\n<li>Sass\u7279\u6709\u306e\u6a5f\u80fd\u306b\u4f9d\u5b58\u3057\u305f\u958b\u767a\u30d5\u30ed\u30fc<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u7279\u6027<\/strong> \u7279\u6027 \u57fa\u6e96\u5024 Sass\u63a8\u5968\u5ea6 \u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u30b5\u30a4\u30ba 50,000\u884c\u4ee5\u4e0a \u9ad8 \u958b\u767a\u8005\u6570 10\u4eba\u4ee5\u4e0a \u9ad8 \u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u671f\u9593 5\u5e74\u4ee5\u4e0a \u9ad8 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u6570 200\u4ee5\u4e0a \u9ad8<\/li>\n\n\n\n<li><strong>\u79fb\u884c\u30b3\u30b9\u30c8\u306e\u8003\u616e<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u65e2\u5b58\u8cc7\u7523\u306e\u898f\u6a21<\/li>\n\n\n\n<li>\u30c1\u30fc\u30e0\u306e\u5b66\u7fd2\u30b3\u30b9\u30c8<\/li>\n\n\n\n<li>\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u306b\u5fc5\u8981\u306a\u6642\u9593<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-42\">\u5224\u65ad\u306e\u305f\u3081\u306e\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/h4>\n\n\n\n<p>\u25a1 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306f\u4ee5\u4e0b\u306e\u6761\u4ef6\u3092\u6e80\u305f\u3059\u304b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>[ ] \u5927\u898f\u6a21\u306a\u5909\u6570\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u304c\u5fc5\u8981<\/li>\n\n\n\n<li>[ ] \u8907\u96d1\u306a\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u3092\u591a\u7528<\/li>\n\n\n\n<li>[ ] \u53b3\u5bc6\u306a\u578b\u30c1\u30a7\u30c3\u30af\u304c\u8981\u6c42\u3055\u308c\u308b<\/li>\n\n\n\n<li>[ ] \u30ec\u30ac\u30b7\u30fc\u30d6\u30e9\u30a6\u30b6\u306e\u30b5\u30dd\u30fc\u30c8\u304c\u5fc5\u9808<\/li>\n<\/ul>\n\n\n\n<p>\u25a1 \u30c1\u30fc\u30e0\u72b6\u6cc1\u306e\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>[ ] Sass\u306e\u5c02\u9580\u77e5\u8b58\u3092\u6301\u3064\u958b\u767a\u8005\u304c\u591a\u6570<\/li>\n\n\n\n<li>[ ] \u65e2\u5b58\u306eSass\u30d9\u30fc\u30b9\u306e\u8cc7\u7523\u304c\u8c4a\u5bcc<\/li>\n\n\n\n<li>[ ] \u73fe\u5728\u306e\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u304c\u52b9\u7387\u7684<\/li>\n<\/ul>\n\n\n\n<p>\u25a1 \u30d3\u30b8\u30cd\u30b9\u8981\u4ef6\u306e\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>[ ] \u77ed\u671f\u7684\u306a\u958b\u767a\u901f\u5ea6\u304c\u91cd\u8981<\/li>\n\n\n\n<li>[ ] \u65e2\u5b58\u30b7\u30b9\u30c6\u30e0\u3068\u306e\u4e92\u63db\u6027\u304c\u5fc5\u8981<\/li>\n\n\n\n<li>[ ] \u8907\u96d1\u306a\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u8981\u4ef6\u304c\u3042\u308b<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6761\u4ef6\u306b\u8a72\u5f53\u3059\u308b\u5834\u5408\u3001Sass\u306e\u4f7f\u7528\u306f\u6b63\u5f53\u5316\u3055\u308c\u3001\u3080\u3057\u308d\u63a8\u5968\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u305f\u3060\u3057\u3001\u5b9a\u671f\u7684\u306b\u518d\u8a55\u4fa1\u3092\u884c\u3044\u3001\u30e2\u30c0\u30f3CSS\u306e\u9032\u5316\u306b\u5fdc\u3058\u3066\u6226\u7565\u3092\u898b\u76f4\u3059\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-1589","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ruby","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1589"}],"version-history":[{"count":1,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1589\/revisions"}],"predecessor-version":[{"id":1590,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1589\/revisions\/1590"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}