{"id":9514,"date":"2025-10-11T03:42:44","date_gmt":"2025-10-10T18:42:44","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=9514"},"modified":"2025-10-11T03:42:44","modified_gmt":"2025-10-10T18:42:44","slug":"list-style-type-9514","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/list-style-type-9514\/","title":{"rendered":"\u30c7\u30d5\u30a9\u30eb\u30c8CSS\u3067\u306f\u7121\u7406\u306a list-style-type\u306e\u67d4\u8edf\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u65b9\u6cd5"},"content":{"rendered":"<p>Web\u30b5\u30a4\u30c8\u3067\u30ea\u30b9\u30c8\u3092\u4f7f\u3046\u969b\u3001CSS\u6a19\u6e96\u306e <code>list-style-type<\/code> \u3060\u3051\u3067\u306f\u7269\u8db3\u308a\u306a\u3044\u3068\u611f\u3058\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f<\/p>\n\n<pre><code class=\"language-css\">list-style-type: disc;      \/* \u25cf *\/\nlist-style-type: circle;    \/* \u25cb *\/\nlist-style-type: square;    \/* \u25a0 *\/\nlist-style-type: decimal;   \/* 1, 2, 3... *\/\n<\/code><\/pre>\n\n<p>list-style-type - CSS: \u30ab\u30b9\u30b1\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8 | MDN<br \/>\n  <a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/list-style-type\" class=\"link\">https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/list-style-type<\/a><\/p>\n\n\n<p class=\"mt-2r\">\u3057\u304b\u3057\u3001\u5b9f\u52d9\u3067\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u591a\u69d8\u306a\u30de\u30fc\u30ab\u30fc\u304c\u6c42\u3081\u3089\u308c\u307e\u3059\uff1a<\/p>\n<ul style=\"list-style-type:bullet;\">\n<li><b class=\"fw-600\">\u88c5\u98fe\u7684\u306a\u6570\u5b57<\/b>\uff1a\u2460\u2461\u2462\u3001\u2776\u2777\u2778\u3001\u2474\u2475\u2476<\/li>\n<li><b class=\"fw-600\">\u88c5\u98fe\u7684\u306a\u30a2\u30eb\u30d5\u30a1\u30d9\u30c3\u30c8<\/b>\uff1a\u24b6\u24b7\u24b8\u3001\ud83c\udd50\ud83c\udd51\ud83c\udd52\u3001\u249c\u249d\u249e<\/li>\n<li><b class=\"fw-600\">\u30ab\u30b9\u30bf\u30e0\u753b\u50cf<\/b>\uff1a\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u3001\u4f01\u696d\u30ed\u30b4\u3001\u30a2\u30a4\u30b3\u30f3<\/li>\n<li><b class=\"fw-600\">\u30ab\u30e9\u30d5\u30eb\u306a\u30de\u30fc\u30ab\u30fc<\/b>\uff1a\u8d64\u3044\u4e09\u89d2\u3001\u9752\u3044\u56db\u89d2<\/li>\n<\/ul>\n\n<p class=\"mt-2r\">\u300c\u30ea\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u300d\uff1a \u3053\u3053\u307e\u3067\u304f\u3089\u3044\u306f\u3001\u30b0\u30b0\u308c\u3070\u8a18\u4e8b\u304c\u5c71\u307b\u3069\u51fa\u3066\u304d\u307e\u3059\u3002<br \/>\n\u3067\u3082\u306f\u3063\u304d\u308a\u8a00\u3063\u3066\u3001\u3053\u3053\u307e\u3067\u300clist-style-type\u300d\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u30fb\u89e3\u8aac\u3057\u3066\u308b\u4eba\u306f\u4ed6\u306b\u3044\u306a\u3044\u3067\u3059\u3002<\/p>\n\n<p class=\"mt-1r\">\u672c\u8a18\u4e8b\u3067\u306f\u3001<b class=\"fw-600\">CSS\u6a19\u6e96\u3067\u306f\u3067\u304d\u306a\u3044\u30ea\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5<\/b>\u3092\u3001\u5b9f\u7528\u7684\u306a\u30b3\u30fc\u30c9\u4ed8\u304d\u3067\u5fb9\u5e95\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n <!-- \u2605\u76ee\u6b21\u30ea\u30b9\u30c8 -->\n<ul class=\"tocList mt-1r\" data-toc-id=\"js-tocBWGD\" style=\"height:28rem\"><\/ul>\n<ins class=\"tocBtn is-fixed\" data-toc-id=\"js-tocBWGD\"><\/ins>\n\n\n\n\n\n\n\n<h2 class=\"fz-xl\">1. CSS\u6a19\u6e96\u306elist-style-type\u306e\u554f\u984c\u70b9<\/h2>\n<h3 class=\"fz-ml\">1-1. \u547d\u540d\u304c\u76f4\u611f\u7684\u3067\u306a\u3044<\/h3>\n<p>CSS\u6a19\u6e96\u306e\u547d\u540d\u306f\u3001\u5b9f\u969b\u306e\u898b\u305f\u76ee\u3068\u4e00\u81f4\u3057\u307e\u305b\u3093\uff1a<\/p>\n<pre><code class=\"language-css\">list-style-type: disc;    \/* \u25cf \u5b9f\u969b\u306f &quot;bullet&quot; \u306b\u8fd1\u3044\u30b5\u30a4\u30ba *\/\nlist-style-type: circle;  \/* \u25cb &quot;white-bullet&quot; \u306e\u65b9\u304c\u9069\u5207 *\/\nlist-style-type: square;  \/* \u25a0 &quot;box&quot; \u306e\u65b9\u304c\u76f4\u611f\u7684 *\/\n<\/code><\/pre>\n<h3 class=\"fz-ml\">1-2. \u88c5\u98fe\u7684\u30de\u30fc\u30ab\u30fc\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044<\/h3>\n<p>\u5b9f\u52d9\u3067\u3088\u304f\u6c42\u3081\u3089\u308c\u308b\u30de\u30fc\u30ab\u30fc\u304c\u4f7f\u3048\u307e\u305b\u3093\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u274c CSS\u6a19\u6e96\u3067\u306f\u4e0d\u53ef\u80fd --&gt;\n&lt;ol&gt;\n  &lt;li&gt;\u2460 \u56f2\u307f\u6570\u5b57\u3092\u4f7f\u3044\u305f\u3044&lt;\/li&gt;\n  &lt;li&gt;\u2461 \u3067\u3082\u6a19\u6e96\u3067\u306f\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044&lt;\/li&gt;\n&lt;\/ol&gt;\n<\/code><\/pre>\n<h3 class=\"fz-ml\">1-3. \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u81ea\u7531\u5ea6\u304c\u4f4e\u3044<\/h3>\n<p>\u8272\u30fb\u30b5\u30a4\u30ba\u30fb\u9593\u9694\u3092\u81ea\u7531\u306b\u8abf\u6574\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">2. \u306a\u305cclass\u3067\u306f\u306a\u304f\u5c5e\u6027\u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u3046\u306e\u304b<\/h2>\n<h3 class=\"fz-ml\">2-1. WordPress\u30a8\u30c7\u30a3\u30bf\u30fc\u306e\u6319\u52d5<\/h3>\n<p>WordPress\u306e\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\uff08Gutenberg\uff09\u3067\u306f\u3001\u30ea\u30b9\u30c8\u30d6\u30ed\u30c3\u30af\u3067 <code>list-style-type<\/code> \u3092\u6307\u5b9a\u3059\u308b\u3068\u3001<b class=\"fw-600\">\u81ea\u52d5\u7684\u306bstyle\u5c5e\u6027\u3068\u3057\u3066\u51fa\u529b<\/b>\u3055\u308c\u307e\u3059\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- WordPress\u306e\u51fa\u529b --&gt;\n&lt;ul style=&quot;list-style-type:circle;&quot;&gt;\n  &lt;li&gt;\u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n<p>class\u3092\u4f7f\u3046\u65b9\u5f0f\u3060\u3068\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30ab\u30b9\u30bf\u30e0\u30af\u30e9\u30b9\u3092\u624b\u52d5\u3067\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u904b\u7528\u30b3\u30b9\u30c8\u304c\u9ad8\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<h3 class=\"fz-ml\">2-2. \u5c5e\u6027\u30bb\u30ec\u30af\u30bf\u306e\u5229\u70b9<\/h3>\n<pre><code class=\"language-scss\">\/* \u2705 style\u5c5e\u6027\u3092\u76f4\u63a5\u30bf\u30fc\u30b2\u30c3\u30c8 *\/\n[style*=&quot;circled-decimal&quot;]&gt;li::before {\n  content: &quot;\u2460&quot;;\n}\n<\/code><\/pre>\n<p><b class=\"fw-600\">\u30e1\u30ea\u30c3\u30c8\uff1a<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>WordPress\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u304b\u3089\u9078\u629e\u3059\u308b\u3060\u3051<br \/>\uff08\u203bWP\u30a8\u30c7\u30a3\u30bf\u30fc\u3082\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3066\u3044\u308b\u5834\u5408\uff09<\/li>\n<li>\u30ab\u30b9\u30bf\u30e0\u30af\u30e9\u30b9\u306e\u8ffd\u52a0\u4e0d\u8981<\/li>\n<li>\u30e6\u30fc\u30b6\u30fc\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc<\/li>\n<\/ul>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">3. \u5b9f\u88c5\u65b9\u6cd5\u306e\u5168\u4f53\u50cf<\/h2>\n<h3 class=\"fz-ml\">3-1. \u57fa\u672c\u6226\u7565<\/h3>\n<pre><code class=\"language-scss\">\/* \u30b9\u30c6\u30c3\u30d71: \u6a19\u6e96\u30de\u30fc\u30ab\u30fc\u3092\u975e\u8868\u793a *\/\n[style*=&quot;circled-decimal&quot;]&gt;li {\n  list-style: none;\n  position: relative;\n  padding-left: 1.3em;\n}\n\n\/* \u30b9\u30c6\u30c3\u30d72: ::before\u3067\u7591\u4f3c\u8981\u7d20\u3092\u914d\u7f6e *\/\n[style*=&quot;circled-decimal&quot;]&gt;li::before {\n  position: absolute;\n  left: 0;\n  content: counter(list-counter);\n}\n\n\/* \u30b9\u30c6\u30c3\u30d73: Unicode\u6587\u5b57\u3067\u4e0a\u66f8\u304d *\/\n[style*=&quot;circled-decimal&quot;]:not([start])&gt;li:nth-of-type(1)::before {\n  content: &quot;\u2460&quot;;\n}\n<\/code><\/pre>\n<h3 class=\"fz-ml\">3-2. CSS Counters\u306e\u6d3b\u7528<\/h3>\n<pre><code class=\"language-scss\">\/* counter\u306e\u521d\u671f\u5316 *\/\n[style*=&quot;circled-decimal&quot;] {\n  counter-reset: ct-circled-decimal 0;\n}\n\n\/* counter\u306e\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8 *\/\n[style*=&quot;circled-decimal&quot;]&gt;li {\n  counter-increment: ct-circled-decimal;\n}\n<\/code><\/pre>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">4. Unicode\u6587\u5b57\u3092\u4f7f\u3063\u305f\u5b9f\u88c5<\/h2>\n<h3 class=\"fz-ml\">4-1. \u5229\u7528\u53ef\u80fd\u306aUnicode\u6587\u5b57<\/h3>\n<p><b class=\"fw-600\">\u56f2\u307f\u6570\u5b57\uff08\u2460 \u2461 \u2462 ...\u2473\uff09<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>Unicode\u7bc4\u56f2: U+2460-2473<\/li>\n<li>1-20\u307e\u3067\u5bfe\u5fdc<\/li>\n<\/ul>\n<p><b class=\"fw-600\">\u9ed2\u4e38\u4ed8\u304d\u6570\u5b57\uff08\u2776 \u2777 \u2778 ...\u277f\uff09<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>Unicode\u7bc4\u56f2: U+2776-277F (1-10)<\/li>\n<li>Unicode\u7bc4\u56f2: U+24EB-24F4 (11-20)<\/li>\n<\/ul>\n<p><b class=\"fw-600\">\u56f2\u307f\u5927\u6587\u5b57\u30a2\u30eb\u30d5\u30a1\u30d9\u30c3\u30c8\uff08\u24b6 \u24b7 \u24b8 ...\uff09<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>Unicode\u7bc4\u56f2: U+24B6-24CF (A-Z)<\/li>\n<\/ul>\n<p><b class=\"fw-600\">\u9ed2\u4e38\u4ed8\u304d\u5927\u6587\u5b57\uff08\ud83c\udd50 \ud83c\udd51 \ud83c\udd52 ...\uff09<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>Unicode\u7bc4\u56f2: U+1F150-1F169 (A-Z)<\/li>\n<\/ul>\n<p><b class=\"fw-600\">\u62ec\u5f27\u4ed8\u304d\u5927\u6587\u5b57\uff08\u249c \u249d \u249e ...\uff09<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>Unicode\u7bc4\u56f2: U+249C-24B5 (A-Z)<\/li>\n<\/ul>\n<p>\u53c2\u8003\uff1a<br \/>\nunicode-range - CSS: \u30ab\u30b9\u30b1\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8 | MDN<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/@font-face\/unicode-range\" class=\"link\">https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/@font-face\/unicode-range<\/a><\/p>\n\n<h3 class=\"fz-ml mt-2r\">4-2. \u5b9f\u88c5\u4f8b\uff1acircled-decimal<\/h3>\n<pre><code class=\"language-scss\">\/* \u56f2\u307f\u6570\u5b57\uff08\u2460 \u2461 \u2462 ...\uff09 *\/\n[style*=&quot;circled-decimal&quot;] {\n  counter-reset: ct-circled-decimal 0;\n}\n\n[style*=&quot;circled-decimal&quot;]&gt;:is(li, dd) {\n  counter-increment: ct-circled-decimal;\n  position: relative;\n  padding-left: 1.3em;\n  list-style: none;\n}\n\n[style*=&quot;circled-decimal&quot;]&gt;:is(li, dd)::before {\n  position: absolute;\n  top: calc(0.5lh - 0.5em);\n  left: 0;\n  display: inline-flex;\n  place-content: center;\n  place-items: center;\n  min-width: 1em;\n  height: 1em;\n  \n  \/* \u30c7\u30d5\u30a9\u30eb\u30c8: counter\u8868\u793a *\/\n  content: counter(ct-circled-decimal);\n  font-family: &quot;Kumbh Sans&quot;, sans-serif;\n}\n\n\/* Unicode\u6587\u5b57\u3067\u4e0a\u66f8\u304d\uff08start\u306a\u3057\u306e\u5834\u5408\u306e\u307f\uff09 *\/\n[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(1)::before { content: &quot;\u2460&quot;; }\n[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(2)::before { content: &quot;\u2461&quot;; }\n[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(3)::before { content: &quot;\u2462&quot;; }\n\/* ... \u2473\u307e\u3067 *\/\n<\/code><\/pre>\n<h3 class=\"fz-ml\">4-3. \u306a\u305c\u3053\u306e\u9806\u5e8f\u306a\u306e\u304b<\/h3>\n<p><b class=\"fw-600\">\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\uff1a<\/b><\/p>\n<pre><code class=\"language-scss\">\/* \u274c \u9593\u9055\u3063\u305f\u9806\u5e8f *\/\n1. Unicode\u6587\u5b57\u3092\u5148\u306b\u5b9a\u7fa9\n2. counter\u8868\u793a\u3092\u5f8c\u306b\u5b9a\u7fa9\n\u2192 counter\u304c\u512a\u5148\u3055\u308c\u3066Unicode\u304c\u8868\u793a\u3055\u308c\u306a\u3044\n\n\/* \u2705 \u6b63\u3057\u3044\u9806\u5e8f *\/\n1. counter\u8868\u793a\u3092\u5148\u306b\u5b9a\u7fa9\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\uff09\n2. Unicode\u6587\u5b57\u3092\u5f8c\u306b\u5b9a\u7fa9\uff08\u4e0a\u66f8\u304d\uff09\n\u2192 :not([start]) \u306e\u8a73\u7d30\u5ea6\u304c\u9ad8\u3044\u305f\u3081\u6b63\u3057\u304f\u4e0a\u66f8\u304d\n<\/code><\/pre>\n<p>\u53c2\u8003\uff1a<br \/>\ncounter() - CSS: \u30ab\u30b9\u30b1\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8 | MDN<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/counter\" class=\"link\">https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/counter<\/a><\/p>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">5. start\u5c5e\u6027\u3078\u306e\u5bfe\u5fdc<\/h2>\n<h3 class=\"fz-ml\">5-1. \u306a\u305cstart\u5c5e\u6027\u304c\u5fc5\u8981\u304b<\/h3>\n<p>\u5b9f\u52d9\u3067\u306f\u3001\u30ea\u30b9\u30c8\u3092\u9014\u4e2d\u304b\u3089\u958b\u59cb\u3057\u305f\u3044\u30b1\u30fc\u30b9\u304c\u3042\u308a\u307e\u3059\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;ol style=&quot;list-style-type:circled-decimal;&quot;&gt;\n  &lt;li&gt;\u2460 \u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n  &lt;li&gt;\u2461 \u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n&lt;\/ol&gt;\n\n&lt;p&gt;\u9014\u4e2d\u306b\u5225\u306e\u30b3\u30f3\u30c6\u30f3\u30c4&lt;\/p&gt;\n\n&lt;ol start=&quot;3&quot; style=&quot;list-style-type:circled-decimal;&quot;&gt;\n  &lt;li&gt;\u2462 \u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n  &lt;li&gt;\u2463 \u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n&lt;\/ol&gt;\n<\/code><\/pre>\n<h3 class=\"fz-ml\">5-2. start\u5c5e\u6027\u306e\u5b9f\u88c5<\/h3>\n<pre><code class=\"language-scss\">\/* \u3059\u3079\u3066\u306e\u30ea\u30b9\u30c8\u3067counter-reset *\/\n[style*=&quot;circled-decimal&quot;] {\n  counter-reset: ct-circled-decimal 0;\n}\n\n\/* start\u5c5e\u6027\u306b\u5fdc\u3058\u3066\u8abf\u6574\uff081-20\u5bfe\u5fdc\uff09 *\/\n[style*=&quot;circled-decimal&quot;][start=&quot;1&quot;] { counter-reset: ct-circled-decimal 0; }\n[style*=&quot;circled-decimal&quot;][start=&quot;2&quot;] { counter-reset: ct-circled-decimal 1; }\n[style*=&quot;circled-decimal&quot;][start=&quot;3&quot;] { counter-reset: ct-circled-decimal 2; }\n[style*=&quot;circled-decimal&quot;][start=&quot;4&quot;] { counter-reset: ct-circled-decimal 3; }\n\/* ... start=&quot;20&quot;\u307e\u3067 *\/\n<\/code><\/pre>\n<p>\u53c2\u8003\uff1a<br \/>\nHTML \u5c5e\u6027\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9 - HTML | MDN<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/HTML\/Reference\/Attributes\" class=\"link\">https:\/\/developer.mozilla.org\/ja\/docs\/Web\/HTML\/Reference\/Attributes<\/a><\/p>\n<h3 class=\"fz-ml\">5-3. Unicode vs Counter<\/h3>\n<pre><code class=\"language-scss\">\/* start\u306a\u3057: Unicode\u6587\u5b57\uff08\u7dba\u9e97\uff09 *\/\n[style*=&quot;circled-decimal&quot;]:not([start])&gt;li:nth-of-type(1)::before {\n  content: &quot;\u2460&quot;;\n}\n\n\/* start\u5c5e\u6027\u3042\u308a: counter\u8868\u793a\uff08\u7d71\u4e00\u611f\uff09 *\/\n[style*=&quot;circled-decimal&quot;][start]&gt;li::before {\n  content: counter(ct-circled-decimal);\n  \/* \u5fc5\u8981\u306b\u5fdc\u3058\u3066background\u7b49\u3067\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0 *\/\n}\n<\/code><\/pre>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">6. \u30ab\u30b9\u30bf\u30e0\u753b\u50cf\u30de\u30fc\u30ab\u30fc\u306e\u5b9f\u88c5<\/h2>\n<h3 class=\"fz-ml\">6-1. CSS Custom Properties\u3092\u6d3b\u7528<\/h3>\n<pre><code class=\"language-scss\">\/* \u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u753b\u50cfURL\u3092\u6307\u5b9a *\/\n[style*=&quot;list-style-image&quot;]&gt;:is(li, dd) {\n  position: relative;\n  padding-left: 2em;\n  list-style: none;\n}\n\n[style*=&quot;list-style-image&quot;]&gt;:is(li, dd)::before {\n  position: absolute;\n  top: calc(0.5lh - 0.5em);\n  left: 0;\n  content: &quot;&quot;;\n  min-width: 1.5em;\n  height: 1.5em;\n  background: no-repeat 50% 50% \/ contain;\n  background-image: var(--list-style-image);\n}\n<\/code><\/pre>\n<h3 class=\"fz-ml\">6-2. HTML \u3067\u306e\u4f7f\u7528\u4f8b<\/h3>\n<pre><code class=\"language-html\">&lt;!-- \u30ab\u30b9\u30bf\u30e0\u753b\u50cf\u30de\u30fc\u30ab\u30fc --&gt;\n&lt;ul style=&quot;--list-style-image:url(&#39;https:\/\/example.com\/icon\/check.svg&#39;);&quot;&gt;\n  &lt;li&gt;\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u4ed8\u304d\u30a2\u30a4\u30c6\u30e0&lt;\/li&gt;\n  &lt;li&gt;\u30a2\u30a4\u30b3\u30f3\u306f\u81ea\u7531\u306b\u5909\u66f4\u53ef\u80fd&lt;\/li&gt;\n&lt;\/ul&gt;\n\n&lt;!-- \u5225\u306e\u753b\u50cf\u306b\u5909\u66f4 --&gt;\n&lt;ul style=&quot;--list-style-image:url(&#39;https:\/\/example.com\/icon\/star.svg&#39;);&quot;&gt;\n  &lt;li&gt;\u661f\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30a2\u30a4\u30c6\u30e0&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n<h3 class=\"fz-ml\">6-3. \u30e1\u30ea\u30c3\u30c8<\/h3>\n<p><b class=\"fw-600\">\u904b\u7528\u306e\u67d4\u8edf\u6027\uff1a<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>\u753b\u50cfURL\u3092HTML\u3067\u7c21\u5358\u306b\u5909\u66f4\u53ef\u80fd<\/li>\n<li>CSS\u3092\u7de8\u96c6\u3059\u308b\u5fc5\u8981\u306a\u3057<\/li>\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3054\u3068\u306b\u7570\u306a\u308b\u30a2\u30a4\u30b3\u30f3\u3092\u4f7f\u7528\u53ef\u80fd<\/li>\n<\/ul>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">7. \u30d5\u30a9\u30f3\u30c8\u9078\u5b9a\u306e\u91cd\u8981\u6027<\/h2>\n<h3 class=\"fz-ml\">7-1. Noto Sans JP\u306e\u554f\u984c<\/h3>\n<p>Noto Sans JP\u306f\u512a\u308c\u305f\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3067\u3059\u304c\u3001<b class=\"fw-600\">\u4e0a\u90e8\u4f59\u767d\u304c\u5e83\u3044\u8a2d\u8a08<\/b>\u306e\u305f\u3081\u3001<code>height: 1em<\/code> \u306e\u5186\u3084\u56db\u89d2\u306e\u4e2d\u3067\u4e2d\u592e\u63c3\u3048\u306b\u3059\u308b\u3068<b class=\"fw-600\">\u4e0b\u306b\u30ba\u30ec\u307e\u3059<\/b>\u3002<\/p>\n<pre><code class=\"language-scss\">\/* \u274c Noto Sans JP\u3060\u3068\u4e0b\u306b\u30ba\u30ec\u308b *\/\nfont-family: &quot;Noto Sans JP&quot;, sans-serif;\n<\/code><\/pre>\n<p>\u53c2\u8003\uff1a<br \/>\n\u3058\u3083\u3042\u306a\u3093\u3059\u304b\u3001Noto Sans JP\u4f7f\u3046\u3093\u306a\u3089\u30dc\u30bf\u30f3\u306b\u30a2\u30a4\u30b3\u30f3\u5165\u308c\u308b\u306a\u3063\u3066\u4e8b\u3059\u304b\uff5cchot Inc. \u30c7\u30b6\u30a4\u30ca\u30fc\u30e6\u30cb\u30c3\u30c8<br \/>\n<a href=\"https:\/\/note.com\/chot_designer\/n\/n85ef47a2ec69\" class=\"link\">https:\/\/note.com\/chot_designer\/n\/n85ef47a2ec69<\/a><br \/>\n<p>\uff08\u203b\u5b9f\u969b\u306f\u3001<code>&lt;button&gt;&lt;span style=&quot;postion:relative; top:0.625em;&quot;&gt;\u30c6\u30ad\u30b9\u30c8&lt;\/span&gt;&lt;\/button&gt;<\/code> \u7b49\u3067\u89e3\u6d88\u3067\u304d\u307e\u3059\u304c\u3001\u5c11\u3057\u3081\u3093\u3069\u304f\u3055\u3044\uff09<\/p>\n\n<h3 class=\"fz-ml mt-2r\">7-2. \u63a8\u5968\u30d5\u30a9\u30f3\u30c8\uff1aKumbh Sans<\/h3>\n<p>\u691c\u8a3c\u306e\u7d50\u679c\u3001<b class=\"fw-600\">Kumbh Sans<\/b>\u304c\u6700\u9069\u3067\u3057\u305f\uff1a<\/p>\n<p><b class=\"fw-600\">\u30e1\u30ea\u30c3\u30c8\uff1a<\/b><\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>\u2705 \u4e0a\u4e0b\u4f59\u767d\u304c\u5747\u7b49\uff08\u30df\u30c9\u30eb\u63c3\u3048\u306b\u6700\u9069\uff09<\/li>\n<li>\u2705 <code>height: 1em<\/code> \u306e\u5186\u30fb\u56db\u89d2\u3067\u771f\u3093\u4e2d\u306b\u914d\u7f6e<\/li>\n<li>\u2705 \u30a6\u30a7\u30a4\u30c8200-900\u307e\u3067\u5bfe\u5fdc<\/li>\n<li>\u2705 \u30af\u30bb\u304c\u306a\u304f\u8996\u8a8d\u6027\u304c\u826f\u3044<\/li>\n<li>\u2705 Google Fonts\u3067\u7121\u6599\u5229\u7528\u53ef\u80fd<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;!-- Google Fonts\u3067\u8aad\u307f\u8fbc\u307f --&gt;\n&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Kumbh+Sans:wght@200..900&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n<\/code><\/pre>\n<pre><code class=\"language-scss\">\/* Unicode\u6587\u5b57\u30fbcounter\u306b\u9069\u7528 *\/\n[style*=&quot;circled-decimal&quot;]&gt;li::before {\n  font-family: &quot;Kumbh Sans&quot;, sans-serif;\n  font-weight: 500;\n<\/code><\/pre>\n<h3 class=\"fz-ml\">7-3. \u4ed6\u306e\u5019\u88dc<\/h3>\n<p>\u4ee5\u4e0b\u306e\u30d5\u30a9\u30f3\u30c8\u3082\u826f\u597d\u306a\u611f\u3058\u3067\u3057\u305f\uff1a<\/p>\n<ul style=\"list-style-type:bullet;\">\n<li>Hanken Grotesk<\/li>\n<li>Lato<\/li>\n<li>Roboto Flex<\/li>\n<li>Outfit\uff08\u5c11\u3057\u30af\u30bb\u304c\u5f37\u3044\uff0f\u30c7\u30b6\u30a4\u30f3\u6027\u304c\u3042\u308b\uff09<\/li>\n<\/ul>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">8. \u5b8c\u5168\u306aSCSS\u30b3\u30fc\u30c9<\/h2>\n<h3 class=\"fz-ml\">8-1. \u57fa\u672c\u30b9\u30bf\u30a4\u30eb<\/h3>\n<pre><code class=\"language-scss\">\/* ========================================\n   Circled Decimal (\u2460\u2461\u2462...)\n   ==\u0fd0\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u2740\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u0f04 *\/\n\n\/* \u3059\u3079\u3066\u306e\u30ea\u30b9\u30c8\u3067counter\u521d\u671f\u5316 *\/\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;] {\n  counter-reset: ct-circled-decimal 0;\n}\n\n\/* start\u5c5e\u6027\u306b\u5fdc\u3058\u305f\u8abf\u6574\uff081-20\u5bfe\u5fdc\uff09 *\/\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;][start=&quot;1&quot;] { counter-reset: ct-circled-decimal 0; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;][start=&quot;2&quot;] { counter-reset: ct-circled-decimal 1; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;][start=&quot;3&quot;] { counter-reset: ct-circled-decimal 2; }\n\/* ... start=&quot;20&quot;\u307e\u3067 *\/\n\n\/* counter\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8 *\/\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]&gt;:is(li, dd) {\n  counter-increment: ct-circled-decimal;\n  position: relative;\n  padding-left: 1.3em;\n  list-style: none;\n}\n\n\/* \u7591\u4f3c\u8981\u7d20\u306e\u914d\u7f6e *\/\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]&gt;:is(li, dd)::before {\n  position: absolute;\n  top: calc(0.5lh - 0.5em);\n  left: 0;\n  display: inline-flex;\n  place-content: center;\n  place-items: center;\n  min-width: 1em;\n  height: 1em;\n  \n  \/* \u30c7\u30d5\u30a9\u30eb\u30c8: counter\u8868\u793a *\/\n  content: counter(ct-circled-decimal);\n  font-family: &quot;Kumbh Sans&quot;, sans-serif;\n  font-weight: 500;\n}\n\n\/* start\u306a\u3057\u306e\u5834\u5408: Unicode\u6587\u5b57\u3067\u4e0a\u66f8\u304d *\/\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(1)::before { content: &quot;\u2460&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(2)::before { content: &quot;\u2461&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(3)::before { content: &quot;\u2462&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(4)::before { content: &quot;\u2463&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(5)::before { content: &quot;\u2464&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(6)::before { content: &quot;\u2465&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(7)::before { content: &quot;\u2466&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(8)::before { content: &quot;\u2467&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(9)::before { content: &quot;\u2468&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(10)::before { content: &quot;\u2469&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(11)::before { content: &quot;\u246a&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(12)::before { content: &quot;\u246b&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(13)::before { content: &quot;\u246c&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(14)::before { content: &quot;\u246d&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(15)::before { content: &quot;\u246e&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(16)::before { content: &quot;\u246f&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(17)::before { content: &quot;\u2470&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(18)::before { content: &quot;\u2471&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(19)::before { content: &quot;\u2472&quot;; }\n:is(ul, ol, dl)[style*=&quot;circled-decimal&quot;]:not([start])&gt;:is(li, dd):nth-of-type(20)::before { content: &quot;\u2473&quot;; }\n<\/code><\/pre>\n<h3 class=\"fz-ml\">8-2. \u305d\u306e\u4ed6\u306e\u30b9\u30bf\u30a4\u30eb<\/h3>\n<p>\u540c\u69d8\u306e\u65b9\u5f0f\u3067\u4ee5\u4e0b\u3082\u5b9f\u88c5\u53ef\u80fd\uff1a<\/p>\n<ul style=\"list-style-type:bullet;\">\n<li><code>filled-circled-decimal<\/code> (\u2776 \u2777 \u2778 ...)<\/li>\n<li><code>circled-upper-alpha<\/code> (\u24b6 \u24b7 \u24b8 ...)<\/li>\n<li><code>filled-circled-upper-alpha<\/code> (\ud83c\udd50 \ud83c\udd51 \ud83c\udd52. ..)<\/li>\n<li><code>parenthesized-upper-alpha<\/code> (\u249c \u249d \u249e ...)<\/li>\n<\/ul>\n<h3 class=\"fz-ml\">8-3. \u30ab\u30b9\u30bf\u30e0\u753b\u50cf<\/h3>\n<pre><code class=\"language-scss\">\/* ========================================\n   Custom Image Markers\n   ==\u0fd0\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u2740\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u0f04 *\/\n:is(ul, ol, dl)[style*=&quot;list-style-image&quot;]&gt;:is(li, dd) {\n  position: relative;\n  padding-left: 2em;\n  margin-block: 0.5rem;\n  list-style: none;\n}\n\n:is(ul, ol, dl)[style*=&quot;list-style-image&quot;]&gt;:is(li, dd)::before {\n  position: absolute;\n  top: calc(0.5lh - 0.5em);\n  left: 0;\n  content: &quot;&quot;;\n  min-width: 1.5em;\n  height: 1.5em;\n  background: no-repeat 50% 50% \/ contain;\n  background-image: var(--list-style-image);\n}\n<\/code><\/pre>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">9. \u5b9f\u7528\u4f8b\u3068\u30c7\u30e2<\/h2>\n<h3 class=\"fz-ml\">9-1. \u57fa\u672c\u7684\u306a\u4f7f\u7528\u4f8b<\/h3>\n<pre><code class=\"language-html\">&lt;!-- \u56f2\u307f\u6570\u5b57 --&gt;\n&lt;ol style=&quot;list-style-type:circled-decimal;&quot;&gt;\n  &lt;li&gt;\u6700\u521d\u306e\u30a2\u30a4\u30c6\u30e0&lt;\/li&gt;\n  &lt;li&gt;2\u756a\u76ee\u306e\u30a2\u30a4\u30c6\u30e0&lt;\/li&gt;\n  &lt;li&gt;3\u756a\u76ee\u306e\u30a2\u30a4\u30c6\u30e0&lt;\/li&gt;\n&lt;\/ol&gt;\n\n&lt;!-- \u9014\u4e2d\u304b\u3089\u958b\u59cb --&gt;\n&lt;ol start=&quot;4&quot; style=&quot;list-style-type:circled-decimal;&quot;&gt;\n  &lt;li&gt;4\u756a\u76ee\u304b\u3089\u958b\u59cb&lt;\/li&gt;\n  &lt;li&gt;5\u756a\u76ee\u306e\u30a2\u30a4\u30c6\u30e0&lt;\/li&gt;\n&lt;\/ol&gt;\n<\/code><\/pre>\n<h3 class=\"fz-ml\">9-2. \u8907\u6570\u30b9\u30bf\u30a4\u30eb\u306e\u7d44\u307f\u5408\u308f\u305b<\/h3>\n<pre><code class=\"language-html\">&lt;!-- \u9ed2\u4e38\u4ed8\u304d\u6570\u5b57 --&gt;\n&lt;ol style=&quot;list-style-type:filled-circled-decimal;&quot;&gt;\n  &lt;li&gt;\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8&lt;\/li&gt;\n  &lt;li&gt;\u5f37\u8abf\u3057\u305f\u3044\u5185\u5bb9&lt;\/li&gt;\n&lt;\/ol&gt;\n\n&lt;!-- \u56f2\u307f\u30a2\u30eb\u30d5\u30a1\u30d9\u30c3\u30c8 --&gt;\n&lt;ol style=&quot;list-style-type:circled-upper-alpha;&quot;&gt;\n  &lt;li&gt;\u9078\u629e\u80a2A&lt;\/li&gt;\n  &lt;li&gt;\u9078\u629e\u80a2B&lt;\/li&gt;\n  &lt;li&gt;\u9078\u629e\u80a2C&lt;\/li&gt;\n&lt;\/ol&gt;\n\n&lt;!-- \u30ab\u30b9\u30bf\u30e0\u753b\u50cf --&gt;\n&lt;ul style=&quot;--list-style-image:url(&#39;\/img\/icon\/check.svg&#39;);&quot;&gt;\n  &lt;li&gt;\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af&lt;\/li&gt;\n  &lt;li&gt;\u30c1\u30a7\u30c3\u30af\u6e08\u307f\u30a2\u30a4\u30c6\u30e0&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n<h3 class=\"fz-ml\">9-3. dl\u30bf\u30b0\u3067\u306e\u4f7f\u7528<\/h3>\n<pre><code class=\"language-html\">&lt;!-- \u5b9a\u7fa9\u30ea\u30b9\u30c8\u3067\u3082\u52d5\u4f5c --&gt;\n&lt;dl style=&quot;list-style-type:circled-decimal;&quot;&gt;\n  &lt;dt&gt;\u898b\u51fa\u3057\u8981\u7d20&lt;\/dt&gt;\n  &lt;dd&gt;\u2460 \u8aac\u660e\u6587&lt;\/dd&gt;\n  &lt;dd&gt;\u2461 \u3055\u3089\u306b\u8a73\u3057\u3044\u8aac\u660e&lt;\/dd&gt;\n&lt;\/dl&gt;\n<\/code><\/pre>\n<hr class=\"separator mx-auto mt-3r\" \/>\n<h2 class=\"fz-xl\">\u53c2\u8003\u30ea\u30f3\u30af<\/h2>\n<ul style=\"list-style-type:bullet;\">\n<li><a href=\"https:\/\/www.w3.org\/TR\/css-counter-styles-3\/\" class=\"link\">CSS Counter Styles Level 3 - W3C<\/a><\/li>\n<li><a href=\"https:\/\/unicode.org\/charts\/PDF\/U2460.pdf\" class=\"link\">Unicode Enclosed Alphanumerics<\/a><\/li>\n<li><a href=\"https:\/\/fonts.google.com\/specimen\/Kumbh+Sans\" class=\"link\">Google Fonts - Kumbh Sans<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/CSS_Counter_Styles\" class=\"link\">MDN - CSS Counters<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"Web\u30b5\u30a4\u30c8\u3067\u30ea\u30b9\u30c8\u3092\u4f7f\u3046\u969b\u3001CSS\u6a19\u6e96\u306e list-style-type \u3060\u3051\u3067\u306f\u7269\u8db3\u308a\u306a\u3044\u3068\u611f\u3058\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f list-style-type: disc; \/* \u25cf *\/ list-style-type: [...]","protected":false},"author":1,"featured_media":9559,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[],"group":[],"pg":[],"class_list":["post-9514","post","type-post","status-publish","format-standard","has-post-thumbnail","category-html-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/9514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=9514"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/9514\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/9559"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=9514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=9514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=9514"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=9514"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=9514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}