{"id":10031,"date":"2023-05-22T09:27:00","date_gmt":"2023-05-22T00:27:00","guid":{"rendered":"https:\/\/stocker.jp\/diary\/?p=10031"},"modified":"2023-05-22T09:27:51","modified_gmt":"2023-05-22T00:27:51","slug":"new-css","status":"publish","type":"post","link":"https:\/\/stocker.jp\/diary\/new-css\/","title":{"rendered":"\u753b\u50cf\u3067\u5206\u304b\u308b\u3001\u65b0\u3057\u3044CSS"},"content":{"rendered":"\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u6bd4\u8f03\u7684\u65b0\u3057\u3044CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3084CSS\u306e\u6a5f\u80fd\u3092\u753b\u50cf\u3067\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002<br>2021\u5e74\u306bTwitter\u3067\u300c1\u679a\u306e\u753b\u50cf\u3067\u65b0\u3057\u3044CSS\u304c\u308f\u304b\u308b\u300d\u3068\u3044\u3046\u9023\u8f09\u3092\u3057\u3066\u3044\u3066\u30012023\u5e74\u306b\u65b0\u3057\u3044\u30d6\u30e9\u30a6\u30b6\u30fc\u306b\u3042\u308f\u305b\u3066\u518d\u5ea6\u9023\u8f09\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u305d\u306e\u6295\u7a3f\u5185\u5bb9\u3092\u307e\u3068\u3081\u3066\u89e3\u8aac\u6587\u306a\u3069\u3092\u30d6\u30e9\u30c3\u30b7\u30e5\u30a2\u30c3\u30d7\u3057\u305f\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<p>IE11\u306e\u30b5\u30dd\u30fc\u30c8\u304c\u7d42\u4e86\u3057\u305f\u3053\u3068\u3067\u3001\u307b\u3068\u3093\u3069\u306eCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3084CSS\u306e\u6a5f\u80fd\u304c\u5229\u7528\u53ef\u80fd\u306b\u306a\u3063\u305f\u306e\u3067\u3001\u305c\u3072\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u753b\u50cf\u30fbCODEPEN\u4f5c\u6210\u5354\u529b: <a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/works_emi\" target=\"_blank\">emi<\/a>\u3055\u3093<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"backdrop-filter_blur_%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%81%BC%E3%81%8B%E3%81%97%E8%A1%A8%E7%8F%BE\"><\/span>backdrop-filter:blur() \u3092\u4f7f\u3063\u305f\u307c\u304b\u3057\u8868\u73fe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-backdrop-filter-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10033\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-backdrop-filter-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-backdrop-filter-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-backdrop-filter-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-backdrop-filter-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>backdrop-filter:blur()\u306e\u4e2d\u306e\u6570\u5024\u3092\u5927\u304d\u304f\u3059\u308b\u307b\u3069\u3001\u5f37\u3044\u307c\u304b\u3057\u3092\u304b\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u306eCODEPEN\u5185\u306e\uff3bCSS\uff3d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001CSS\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKmbZXX\" src=\"\/\/codepen.io\/anon\/embed\/KKmbZXX?height=450&amp;theme-id=1&amp;slug-hash=KKmbZXX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKmbZXX\" title=\"CodePen Embed KKmbZXX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>\u80cc\u666f\u306b\u5199\u771f\u3092\u6307\u5b9a\u3057\u305f .box \u8981\u7d20\u5185\u306b .blur \u3092\u914d\u7f6e\u3057\u3001backdrop-filter:blur(10px); \u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305d\u306e\u524d\u306e\u884c\u306e -webkit-backdrop-filter:blur(10px); \u306f\u3001Safari\u306a\u3069\u306e\u305f\u3081\u306b\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u4ed8\u304d\u3067\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"background-clip_%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A6%81%E7%B4%A0%E3%81%AE%E8%83%8C%E6%99%AF%E3%81%AE%E8%A1%A8%E7%A4%BA%E9%A0%98%E5%9F%9F%E3%82%92%E6%8C%87%E5%AE%9A\"><\/span>background-clip \u3092\u4f7f\u3063\u3066\u8981\u7d20\u306e\u80cc\u666f\u306e\u8868\u793a\u9818\u57df\u3092\u6307\u5b9a<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u753b\u50cf\u3092\u3054\u89a7\u9802\u304f\u3068\u3001\u80cc\u666f\u306e\u9752\u3044\u753b\u50cf\u304c\u8981\u7d20\u306e\u7aef\u306e\u9ec4\u8272\u3044\u5883\u754c\u7dda\u307e\u3067\u5c4a\u3044\u3066\u3044\u305f\u308a\u3044\u306a\u304b\u3063\u305f\u308a\u3068\u3044\u3046\u9055\u3044\u304c\u5206\u304b\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-background-clip-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10048\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-background-clip-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-background-clip-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-background-clip-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-background-clip-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>\u53f3\u7aef\u306eTEXT\u306e\u3088\u3046\u306b\u3001\u753b\u50cf\u3092\u30c6\u30ad\u30b9\u30c8\u306e\u5f62\u306b\u5207\u308a\u629c\u304f\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjNzOyR\" src=\"\/\/codepen.io\/anon\/embed\/JjNzOyR?height=450&amp;theme-id=1&amp;slug-hash=JjNzOyR&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjNzOyR\" title=\"CodePen Embed JjNzOyR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"linear-gradient_%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3\"><\/span>linear-gradient() \u3092\u4f7f\u3063\u305f\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>linear-gradient() \u306f\u3001\u30b7\u30f3\u30d7\u30eb\u306b\u958b\u59cb\u30fb\u7d42\u4e86\u8272\u3092\u6307\u5b9a\u3057\u3066\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u63cf\u304f\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3057\u3001\u65b9\u5411\u3084\u4f4d\u7f6e\u3092\u7d30\u304b\u304f\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion1-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10049\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion1-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion1-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion1-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion1-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>\u753b\u50cf\u4e0b\u306e\u6a2a\u5411\u304d\u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3067\u306fpink\u306e\u5360\u3081\u308b\u9762\u7a4d\u3092\u5e83\u304f\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3001\u300c70%\u300d\u3068\u3044\u3046\u6307\u5b9a\u3092\u5165\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"repeating-linear-gradient_%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%83%88%E3%83%A9%E3%82%A4%E3%83%97%E6%A8%A1%E6%A7%98\"><\/span>repeating-linear-gradient() \u3092\u4f7f\u3063\u305f\u30b9\u30c8\u30e9\u30a4\u30d7\u6a21\u69d8<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>repeating-linear-gradient() \u3092\u4f7f\u3046\u3068\u3001\u53cd\u5fa9\u7dda\u5f62\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3084\u30b9\u30c8\u30e9\u30a4\u30d7\u6a21\u69d8\u3092\u63cf\u304f\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion2-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10050\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion2-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion2-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion2-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-gradetion2-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>\u4ee5\u4e0b\u306eCODEPEN\u3067\u3001linear-gradient() \u3068\u3042\u308f\u305b\u305fHTML\u30fbCSS\u30b5\u30f3\u30d7\u30eb\u304c\u3054\u78ba\u8a8d\u9802\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaZjBNK\" src=\"\/\/codepen.io\/anon\/embed\/BaZjBNK?height=450&amp;theme-id=1&amp;slug-hash=BaZjBNK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaZjBNK\" title=\"CodePen Embed BaZjBNK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"text-shadow_%E3%81%A7%E3%81%8A%E3%81%97%E3%82%83%E3%82%8C%E3%81%AA%E8%A3%85%E9%A3%BE%E3%82%92%E4%BD%9C%E3%82%8B\"><\/span>text-shadow \u3067\u304a\u3057\u3083\u308c\u306a\u88c5\u98fe\u3092\u4f5c\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>text-shadow \u306f\u3001\u4e00\u822c\u7684\u306b\u306f\u30c6\u30ad\u30b9\u30c8\u306e\u53f3\u4e0b\u306b\u307c\u304b\u3057\u305f\u5f71\u3092\u4ed8\u3051\u308b\u3068\u304d\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<br>\u3057\u304b\u3057\u3001\u307c\u304b\u3057\u30920\u306b\u3057\u305f\u308a\u8272\u3092\u4ed8\u3051\u308b\u3053\u3068\u3067\u3001\u304a\u3057\u3083\u308c\u306a\u88c5\u98fe\u3092\u4f5c\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-text-shadow-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10051\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-text-shadow-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-text-shadow-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-text-shadow-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-text-shadow-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_powydgV\" src=\"\/\/codepen.io\/anon\/embed\/powydgV?height=450&amp;theme-id=1&amp;slug-hash=powydgV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed powydgV\" title=\"CodePen Embed powydgV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"box-shadow_%E3%81%A7%E8%A3%85%E9%A3%BE%E6%9E%A0%E3%82%92%E4%BD%9C%E3%82%8B\"><\/span>box-shadow \u3067\u88c5\u98fe\u67a0\u3092\u4f5c\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>text-shadow \u306f\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u5f71\u3092\u4ed8\u3051\u308b\u306e\u306b\u5bfe\u3057\u3001box-shadow \u306fdiv\u8981\u7d20\u306a\u3069\u306b\u5f71\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307c\u304b\u3057\u30920\u306b\u3057\u3066\u30ab\u30f3\u30de\u533a\u5207\u308a\u3067\u8907\u6570\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u88c5\u98fe\u67a0\u3092\u4f5c\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-shadow-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10052\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-shadow-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-shadow-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-shadow-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-shadow-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwWKQqV\" src=\"\/\/codepen.io\/anon\/embed\/VwWKQqV?height=450&amp;theme-id=1&amp;slug-hash=VwWKQqV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwWKQqV\" title=\"CodePen Embed VwWKQqV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"prefers-color-scheme_%E3%81%A7%E3%83%80%E3%83%BC%E3%82%AF%E3%83%A2%E3%83%BC%E3%83%89%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E6%A4%9C%E5%87%BA%E3%81%99%E3%82%8B\"><\/span>prefers-color-scheme \u3067\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u304b\u691c\u51fa\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>prefers-color-scheme \u306f\u3001OS\u7b49\u306e\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u304c\u30aa\u30f3\u306b\u306a\u3063\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3067\u6761\u4ef6\u5206\u5c90\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br>\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u3068\u306f\u3001OS\u306e\u8a2d\u5b9a\u3067\u30a6\u30a4\u30f3\u30c9\u30a6\u306a\u3069\u3092\u6697\u3044\u8272\u3001\u30c6\u30ad\u30b9\u30c8\u3092\u660e\u308b\u3044\u8272\u306b\u6307\u5b9a\u3057\u305f\u308a\u3001\u6642\u9593\u5e2f\u306b\u3088\u3063\u3066\u8272\u3092\u5909\u3048\u308b\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-prefers-color-scheme-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10053\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-prefers-color-scheme-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-prefers-color-scheme-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-prefers-color-scheme-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-prefers-color-scheme-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>\u4e00\u90e8\u306eWeb\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u30c6\u30fc\u30de\u3092\u6697\u3044\u8272\u306b\u3057\u305f\u308a\u3001\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306a\u3069\u306e\u8a2d\u5b9a\u3067\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u3092\u30aa\u30f3\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CODEPEN\u3067\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u306e\u72b6\u614b\u3092\u78ba\u8a8d\u3059\u308b\u306b\u306f\u3001OS\u7b49\u306e\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u6a5f\u80fd\u3092\u30aa\u30f3\u306b\u3057\u3066\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwWKBgL\" src=\"\/\/codepen.io\/anon\/embed\/VwWKBgL?height=450&amp;theme-id=1&amp;slug-hash=VwWKBgL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwWKBgL\" title=\"CodePen Embed VwWKBgL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"transform_rotateY_%E3%81%AB%E3%82%88%E3%82%8B%E7%AB%8B%E4%BD%93%E7%9A%84%E3%81%AA%E5%9B%9E%E8%BB%A2\"><\/span>transform: rotateY() \u306b\u3088\u308b\u7acb\u4f53\u7684\u306a\u56de\u8ee2<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>transform: rotateY() \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001Y\u8ef8\uff08\u7e26\u8ef8\uff09\u3092\u4e2d\u5fc3\u306b\u8981\u7d20\u3092\u7acb\u4f53\u7684\u306b\u56de\u8ee2\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br>\u3053\u306e\u753b\u50cf\u306e\u4f8b\u3067\u306f\u3001\u5de6\u306e\u5199\u771f\u306e .card \u306b\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u3092\u4e57\u305b\u308b\u3068\u3001\u53f3\u306e\u5199\u771f\u306e .card:hover \u306e\u3088\u3046\u306bY\u8ef8\uff08\u7e26\u8ef8\uff09\u3092\u4e2d\u5fc3\u306b\u7acb\u4f53\u7684\u306b\u56de\u8ee2\u3057\u3001\u53cd\u8ee2\u3057\u305f\u8868\u793a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-rotateY.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10054\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-rotateY.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-rotateY.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-rotateY.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-rotateY.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>CODEPEN\u3067\u306f\u3001PC\u3067\u5199\u771f\u306b\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u3092\u4e57\u305b\u308b\u3068\u8981\u7d20\u306e\u56de\u8ee2\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNOXbWe\" src=\"\/\/codepen.io\/anon\/embed\/WNOXbWe?height=450&amp;theme-id=1&amp;slug-hash=WNOXbWe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNOXbWe\" title=\"CodePen Embed WNOXbWe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"aspect-ratio_%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%84%E5%8B%95%E7%94%BB%E3%81%AE%E3%82%A2%E3%82%B9%E3%83%9A%E3%82%AF%E3%83%88%E6%AF%94%E3%82%92%E4%BF%9D%E6%8C%81%E3%81%99%E3%82%8B\"><\/span>aspect-ratio \u3067\u753b\u50cf\u3084\u52d5\u753b\u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092\u4fdd\u6301\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>aspect-ratio \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u3082\u3068\u306e\u753b\u50cf\u3084\u52d5\u753b\u306e\u7e26\u6a2a\u6bd4\u306b\u95a2\u4fc2\u306a\u304f\u6b63\u65b9\u5f62\u306b\u8868\u793a\u3057\u305f\u3044\u3001\u4e00\u822c\u7684\u306a\u52d5\u753b\u3084TV\u756a\u7d44\u306e\u3088\u3046\u306b16:9\u3067\u8868\u793a\u3057\u305f\u3044\u3068\u3044\u3063\u305f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-aspect-ratio-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10055\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-aspect-ratio-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-aspect-ratio-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-aspect-ratio-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-aspect-ratio-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>CODEPEN\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u4e0b2\u3064\u304c\u52d5\u753b\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjJeGPX\" src=\"\/\/codepen.io\/anon\/embed\/JjJeGPX?height=450&amp;theme-id=1&amp;slug-hash=JjJeGPX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjJeGPX\" title=\"CodePen Embed JjJeGPX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"mix-blend-mode_%E3%81%A7%E3%80%81%E8%A6%81%E7%B4%A0%E3%81%AE%E9%87%8D%E3%81%AA%E3%82%8B%E9%83%A8%E5%88%86%E3%81%AE%E8%A6%8B%E3%81%88%E6%96%B9%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B\"><\/span>mix-blend-mode \u3067\u3001\u8981\u7d20\u306e\u91cd\u306a\u308b\u90e8\u5206\u306e\u898b\u3048\u65b9\u3092\u5909\u66f4\u3059\u308b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>mix-blend-mode \u3092\u4f7f\u3046\u3068\u3001Photoshop\u3067\u30ec\u30a4\u30e4\u30fc\u306e\u63cf\u753b\u30e2\u30fc\u30c9\u3092\uff3b\u4e57\u7b97\uff3d\uff3b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\uff3d\u306b\u5909\u3048\u308b\u3088\u3046\u306b\u3001\u91cd\u306a\u3063\u305f\u90e8\u5206\u306e\u898b\u3048\u65b9\u3092\u5909\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-mix-blend-mode-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10056\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-mix-blend-mode-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-mix-blend-mode-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-mix-blend-mode-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-mix-blend-mode-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>CODEPEN\u3067\u767d\u3044\u9818\u57df\u3092\u53f3\u30af\u30ea\u30c3\u30af\u3057\u3066\uff3b\u30d5\u30ec\u30fc\u30e0\u3092\u518d\u8aad\u307f\u8fbc\u307f\uff3d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u5225\u306e\u5199\u771f\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwgmPGK\" src=\"\/\/codepen.io\/anon\/embed\/RwgmPGK?height=450&amp;theme-id=1&amp;slug-hash=RwgmPGK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwgmPGK\" title=\"CodePen Embed RwgmPGK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%A4%89%E6%95%B0%EF%BC%88%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%EF%BC%89\"><\/span>\u5909\u6570\uff08\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u300c\u30b5\u30a4\u30c8\u5168\u4f53\u3084\u30da\u30fc\u30b8\u5168\u4f53\u3067\u3053\u306e\u8272\u3092\u4f7f\u3044\u305f\u3044\u300d\u300c\u3053\u306e\u5024\u3092\u4f7f\u3044\u56de\u3057\u305f\u3044\u300d\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u308c\u3070\u3001\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\uff08CSS\u5909\u6570\u3084\u30ab\u30b9\u30b1\u30fc\u30c9\u5909\u6570\u3068\u3082\u547c\u3070\u308c\u307e\u3059\uff09\u3067\u6307\u5b9a\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>\u30e1\u30a4\u30f3\u30ab\u30e9\u30fc\u3084\u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30ab\u30e9\u30fc\u306a\u3069\u3088\u304f\u4f7f\u3046\u5024\u3092\u5ba3\u8a00\u3057\u3066\u304a\u3051\u3070\u3001\u3082\u3057\u5909\u66f4\u304c\u3042\u3063\u3066\u30821\u7b87\u6240\u306e\u4fee\u6b63\u3067\u6e08\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-custom-property-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10057\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-custom-property-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-custom-property-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-custom-property-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-custom-property-1.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>CODEPEN\u3067\u306f :root \u30bb\u30ec\u30af\u30bf\u30fc\u306b\u5bfe\u3057\u3066CSS\u5909\u6570\u306e\u5ba3\u8a00\u3092\u3057\u3066\u3044\u307e\u3059\u3002<br>:root \u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001html \u30bb\u30ec\u30af\u30bf\u30fc\u3068\u307b\u307c\u540c\u7b49\u306e\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<p>13\u884c\u76ee\u306e green \u3092\u5225\u306e\u8272\u306b\u5909\u3048\u3066\u307f\u308b\u3068\u3001\u5909\u5316\u304c\u5206\u304b\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"custom-property\" id=\"cp_embed_bGROxoK\" src=\"https:\/\/codepen.io\/stocker_jp\/embed\/preview\/bGROxoK?default-tabs=css%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=bGROxoK\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"box-sizing_border-box_%E3%81%A7%E8%A8%88%E7%AE%97%E3%82%92%E6%A5%BD%E3%81%AB\"><\/span>box-sizing:border-box \u3067\u8a08\u7b97\u3092\u697d\u306b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>box-sizing:border-box \u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u8981\u7d20\u306e width \u3084 height \u306b padding \u3084 border \u306e\u5024\u304c\u542b\u307e\u308c\u308b\u3088\u3046\u306b\u306a\u308b\u305f\u3081\u3001\u975e\u5e38\u306b\u8a08\u7b97\u304c\u697d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-sizing.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10058\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-sizing.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-sizing.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-sizing.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-sizing.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-box-sizing.png?resize=2048%2C1152&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>CODEPEN\u3067\u306f\u89aa\u8981\u7d20\u306e\u4e2d\u306b width:50%; padding:10px \u306e\u5b50\u8981\u7d20\u30922\u3064\u4e26\u3079\u3066\u3044\u307e\u3059\u3002<br>box-sizing:border-box \u3092\u6307\u5b9a\u3057\u305f\u3082\u306e\u306e\u307f\u30ab\u30e9\u30e0\u843d\u3061\u3057\u3066\u3044\u306a\u3044\uff08\u6a2a\u306b\u4e26\u3093\u3067\u3044\u308b\uff09\u3053\u3068\u304c\u5206\u304b\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxLVgaP\" src=\"\/\/codepen.io\/anon\/embed\/xxLVgaP?height=450&amp;theme-id=1&amp;slug-hash=xxLVgaP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxLVgaP\" title=\"CodePen Embed xxLVgaP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>2021\u5e74\u306e\u30a2\u30f3\u30b1\u30fc\u30c8\u3067\u306f\u3001\u300cbox-sizing:border-box \u3092\u5fc5\u305a\u6307\u5b9a\u3059\u308b\u300d+\u300c\u6307\u5b9a\u3059\u308b\u5834\u5408\u304c\u591a\u3044\u300d\u65b9\u306e\u5408\u8a08\u304c\u7d0480%\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/twitter.com\/Stocker_jp\/status\/1346752665884053506\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"clip-path_%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E5%88%87%E3%82%8A%E6%8A%9C%E3%81%8F\"><\/span>clip-path \u3067\u753b\u50cf\u3092\u5207\u308a\u629c\u304f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>PNG\u3084GIF\u753b\u50cf\u306f\u900f\u904e\uff08\u753b\u50cf\u306e\u4e00\u90e8\u3092\u900f\u660e\u306b\u3059\u308b\u3053\u3068\uff09\u304c\u5229\u7528\u3067\u304d\u308b\u306e\u306b\u5bfe\u3057\u3066\u3001JPEG\u753b\u50cf\u306f\u900f\u904e\u3092\u5229\u7528\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>\u3057\u304b\u3057\u3001clip-path \u3092\u4f7f\u7528\u3059\u308b\u3068\u753b\u50cf\u5f62\u5f0f\u306b\u95a2\u4fc2\u306a\u304f\u3001\u591a\u89d2\u5f62\u3084\u30d1\u30b9\uff08Illustrator\u306e\u30da\u30f3\u30c4\u30fc\u30eb\u3067\u4f5c\u308c\u308b\u5f62\uff09\u306a\u3069\u597d\u304d\u306a\u5f62\u3067\u5207\u308a\u629c\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-clip-path.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10059\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-clip-path.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-clip-path.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-clip-path.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-clip-path.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-clip-path.png?resize=2048%2C1152&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWapVvM\" src=\"\/\/codepen.io\/anon\/embed\/XWapVvM?height=450&amp;theme-id=1&amp;slug-hash=XWapVvM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWapVvM\" title=\"CodePen Embed XWapVvM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>\u300c\u8907\u96d1\u306a\u5f62\u306e\u30b3\u30fc\u30c9\u3092\u81ea\u5206\u3067\u66f8\u304f\u306e\u306f\u96e3\u3057\u3044\u300d\u3068\u3044\u3046\u65b9\u3082\u3044\u3089\u3063\u3057\u3083\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u4ee5\u4e0b\u306e\u300cCSS clip-path maker\u300d\u306a\u3069\u306eWeb\u30a2\u30d7\u30ea\u3092\u4f7f\u7528\u3059\u308b\u3068\u7c21\u5358\u306b\u30b3\u30fc\u30c9\u3092\u4f5c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br>\u8907\u96d1\u306a\u591a\u89d2\u5f62\u3092\u4f5c\u308a\u305f\u3044\u3068\u304d\u306f\u3001\uff3bCustom Polygon\uff3d\u3092\u9078\u629e\u3057\u3066\u5199\u771f\u4e0a\u306e\u8907\u6570\u7b87\u6240\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/bennettfeely.com\/clippy\/\" target=\"_blank\">Clippy \u2014 CSS clip-path maker<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"transform_skewY_%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E6%96%9C%E3%82%81%E3%81%AE%E8%83%8C%E6%99%AF\"><\/span>transform: skewY() \u3092\u4f7f\u7528\u3057\u305f\u659c\u3081\u306e\u80cc\u666f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u753b\u50cf\u3092\u4f7f\u7528\u305b\u305a transform: skewY() \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u7dba\u9e97\u306a\u659c\u3081\u306e\u7dda\u3092\u5b9f\u73fe\u3067\u304d\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30d0\u30a4\u30b9\u306b\u5bfe\u5fdc\u3057\u3084\u3059\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u753b\u50cf\u306e\u4f8b\u3067\u306f\u3001section\u5168\u4f53\u3092-3\u5ea6\u50be\u3051\u305f\u5f8c\u3001\u4e2d\u8eab\u30923\u5ea6\u50be\u3051\u3066\u6c34\u5e73\u306b\u623b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-transformskewY-1.png?resize=1000%2C563&#038;ssl=1\" alt=\"\" class=\"wp-image-10060\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-transformskewY-1.png?resize=1000%2C563&amp;ssl=1 1000w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-transformskewY-1.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-transformskewY-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-transformskewY-1.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-transformskewY-1.png?resize=2048%2C1152&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>\u8a73\u3057\u3044\u4f5c\u308a\u65b9\u306f\u3001\u4ee5\u4e0b\u306e\u8a18\u4e8b\u3067\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-stocker-jp-diary wp-block-embed-stocker-jp-diary\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"YWTRfFbK24\"><a href=\"https:\/\/stocker.jp\/diary\/triangle-css\/\">CSS\u3067\u4e09\u89d2\u5f62\u306e\u3044\u308d\u3044\u308d\u306a\u5b9f\u88c5\u4f8b<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;CSS\u3067\u4e09\u89d2\u5f62\u306e\u3044\u308d\u3044\u308d\u306a\u5b9f\u88c5\u4f8b&#8221; &#8212; Stocker.jp\/diary\" src=\"https:\/\/stocker.jp\/diary\/triangle-css\/embed\/#?secret=ZFQhUF68FH#?secret=YWTRfFbK24\" data-secret=\"YWTRfFbK24\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u6bd4\u8f03\u7684\u65b0\u3057\u3044CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3084CSS\u306e\u6a5f\u80fd\u3092\u753b\u50cf\u3067\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":10033,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"\u65b0\u3057\u3044\u8a18\u4e8b\u3092\u516c\u958b\u3057\u307e\u3057\u305f\uff01\u65b0\u3057\u3044CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3084CSS\u306e\u6a5f\u80fd\u3092\u753b\u50cf\u3067\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002\n","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[25,52],"class_list":["post-10031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-css","tag-css3"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-tw-backdrop-filter-1.png?fit=1200%2C675&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/posts\/10031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/comments?post=10031"}],"version-history":[{"count":19,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/posts\/10031\/revisions"}],"predecessor-version":[{"id":10508,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/posts\/10031\/revisions\/10508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/media\/10033"}],"wp:attachment":[{"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/media?parent=10031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/categories?post=10031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/tags?post=10031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}