{"id":44432,"date":"2026-04-08T07:55:00","date_gmt":"2026-04-07T22:55:00","guid":{"rendered":"https:\/\/asue.jp\/blog\/?p=44432"},"modified":"2026-04-07T13:54:45","modified_gmt":"2026-04-07T04:54:45","slug":"%e6%94%b9%e8%a8%82%e4%b8%ad%e3%81%88%e3%81%a3%ef%bc%81%ef%bc%9f%e3%81%9d%e3%82%8cjs%e3%81%aa%e3%81%97%e3%81%a7%e5%ae%9f%e8%a3%85%e5%8f%af%e8%83%bd%e3%81%aa%e3%82%93%e3%81%a7%e3%81%99%e3%81%8b","status":"publish","type":"post","link":"https:\/\/asue.jp\/blog\/?p=44432","title":{"rendered":"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002"},"content":{"rendered":"\n<p>\u3053\u3093\u306b\u3061\u306f\uff01 ASUE\u682a\u5f0f\u4f1a\u793e \u5e83\u5831\u306eN\u6751\u3067\u3059\u3002ASUE\u306b\u306f\u5b9f\u306fWeb\u30b3\u30fc\u30c0\u30fc\u3068\u3057\u3066\u5165\u793e\u3057\u3066\u3044\u308b\u306e\u3067\u3001HTML\u3001CSS\u3001JS\u3001PHP\u3042\u305f\u308a\u306a\u3089\u3061\u3087\u3063\u3068\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3055\u3066\u3001Web\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u5185\u3067CSS\u3092\u4f7f\u3063\u3066\u8981\u7d20\u3092\u6a2a\u4e26\u3073\u306b\u3059\u308b\u65b9\u6cd5\u306f\u3044\u304f\u3064\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u308f\u305f\u3057\u304cCSS\u3092\u521d\u3081\u3066\u5b66\u3093\u3060\u6642\u306f\u3001\uff08\u3082\u3061\u308d\u3093\u72b6\u6cc1\u306b\u3082\u3088\u308a\u307e\u3059\u304c\uff01\uff01\uff01\uff09\u6a2a\u4e26\u3073\u306e\u65b9\u6cd5\u3092\u8abf\u3079\u308c\u3070<code>float:left<\/code>\u304c\u591a\u304f\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u5d29\u308c\u3092\u9632\u3050\u305f\u3081\u306b\u89aa\u8981\u7d20\u306b\u5bfe\u3057\u3066<code>overflow:hidden<\/code>\u3092\u6307\u5b9a\u3057\u305f\u308a\u3001\u5f8c\u306b\u7d9a\u304f\u8981\u7d20\u306b\u5bfe\u3057\u3066<code>clear:both<\/code> \u3092\u5165\u308c\u305f\u308a\u2026\u2026\u3002<code>.clearfix<\/code>\u3068\u3044\u3046\u30af\u30e9\u30b9\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e<code>:after<\/code>\u64ec\u4f3c\u8981\u7d20\u306b<code>content: \"\"; display:block; clear:both;<\/code>\u3084\u3089\u3001\u546a\u6587\u306e\u3088\u3046\u306b\u66f8\u3044\u3066\u3044\u307e\u3057\u305f\u3088\u306d\u3002<\/p>\n\n\n\n<p>\u305d\u306e\u5f8c\u5b66\u3093\u3060\u306e\u304c\u3001<code>display:flex<\/code>\u3002\u8981\u7d20\u306e\u6a2a\u4e26\u3073\u3084\u4e0a\u4e0b\u4e2d\u592e\u63c3\u3048\u304c\u4f55\u3082\u8003\u3048\u305a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u3042\u301c\u301c\u301c\u301c\u6700\u9ad8\uff01\u3068\u601d\u3063\u305f\u306e\u3092\u899a\u3048\u3066\u3044\u307e\u3059\u3002\uff08\u203b\u53b3\u5bc6\u306b\u306f\u5b66\u3073\u59cb\u3081\u305f\u6642\u70b9\u3067\u4f7f\u3048\u305f\u3088\u3046\u3060\u304c\u3001\u6559\u672c\u3084Web\u4e0a\u306e\u8a18\u4e8b\u3067\u306ffloat\u304c\u591a\u304b\u3063\u305f\u6c17\u304c\u3059\u308b\u3002\uff09<\/p>\n\n\n\n<p>\u305d\u3053\u304b\u3089\u6642\u306f\u6d41\u308c\u30012026\u5e74\u3002\u308f\u305f\u3057\u306f2018\u5e74\u9803\u306b\u80a9\u66f8\u304c\u5e83\u5831\u306b\u5909\u308f\u3063\u305f\u306e\u3067\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u73fe\u5834\u304b\u3089\u96e2\u308c\u3066\u3082\u30468\u5e74\u8fd1\u304f\u7d4c\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u81ea\u793e\u30b5\u30a4\u30c8\u306e\u8efd\u5fae\u306a\u4fee\u6b63\u3084\u3001\u3061\u3087\u3063\u3068\u3057\u305f\u30b3\u30f3\u30c6\u30f3\u30c4\u8ffd\u52a0\u306a\u3069\u3067\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u5834\u9762\u306f\u3042\u308a\u307e\u3059\uff08<a href=\"https:\/\/asue.jp\/blog\/?p=41331\" type=\"post\" id=\"41331\">\u304a\u307f\u304f\u3058<\/a>\u3092\u4f5c\u3063\u305f\u308a\u306d\uff01\uff09\u3002 \u305f\u3060\u3001\u3053\u3068HTML\u3084CSS\u306b\u3064\u3044\u3066\u306f\u65e2\u5b58\u306e\u77e5\u8b58\u3067\u306a\u3093\u3068\u304b\u306a\u308b\u5834\u9762\u304c\u591a\u304f\u3001\u65b0\u3057\u3044\u6a5f\u80fd\u3092\u5b66\u3076\u6a5f\u4f1a\u306f\u307b\u3068\u3093\u3069\u3042\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002Sass\u3092\u899a\u3048\u305f\u308a\u306f\u3057\u305f\u3082\u306e\u306e\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u624b\u6cd5\u306b\u95a2\u3057\u3066\u306f\u300c\u306a\u3093\u3068\u306a\u304f<code>display:grid<\/code>\u304c\u4f7f\u3048\u308b\u304b\u306a\u301c\u300d\u304f\u3089\u3044\u306e\u72b6\u614b\u3067\u3059\u3002\uff08\u305d\u3057\u3066\u3053\u308c\u306f\u3042\u307e\u308a\u4f7f\u3044\u65b9\u3092\u899a\u3048\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u4f7f\u3063\u3066\u307f\u3088\u3046\u3068\u601d\u3046\u305f\u3073\u306b\u8abf\u3079\u3066\u3044\u308b\u3002\u307e\u308b\u3067\u8eab\u306b\u3064\u3044\u3066\u3044\u306a\u3044\u2026\u2026\u3002\uff09<\/p>\n\n\n\n<p>\u3061\u3087\u3063\u3068\u6a5f\u4f1a\u304c\u3042\u3063\u3066\u3001\u8fd1\u5e74\u5897\u3048\u305f\u30e2\u30c0\u30f3\u306aCSS\u306e\u6a5f\u80fd\uff1f\u5c5e\u6027\uff1f\u4e00\u89a7\u3092\u7d39\u4ecb\u3059\u308b\u8a18\u4e8b\u3092\u773a\u3081\u3066\u3044\u305f\u3089\u3001\u77e5\u3089\u306a\u3044\u6a5f\u80fd\u304c\u5897\u3048\u3066\u308b\u5897\u3048\u3066\u308b\u3002\u304b\u3064\u3066\u306fjs\u3084jQuery\u306a\u3069\u3092\u4f7f\u3063\u3066\u66f8\u3044\u3066\u3044\u305f\u3082\u306e\u3067\u3082\u3001\u73fe\u5728\u306fCSS\u3067\u5b9f\u88c5\u3067\u304d\u305f\u308a\u3082\u3059\u308b\u3088\u3046\u3067\u2026\u2026\u3002<\/p>\n\n\n\n<p>\u3068\u3044\u3046\u308f\u3051\u3067\u4eca\u56de\u306f\u3001<strong><code>display:flex<\/code>\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u308f\u305f\u3057\u304c\u30012026\u5e74\u306e\u30e2\u30c0\u30f3CSS\u3092\u5b66\u3093\u3067\u307f\u3088\u3046\uff01<\/strong> \u304c\u30c6\u30fc\u30de\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u30e2\u30c0\u30f3\u306a\u5973\u3092\u76ee\u6307\u305d\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<\/div><\/div>\n\n\n\n<p>\u306a\u304a\u3001\u3053\u306e\u8a18\u4e8b\u3067\u7d39\u4ecb\u3059\u308b\u6a5f\u80fd\u306f <strong>\u3059\u3079\u30662026\u5e743\u6708\u6642\u70b9\u3067\u4e3b\u8981\u30d6\u30e9\u30a6\u30b6\uff08Chrome\u30fbFirefox\u30fbSafari\uff09\u5bfe\u5fdc\u6e08\u307f<\/strong> \u306e\u3082\u306e\u3060\u3051\u306b\u7d5e\u3063\u3066\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u76ee\u6b21<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69d6ebcc46888\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d6ebcc46888\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-1\" >\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u66f8\u304d\u65b9\u306e\u9032\u5316\u7de8<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-1-1\" >CSS Nesting\u2014\u2014Sass\u306a\u3057\u3067\u30cd\u30b9\u30c8\u304c\u66f8\u3051\u308b\u6642\u4ee3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-1-2\" >:has() \u2014\u2014 \u7279\u5b9a\u306e\u5b50\u8981\u7d20\u3092\u6301\u3064\u89aa\u8981\u7d20\u304c\u9078\u629e\u53ef\u80fd\u306b<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-2\" >\u8ce2\u304f\u306a\u3063\u305f\u30ec\u30a4\u30a2\u30a6\u30c8\u7de8<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-2-1\" >\u30b3\u30f3\u30c6\u30ca\u30af\u30a8\u30ea\u2014\u2014\u300c\u753b\u9762\u5e45\u300d\u3058\u3083\u306a\u304f\u3066\u300c\u81ea\u5206\u306e\u89aa\u8981\u7d20\u306e\u5e45\u300d\u3067\u5909\u308f\u308b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-2-2\" >subgrid\u2014\u2014\u30ab\u30fc\u30c9\u306e\u4e2d\u8eab\u3092\u63c3\u3048\u3089\u308c\u308b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-2-3\" >Scroll Snap\u2014\u2014 JS\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u30ab\u30eb\u30fc\u30bb\u30eb<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-3\" >\u697d\u306b\u306a\u3063\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5b9f\u88c5\u3068UI\u30d1\u30fc\u30c4\u7de8<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-3-1\" >@starting-style + transition-behavior\u2014\u2014display:none\u304b\u3089\u306e\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u304c\u53ef\u80fd\u306b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-3-2\" >Popover API\u2014\u2014HTML\u5c5e\u6027\u3068CSS\u3060\u3051\u3067\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3092\u7c21\u5358\u5b9f\u73fe<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-4\" >\u8272\u8a2d\u8a08\u304c\u3088\u308a\u67d4\u8edf\u306b<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-4-1\" >color-mix()\u2014\u2014CSS\u306e\u4e2d\u3067\u8272\u3092\u6df7\u305c\u308b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-4-2\" >accent-color\u2014\u2014\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u8272\u304c1\u884c\u3067\u5909\u308f\u308b<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-5\" >CSS\u8a2d\u8a08\u306e\u5909\u5316<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-5-1\" >@layer\u2014\u2014\u8a73\u7d30\u5ea6\u3067\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u306a\u3044\uff01\u3092\u9632\u6b62<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-5-2\" >@scope\u2014\u2014\u30b9\u30bf\u30a4\u30eb\u306e\u52b9\u679c\u7bc4\u56f2\u3092\u8a2d\u5b9a\u3067\u304d\u308b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-5-3\" >@property\u2014\u2014CSS\u5909\u6570\u306b\u300c\u578b\u300d\u3092\u3064\u3051\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u304d\u308b<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/asue.jp\/blog\/?p=44432\/#i-6\" >\u307e\u3068\u3081<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"i-1\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-1\"><\/span>\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u66f8\u304d\u65b9\u306e\u9032\u5316\u7de8<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 id=\"i-1-1\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-1-1\"><\/span>CSS Nesting\u2014\u2014Sass\u306a\u3057\u3067\u30cd\u30b9\u30c8\u304c\u66f8\u3051\u308b\u6642\u4ee3<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sass\u3084SCSS\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u30cd\u30b9\u30c8\uff08\u5165\u308c\u5b50\u69cb\u9020\uff09\u306b\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u66f8\u304f\u3053\u3068\u304c\u53ef\u80fd\u3067\u3057\u305f\u3002\u3053\u308c\u306b\u3088\u3063\u3066\u3001\u7279\u5b9a\u306e\u8981\u7d20\u306e\u5b50\u8981\u7d20\u306e\u307f\u306b\u9069\u7528\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u3092\u66f8\u304d\u305f\u3044\u5834\u5408\u306b\u3001\u3044\u3061\u3044\u3061\u7279\u5b9a\u306e\u8981\u7d20\uff08=\u89aa\u8981\u7d20\uff09\u3092\u4f55\u5ea6\u3082\u66f8\u304f\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u3001\u8a18\u8f09\u304c\u7c21\u7565\u5316\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u89aa\u8981\u7d20\u306e\u30bb\u30ec\u30af\u30bf\u3092\u7e70\u308a\u8fd4\u3057\u66f8\u304f\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u3001\u53ef\u8aad\u6027\u3082\u30a2\u30c3\u30d7\u3055\u305b\u3089\u308c\u308b\u305f\u3081\u975e\u5e38\u306b\u4fbf\u5229\u306a\u30cd\u30b9\u30c8\u304c\u3001CSS\u3067\u3082\u53ef\u80fd\u306b\u306a\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u4f7f\u3063\u305f\u3053\u3068\u306a\u3044\u3060\u3051\u3067\u3067\u304d\u308b\u3053\u3068\u306f\u77e5\u3063\u3066\u306f\u3044\u305f\u3002<\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">\u5143\u306eCSS\u306e\u8a18\u6cd5<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">\/* \u5143\u306eCSS\uff1a\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u6bce\u56de\u30d5\u30eb\u3067\u66f8\u304f *\/\n.card {\n  background: #fff;\n}\n.card .title {\n  font-size: 1.2rem;\n}\n.card:hover {\n  background: #f0f0f0;\n}<\/code><\/pre>\n\n\n\n<p>\u7e70\u308a\u8fd4\u3057\u3001.card\u3068\u3044\u3046\u89aa\u8981\u7d20\u3092\u66f8\u304f\u5fc5\u8981\u304c\u3042\u308b\u305f\u3081\u9762\u5012\u304b\u3064\u53ef\u8aad\u6027\u3082\u60aa\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">SCSS\u306e\u8a18\u6cd5<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">\/* SCSS\u3067\u306f\u3053\u3046\u66f8\u3051\u305f\uff08\u8981\u30d3\u30eb\u30c9\uff09 *\/\n.card {\n  background: #fff;\n  .title {\n    font-size: 1.2rem;\n  }\n  &amp;:hover {\n    background: #f0f0f0;\n  }\n}<\/code><\/pre>\n\n\n\n<p>SCSS\u3092\u4f7f\u3046\u3053\u3068\u3067\u30cd\u30b9\u30c8\u306b\u3067\u304d\u3001.card\u306f\u4e00\u56de\u66f8\u3051\u3070OK\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u3067\u3059\u304c\u3001SCSS\u3092\u76f4\u63a5\u8aad\u307f\u8fbc\u3080\u3053\u3068\u306f\u3067\u304d\u306a\u3044\u306e\u3067\u3001CSS\u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3066\u4f5c\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">CSS Nesting\u306e\u8a18\u6cd5<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">\/* \u7d20\u306eCSS\u3067\u30cd\u30b9\u30c8\u304c\u66f8\u3051\u308b\uff01\uff08\u30d3\u30eb\u30c9\u4e0d\u8981\uff09 *\/\n.card {\n  background: #fff;\n\n  .title {\n    font-size: 1.2rem;\n  }\n\n  &amp;:hover {\n    background: #f0f0f0;\n  }\n}<\/code><\/pre>\n\n\n\n<p>SCSS\u3068\u540c\u3058\u3088\u3046\u306a\u66f8\u304d\u65b9\u3067\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u306e\u30b9\u30c6\u30c3\u30d7\u3082\u5fc5\u8981\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u76f4\u63a5\u30cd\u30b9\u30c8\u8a18\u6cd5\u3092\u89e3\u91c8\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e\u3067\u3001Sass\u3092\u5c0e\u5165\u3057\u306a\u304f\u3066\u3082\u3053\u306e\u66f8\u304d\u65b9\u304c\u53ef\u80fd\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3082\u3061\u308d\u3093\u3001SCSS\u306b\u306fmixin\u306a\u3069\u4ed6\u306b\u3082\u4fbf\u5229\u306a\u6a5f\u80fd\u304c\u3042\u308b\u306e\u3067\u5b8c\u5168\u306b\u4e0d\u8981\u306b\u306a\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u5c0f\u898f\u6a21\u30b5\u30a4\u30c8\u3067\u3042\u308c\u3070CSS\u3060\u3051\u3067\u3082\u5341\u5206\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>\u307e\u305f\u3001SCSS\u3068CSS\u30cd\u30b9\u30c8\u306e\u9055\u3044\u306e\u6ce8\u610f\u70b9\u3068\u3057\u3066\u3001Sass\/SCSS\u3067\u306f <code>&amp;<\/code> \u3092\u4f7f\u3063\u305f\u6587\u5b57\u5217\u7d50\u5408\u304c\u53ef\u80fd\u3067\u3057\u305f\u3002BEM\u8a18\u6cd5\u3092\u5229\u7528\u3059\u308b\u969b\u306b\u3001<code>&amp;__element<\/code> \u306e\u3088\u3046\u306b\u66f8\u3044\u3066\u3044\u305f\u3082\u306e\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">\/* SCSS\u3067\u306f\u3067\u304d\u308bBEM\u8a18\u6cd5 *\/\n.card {\n  &amp;__title { font-size: 1.2rem; }\n  &amp;__body { line-height: 1.8; }\n  &amp;--featured { border-color: gold; }\n}\n\/* \u2192 .card__title, .card__body, .card--featured \u306b\u5c55\u958b\u3055\u308c\u308b *\/<\/code><\/pre>\n\n\n\n<p>CSS Nesting\u306e <code>&amp;<\/code> \u3067\u306f\u3001\u3053\u308c\u304c <strong>\u3067\u304d\u307e\u305b\u3093<\/strong>\u3002CSS Nesting\u306e <code>&amp;<\/code> \u306f\u300c<strong>\u89aa\u30bb\u30ec\u30af\u30bf\u30fc\u5168\u4f53\u3078\u306e\u53c2\u7167<\/strong>\u300d\u3067\u3042\u3063\u3066\u3001Sass\u306e\u3088\u3046\u306a\u6587\u5b57\u5217\u7d50\u5408\u306f\u3067\u304d\u306a\u3044\u4ed5\u69d8\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>BEM\u3092\u63a1\u7528\u3057\u3066\u3044\u308b\u3068CSS \u30cd\u30b9\u30c8\u306f\u9006\u306b\u9762\u5012\u304b\u306a\u301c\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u5c0f\u898f\u6a21\u306a\u30b5\u30a4\u30c8\u3084\u30da\u30fc\u30b8\u306e\u5834\u5408\u306f\u3053\u3061\u3089\u3067\u3082\u826f\u3055\u305d\u3046\u3067\u3059\u306d\u3002<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/CSS_nesting\" target=\"_blank\" rel=\"noreferrer noopener\">CSS nesting - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h3 id=\"i-1-2\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-1-2\"><\/span>:has() \u2014\u2014 \u7279\u5b9a\u306e\u5b50\u8981\u7d20\u3092\u6301\u3064\u89aa\u8981\u7d20\u304c\u9078\u629e\u53ef\u80fd\u306b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u500b\u4eba\u7684\u306b\u4e00\u756a\u885d\u6483\u3092\u53d7\u3051\u305f\u6a5f\u80fd\u304c\u3053\u3061\u3089\u3002\u3069\u3046\u8003\u3048\u3066\u3082\u4fbf\u5229\u3059\u304e\u308b\uff01<\/p>\n\n\n\n<p><code>:has()<\/code> \u306f\u300c\u7279\u5b9a\u306e\u5b50\u8981\u7d20\u3092\u6301\u3064\u89aa\u8981\u7d20\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u30bb\u30ec\u30af\u30bf\u30fc\u3067\u3059\u3002\u8a00\u3044\u63db\u3048\u308b\u3068\u3001<strong>\u5b50\u306e\u72b6\u614b\u306b\u3088\u3063\u3066\u89aa\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd<\/strong>\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">\/* \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u304c\u30c1\u30a7\u30c3\u30af\u3055\u308c\u3066\u3044\u308b\u30ab\u30fc\u30c9\u306e\u80cc\u666f\u3092\u5909\u3048\u308b *\/\n.card:has(input&#091;type=\"checkbox\"]:checked) {\n  background: #e8f5e9;\n  border-color: #4caf50;\n}<\/code><\/pre>\n\n\n\n<p>\u4ee5\u524d\u306f\u3001\u3053\u3046\u3044\u3063\u305f\u300c\u5b50\u306e\u72b6\u614b\u306b\u9023\u52d5\u3057\u305f\u89aa\u306e\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u300d\u3092\u3084\u308d\u3046\u3068\u3059\u308b\u3068\u3001JavaScript\u3084jQuery\u3092\u4f7f\u3063\u305f\u51e6\u7406\u304c\u5fc5\u8981\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-php\">\/\/ \u6614\u306f\u3053\u3093\u306aJS\u304c\u5fc5\u8981\u3060\u3063\u305f\ncheckbox.addEventListener('change', (e) =&gt; {\n  const card = e.target.closest('.card');\n  card.classList.toggle('is-selected', e.target.checked);\n});<\/code><\/pre>\n\n\n\n<p>\u3067\u3059\u304c\u3001\u3053\u308c\u306b\u3088\u3063\u3066CSS\u306e\u307f\u3067\u5b9f\u88c5\u53ef\u80fd\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d5\u30a9\u30fc\u30e0\u306e\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u8868\u793a\u3001\u30bf\u30d6\u306e\u5207\u66ff\u3001\u6761\u4ef6\u4ed8\u304d\u30ec\u30a4\u30a2\u30a6\u30c8\u5909\u66f4\u306a\u3069\u3001<code>:has()<\/code> \u306e\u5fdc\u7528\u7bc4\u56f2\u306f\u304b\u306a\u308a\u5e83\u3044\u306e\u3067\u3001\u305c\u3072\u899a\u3048\u3066\u304a\u304d\u305f\u3044\u64ec\u4f3c\u30af\u30e9\u30b9\u30bb\u30ec\u30af\u30bf\u30fc\u3067\u3059\u306d\uff01<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5229\u7528\u4f8b(1) \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u9078\u629e\u72b6\u6cc1\u306b\u3088\u3063\u3066\u89aa\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4<\/h4>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"300\" data-pen-title=\":has\" data-default-tab=\"css,result\" data-slug-hash=\"ZYOBqeY\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/ZYOBqeY\">\n  :has<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">\u5229\u7528\u4f8b(2) \u753b\u50cf\u306e\u6709\u7121\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u5909\u66f4<\/h4>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"300\" data-pen-title=\":has demo02 \u753b\u50cf\u306e\u6709\u7121\" data-default-tab=\"css,result\" data-slug-hash=\"ogLYawe\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/ogLYawe\">\n  :has demo02 \u753b\u50cf\u306e\u6709\u7121<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/:has\" target=\"_blank\" rel=\"noreferrer noopener\">:has() - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h2 id=\"i-2\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-2\"><\/span>\u8ce2\u304f\u306a\u3063\u305f\u30ec\u30a4\u30a2\u30a6\u30c8\u7de8<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><code>display:flex<\/code>\u3067\u6a2a\u4e26\u3073\u306b\u306a\u3063\u305f\u3060\u3051\u3067\u6614\u306f\u611f\u52d5\u3057\u3066\u3044\u305f\u308f\u305f\u3057\u3067\u3059\u304c\uff08\u66f8\u304d\u65b9\u304c\u899a\u3048\u3084\u3059\u3044\u3068\u601d\u3063\u3066\u3044\u308b\u306e\u3067\u4eca\u3067\u3082\u597d\u304d\u3067\u3059\uff09\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u7cfb\u3082\u3055\u3089\u306b\u4fbf\u5229\u306b\u9032\u5316\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h3 id=\"i-2-1\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-2-1\"><\/span>\u30b3\u30f3\u30c6\u30ca\u30af\u30a8\u30ea\u2014\u2014\u300c\u753b\u9762\u5e45\u300d\u3058\u3083\u306a\u304f\u3066\u300c\u81ea\u5206\u306e\u89aa\u8981\u7d20\u306e\u5e45\u300d\u3067\u5909\u308f\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306a\u3069\u3001\u5e45\u306b\u3088\u3063\u3066\u30c7\u30b6\u30a4\u30f3\u3092\u5207\u308a\u66ff\u3048\u305f\u3044\u5834\u5408\u306f\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u3068\u547c\u3070\u308c\u308b\u753b\u9762\u5e45\uff08viewport\uff09\u306b\u5fdc\u3058\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u5207\u308a\u66ff\u3048\u308b\u66f8\u304d\u65b9\uff08<code>@media (max-width: \u25cb\u25cbpx)<\/code>\uff09\u304c\u4f7f\u308f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u5e45\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u3092\u3001\u89aa\u8981\u7d20\u306e\u5e45\u3067\u3082\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u306e\u304c\u30b3\u30f3\u30c6\u30ca\u30af\u30a8\u30ea\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u540c\u3058\u30ab\u30fc\u30c9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30e1\u30a4\u30f3\u30a8\u30ea\u30a2\uff08\u5e83\u3044\uff09\u3068\u30b5\u30a4\u30c9\u30d0\u30fc\uff08\u72ed\u3044\uff09\u306e\u4e21\u65b9\u306b\u914d\u7f6e\u3057\u305f\u3044\u3068\u304d\u3002\u753b\u9762\u5e45\u306f\u540c\u3058\u306a\u306e\u306b\u3001\u30ab\u30fc\u30c9\u306e\u8868\u793a\u9818\u57df\u306e\u5e45\u306f\u9055\u3044\u307e\u3059\u304c\u3001\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u3060\u3068\u3053\u306e\u533a\u5225\u304c\u3067\u304d\u307e\u305b\u3093\u3002\u3067\u3059\u304c\u3001\u30b3\u30f3\u30c6\u30ca\u30af\u30a8\u30ea\u3092\u4f7f\u3048\u3070\u89aa\u8981\u7d20\u306e\u5e45\u3067\u8868\u793a\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u3002\u3055\u3089\u306b\u3001\u5e83\u3044\u30e1\u30a4\u30f3\u30a8\u30ea\u30a2\u306b\u8a2d\u7f6e\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u306f\u72ed\u3044\u5e45\u7528\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">\/* \u89aa\u30b3\u30f3\u30c6\u30ca\u3092\u5b9a\u7fa9 *\/\n.card-wrapper {\n  container-type: inline-size;\n}\n\n\/* \u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u304c400px\u4ee5\u4e0b\u306a\u3089\u7e26\u7a4d\u307f\u3001\u305d\u308c\u4ee5\u4e0a\u306a\u3089\u6a2a\u4e26\u3073 *\/\n@container (min-width: 400px) {\n  .card {\n    display: flex;\n    flex-direction: row;\n  }\n}<\/code><\/pre>\n\n\n\n<p>\u4ee5\u524d\u306f\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u3067\u306e\u8a18\u8f09\u304c\u3069\u3093\u3069\u3093\u8907\u96d1\u306b\u306a\u3063\u3066\u3044\u304f\u304b\u3001\u30b3\u30f3\u30c6\u30ca\u30af\u30a8\u30ea\u3068\u540c\u69d8\u306e\u52d5\u304d\u3092\u3055\u305b\u308b\u305f\u3081\u306b\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u3092JS\u3067\u76e3\u8996\u3057\u3066\u3001\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u66ff\u3048\u308b\u306a\u3069\u306e\u51e6\u7406\u304c\u5fc5\u8981\u3067\u3057\u305f\u304c\u3001CSS\u3060\u3051\u3067\u7c21\u5358\u306b\u5b8c\u7d50\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5358\u4f4d\u3067\u300c\u81ea\u5206\u304c\u3069\u308c\u304f\u3089\u3044\u306e\u30b9\u30da\u30fc\u30b9\u306b\u7f6e\u304b\u308c\u3066\u3044\u308b\u304b\u300d\u306b\u5fdc\u3058\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5909\u3048\u3089\u308c\u308b\u306e\u3067\u3001\u518d\u5229\u7528\u6027\u304c\u9ad8\u304f\u306a\u308a\u307e\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4+\u30b5\u30a4\u30c9\u30d0\u30fc\u304c\u3042\u308b\u3088\u3046\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3060\u3068\u3001<\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">\u5229\u7528\u4f8b\uff1a \u5e83\u3044\u30d1\u30cd\u30eb\u3068\u72ed\u3044\u30d1\u30cd\u30eb\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4<\/h4>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"300\" data-pen-title=\"Container Query demo02\" data-default-tab=\"css,result\" data-slug-hash=\"XJKNxOM\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/XJKNxOM\">\n  Container Query demo02<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/CSS_containment\/Container_queries\" target=\"_blank\" rel=\"noreferrer noopener\">CSS \u30b3\u30f3\u30c6\u30ca\u30fc\u30af\u30a8\u30ea\u30fc - MDN Web Docs<\/a>\u300d<br><\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h3 id=\"i-2-2\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-2-2\"><\/span>subgrid\u2014\u2014\u30ab\u30fc\u30c9\u306e\u4e2d\u8eab\u3092\u63c3\u3048\u3089\u308c\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><code>display:flex<\/code>\u306f\u4fbf\u5229\u3060\u3051\u3069\u3001\u6a2a\u4e26\u3073\u306e\u30ab\u30fc\u30c9\uff08\u30d6\u30ed\u30b0\u6295\u7a3f\u306a\u3069\uff09\u5185\u306e\u8981\u7d20\uff08\u30bf\u30a4\u30c8\u30eb\u30fb\u65e5\u4ed8\u30fb\u30dc\u30bf\u30f3\u306a\u3069\uff09\u306e\u4f4d\u7f6e\u304c\u30d0\u30e9\u30d0\u30e9\u306b\u306a\u3063\u3066\u3057\u307e\u3063\u3066\u304b\u3063\u3053\u308f\u308b\u3044\uff01\u3068\u3044\u3046\u7d4c\u9a13\u306f\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u3057\u305f\u3053\u3068\u304c\u3042\u308c\u3070\u8ab0\u3067\u3082\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u7279\u306b\u30dc\u30bf\u30f3\u304c\u3042\u308b\u3068\u672c\u5f53\u306b\u76ee\u7acb\u3063\u3066\u3057\u307e\u3046\u3002<\/p>\n<\/div><\/div>\n\n\n\n<p>\u3053\u308c\u3092\u63c3\u3048\u308b\u305f\u3081\u306b\u3001\u6614\u306fJS\u3067\u5404\u30ab\u30fc\u30c9\u306e\u6700\u5927\u9ad8\u3055\u3092\u8a08\u6e2c\u3057\u3066 <code>style.height<\/code> \u3092\u8a2d\u5b9a\u3059\u308b\u2026\u2026\u306a\u3069\u306e\u51e6\u7406\u304c\u5fc5\u8981\u3067\u3057\u305f\u3002\u3053\u308c\u3092\u3084\u3063\u3066\u306a\u304f\u3066\u5f8c\u304b\u3089\u6c17\u3065\u3044\u3066\u7d76\u671b\u3057\u305f\u308a\u3082\u3057\u307e\u3057\u305f\u306d\u3002<\/p>\n\n\n\n<p><strong>Subgrid<\/strong> \u3092\u4f7f\u3046\u3068\u3001\u5b50\u8981\u7d20\u304c\u89aa\u30b0\u30ea\u30c3\u30c9\u306e\u30c8\u30e9\u30c3\u30af\uff08\u884c\uff09\u3092\u5171\u6709\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u3053\u306e\u300c\u4f4d\u7f6e\u304c\u30d0\u30e9\u30d0\u30e9\u306b\u306a\u3063\u3066\u3057\u307e\u3063\u3066\u304b\u3063\u3053\u308f\u308b\u3044\uff01\u300d\u72b6\u6cc1\u3092\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5229\u7528\u4f8b<\/h4>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"500\" data-pen-title=\"subgrid demo01\" data-default-tab=\"css,result\" data-slug-hash=\"dPXOgLe\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/dPXOgLe\">\n  subgrid demo01<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/CSS_grid_layout\/Subgrid\" target=\"_blank\" rel=\"noreferrer noopener\">subgrid - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h3 id=\"i-2-3\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-2-3\"><\/span>Scroll Snap\u2014\u2014 JS\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u30ab\u30eb\u30fc\u30bb\u30eb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u753b\u50cf\u3084\u30ab\u30fc\u30c9\u3092\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u898b\u305b\u308b\u30ab\u30eb\u30fc\u30bb\u30ebUI\u3002\u5b9a\u756a\u306eUI\u306a\u306e\u3067\u3001\u5b9f\u88c5\u3057\u305f\u7d4c\u9a13\u304c\u3042\u308b\u65b9\u3082\u591a\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>Swiper.js\u3084slick\u306a\u3069\u306eJS\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u3084\u30b9\u30bf\u30a4\u30eb\u306e\u4e0a\u66f8\u304d\u306a\u3069\u3067\u8abf\u6574\u3057\u3066\u2026\u2026\u3068\u3001\u7c21\u5358\u3067\u306f\u3042\u308a\u3064\u3064\u7d50\u69cb\u9762\u5012\u3067\u3059\u3002\u3055\u3089\u306b\u3001\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u3080\u306e\u3067\u3061\u3087\u3063\u3068\u91cd\u304f\u306a\u308b\u306e\u3082\u6c17\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>Scroll Snap<\/strong> \u3092\u4f7f\u3046\u3068\u3001CSS\u3060\u3051\u3067\u30ab\u30eb\u30fc\u30bb\u30eb\u98a8\u306eUI\u304c\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"500\" data-pen-title=\"Scroll Snap demo CSS\u306e\u307f\" data-default-tab=\"css,result\" data-slug-hash=\"ogzGqvW\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/ogzGqvW\">\n  Scroll Snap demo CSS\u306e\u307f<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p>\u5b9f\u52d9\u4e0a\u306f\u524d\u3078\u30fb\u6b21\u3078\u306e\u79fb\u52d5\u30dc\u30bf\u30f3\u3084\u30c9\u30c3\u30c8\u306e\u30ca\u30d3\u306a\u3069\u3082\u3064\u3051\u305f\u3044\u3053\u3068\u304c\u591a\u3044\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u305d\u306e\u5834\u5408\u3082\u6700\u5c0f\u9650\u306ejs\u306e\u307f\u3067\u5b9f\u88c5\u53ef\u80fd\u3067\u3059\u3002\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5229\u7528\u3059\u308b\u3088\u308a\u3082\u8efd\u91cf\u3067\u6e08\u307f\u305d\u3046\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"500\" data-pen-title=\"Scroll Snap demo\" data-default-tab=\"css,result\" data-slug-hash=\"OPRxQqZ\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/OPRxQqZ\">\n  Scroll Snap demo<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/CSS_scroll_snap\" target=\"_blank\" rel=\"noreferrer noopener\">CSS scroll snap - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h2 id=\"i-3\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-3\"><\/span>\u697d\u306b\u306a\u3063\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5b9f\u88c5\u3068UI\u30d1\u30fc\u30c4\u7de8<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 id=\"i-3-1\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-3-1\"><\/span><code>@starting-style<\/code> + <code>transition-behavior<\/code>\u2014\u2014<code>display:none<\/code>\u304b\u3089\u306e\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u304c\u53ef\u80fd\u306b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u3042\u308b\u8981\u7d20\u3092\u3001<code>display: none<\/code> \u2192 <code>display: block<\/code> \u306b\u5207\u308a\u66ff\u3048\u3066\u30d5\u30ef\u30c3\u3068\u8868\u793a\u3055\u305b\u305f\u3044\u5834\u5408\u306b\u4ee5\u524d\u306fJS\u3084jQuery\u3067\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3044\u307e\u3084\u3001<code>@starting-style<\/code> + <code>transition-behavior<\/code>\u3092\u4f7f\u3048\u3070CSS\u3068onclick\u5c5e\u6027\u306e\u307f\u3067\u5b9f\u88c5\u53ef\u80fd\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p><code>@starting-style<\/code> \u3068\u306f\u3001CSS \u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u306e\u958b\u59cb\u6642\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5b9a\u7fa9\u3059\u308b\u30a2\u30c3\u30c8\u30eb\u30fc\u30eb\u3067\u3059\u3002\u30af\u30ea\u30c3\u30af\u6642\u306b\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3057\u3001\u305d\u306e\u30af\u30e9\u30b9\u306b\u5bfe\u3057\u3066\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u958b\u59cb\u6642\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5b9a\u7fa9\u3057\u3066\u304a\u304f\u3053\u3068\u3067\u3075\u308f\u3063\u3068\u3057\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304cCSS\u3067\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"500\" data-pen-title=\"@starting-style demo\" data-default-tab=\"css,result\" data-slug-hash=\"LERzdeO\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/LERzdeO\">\n  @starting-style demo<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p>jQuery\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u74b0\u5883\u3067\u3042\u308c\u3070\u3001<code>fadeToggle()<\/code> \u3084 <code>slideToggle()<\/code>\u3092\u7528\u3044\u3066\u4f3c\u305f\u3088\u3046\u306a\u51e6\u7406\u306f\u7c21\u5358\u306b\u53ef\u80fd\u3067\u3059\u304c\u3001\u3053\u308c\u3089\u306e\u95a2\u6570\u306f\u8868\u793a\u6642\u306b<code>display: flex<\/code> \u3084 <code>grid<\/code> \u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5834\u5408\u3001 <code>block<\/code>\u306b\u5909\u66f4\u3057\u3066\u3057\u307e\u3044\u5d29\u308c\u3066\u3057\u307e\u3044\u307e\u3059\u3002\uff08\u3082\u3061\u308d\u3093\u3001\u6b63\u3057\u304f\u52d5\u304f\u3088\u3046\u306a\u65b9\u6cd5\u306f\u3042\u308a\u307e\u3059\u304c\u3001\u4f55\u6c17\u306a\u304f\u66f8\u3044\u3066\u5d29\u308c\u305f\uff01\u76f4\u3055\u306a\u304d\u3083\uff01\u3092\u3088\u304f\u3084\u308a\u307e\u3057\u305f\u3002\uff09\u305d\u306e\u70b9\u3001CSS\u306a\u3089\u7c21\u5358\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@starting-style\" target=\"_blank\" rel=\"noreferrer noopener\">@starting-style - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition-behavior\" target=\"_blank\" rel=\"noreferrer noopener\">transition-behavior - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h3 id=\"i-3-2\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-3-2\"><\/span>Popover API\u2014\u2014HTML\u5c5e\u6027\u3068CSS\u3060\u3051\u3067\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3092\u7c21\u5358\u5b9f\u73fe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Web\u30b5\u30a4\u30c8\u3092\u898b\u3066\u3044\u308b\u3068\u753b\u9762\u4e0a\u306b\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u8868\u793a\u3055\u308c\u308bCTA\u3002\u30e6\u30fc\u30b6\u30fc\u5074\u304b\u3089\u3059\u308b\u3068\u3046\u3056\u3044\u3053\u3068\u3082\u3088\u304f\u3042\u308a\u307e\u3059\u304c\u3001\u5b9a\u756a\u306eUI\u3067\u3082\u3042\u308a\u307e\u3059\u3002\u4eca\u307e\u3067\u306f\u3053\u3061\u3089\u3082js\uff08\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3046\u3053\u3068\u3082\uff09\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u73fe\u5728\u306fHTML\u5c5e\u6027\u306b<code>popover<\/code>\u3092\u8ffd\u52a0\u3057\u3001CSS\u3092\u8abf\u6574\u3059\u308c\u3070\u7c21\u5358\u306b\u5b9f\u88c5\u53ef\u80fd\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u6a5f\u80fd\u3060\u3051\u306a\u3089\u3001HTML\u5c5e\u6027\u306e\u307f\u3067\u5b9f\u88c5\u3067\u304d\u307e\u3059\uff08\u898b\u305f\u76ee\u306f\u5b9f\u7528\u7684\u3067\u306f\u306a\u3044\uff09\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"500\" data-pen-title=\"Popover API demo\" data-default-tab=\"css,result\" data-slug-hash=\"PwGOYPb\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/PwGOYPb\">\n  Popover API demo<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p>Popover API\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067 <code>position: fixed<\/code> + \u4e2d\u592e\u914d\u7f6e\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u304c\u3001\u898b\u305f\u76ee\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u306e\u307e\u307e\u3060\u3068\u3061\u3087\u3063\u3068\u7d20\u6734\u3059\u304e\u308b\u306e\u3067\u3001\u4e0a\u306e\u30c7\u30e2\u306e\u3088\u3046\u306b <code>[popover]<\/code> \u30bb\u30ec\u30af\u30bf\u30fc\u3067\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<code>::backdrop<\/code> \u64ec\u4f3c\u8981\u7d20\u3067\u80cc\u666f\u306e\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u8272\u3082\u5909\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/API\/Popover_API\" target=\"_blank\" rel=\"noreferrer noopener\">Popover API - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h2 id=\"i-4\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-4\"><\/span>\u8272\u8a2d\u8a08\u304c\u3088\u308a\u67d4\u8edf\u306b<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 id=\"i-4-1\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-4-1\"><\/span>color-mix()\u2014\u2014CSS\u306e\u4e2d\u3067\u8272\u3092\u6df7\u305c\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u30dc\u30bf\u30f3\u306e\u30db\u30d0\u30fc\u6642\u306b\u8272\u3092\u3061\u3087\u3063\u3068\u8584\u304f\u3057\u305f\u3044\u2014\u2014Sass\u306a\u3089<code>lighten($color, XX%)<\/code> \u3092\u4f7f\u3048\u3070\u7c21\u5358\u306b\u53ef\u80fd\u3067\u3057\u305f\u304c\u3001CSS\u3067\u306f\u30db\u30d0\u30fc\u7528\u306e\u8272\u3092\u5225\u9014\u30cf\u30fc\u30c9\u30b3\u30fc\u30c9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3057\u305f\u3002\u3067\u3059\u304c\u3001\u73fe\u5728\u306f<strong><code>color-mix()<\/code><\/strong> \u3092\u4f7f\u3046\u3068\u3001CSS\u306e\u4e2d\u3067\u8272\u3092\u6df7\u305c\u3089\u308c\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"500\" data-pen-title=\"color-mix() demo01\" data-default-tab=\"css,result\" data-slug-hash=\"EayNOrd\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/EayNOrd\">\n  color-mix() demo01<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/color_value\/color-mix\" target=\"_blank\" rel=\"noreferrer noopener\">color-mix() - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h3 id=\"i-4-2\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-4-2\"><\/span>accent-color\u2014\u2014\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u8272\u304c1\u884c\u3067\u5909\u308f\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3084\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306a\u3069\u3001\u30d5\u30a9\u30fc\u30e0\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d1\u30fc\u30c4\u306a\u3069\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u9752\u8272\u306a\u3069\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30c7\u30b6\u30a4\u30f3\u306b\u3088\u3063\u3066\u306f\u898b\u305b\u65b9\u3092\u5909\u3048\u305f\u3044\u5834\u5408\u3082\u591a\u3044\u3067\u3059\u304c\u3001\u4ee5\u524d\u306f\u8272\u5909\u66f4\u3084\u30c7\u30b6\u30a4\u30f3\u306e\u305f\u3081\u306b\u9762\u5012\u306aCSS\u3084\u5834\u5408\u306b\u3088\u3063\u3066\u306fjs\u3067\u306e\u51e6\u7406\u304c\u5fc5\u8981\u306a\u3053\u3068\u3082\u3002<\/p>\n\n\n\n<p>\u73fe\u5728\u306f\u3001\u8272\u3092\u5909\u3048\u308b\u3060\u3051\u306a\u3089CSS\u306b<code>accent-color:#XXXXXX<\/code> \u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u3001\u4e00\u884c\u3067\u5909\u66f4\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"300\" data-pen-title=\"accent-color demo\" data-default-tab=\"css,result\" data-slug-hash=\"qEaVBBa\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/qEaVBBa\">\n  accent-color demo<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p><code>accent-color<\/code> \u306f\u3042\u304f\u307e\u3067\u300c\u30a2\u30af\u30bb\u30f3\u30c8\u30ab\u30e9\u30fc\u300d\u306e\u5909\u66f4\u306a\u306e\u3067\u3001\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u89d2\u4e38\u3092\u5909\u3048\u305f\u3044\u3001\u30b5\u30a4\u30ba\u3092\u5909\u3048\u305f\u3044\u3001\u3068\u3044\u3063\u305f\u7d30\u304b\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306f\u3067\u304d\u307e\u305b\u3093\u3002\u305d\u3053\u307e\u3067\u3084\u308a\u305f\u3044\u5834\u5408\u306f\u5f93\u6765\u901a\u308a <code>appearance: none<\/code> \u3067\u5b8c\u5168\u30ea\u30bb\u30c3\u30c8\u3057\u3066\u30ab\u30b9\u30bf\u30e0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u5927\u591a\u6570\u306e\u5834\u5408\u306f\u3053\u308c\u3067\u6e08\u307f\u305d\u3046\u3002<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/accent-color\" target=\"_blank\" rel=\"noreferrer noopener\">accent-color - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h2 id=\"i-5\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-5\"><\/span>CSS\u8a2d\u8a08\u306e\u5909\u5316<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u6700\u5f8c\u306f\u3001\u500b\u3005\u306e\u898b\u305f\u76ee\u3067\u306f\u306a\u304f <strong>CSS\u306e\u8a2d\u8a08\u601d\u60f3\u30fb\u66f8\u304d\u65b9\u306e\u69cb\u9020<\/strong> \u304c\u5909\u308f\u308b\u30ec\u30d9\u30eb\u306e\u30a2\u30c3\u30c8\u30eb\u30fc\u30eb\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h3 id=\"i-5-1\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-5-1\"><\/span>@layer\u2014\u2014\u8a73\u7d30\u5ea6\u3067\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u306a\u3044\uff01\u3092\u9632\u6b62<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u5927\u898f\u6a21\u30b5\u30a4\u30c8\u306a\u3069\u3067\u3061\u3087\u3063\u3068\u3057\u305f\u4fee\u6b63\u3092\u3057\u3088\u3046\u3068\u3057\u305f\u3068\u304d\u306b\u3001\u66f8\u3044\u305f\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u306a\u3044\uff01\u5225\u306e\u3068\u3053\u308d\u306b\u66f8\u304b\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u304c\u512a\u5148\u3055\u308c\u3066\u3057\u307e\u3063\u3066\u3044\u308b\uff01\u3068\u3044\u3046\u300c\u8a73\u7d30\u5ea6\u306b\u82e6\u3057\u3081\u3089\u308c\u305f\u300d\u7d4c\u9a13\u306f\u8ab0\u3057\u3082\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>WordPress\u306a\u3069\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306eCSS\u3084\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u306eCSS\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3069\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u512a\u5148\u3055\u308c\u3066\u3057\u307e\u3044\u3001<code>!important<\/code>\u3092\u3064\u3051\u3066\u5bfe\u5fdc\u3057\u305f\u3089\u5225\u306e\u90e8\u5206\u306b\u5f71\u97ff\u304c\u2026\u2026\uff01\u306a\u3069\u306a\u3069\u3001\u3088\u304f\u3042\u308b\u3053\u3068\u3067\u3059\u3088\u306d\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u3092\u89e3\u6c7a\u3067\u304d\u308b\u306e\u304c\u3001<code>@layer<\/code>\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"700\" data-pen-title=\"@layer demo\" data-default-tab=\"css,result\" data-slug-hash=\"vEKgybr\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 700px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/vEKgybr\">\n  @layer demo<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p><code>@layer reset, base, components, utilities;<\/code>\u306e\u3088\u3046\u306b\u3001\u512a\u5148\u9806\u4f4d\u3092\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u3001\u3042\u3068\u306f\u5404\u30ec\u30a4\u30e4\u30fc\u3054\u3068\u306b<code>@layer reset { \/\/\u30bb\u30ec\u30af\u30bf\u3054\u3068\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u66f8\u304f }<\/code>\u306e\u3088\u3046\u306a\u5f62\u3067\u66f8\u304f\u3053\u3068\u3067\u30ec\u30a4\u30e4\u30fc\u3054\u3068\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u66f8\u304f\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002\u3053\u306e\u3068\u304d\u3001<strong>\u5f8c\u308d\u306b\u66f8\u3044\u305f\u30ec\u30a4\u30e4\u30fc\u304c\u3088\u308a\u512a\u5148\u3055\u308c\u308b<\/strong>\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u8a2d\u8a08\u304c\u3081\u3061\u3083\u304f\u3061\u3083\u3060\u3068\u3053\u308c\u306f\u3053\u308c\u3067\u3068\u3093\u3067\u3082\u306a\u3044\u3053\u3068\u306b\u306a\u308a\u305d\u3046\u3060\u3051\u3069\u3001\u3061\u3083\u3093\u3068\u8a2d\u8a08\u3059\u308c\u3070\u4f7f\u3048\u305d\u3046\u3002<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/@layer\" target=\"_blank\" rel=\"noreferrer noopener\">@layer - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h3 id=\"i-5-2\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-5-2\"><\/span>@scope\u2014\u2014\u30b9\u30bf\u30a4\u30eb\u306e\u52b9\u679c\u7bc4\u56f2\u3092\u8a2d\u5b9a\u3067\u304d\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>CSS\u306f\u57fa\u672c\u7684\u306b\u8a2d\u5b9a\u3057\u305f\u30b9\u30bf\u30a4\u30eb\u304c\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u52b9\u3044\u3066\u3057\u307e\u3044\u307e\u3059\u3002\u3053\u308c\u3092\u907f\u3051\u308b\u305f\u3081\u306b\u3001BEM\u3092\u4f7f\u3063\u3066\u9577\u3044\u30af\u30e9\u30b9\u540d\u3092\u5168\u3066\u306e\u8981\u7d20\u306b\u8a2d\u5b9a\u3057\u305f\u308a\u3001CSS Modules\u3092\u6d3b\u7528\u3057\u305f\u308a\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001<code>@scope<\/code>\u3092\u4f7f\u3046\u3068\u3088\u308a\u7c21\u5358\u306b\u8a18\u8ff0\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">@scope (.card) {\n \/* .card \u306e\u4e2d\u306e\u307f\u9069\u7528 *\/\n  h2 {\n    font-size: 1.2rem;\n    color: #333;\n  }\n\n  p {\n    line-height: 1.8;\n  }\n}\n\n@scope (.card) to (.card__footer) {\n  \/* .card \u306e\u4e2d\u3060\u3051\u3069 .card__footer \u306e\u4e2d\u306f\u9664\u5916 *\/\n  p { color: #666; }\n}<\/code><\/pre>\n\n\n\n<p><code>@scope(.card)<\/code>\u5185\u306eCSS\u306f\u3001 <code>.card<\/code> \u306e\u4e2d\u3060\u3051\u306b\u52b9\u304d\u307e\u3059\u3002<code>.card<\/code> \u306e\u5916\u306b\u3042\u308b <code>h2<\/code> \u3084<code>p<\/code>\u306b\u306f\u4e00\u5207\u5f71\u97ff\u3057\u307e\u305b\u3093\u3002\u307e\u305f\u3001<strong><code>to<\/code> \u3092\u4f7f\u3063\u3066\u9664\u5916\u306e\u8a2d\u5b9a\u3082\u53ef\u80fd<\/strong>\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"700\" data-pen-title=\"@scope demo\" data-default-tab=\"css,result\" data-slug-hash=\"RNRKKNe\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 700px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/RNRKKNe\">\n  @scope demo<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg\" alt=\"\" class=\"wp-image-18618\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-150x150.jpeg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon-300x300.jpeg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-icon.jpeg 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u5e83\u5831\u306eN\u6751<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u3053\u308c\u3082\u4e0a\u624b\u304f\u8a2d\u8a08\u3067\u304d\u308c\u3070\u4e0a\u624b\u304f\u6d3b\u7528\u3067\u304d\u305d\u3046\u3002\u4e0a\u624b\u304f\u8a2d\u8a08\u3067\u304d\u308c\u3070\u2026\u2026\u3002<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@scope\" target=\"_blank\" rel=\"noreferrer noopener\">@scope - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h3 id=\"i-5-3\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-5-3\"><\/span>@property\u2014\u2014CSS\u5909\u6570\u306b\u300c\u578b\u300d\u3092\u3064\u3051\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u304d\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>CSS\u5909\u6570\uff08\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\uff09\u306f <code>--color: #ff0000<\/code> \u306e\u3088\u3046\u306b\u4f7f\u3048\u3066\u4fbf\u5229\u3067\u3059\u304c\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u3068\u3063\u3066\u306f\u305f\u3060\u306e\u6587\u5b57\u5217\u3002\u306a\u306e\u3067\u3001CSS\u5909\u6570\u3092\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3084\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5bfe\u8c61\u306b\u3057\u3066\u3082\u3001\u88dc\u9593\uff08\u4e2d\u9593\u306e\u5024\u3092\u8a08\u7b97\u3059\u308b\u3053\u3068\uff09\u304c\u3067\u304d\u305a\u3001\u30d1\u30c3\u3068\u5207\u308a\u66ff\u308f\u308b\u3060\u3051\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3067\u3059\u304c\u3001<strong><code>@property<\/code><\/strong> \u3067\u578b\u3092\u5ba3\u8a00\u3059\u308b\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u4e2d\u9593\u5024\u3092\u8a08\u7b97\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">@property --hue {\n  syntax: \"&lt;number&gt;\";\/\/\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u578b\u5b9a\u7fa9\n  inherits: false;\n  initial-value: 0;\n}\n\n.gradient-box {\n  --hue: 0;\n  background: linear-gradient(\n    to right,\n    oklch(0.7 0.15 var(--hue)),\n    oklch(0.7 0.15 calc(var(--hue) + 60))\n  );\n  transition: --hue 1s;\n}\n\n.gradient-box:hover {\n  --hue: 180;\n}<\/code><\/pre>\n\n\n\n<p>\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306b\u3059\u308b\u305f\u3081\u306e\u8272\u306e\u8a08\u7b97\u3084\u3001\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7\u3001\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u306a\u3069\u306b\u6d3b\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"500\" data-pen-title=\"@property demo01\" data-default-tab=\"css,result\" data-slug-hash=\"qENRRqY\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/qENRRqY\">\n  @property demo01<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p class=\"codepen\" data-theme-id=\"dark\" data-height=\"400\" data-pen-title=\"@property demo02\" data-default-tab=\"css,result\" data-slug-hash=\"RNRKKVd\" data-user=\"fgtngrmu-the-styleful\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\/pen\/RNRKKVd\">\n  @property demo02<\/a> by \u5e83\u5831\u306eN\u6751 (<a href=\"https:\/\/codepen.io\/fgtngrmu-the-styleful\">@fgtngrmu-the-styleful<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<div class=\"sanko\">\r\n  <\/p>\n\n\n\n<p>\u53c2\u8003\uff1a\u300c<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/@property\" target=\"_blank\" rel=\"noreferrer noopener\">@property - MDN Web Docs<\/a>\u300d<\/p>\n\n\n\n<p>\r\n<\/div>\n\n\n\n<h2 id=\"i-6\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i-6\"><\/span>\u307e\u3068\u3081<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u8fd1\u5e74\u65b0\u3057\u304f\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308bCSS\u306e\u4e2d\u3067\u3082\u3001\u7279\u306b\u4e3b\u8981\u30d6\u30e9\u30a6\u30b6\u3067\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u3082\u306e\u3092\u96c6\u3081\u3066\u307f\u307e\u3057\u305f\u3002\u65b0\u3057\u3044\u3053\u3068\u3092\u3059\u308b\u3088\u308a\u3082\u6163\u308c\u305f\u65b9\u6cd5\u3067\u66f8\u3044\u305f\u65b9\u304c\u697d\u3060\u3063\u305f\u308a\u3059\u308b\u306e\u3067\u3001\u304c\u3063\u3064\u308a\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u3057\u306a\u304f\u306a\u3063\u305f\u6700\u8fd1\u306f\u308d\u304f\u306b\u60c5\u5831\u3092\u8ffd\u3063\u3066\u3044\u306a\u304b\u3063\u305f\u308a\u3001\u77e5\u3063\u3066\u3044\u3066\u3082\u308f\u3056\u308f\u3056\u4f7f\u308f\u306a\u304b\u3063\u305f\u308a\u3001\u3068\u3044\u3046\u3053\u3068\u304c\u591a\u304b\u3063\u305f\u3067\u3059\u3002\u3067\u3059\u304c\u3001\u3055\u3059\u304c\u306b\u3053\u3053\u307e\u3067\u5909\u308f\u3063\u3066\u3044\u308b\u3068\u3061\u3083\u3093\u3068\u77e5\u3063\u3066\u304a\u304b\u306a\u304d\u3083\uff01\u3068\u3044\u3046\u6c17\u6301\u3061\u306b\u3055\u305b\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u6700\u8fd1\u306fAI\u30c4\u30fc\u30eb\u3092\u4f7f\u3063\u3066\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u5834\u9762\u3082\u5897\u3048\u3066\u304d\u3066\u3001\u300c\u81ea\u5206\u306e\u624b\u3067\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u300d\u6a5f\u4f1a\u81ea\u4f53\u306f\u6e1b\u3063\u3066\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u3067\u3082\u3001<strong>\u4eca\u306eCSS\u3067\u4f55\u304c\u3067\u304d\u308b\u306e\u304b\u3092\u77e5\u3089\u306a\u3044\u307e\u307e\u6307\u793a\u3092\u51fa\u3059\u3068\u3001\u6307\u793a\u305d\u306e\u3082\u306e\u304c\u53e4\u304f\u306a\u308b<\/strong>\u3067\u3057\u3087\u3046\u3002\u53e4\u3044\u77e5\u8b58\u306e\u307e\u307e\u306e\u6307\u793a\u3067\u3082\u52d5\u304f\u3082\u306e\u306f\u51fa\u3066\u304f\u308b\u3051\u3069\u3001\u4eca\u306a\u3089\u3082\u3063\u3068\u30b7\u30f3\u30d7\u30eb\u306b\u66f8\u3051\u308b\u2014\u2014\u305d\u3046\u3044\u3046\u9078\u629e\u80a2\u3092\u77e5\u3063\u3066\u3044\u308b\u3053\u3068\u306f\u4eca\u5f8c\u3082\u3042\u308b\u7a0b\u5ea6\u91cd\u8981\u3058\u3083\u306a\u3044\u304b\u306a\u3068\u601d\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div class=\"wp-block-snow-monkey-blocks-balloon smb-balloon\" style=\"--smb-balloon--background-color:#f9f9f9;--smb-balloon--border-color:#f9f9f9\"><div class=\"smb-balloon__person\"><div class=\"smb-balloon__figure\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-moderngirl-icon-150x150.jpg\" alt=\"\" class=\"wp-image-44504\" srcset=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-moderngirl-icon-150x150.jpg 150w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-moderngirl-icon-300x300.jpg 300w, https:\/\/asue.jp\/blog\/wp-content\/uploads\/nmura-moderngirl-icon.jpg 640w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><div class=\"smb-balloon__name\">\u30e2\u30c0\u30f3\u30ac\u30fc\u30eb\u306eN\u6751\u300c\u3053\u308c\u3067\u308f\u305f\u3057\u3082\u30e2\u30c0\u30f3\u306a\u5973\u300d<\/div><\/div><div class=\"smb-balloon__body is-layout-constrained wp-block-snow-monkey-blocks-balloon-is-layout-constrained\">\n<p>\u81ea\u5206\u3067\u66f8\u304f\u306b\u3042\u305f\u3063\u3066\u306f\u7e70\u308a\u8fd4\u3057\u4f7f\u3046\u6a5f\u4f1a\u304c\u306a\u3044\u306e\u3067\u306a\u304b\u306a\u304b\u8eab\u306b\u3064\u304b\u306a\u3044\u6c17\u3082\u3059\u308b\u304c\u3001\u6307\u793a\u3068\u3057\u3066\u306f\u4f7f\u3048\u305d\u3046\u306a\u306e\u3067\u3084\u3063\u3071\u308a\"\u77e5\u3063\u3066\u308b\"\u3053\u3068\u306f\u91cd\u8981\u3067\u3059\u306d\u3002<\/p>\n<\/div><\/div>\n\n\n\n<p>ASUE\u901a\u4fe1\u3067\u306f\u3001\u305f\u307e\u301c\u306bWeb\u5236\u4f5c\u7684\u306a\u60c5\u5831\u3082\u4ea4\u3048\u3064\u3064Web\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u3092\u8ef8\u3068\u3057\u305f\u60c5\u5831\u767a\u4fe1\u3092\u884c\u3063\u3066\u304a\u308a\u307e\u3059\uff01<\/p>\n\n\n\n<p>\u6c17\u306b\u306a\u308b\u65b9\u306f\u305c\u3072\u30e1\u30eb\u30de\u30ac\u306b\u3054\u767b\u9332\u3044\u305f\u3060\u3051\u307e\u3059\u3068\u5e78\u3044\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\uff01 ASUE\u682a\u5f0f\u4f1a\u793e \u5e83\u5831\u306eN\u6751\u3067\u3059\u3002ASUE\u306b\u306f\u5b9f\u306fWeb\u30b3\u30fc\u30c0\u30fc\u3068\u3057\u3066\u5165\u793e\u3057\u3066\u3044\u308b\u306e\u3067\u3001HTML\u3001CSS\u3001JS\u3001PHP\u3042\u305f\u308a\u306a\u3089\u3061\u3087\u3063\u3068\u308f\u304b\u308a\u307e\u3059\u3002 \u3055\u3066\u3001Web\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u5185\u3067CSS\u3092\u4f7f\u3063\u3066\u8981\u7d20\u3092\u6a2a\u4e26 [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":44516,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_mbp_gutenberg_autopost":false,"footnotes":""},"categories":[116,1016],"tags":[],"recommend":[],"exclude_related":[],"class_list":["post-44432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web_creation","category-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002 - \u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/asue.jp\/blog\/?p=44432\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002 - \u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE\" \/>\n<meta property=\"og:description\" content=\"\u3053\u3093\u306b\u3061\u306f\uff01 ASUE\u682a\u5f0f\u4f1a\u793e \u5e83\u5831\u306eN\u6751\u3067\u3059\u3002ASUE\u306b\u306f\u5b9f\u306fWeb\u30b3\u30fc\u30c0\u30fc\u3068\u3057\u3066\u5165\u793e\u3057\u3066\u3044\u308b\u306e\u3067\u3001HTML\u3001CSS\u3001JS\u3001PHP\u3042\u305f\u308a\u306a\u3089\u3061\u3087\u3063\u3068\u308f\u304b\u308a\u307e\u3059\u3002 \u3055\u3066\u3001Web\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u5185\u3067CSS\u3092\u4f7f\u3063\u3066\u8981\u7d20\u3092\u6a2a\u4e26 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/asue.jp\/blog\/?p=44432\" \/>\n<meta property=\"og:site_name\" content=\"\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-07T22:55:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/asue.jp\/blog\/wp-content\/uploads\/img-moderncss-eyecatch02-re.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1040\" \/>\n\t<meta property=\"og:image:height\" content=\"520\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"\u5e83\u5831\u306eN\u6751\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Nmura_asue\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u5e83\u5831\u306eN\u6751\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"26\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432\"},\"author\":{\"name\":\"\u5e83\u5831\u306eN\u6751\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/#\\\/schema\\\/person\\\/c6a224deda907c842bd8be45f33af462\"},\"headline\":\"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002\",\"datePublished\":\"2026-04-07T22:55:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432\"},\"wordCount\":385,\"image\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asue.jp\\\/blog\\\/wp-content\\\/uploads\\\/img-moderncss-eyecatch02-re.jpg\",\"articleSection\":[\"LP\u5236\u4f5c\u30fbWeb\u30b5\u30a4\u30c8\u5236\u4f5c\",\"Web\u30b5\u30a4\u30c8\u5236\u4f5c\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432\",\"url\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432\",\"name\":\"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002 - \u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asue.jp\\\/blog\\\/wp-content\\\/uploads\\\/img-moderncss-eyecatch02-re.jpg\",\"datePublished\":\"2026-04-07T22:55:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/#\\\/schema\\\/person\\\/c6a224deda907c842bd8be45f33af462\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432#primaryimage\",\"url\":\"https:\\\/\\\/asue.jp\\\/blog\\\/wp-content\\\/uploads\\\/img-moderncss-eyecatch02-re.jpg\",\"contentUrl\":\"https:\\\/\\\/asue.jp\\\/blog\\\/wp-content\\\/uploads\\\/img-moderncss-eyecatch02-re.jpg\",\"width\":1040,\"height\":520},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?p=44432#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/asue.jp\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/asue.jp\\\/blog\\\/\",\"name\":\"\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE\",\"description\":\"\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u306e\u304a\u5f79\u7acb\u3061\u60c5\u5831\u3092\u66f4\u65b0\u4e2d\u3002\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u8005\u306e\u65b9\u3084\u5e83\u544a\u4ee3\u7406\u5e97\u306e\u65b9\u306b\u3054\u8cfc\u8aad\u3092\u3044\u305f\u3060\u3044\u3066\u304a\u308a\u307e\u3059\u3002\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/#\\\/schema\\\/person\\\/c6a224deda907c842bd8be45f33af462\",\"name\":\"\u5e83\u5831\u306eN\u6751\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/asue.jp\\\/blog\\\/wp-content\\\/uploads\\\/cropped-nmura-icon-96x96.jpeg\",\"url\":\"https:\\\/\\\/asue.jp\\\/blog\\\/wp-content\\\/uploads\\\/cropped-nmura-icon-96x96.jpeg\",\"contentUrl\":\"https:\\\/\\\/asue.jp\\\/blog\\\/wp-content\\\/uploads\\\/cropped-nmura-icon-96x96.jpeg\",\"caption\":\"\u5e83\u5831\u306eN\u6751\"},\"description\":\"2016\u5e74\u5165\u793e\u3002ASUE\u682a\u5f0f\u4f1a\u793e\u5e83\u5831\u3092\u62c5\u5f53\u3002\u30e1\u30fc\u30eb\u30de\u30ac\u30b8\u30f3\u300c\u307b\u307c\u9031\u520aASUE\u901a\u4fe1\u300d\u3082\u304a\u9001\u308a\u3057\u3066\u3044\u307e\u3059\u3002\u307b\u307c\u9031\u520a\u306a\u306e\u3067\u9031\u520a\u3067\u306f\u306a\u3044\u3002\u6708\u521d\u306b\u516c\u958b\u3059\u308bWeb\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u60c5\u5831\u3092\u307e\u3068\u3081\u305f\u30c4\u30ad\u30a4\u30c1\u30b7\u30ea\u30fc\u30ba\u306f\u3061\u3083\u3093\u3068\u6708\u520a\u3067\u3059\u3002 \u8da3\u5473\u306f\u30df\u30e5\u30fc\u30b8\u30ab\u30eb\u89b3\u5287\u3002\u304a\u3059\u3059\u3081\u4f5c\u54c1\u3092\u77e5\u308a\u305f\u3044\u65b9\u306fN\u6751\u306eTwitter\u307e\u3067\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002\u30d1\u30fc\u30bd\u30ca\u30eb\u30ab\u30e9\u30fc\u306f\u30a4\u30a8\u30d9\u6625\u3002\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/Nmura_asue\"],\"url\":\"https:\\\/\\\/asue.jp\\\/blog\\\/?author=14\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002 - \u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/asue.jp\/blog\/?p=44432","og_locale":"ja_JP","og_type":"article","og_title":"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002 - \u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE","og_description":"\u3053\u3093\u306b\u3061\u306f\uff01 ASUE\u682a\u5f0f\u4f1a\u793e \u5e83\u5831\u306eN\u6751\u3067\u3059\u3002ASUE\u306b\u306f\u5b9f\u306fWeb\u30b3\u30fc\u30c0\u30fc\u3068\u3057\u3066\u5165\u793e\u3057\u3066\u3044\u308b\u306e\u3067\u3001HTML\u3001CSS\u3001JS\u3001PHP\u3042\u305f\u308a\u306a\u3089\u3061\u3087\u3063\u3068\u308f\u304b\u308a\u307e\u3059\u3002 \u3055\u3066\u3001Web\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u5185\u3067CSS\u3092\u4f7f\u3063\u3066\u8981\u7d20\u3092\u6a2a\u4e26 [&hellip;]","og_url":"https:\/\/asue.jp\/blog\/?p=44432","og_site_name":"\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE","article_published_time":"2026-04-07T22:55:00+00:00","og_image":[{"width":1040,"height":520,"url":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/img-moderncss-eyecatch02-re.jpg","type":"image\/jpeg"}],"author":"\u5e83\u5831\u306eN\u6751","twitter_card":"summary_large_image","twitter_creator":"@Nmura_asue","twitter_misc":{"\u57f7\u7b46\u8005":"\u5e83\u5831\u306eN\u6751","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"26\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/asue.jp\/blog\/?p=44432#article","isPartOf":{"@id":"https:\/\/asue.jp\/blog\/?p=44432"},"author":{"name":"\u5e83\u5831\u306eN\u6751","@id":"https:\/\/asue.jp\/blog\/#\/schema\/person\/c6a224deda907c842bd8be45f33af462"},"headline":"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002","datePublished":"2026-04-07T22:55:00+00:00","mainEntityOfPage":{"@id":"https:\/\/asue.jp\/blog\/?p=44432"},"wordCount":385,"image":{"@id":"https:\/\/asue.jp\/blog\/?p=44432#primaryimage"},"thumbnailUrl":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/img-moderncss-eyecatch02-re.jpg","articleSection":["LP\u5236\u4f5c\u30fbWeb\u30b5\u30a4\u30c8\u5236\u4f5c","Web\u30b5\u30a4\u30c8\u5236\u4f5c"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/asue.jp\/blog\/?p=44432","url":"https:\/\/asue.jp\/blog\/?p=44432","name":"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002 - \u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE","isPartOf":{"@id":"https:\/\/asue.jp\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/asue.jp\/blog\/?p=44432#primaryimage"},"image":{"@id":"https:\/\/asue.jp\/blog\/?p=44432#primaryimage"},"thumbnailUrl":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/img-moderncss-eyecatch02-re.jpg","datePublished":"2026-04-07T22:55:00+00:00","author":{"@id":"https:\/\/asue.jp\/blog\/#\/schema\/person\/c6a224deda907c842bd8be45f33af462"},"breadcrumb":{"@id":"https:\/\/asue.jp\/blog\/?p=44432#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/asue.jp\/blog\/?p=44432"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/asue.jp\/blog\/?p=44432#primaryimage","url":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/img-moderncss-eyecatch02-re.jpg","contentUrl":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/img-moderncss-eyecatch02-re.jpg","width":1040,"height":520},{"@type":"BreadcrumbList","@id":"https:\/\/asue.jp\/blog\/?p=44432#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/asue.jp\/blog"},{"@type":"ListItem","position":2,"name":"\u3048\u3063\uff01\uff1f\u305d\u308cjs\u306a\u3057\u3067\u5b9f\u88c5\u53ef\u80fd\u306a\u3093\u3067\u3059\u304b\uff1f\u2014\u2014\u300cdisplay:flex\u300d\u3067\u6642\u304c\u6b62\u307e\u3063\u3066\u3044\u305f\u5143Web\u30b3\u30fc\u30c0\u30fc\u3001\u30e2\u30c0\u30f3\u306aCSS\u3092\u5b66\u3073\u305f\u3044\u3002"}]},{"@type":"WebSite","@id":"https:\/\/asue.jp\/blog\/#website","url":"https:\/\/asue.jp\/blog\/","name":"\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u4ee3\u884c\u306a\u3089ASUE","description":"\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u306e\u304a\u5f79\u7acb\u3061\u60c5\u5831\u3092\u66f4\u65b0\u4e2d\u3002\u30ea\u30b9\u30c6\u30a3\u30f3\u30b0\u5e83\u544a\u904b\u7528\u8005\u306e\u65b9\u3084\u5e83\u544a\u4ee3\u7406\u5e97\u306e\u65b9\u306b\u3054\u8cfc\u8aad\u3092\u3044\u305f\u3060\u3044\u3066\u304a\u308a\u307e\u3059\u3002","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/asue.jp\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/asue.jp\/blog\/#\/schema\/person\/c6a224deda907c842bd8be45f33af462","name":"\u5e83\u5831\u306eN\u6751","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/cropped-nmura-icon-96x96.jpeg","url":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/cropped-nmura-icon-96x96.jpeg","contentUrl":"https:\/\/asue.jp\/blog\/wp-content\/uploads\/cropped-nmura-icon-96x96.jpeg","caption":"\u5e83\u5831\u306eN\u6751"},"description":"2016\u5e74\u5165\u793e\u3002ASUE\u682a\u5f0f\u4f1a\u793e\u5e83\u5831\u3092\u62c5\u5f53\u3002\u30e1\u30fc\u30eb\u30de\u30ac\u30b8\u30f3\u300c\u307b\u307c\u9031\u520aASUE\u901a\u4fe1\u300d\u3082\u304a\u9001\u308a\u3057\u3066\u3044\u307e\u3059\u3002\u307b\u307c\u9031\u520a\u306a\u306e\u3067\u9031\u520a\u3067\u306f\u306a\u3044\u3002\u6708\u521d\u306b\u516c\u958b\u3059\u308bWeb\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u60c5\u5831\u3092\u307e\u3068\u3081\u305f\u30c4\u30ad\u30a4\u30c1\u30b7\u30ea\u30fc\u30ba\u306f\u3061\u3083\u3093\u3068\u6708\u520a\u3067\u3059\u3002 \u8da3\u5473\u306f\u30df\u30e5\u30fc\u30b8\u30ab\u30eb\u89b3\u5287\u3002\u304a\u3059\u3059\u3081\u4f5c\u54c1\u3092\u77e5\u308a\u305f\u3044\u65b9\u306fN\u6751\u306eTwitter\u307e\u3067\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002\u30d1\u30fc\u30bd\u30ca\u30eb\u30ab\u30e9\u30fc\u306f\u30a4\u30a8\u30d9\u6625\u3002","sameAs":["https:\/\/x.com\/Nmura_asue"],"url":"https:\/\/asue.jp\/blog\/?author=14"}]}},"views":86,"_links":{"self":[{"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/44432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=44432"}],"version-history":[{"count":0,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/44432\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=\/wp\/v2\/media\/44516"}],"wp:attachment":[{"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=44432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=44432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=44432"},{"taxonomy":"recommend","embeddable":true,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Frecommend&post=44432"},{"taxonomy":"exclude_related","embeddable":true,"href":"https:\/\/asue.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fexclude_related&post=44432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}