{"id":572,"date":"2026-07-27T18:57:45","date_gmt":"2026-07-27T09:57:45","guid":{"rendered":"https:\/\/torakappa-site.com\/?p=572"},"modified":"2026-07-27T19:31:22","modified_gmt":"2026-07-27T10:31:22","slug":"css-grid%e3%81%a7%e6%bb%91%e3%82%89%e3%81%8b%e3%81%ab%e9%96%8b%e9%96%89%e3%81%99%e3%82%8b%ef%bc%81javascript%e3%81%a7%e4%bd%9c%e3%82%8b%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3","status":"publish","type":"post","link":"https:\/\/torakappa-site.com\/?p=572","title":{"rendered":"CSS Grid\u3067\u6ed1\u3089\u304b\u306b\u958b\u9589\u3059\u308b\uff01JavaScript\u3067\u4f5c\u308b\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Web\u30b5\u30a4\u30c8\u3067\u3088\u304f\u4f7f\u308f\u308c\u308b\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u30e1\u30cb\u30e5\u30fc\u3002\u9ad8\u3055\u304c\u52d5\u7684\u306b\u5909\u308f\u308b\u8981\u7d20\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u304b\u3064\u3066 <code>max-height<\/code> \u306a\u3069\u3067\u529b\u6280\u3067\u5b9f\u88c5\u3055\u308c\u308b\u3053\u3068\u304c\u591a\u304f\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u901f\u5ea6\u304c\u4e0d\u81ea\u7136\u306b\u306a\u308b\u306e\u304c\u60a9\u307f\u306e\u7a2e\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f <strong>CSS Grid\u306e <code>grid-template-rows<\/code><\/strong> \u3092\u6d3b\u7528\u3057\u3001\u9ad8\u3055\u306e\u8a08\u7b97\u4e0d\u8981\u3067\u30b9\u30e0\u30fc\u30ba\u306b\u958b\u9589\u3059\u308b\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u306e\u4f5c\u308a\u65b9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"%25e3%2582%25a2%25e3%2582%25b3%25e3%2583%25bc%25e3%2583%2587%25e3%2582%25a3%25e3%2582%25aa%25e3%2583%25b3%25e5%25ae%258c%25e6%2588%2590%25e5%2593%2581\" class=\"wp-block-heading\">\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\uff08\u5b8c\u6210\u54c1\uff09<\/h2>\n\n\n\n<p class=\"codepen\" data-theme-id=\"-2\" data-height=\"300\" data-pen-title=\"Untitled\" data-version=\"2\" data-default-tab=\"html,result\" data-slug-hash=\"MYJPmOV\" 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\/editor\/sawakei\/pen\/019fa2fa-3c6f-7cee-83b7-3dcd92284afe\">\n  Untitled<\/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:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h2 id=\"%25e3%2582%25b3%25e3%2583%25bc%25e3%2583%2589\" class=\"wp-block-heading\">\u30b3\u30fc\u30c9<\/h2>\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;div class=&quot;accordion&quot;&gt;\n  &lt;div class=&quot;accordion__item&quot;&gt;\n    &lt;button type=&quot;button&quot; class=&quot;accordion__header&quot;&gt;\n      \u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f31\n      &lt;span class=&quot;accordion__icon&quot;&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n    &lt;div class=&quot;accordion__content&quot;&gt;\n      &lt;div class=&quot;accordion__body&quot;&gt;\n        \u3053\u3053\u306b\u306f\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f31\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u5165\u308a\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u3084\u753b\u50cf\u306a\u3069\u3092\u914d\u7f6e\u3067\u304d\u307e\u3059\u3002\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=&quot;accordion__item&quot;&gt;\n    &lt;button type=&quot;button&quot; class=&quot;accordion__header&quot;&gt;\n      \u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f32\n      &lt;span class=&quot;accordion__icon&quot;&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n    &lt;div class=&quot;accordion__content&quot;&gt;\n      &lt;div class=&quot;accordion__body&quot;&gt;\n        \u3053\u3053\u306b\u306f\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f32\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u5165\u308a\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u3084\u753b\u50cf\u306a\u3069\u3092\u914d\u7f6e\u3067\u304d\u307e\u3059\u3002\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<h3 id=\"css\" class=\"wp-block-heading\">CSS<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.accordion {\n  overflow: hidden;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n}\n\n.accordion__item {\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.accordion__item:last-child {\n  border-bottom: none;\n}\n\n.accordion__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 16px 20px;\n  font-weight: bold;\n  color: #333;\n  cursor: pointer;\n  outline: none;\n  background: #f9f9f9;\n  border: none;\n  transition: background-color 0.2s;\n}\n\n.accordion__icon {\n  width: 10px;\n  height: 10px;\n  border-right: 2px solid #666;\n  border-bottom: 2px solid #666;\n  transform: rotate(45deg);\n  transition: transform 0.3s;\n}\n\n\n.accordion__item.is-open .accordion__icon {\n  transform: rotate(-135deg);\n}\n\n.accordion__content {\n  display: grid;\n  grid-template-rows: 0fr; \/*\u30dd\u30a4\u30f3\u30c8\uff11*\/\n  padding: 0 20px;\n  background-color: #fff;\n  transition: \/*\u30dd\u30a4\u30f3\u30c8\uff11*\/\n    grid-template-rows 0.3s,\n    padding 0.3s;\n}\n\n.accordion__body {\n  overflow: hidden; \n}\n\n.accordion__item.is-open .accordion__content {\n  grid-template-rows: 1fr; \/*\u30dd\u30a4\u30f3\u30c8\uff11*\/\n  padding: 16px 20px;\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>document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {\n  const headers = document.querySelectorAll(&#39;.accordion__header&#39;);\n\n  headers.forEach((header) =&gt; {\n    header.addEventListener(&#39;click&#39;, () =&gt; {\n      const item = header.closest(&#39;.accordion__item&#39;);\n      const allItems = document.querySelectorAll(&#39;.accordion__item&#39;);\n\n      allItems.forEach((el) =&gt; {\n        if (el !== item) {\n          el.classList.remove(&#39;is-open&#39;);\n        }\n      });\n\n      item.classList.toggle(&#39;is-open&#39;);\n    });\n  });\n});<\/code><\/pre><\/div>\n\n\n\n<h2 id=\"%25e8%25a7%25a3%25e8%25aa%25ac\" class=\"wp-block-heading\">\u89e3\u8aac<\/h2>\n\n\n\n<h3 id=\"%25e9%25ab%2598%25e3%2581%2595%25e3%2581%25ae%25e6%258c%2587%25e5%25ae%259a%25e3%2581%25abgridtemplaterows%25e3%2582%2592%25e4%25bd%25bf%25e3%2581%2586\" class=\"wp-block-heading\">\u9ad8\u3055\u306e\u6307\u5b9a\u306bgrid-template-rows\u3092\u4f7f\u3046<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u304c\u4e00\u756a\u91cd\u8981\u306a\u6240\u3060\u3068\u601d\u3044\u307e\u3059\uff08\u30dd\u30a4\u30f3\u30c81)<br>\u4e0b\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u5c55\u958b\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3057\u3088\u3046\u3068\u3001<strong>height:0\u304b\u3089height:auto\u3068\u3057\u3066transiton:height 0.3s;\u3068\u3057\u3066\u3082transition\u306f\u52b9\u304b\u306a\u3044\u306e\u3067\u3059\u3002<\/strong><br>\u305d\u3053\u3067\u3001grid-template-rows\u3092\u4ee3\u308f\u308a\u306b\u4f7f\u3044\u307e\u3059<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.accordion__content {\n  display: grid;\n  grid-template-rows: 0fr;\n  padding: 0 20px;\n  background-color: #fff;\n  transition:\n    grid-template-rows 0.3s,\n    padding 0.3s;\n}\n\n.accordion__body {\n  overflow: hidden; \n}\n<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>.<\/code>accordion__content\u306b <strong>display:grid; <\/strong>\u3092\u6307\u5b9a\u3057\u3001\u901a\u5e38\u6642\u306f<strong>grid-template-rows:0fr;<\/strong>\uff08\u884c\u306e\u9ad8\u3055\u30920\u306b\u3059\u308b\uff09\u306b\u3057\u307e\u3059\u3002<br>transition\u306bgrid-template-rows\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u306a\u304a\u3001<strong>overflow: hidden;<\/strong>\u3092\u6307\u5b9a\u3057\u306a\u3044\u3068\u3001\u9ad8\u3055\u304c0\u306e\u6307\u5b9a\u3067\u3082\u4e2d\u8eab\u304c\u898b\u3048\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u5fd8\u308c\u305a\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.accordion__item.is-open .accordion__content {\n  grid-template-rows: 1fr;\n}<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5c55\u958b\u6642\u306b\u306f\u3001<strong>grid-template-rows: 1fr;<\/strong>\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web\u30b5\u30a4\u30c8\u3067\u3088\u304f\u4f7f\u308f\u308c\u308b\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u30e1\u30cb\u30e5\u30fc\u3002\u9ad8\u3055\u304c\u52d5\u7684\u306b\u5909\u308f\u308b\u8981\u7d20\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u304b\u3064\u3066 max-height \u306a\u3069\u3067\u529b\u6280\u3067\u5b9f\u88c5\u3055\u308c\u308b\u3053\u3068\u304c\u591a\u304f\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u901f\u5ea6\u304c\u4e0d\u81ea\u7136\u306b\u306a\u308b\u306e\u304c\u60a9\u307f\u306e\u7a2e\u3067\u3057\u305f\u3002 \u4eca\u56de\u306f  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":586,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,45],"tags":[44],"class_list":["post-572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-blog","category-45","tag-44"],"_links":{"self":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/572","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=572"}],"version-history":[{"count":8,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/572\/revisions"}],"predecessor-version":[{"id":585,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/572\/revisions\/585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/media\/586"}],"wp:attachment":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}