{"id":64,"date":"2024-01-30T21:50:57","date_gmt":"2024-01-30T12:50:57","guid":{"rendered":"https:\/\/torakappa-site.com\/?p=64"},"modified":"2026-02-23T16:07:50","modified_gmt":"2026-02-23T07:07:50","slug":"%e3%83%86%e3%82%b9%e3%83%88%e6%8a%95%e7%a8%bf%ef%bc%91","status":"publish","type":"post","link":"https:\/\/torakappa-site.com\/?p=64","title":{"rendered":"\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30dc\u30bf\u30f3\u3092\u4f5c\u6210\u3059\u308b"},"content":{"rendered":"\n<p>\u81ea\u5206\u306e\u30e1\u30e2\u7528\u306e\u8a18\u4e8b\u3067\u3059\u3002\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u00d7\u306b\u5909\u5f62\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"%25e3%2582%25b5%25e3%2583%25b3%25e3%2583%2597%25e3%2583%25ab\" class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"eYXwYeL\" data-user=\"sawakei\" 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\/sawakei\/pen\/eYXwYeL\">\n  \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30dc\u30bf\u30f3<\/a> by keiichisawai (<a href=\"https:\/\/codepen.io\/sawakei\">@sawakei<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 id=\"html\" class=\"wp-block-heading\">HTML<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;button class=&quot;c-buggerBtn&quot; id=&quot;js-nav-btn&quot;&gt;\n    &lt;span class=&quot;c-buggerBtn__bar&quot;&gt;&lt;\/span&gt;\n    &lt;span class=&quot;c-buggerBtn__screen&quot;&gt;MENU&lt;\/span&gt;\n&lt;\/button&gt;<\/code><\/pre><\/div>\n\n\n\n<h3 id=\"csssass\" class=\"wp-block-heading\">CSS(Sass)<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-scss\" data-lang=\"SCSS\"><code>.c-buggerBtn {\n    all: unset;\n    aspect-ratio: 1\/1;\n    cursor: pointer;\n    display: grid;\n    outline: revert;\n    place-items: center;\n    -webkit-tap-highlight-color: transparent;\n    width: 20px;\n    z-index: calc(infinity);\n}\n\n.c-buggerBtn__bar,\n.c-buggerBtn::before,\n.c-buggerBtn::after {\n    background-color: currentColor;\n    content: &quot;&quot;;\n    display: block;\n    grid-area: 1\/1;\n    height: 2px;\n    transition: transform 0.5s;\n    width: 100%;\n}\n\n.c-buggerBtn {\n    &::before {\n        transform: translateY(-7px);\n    }\n\n    &::after {\n        transform: translateY(7px);\n    }\n}\n\n.is-open {\n    .c-buggerBtn__bar {\n        transform: scale(0);\n    }\n\n    .c-buggerBtn {\n        &::before {\n            transform: translateY(0) rotate(45deg);\n        }\n\n        &::after {\n            transform: translateY(0) rotate(-45deg);\n        }\n    }\n}\n\n\/\/\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\n.c-buggerBtn__screen {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n}\n<\/code><\/pre><\/div>\n\n\n\n<h3 id=\"javascript\" class=\"wp-block-heading\">javaScript<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const jsBody = document.querySelector(&#39;body&#39;);\nconst jsNavBtn = document.querySelector(&#39;#js-nav-btn&#39;);\n\njsNavBtn.addEventListener(&#39;click&#39;, () =&gt; {\n    jsBody.classList.toggle(&#39;is-open&#39;);\n})<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u81ea\u5206\u306e\u30e1\u30e2\u7528\u306e\u8a18\u4e8b\u3067\u3059\u3002\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u00d7\u306b\u5909\u5f62\u3057\u307e\u3059\u3002 \u30b5\u30f3\u30d7\u30eb See the Pen \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30dc\u30bf\u30f3 by keiichisawai (@sawakei) on CodePen. HTML CSS(Sass) j [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":273,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[29],"class_list":["post-64","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-blog","tag-css"],"_links":{"self":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=64"}],"version-history":[{"count":4,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions\/276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/media\/273"}],"wp:attachment":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}