{"id":1359,"date":"2025-06-27T21:35:44","date_gmt":"2025-06-27T12:35:44","guid":{"rendered":"https:\/\/tatuiyo.xyz\/?p=1359"},"modified":"2025-06-28T08:58:03","modified_gmt":"2025-06-27T23:58:03","slug":"hueman%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e8%bf%bd%e5%8a%a0css%e3%81%a7%e6%94%b9%e8%89%af","status":"publish","type":"post","link":"https:\/\/tatuiyo.xyz\/?p=1359","title":{"rendered":"Hueman\u30c6\u30fc\u30de\u3092\u8ffd\u52a0CSS\u3067\u6539\u826f"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><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><\/span><\/a><\/span><\/div>\n<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:\/\/tatuiyo.xyz\/?p=1359\/#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB\" >\u30e2\u30d0\u30a4\u30eb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/tatuiyo.xyz\/?p=1359\/#%E8%A6%8B%E5%87%BA%E3%81%97\" >\u898b\u51fa\u3057<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/tatuiyo.xyz\/?p=1359\/#H2\" >H2<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/tatuiyo.xyz\/?p=1359\/#H3\" >H3<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/tatuiyo.xyz\/?p=1359\/#H4\" >H4<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/tatuiyo.xyz\/?p=1359\/#%E7%94%BB%E5%83%8F%E6%B7%BB%E4%BB%98%E5%BE%8C%E3%81%AE%E4%BD%99%E7%99%BD%E8%AA%BF%E6%95%B4\" >\u753b\u50cf\u6dfb\u4ed8\u5f8c\u306e\u4f59\u767d\u8abf\u6574<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB\"><\/span>\u30e2\u30d0\u30a4\u30eb<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u30b9\u30de\u30db\u3067\u898b\u305f\u3068\u304d\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u304c\u5fae\u5999\u306a\u611f\u3058\u306a\u306e\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"335\" height=\"600\" src=\"https:\/\/tatuiyo.xyz\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-27-212455.png\" alt=\"\" class=\"wp-image-1361\" srcset=\"https:\/\/tatuiyo.xyz\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-27-212455.png 335w, https:\/\/tatuiyo.xyz\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-27-212455-168x300.png 168w\" sizes=\"(max-width: 335px) 100vw, 335px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">before<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"325\" height=\"600\" src=\"https:\/\/tatuiyo.xyz\/wp-content\/uploads\/2025\/06\/image.png\" alt=\"\" class=\"wp-image-1362\" srcset=\"https:\/\/tatuiyo.xyz\/wp-content\/uploads\/2025\/06\/image.png 325w, https:\/\/tatuiyo.xyz\/wp-content\/uploads\/2025\/06\/image-163x300.png 163w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">after<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* \u30b9\u30de\u30db\u753b\u9762\uff08\u6700\u5927768px\u5e45\uff09\u306b\u3060\u3051\u9069\u7528 *\/\n@media screen and (max-width: 768px) {\n\t\n  \/* \u8a18\u4e8b\u4e00\u89a7\u306e\u6982\u8981\u90e8\u5206\u3092\u975e\u8868\u793a\u306b *\/\n  .entry-summary,\n  .post-excerpt,\n  .archive .entry-content {\n    display: none !important;\n  }\n\n  \/* \u30bf\u30a4\u30c8\u30eb\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u5c0f\u3055\u304f\u3059\u308b *\/\n  .entry-title,\n  .post-title,\n  .archive .entry-title {\n    font-size: 1rem !important; \/* \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u30b5\u30a4\u30ba\u3092\u8abf\u6574 *\/\n\t}\n\t\n\t\/* \u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u975e\u8868\u793a\u306b\u3059\u308b *\/\n  .cat-links,\n  .entry-categories,\n  .post-categories,\n\t.post-category,\n  .archive .cat-links {\n    display: none !important;\n  }\n\t\n\t\/* \u753b\u50cf\u306e\u30b3\u30e1\u30f3\u30c8\u30de\u30fc\u30af\u3092\u975e\u8868\u793a\u306b\u3059\u308b *\/\n\t.post-comments {\n    display: none !important;\n  }\n\t\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%A6%8B%E5%87%BA%E3%81%97\"><\/span>\u898b\u51fa\u3057<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3059<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"H2\"><\/span>H2<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"H3\"><\/span>H3<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"H4\"><\/span>H4<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* H2\u898b\u51fa\u3057\uff1a\u5439\u304d\u51fa\u3057\u98a8\uff08\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\uff09 *\/\nmain h2.wp-block-heading {\n  position: relative;\n  border: none;\n  background: #f0f8ff; \/* \u8584\u3044\u6c34\u8272\u306e\u80cc\u666f *\/\n  padding: 0.6em 1em;\n  color: #333;\n  line-height: 1.5;\n  font-size: 20px;\n}\n\nmain h2.wp-block-heading::before {\n  content: &#39;&#39;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 8px; \/* \u592a\u3081\u306e\u30a2\u30af\u30bb\u30f3\u30c8 *\/\n  height: 100%;\n  background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);\n  border-radius: 3px 0 0 3px; \/* \u5c11\u3057\u3060\u3051\u89d2\u3092\u4e38\u304f *\/\n}\n\n\/* H3\u898b\u51fa\u3057\uff1aH2\u3092\u30b7\u30f3\u30d7\u30eb\u306b *\/\nmain h3.wp-block-heading {\n  position: relative;\n  border: none;\n  border-left: 6px solid #4facfe; \/* \u9752\u8272\u306e\u5358\u8272\u7dda *\/\n  padding: 0.4em 1em;\n  background: #f8f9fa; \/* \u3084\u3084\u30b0\u30ec\u30fc\u304c\u304b\u3063\u305f\u80cc\u666f *\/\n  line-height: 1.4;\n  font-size: 18px;\n  color: #333;\n}\n\n\/* H4\u898b\u51fa\u3057\uff1a\u3055\u3089\u306b\u30b7\u30f3\u30d7\u30eb\u306b *\/\nmain h4.wp-block-heading {\n  position: relative;\n  border: none;\n  border-bottom: 2px solid #4facfe; \/* \u9752\u8272\u306e\u4e0b\u7dda *\/\n  padding: 0.3em 0;\n  line-height: 1.4;\n  font-size: 16px;\n  color: #333;\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E7%94%BB%E5%83%8F%E6%B7%BB%E4%BB%98%E5%BE%8C%E3%81%AE%E4%BD%99%E7%99%BD%E8%AA%BF%E6%95%B4\"><\/span>\u753b\u50cf\u6dfb\u4ed8\u5f8c\u306e\u4f59\u767d\u8abf\u6574<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u8a18\u4e8b\u4e2d\u306b\u753b\u50cf\u3092\u8ffd\u52a0\u3057\u305f\u76f4\u5f8c\u306e\u30d6\u30ed\u30c3\u30af\u306e\u4f59\u767d\u304c\u30bc\u30ed\u3067\u898b\u3065\u3089\u3044\u306e\u3067\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.wp-block-image {\n  margin-bottom: 30px;\n}<\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30e2\u30d0\u30a4\u30eb \u30b9\u30de\u30db\u3067\u898b\u305f\u3068\u304d\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u304c\u5fae\u5999\u306a\u611f\u3058\u306a\u306e\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002 before after \u898b\u51fa\u3057 \u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3059 H2 H3 H4 \u753b\u50cf\u6dfb\u4ed8\u5f8c\u306e\u4f59\u767d\u8abf\u6574 \u8a18\u4e8b\u4e2d\u306b\u753b\u50cf\u3092\u8ffd\u52a0\u3057\u305f\u76f4\u5f8c\u306e\u30d6\u30ed\u30c3\u30af\u306e\u4f59\u767d\u304c\u30bc\u30ed\u3067\u898b\u3065\u3089\u3044\u306e\u3067\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":1364,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64,11,63],"tags":[],"class_list":["post-1359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hueman","category-wordpress","category-63"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=\/wp\/v2\/posts\/1359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1359"}],"version-history":[{"count":2,"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=\/wp\/v2\/posts\/1359\/revisions"}],"predecessor-version":[{"id":1371,"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=\/wp\/v2\/posts\/1359\/revisions\/1371"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=\/wp\/v2\/media\/1364"}],"wp:attachment":[{"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tatuiyo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}