{"id":9570,"date":"2021-04-27T08:00:00","date_gmt":"2021-04-26T23:00:00","guid":{"rendered":"https:\/\/stocker.jp\/diary\/?p=9570"},"modified":"2021-04-26T21:11:32","modified_gmt":"2021-04-26T12:11:32","slug":"triangle-css","status":"publish","type":"post","link":"https:\/\/stocker.jp\/diary\/triangle-css\/","title":{"rendered":"CSS\u3067\u4e09\u89d2\u5f62\u306e\u3044\u308d\u3044\u308d\u306a\u5b9f\u88c5\u4f8b"},"content":{"rendered":"\n<section class=\"a\">\n<h4>\u3053\u306e\u8a18\u4e8b\u306b\u3064\u3044\u3066<\/h4>\n<p>\u3053\u306e\u8a18\u4e8b\u306f\u3001<a href=\"https:\/\/stocker.jp\/diary\/web-design-school\/\">\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u6642\u4ee3\u306eWeb\u30c7\u30b6\u30a4\u30f3\u30b9\u30af\u30fc\u30eb<\/a> \u3084 <a href=\"https:\/\/stocker.jp\/diary\/web-coding-school\/\">Web\u5236\u4f5c\u306e\u57fa\u790e\u304b\u3089\u5b66\u3079\u308b\u300cWeb\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30af\u30fc\u30eb\u300d<\/a> \u306e\u8cc7\u6599\u5236\u4f5c\u3092\u304a\u624b\u4f1d\u3044\u3057\u3066\u9802\u3044\u3066\u3044\u308bemi\u3055\u3093\u306b\u3088\u308b\u5bc4\u7a3f\u8a18\u4e8b\u3067\u3059\u3002<\/p>\n<\/section>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/works_emi\" target=\"_blank\">emi<\/a>\u3068\u7533\u3057\u307e\u3059\u3002<a rel=\"noreferrer noopener\" href=\"https:\/\/usagidesign-e.com\" target=\"_blank\">USAGI DESIGN emi.<\/a>\u3068\u3044\u3046\u30b5\u30a4\u30c8\u3067Web\u30c7\u30b6\u30a4\u30f3\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u7df4\u7fd2\u7528\u306e\u30c7\u30b6\u30a4\u30f3\u30c7\u30fc\u30bf\u3092\u914d\u5e03\u3057\u3066\u3044\u307e\u3059\u3002\u666e\u6bb5\u306fWeb\u30c7\u30b6\u30a4\u30f3\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3001\u30e1\u30f3\u30bf\u30fc\u306a\u3069\u3092\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4e09\u89d2\u5f62\u3084\u77e2\u5370\u3092Web\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u306f\u3001PNG\u306a\u3069\u306e\u30e9\u30b9\u30bf\u30fc\u753b\u50cf\u3001SVG\u3001CSS\u3092\u4f7f\u3046\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002<br>\u5834\u9762\u306b\u5fdc\u3058\u305f\u5b9f\u88c5\u65b9\u6cd5\u3092\u9078\u3076\u3053\u3068\u3067\u3001\u8a72\u5f53\u7b87\u6240\u306b\u5909\u66f4\u304c\u3042\u3063\u305f\u5834\u5408\u306b\u5bfe\u5fdc\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u5b9f\u88c5\u65b9\u6cd5\u306b\u3088\u3063\u3066\u3069\u306e\u3088\u3046\u306a\u9055\u3044\u304c\u51fa\u308b\u306e\u304b\u30013\u3064\u306e\u30d1\u30bf\u30fc\u30f3\u3067\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u533a\u5207\u308a\u3067\u659c\u3081\u306b\u306a\u3063\u3066\u3044\u308b\u80cc\u666f<\/li><li>\u624b\u9806\u3084\u6d41\u308c\u3067\u3088\u304f\u3042\u308b\u77e2\u5370<\/li><li>before\/after\u3067\u306e\u77e2\u5370<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%8B%E3%83%B3%E3%82%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E5%8C%BA%E5%88%87%E3%82%8A%E3%81%A7%E6%96%9C%E3%82%81%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E8%83%8C%E6%99%AF\"><\/span>\u30bb\u30af\u30b7\u30e7\u30cb\u30f3\u30b0\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u533a\u5207\u308a\u3067\u659c\u3081\u306b\u306a\u3063\u3066\u3044\u308b\u80cc\u666f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-1.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9575\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-1.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-1.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-1.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>Web\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u306e\u8868\u793a\u30b5\u30f3\u30d7\u30eb<\/figcaption><\/figure>\n\n\n\n<p>\u30bb\u30af\u30b7\u30e7\u30cb\u30f3\u30b0\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u533a\u5207\u308a\u3067\u659c\u3081\u306b\u306a\u3063\u3066\u3044\u308b\u80cc\u666f\u3092\u5b9f\u73fe\u3059\u308b\u306b\u306f\u3001\u753b\u50cf\u3068CSS\u306e\u3069\u3061\u3089\u3067\u5b9f\u88c5\u3059\u308b\u3068\u6c4e\u7528\u6027\u304c\u9ad8\u304f\u306a\u308b\u3067\u3057\u3087\u3046\u304b\u3002<br>2\u3064\u306e\u65b9\u6cd5\u3067\u6bd4\u8f03\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u753b\u50cf\u3067\u5b9f\u88c5\u3057\u305f\u5834\u5408<\/h4>\n\n\n\n<p>\u307e\u305a\u753b\u50cf\u3092\u7528\u3044\u305f\u5834\u5408\u3092\u898b\u3066\u307f\u307e\u3059\u3002<br>\u753b\u50cf\u3092\u4f7f\u3046\u5834\u5408\u306f\u80cc\u666f\u753b\u50cf\u3067\u306e\u5b9f\u88c5\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u304c\u3001\u305d\u306e\u5834\u5408\u30822\u3064\u306e\u30d1\u30bf\u30fc\u30f3\u304c\u8003\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30fb\u30bb\u30af\u30b7\u30e7\u30cb\u30f3\u30b0\u30b3\u30f3\u30c6\u30f3\u30c4\u5168\u4f53\u3092\u8986\u3046\u753b\u50cf<br>\u30fb\u4e0a\u90e8\u306e\u4e09\u89d2\u5f62\uff0b\u9577\u65b9\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-2.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9576\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-2.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-2.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-2.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>\u300c\u30bb\u30af\u30b7\u30e7\u30cb\u30f3\u30b0\u30b3\u30f3\u30c6\u30f3\u30c4\u5168\u4f53\u3092\u8986\u3046\u753b\u50cf\u300d\u3068\u300c\u4e0a\u90e8\u306e\u4e09\u89d2\u5f62\uff0b\u9577\u65b9\u5f62\u300d\u300d<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">\u30bb\u30af\u30b7\u30e7\u30cb\u30f3\u30b0\u30b3\u30f3\u30c6\u30f3\u30c4\u5168\u4f53\u3092\u8986\u3046\u753b\u50cf\u3067\u6307\u5b9a\u3057\u305f\u5834\u5408<\/h5>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306aCSS\u3068\u3057\u305f\u5834\u5408\u3001PNG\u5f62\u5f0f\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3067\u4e09\u89d2\u306e\u30d1\u30fc\u30c4\u3092\u900f\u660e\u306b\u3057\u3066\u3044\u308b\u3068\u3001\u60f3\u5b9a\u3057\u3066\u3044\u305f\u3088\u308a\u3082\u9577\u3044\u6587\u7ae0\u304c\u5165\u3063\u305f\u5834\u5408\u3001\u9577\u65b9\u5f62\u3067\u5857\u3089\u308c\u305f\u3088\u3046\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>background:url(\u80cc\u666f\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u540d) no-repeat top center #ebebeb;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-3.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9577\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-3.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-3.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-3.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>PNG\u3092\u4f7f\u7528\u3057\u305f\u5834\u5408\u306e\u30b5\u30f3\u30d7\u30eb<\/figcaption><\/figure>\n\n\n\n<p>JPEG\u5f62\u5f0f\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u4e0a\u90e8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u80cc\u666f\u8272\u304c\u5909\u66f4\u306b\u306a\u3063\u305f\u308a\u3001\u6307\u5b9a\u3057\u305f\u8272\u30b3\u30fc\u30c9\u3068\u540c\u3058\u8272\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u306f\u305a\u306a\u306e\u306b\u898b\u305f\u76ee\u306f\u9055\u3063\u3066\u898b\u3048\u308b\u3002\u3068\u3044\u3046\u3053\u3068\u304c\u8d77\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-4-1.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9581\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-4-1.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-4-1.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-4-1.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>JPEG\u3092\u4f7f\u7528\u3057\u305f\u5834\u5408\u306e\u30b5\u30f3\u30d7\u30eb<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">\u4e0a\u90e8\u306e\u4e09\u89d2\u5f62\uff0b\u9577\u65b9\u5f62\u3067\u6307\u5b9a\u3057\u305f\u5834\u5408<\/h5>\n\n\n\n<p>\u4e09\u89d2\u5f62\u306e\u30d1\u30fc\u30c4\u304c\u80cc\u666f\u8272\u3067\u5857\u3089\u308c\u308b\u3053\u3068\u304c\u306a\u3044\u3088\u3046\u306b\u3001\u64ec\u4f3c\u8981\u7d20\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<br>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u304c\u5fc5\u8981\u306b\u306a\u308b\u306e\u3067\u3001Web\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u5e45\u304c\u5909\u5316\u3057\u305f\u3068\u304d\u306e\u5bfe\u5fdc\u3092\u3042\u3089\u304b\u3058\u3081\u8003\u3048\u3066\u304a\u304b\u306a\u304f\u3066\u306f\u306a\u308a\u307e\u305b\u3093\u3002<br>\u305d\u306e\u4e0a\u3067\u5b9f\u88c5\u6642\u306b\u3069\u3046\u3059\u308c\u3070\u3044\u3044\u304b\u3092\u8003\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Web\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u5e45\u306b\u5408\u308f\u305b\u3066\u753b\u50cf\u3092\u62e1\u5927\u30fb\u7e2e\u5c0f\u3055\u305b\u308b\u306e\u304b<\/li><li>\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u306f\u305d\u306e\u307e\u307e\u306b\u5e38\u306b\u753b\u50cf\u306e\u4e2d\u5fc3\u304c\u8868\u793a\u3055\u308c\u305f\u72b6\u614b\u306b\u3059\u308b\u306e\u304b<\/li><\/ul>\n\n\n\n<h6 class=\"wp-block-heading\">Web\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u5e45\u306b\u5408\u308f\u305b\u3066\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u5834\u5408<\/h6>\n\n\n\n<p>Web\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u5e45\u306b\u5408\u308f\u305b\u3066\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u5834\u5408\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3053\u3068\u304c\u60f3\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u4e0d\u8981\u306a\u9699\u9593\u304c\u3067\u304d\u308b<\/li><li>\u601d\u3046\u3088\u3046\u306a\u89d2\u5ea6\u3067\u8868\u793a\u3055\u308c\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308b\u306e\u3067\u3001background-position\u3067\u7d30\u304b\u3044\u8abf\u6574\u304c\u5fc5\u8981\u306b\u306a\u308b<\/li><li>\u30bf\u30d6\u30ec\u30c3\u30c8\u3084\u30b9\u30de\u30db\u30b5\u30a4\u30ba\u3068\u30c7\u30d0\u30a4\u30b9\u3054\u3068\u3067\u4e09\u89d2\u5f62\u306e\u753b\u50cf\u3092\u4f5c\u308a\u76f4\u3059\u5fc5\u8981\u304c\u3042\u308b<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-5.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9580\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-5.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-5.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-5.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h6 class=\"wp-block-heading\">\u753b\u50cf\u306e\u4e2d\u5fc3\u3092\u8868\u793a\u3057\u305f\u72b6\u614b<\/h6>\n\n\n\n<p>\u5fae\u5999\u306aWeb\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u5e45\u3067\u3082\u753b\u50cf\u306e\u4e2d\u5fc3\u3092\u8868\u793a\u3057\u3066\u304a\u304f\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u3053\u3068\u304c\u60f3\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u753b\u50cf\u306e\u5e45\u3068Web\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u5e45\u304c\u5408\u308f\u306a\u3044\u306e\u3067\u3001\u4e0d\u8981\u306a\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u304c\u8868\u793a\u3055\u308c\u306a\u3044\u3088\u3046\u306b\u5bfe\u5fdc\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b<\/li><li>\u601d\u3046\u3088\u3046\u306a\u89d2\u5ea6\u3067\u8868\u793a\u3055\u308c\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308b\u306e\u3067\u3001background-position\u3067\u7d30\u304b\u3044\u8abf\u6574\u304c\u5fc5\u8981\u306b\u306a\u308b<\/li><li>PC\u3067\u8868\u793a\u3057\u305f\u3082\u306e\u3068\u540c\u3058\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3059\u308b\u3068\u89d2\u5ea6\u306b\u306a\u3089\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308b\u306e\u3067\u3001\u30bf\u30d6\u30ec\u30c3\u30c8\u3084\u30b9\u30de\u30db\u30b5\u30a4\u30ba\u3068\u30c7\u30d0\u30a4\u30b9\u3054\u3068\u3067\u4e09\u89d2\u5f62\u306e\u753b\u50cf\u3092\u4f5c\u308a\u76f4\u3059\u5fc5\u8981\u304c\u3042\u308b<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-6.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9582\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-6.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-6.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-6.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u753b\u50cf\u3092\u7528\u3044\u308b\u5834\u5408\u306f\u3001\u3069\u3061\u3089\u306e\u5834\u5408\u3082\u753b\u50cf\u3092\u90fd\u5ea6\u8abf\u6574\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS%E3%81%A7%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88\"><\/span>CSS\u3067\u5b9f\u88c5\u3057\u305f\u5834\u5408<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>CSS\u3092\u4f7f\u7528\u3057\u305f\u5834\u5408\u3067\u3059\u3002<br>\u307e\u305a\u306fHTML\u3068CSS\u3092\u307f\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">HTML<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;section id=\"section1\" class=\"section-bg\"&gt;\n &lt;div class=\"c-container\"&gt;\n   &lt;h2&gt;TITLE1&lt;\/h2&gt;\n   &lt;p&gt;\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8&lt;\/p&gt;\n &lt;\/div&gt;\n&lt;\/section&gt;\n&lt;section class=\"section-bg-naname\"&gt;\n &lt;div class=\"c-container\"&gt;\n   &lt;h2&gt;TITLE2&lt;\/h2&gt;\n   &lt;p&gt;\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8&lt;\/p&gt;\n &lt;\/div&gt;\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\">CSS<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>.section-bg-naname{\n  position:relative;\n  background:yellow;\n  padding: 50px;\n  transform:skewY(-3deg);\n  margin-top:-50px;\n}\n.section-bg-naname .c-container{\n  transform:skewY(3deg);\n}\n.section-bg{\n  background:gray;\n  padding: 50px;\n  padding-bottom:100px;\n}\n.c-container {\n  margin:50px auto;\n  padding:50px;\n  max-width:600px;\n  background:#fff;\n  position:relative;\n  z-index:5;\n}<\/code><\/pre>\n\n\n\n<p>HTML\u3067\u306f\u659c\u3081\u306e\u8868\u793a\u3092\u3057\u305f\u3044\u7b87\u6240\u3067.section-bg-naname\u3068\u3044\u3046class\u540d\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<br>CSS\u3092\u898b\u308b\u3068transform:skewY(-3deg);\u3068\u3044\u3046\u6307\u5b9a\u304c\u3042\u308a\u307e\u3059\u3002<br>\u3053\u306e\u3088\u3046\u306b\u659c\u3081\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u3001section\u5168\u4f53\u3092\u659c\u3081\u306b\u3057\u3001section\u5185\u306ediv\u3067\u659c\u3081\u306b\u3057\u305f\u5206\u3092\u623b\u3059\u3053\u3068\u3067\u5b9f\u73fe\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-7-1.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9584\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-7-1.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-7-1.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-7-1.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-11.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9585\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-11.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-11.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-11.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p>\u3053\u306e\u5b9f\u88c5\u65b9\u6cd5\u3067\u306f\u89d2\u5ea6\u304c\u5909\u66f4\u306b\u306a\u3063\u305f\u5834\u5408\u3082\u3001\u6570\u5024\u3092\u4fee\u6b63\u3059\u308b\u3060\u3051\u3067\u7c21\u5358\u306b\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002<br>section\u81ea\u4f53\u306b\u89d2\u5ea6\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u305f\u3081\u306b\u30c7\u30d0\u30a4\u30b9\u3054\u3068\u306b\u753b\u50cf\u3092\u4f5c\u308a\u76f4\u3059\u5fc5\u8981\u3082\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNRMeLe\" src=\"\/\/codepen.io\/anon\/embed\/WNRMeLe?height=400&amp;theme-id=1&amp;slug-hash=WNRMeLe&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNRMeLe\" title=\"CodePen Embed WNRMeLe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>\u203b\u4e0a\u8a18\u57cb\u3081\u8fbc\u307f\u306e\uff3bResult\uff3d\u5185\u306f\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u3067\u3059\u3002<br>\u203b\u4e0a\u8a18\u57cb\u3081\u8fbc\u307f\u5185\u306e\u53f3\u4e0a\u306e\uff3bEDIT ON CODEPEN\uff3d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u5225\u306e\u30bf\u30d6\u3068\u3057\u3066\u5927\u304d\u304f\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E6%89%8B%E9%A0%86%E3%82%84%E6%B5%81%E3%82%8C%E3%81%AA%E3%81%A9%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E7%9F%A2%E5%8D%B0\"><\/span>\u624b\u9806\u3084\u6d41\u308c\u306a\u3069\u3067\u4f7f\u7528\u3059\u308b\u77e2\u5370<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-8.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9587\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-8.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-8.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-8.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>Web\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u306e\u8868\u793a\u30b5\u30f3\u30d7\u30eb<\/figcaption><\/figure>\n\n\n\n<p>\u624b\u9806\u3084\u6d41\u308c\u306a\u3069\u3067\u3088\u304f\u4f7f\u308f\u308c\u3066\u3044\u308b\u77e2\u5370\u306e\u5b9f\u88c5\u3067\u306f\u753b\u50cf\u3068CSS\u3069\u3061\u3089\u306e\u5b9f\u88c5\u65b9\u6cd5\u304c\u5411\u3044\u3066\u3044\u308b\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">PNG\u3084SVG\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u5b9f\u88c5\u3057\u305f\u5834\u5408<\/h4>\n\n\n\n<p>\u3053\u306e\u5834\u5408\u3001\u4e09\u89d2\u5f62\u306e\u30d1\u30fc\u30c4\u306e\u307f\u306a\u306e\u3067CSS\u3092\u898b\u305f\u3068\u304d\u306b\u753b\u50cf\u3067\u5b9f\u88c5\u3055\u308c\u3066\u3044\u308b\u3068\u3044\u3046\u3053\u3068\u304c\u308f\u304b\u308a\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u304c\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3067\u5b9f\u88c5\u3059\u308b\u3068\u8272\u3092\u5909\u66f4\u3057\u305f\u3044\u5834\u5408\u306b\u306f\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u66f8\u304d\u51fa\u3057\u76f4\u3059\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>SVG\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u3001\u753b\u50cf\u304c\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u66f8\u304d\u51fa\u3059\u306e\u3067\u306f\u306a\u304f\u3001background-image\u3067SVG\u306e\u30b3\u30fc\u30c9\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u8272\u30b3\u30fc\u30c9\u3092\u5909\u66f4\u3059\u308b\u3060\u3051\u3067\u7c21\u5358\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<br>\u3067\u3059\u304c\u3001\u30b3\u30fc\u30c9\u306e\u5909\u66f4\u7b87\u6240\u304c\u591a\u5c11\u308f\u304b\u308a\u3065\u3089\u3044\u3001Web\u30d6\u30e9\u30a6\u30b6\u30fc\u306b\u3088\u3063\u3066\u306f\u8868\u793a\u3055\u308c\u306a\u3044\u3053\u3068\u304c\u3042\u308b\u306e\u304c\u30c7\u30e1\u30ea\u30c3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWJLYVZ\" src=\"\/\/codepen.io\/anon\/embed\/MWJLYVZ?height=400&amp;theme-id=1&amp;slug-hash=MWJLYVZ&amp;default-tab=css,result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWJLYVZ\" title=\"CodePen Embed MWJLYVZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">\u753b\u50cf\u3092\u4f7f\u7528\u305b\u305a\u306bCSS\u306e\u307f\u3067\u5b9f\u88c5\u3057\u305f\u5834\u5408<\/h4>\n\n\n\n<p>CSS\u3067\u5b9f\u88c5\u3059\u308b\u5834\u5408\u306f\u3001border\u3092\u4f7f\u7528\u3057\u3066\u4e09\u89d2\u5f62\u3092\u8868\u793a\u3057\u307e\u3059\u3002<br>\u307e\u305a\u306fHTML\u3068CSS\u3092\u307f\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">HTML<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul class=\"flow\"&gt;\n  &lt;li class=\"flow_item\"&gt;&lt;span&gt;STEP1&lt;\/span&gt;\u6d41\u308c1\u306e\u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n  &lt;li class=\"flow_item\"&gt;&lt;span&gt;STEP2&lt;\/span&gt;\u6d41\u308c2\u306e\u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n  &lt;li class=\"flow_item\"&gt;&lt;span&gt;STEP3&lt;\/span&gt;\u6d41\u308c3\u306e\u30c6\u30ad\u30b9\u30c8&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\">CSS<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* ul,li\u3000reset *\/\nul li{\n  list-style:none;\n}\n.flow{\n  max-width:400px;\n}\n.flow_item{\n  margin-bottom:2em;\n  padding:1em;\n  background:#ebebeb;\n  position:relative;\n}\n.flow_item span{\n  margin-right:1em;\n  font-weight:bold;\n}\n.flow_item:not(:last-of-type)::after{\n  content:\"\";\n  display:block;\n  position: absolute;\n  top: 100%;\n  left: calc(50% - 20px);\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 20px;\n  border-color: #f2c200 transparent transparent transparent;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-12-1.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9595\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-12-1.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-12-1.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-12-1.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p><br>\u3053\u306e\u3088\u3046\u306bCSS\u3092\u4f7f\u7528\u3059\u308b\u3068border\u306e\u5024\u3092\u5909\u66f4\u3059\u308b\u3060\u3051\u3067\u4e09\u89d2\u5f62\u306e\u5927\u304d\u3055\u3001\u8272\u3092\u8abf\u6574\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_YzNeXwx\" src=\"\/\/codepen.io\/anon\/embed\/YzNeXwx?height=400&amp;theme-id=1&amp;slug-hash=YzNeXwx&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzNeXwx\" title=\"CodePen Embed YzNeXwx\" 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=\"beforeafter%E3%81%A7%E3%81%AE%E7%9F%A2%E5%8D%B0\"><\/span>before\/after\u3067\u306e\u77e2\u5370<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-9.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9588\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-9.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-9.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-9.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>Web\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u306e\u8868\u793a\u30b5\u30f3\u30d7\u30eb<\/figcaption><\/figure>\n\n\n\n<p>\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u5b9f\u88c5\u3059\u308b\u5834\u5408\u306f\u3001\u524d\u9805\u306e\u300e\u624b\u9806\u3084\u6d41\u308c\u306a\u3069\u3067\u3088\u304f\u3042\u308b\u77e2\u5370\u300f\u3068\u540c\u69d8\u306bPNG\u3084SVG\u306e\u5f62\u5f0f\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3067\u5b9f\u88c5\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<br>\u8272\u3092\u5909\u66f4\u3057\u305f\u3044\u5834\u5408\u306b\u306f\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u90fd\u5ea6\u66f8\u304d\u51fa\u3057\u3001SVG\u30b3\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u305f\u5834\u5408\u306f\u308f\u304b\u308a\u3065\u3089\u304f\u3001Web\u30d6\u30e9\u30a6\u30b6\u30fc\u306b\u3088\u3063\u3066\u306f\u8868\u793a\u3055\u308c\u306a\u3044\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">CSS\u3067\u5b9f\u88c5\u3057\u305f\u5834\u5408<\/h4>\n\n\n\n<p>CSS\u3067\u5b9f\u88c5\u3059\u308b\u5834\u5408\u3067\u3059\u3002<br>\u307e\u305a\u306fHTML\u3068CSS\u3092\u307f\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">HTML<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"flex-container\"&gt;\n  &lt;div class=\"before\"&gt;\n    &lt;div class=\"img-area\"&gt;&lt;img src=\"http:\/\/placehold.jp\/400x225.png\" alt=\"\"&gt;&lt;\/div&gt;\n    &lt;p&gt;before&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"after\"&gt;\n    &lt;div class=\"img-area\"&gt;&lt;img src=\"http:\/\/placehold.jp\/666666\/FFFFFF\/400x225.png\" alt=\"\"&gt;&lt;\/div&gt;\n    &lt;p&gt;after&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\">CSS<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>.flex-container{\n  display:flex;\n  justify-content: center;\n  align-items: center;\n}\n.flex-container &gt; div{\n  margin:0 30px;\n  text-align:center;\n}\n.flex-container .img-area{\n  position:relative;\n  min-height:225px;\n}\n.flex-container .before .img-area::before{\n  content:\"\";\n  display:block;\n  position: absolute;\n  top: 50%;\n  left: calc(100% + 15px);\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 10px 0 10px 15px;\n  border-color: transparent transparent transparent white;\n  z-index:99;\n}\n.flex-container .before .img-area::after{\n  content:\"\";\n  display:block;\n  position: absolute;\n  top: 50%;\n  left: calc(100% + 15px);\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 20px 0 20px 30px;\n  border-color: transparent transparent transparent #ebd700;\n}<\/code><\/pre>\n\n\n\n<p>\u65bd\u5de5\u524d\u30fb\u65bd\u5de5\u5f8c\u306e\u30d1\u30fc\u30c4\u3092\u305d\u308c\u305e\u308cdiv\u3067\u56f2\u307f\u3001\u65bd\u5de5\u524d\u306b.before\u3001\u65bd\u5de5\u5f8c\u306f.after\u3068class\u540d\u3092\u3064\u3051\u3066\u3044\u307e\u3059\u3002<br>CSS\u3092\u898b\u308b\u3068.before::after\u3067\u306f\u306a\u304f\u3001.before\u306e\u4e2d\u306b\u3042\u308b.img-area\u306b\u64ec\u4f3c\u8981\u7d20\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001.before\u3067\u64ec\u4f3c\u8981\u7d20\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u3053\u306e\u3088\u3046\u306b\u67a0\u5168\u4f53\u306e\u4e0a\u4e0b\u4e2d\u5fc3\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u305f\u3081\u3001\u753b\u50cf\u306e\u30a8\u30ea\u30a2\u3067\u64ec\u4f3c\u8981\u7d20\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"300\" src=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-10.png?resize=500%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-9589\" srcset=\"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-10.png?resize=500%2C300&amp;ssl=1 500w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-10.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-10.png?w=1000&amp;ssl=1 1000w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p>\u7dda\u306e\u3088\u3046\u306b\u898b\u3048\u3066\u3044\u308b\u7b87\u6240\u306f::before\u3068::after\u3092\u4f7f\u3044\u3001\u30b5\u30a4\u30ba\u9055\u3044\u306e\u77e2\u5370\u3092\u91cd\u306d\u3066\u5b9f\u73fe\u3057\u3066\u3044\u307e\u3059\u3002<br>\u91cd\u306d\u3066\u3044\u308b\u4e09\u89d2\u306e\u30b5\u30a4\u30ba\u3092\u5909\u66f4\u3059\u308b\u3068\u3001\u7dda\u306e\u592a\u3055\u3092\u8abf\u6574\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_WNRMvaV\" src=\"\/\/codepen.io\/anon\/embed\/WNRMvaV?height=400&amp;theme-id=1&amp;slug-hash=WNRMvaV&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNRMvaV\" title=\"CodePen Embed WNRMvaV\" 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=\"%E3%81%BE%E3%81%A8%E3%82%81\"><\/span>\u307e\u3068\u3081<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u5b9f\u88c5\u65b9\u6cd5\u306b\u3088\u3063\u3066\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u30b3\u30fc\u30c9\u306b\u306a\u3063\u305f\u308a\u3001\u6c4e\u7528\u6027\u306e\u9ad8\u3044\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002<br>Web\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u8868\u793a\u3055\u308c\u308c\u3070OK\u3067\u306f\u306a\u304f\u3001\u4fee\u6b63\u4f5c\u696d\u304c\u3042\u308b\u3053\u3068\u3082\u60f3\u5b9a\u3057\u306a\u304c\u3089\u5b9f\u88c5\u4f5c\u696d\u3092\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e09\u89d2\u5f62\u3084\u77e2\u5370\u3092Web\u30da\u30fc\u30b8\u306b\u53d6\u308a\u5165\u308c\u308b\u65b9\u6cd5\u3068\u3057\u3066\u3001PNG\u3084SVG\u306a\u3069\u306e\u753b\u50cf\u306e\u307b\u304b\u306bCSS\u3092\u4f7f\u3046\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u305d\u306e\u5b9f\u88c5\u4f8b\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"author":3,"featured_media":9575,"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":"\u4e09\u89d2\u5f62\u3084\u77e2\u5370\u3092Web\u30da\u30fc\u30b8\u306b\u53d6\u308a\u5165\u308c\u308b\u65b9\u6cd5\u3068\u3057\u3066\u3001PNG\u3084SVG\u306a\u3069\u306e\u753b\u50cf\u306e\u307b\u304b\u306bCSS\u3092\u4f7f\u3046\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u305d\u306e\u5b9f\u88c5\u4f8b\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002","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":[13,4],"tags":[25,52],"class_list":{"0":"post-9570","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-web","9":"tag-css","10":"tag-css3"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/stocker.jp\/diary\/wp-content\/uploads\/css-sankaku-1.png?fit=1000%2C600&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/posts\/9570","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/comments?post=9570"}],"version-history":[{"count":26,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/posts\/9570\/revisions"}],"predecessor-version":[{"id":9617,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/posts\/9570\/revisions\/9617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/media\/9575"}],"wp:attachment":[{"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/media?parent=9570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/categories?post=9570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stocker.jp\/diary\/wp-json\/wp\/v2\/tags?post=9570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}