{"id":513,"date":"2025-06-07T21:08:49","date_gmt":"2025-06-07T12:08:49","guid":{"rendered":"https:\/\/torakappa-site.com\/?p=513"},"modified":"2026-02-23T16:07:50","modified_gmt":"2026-02-23T07:07:50","slug":"%e3%80%90swiper%e3%80%91%e8%87%aa%e5%8b%95%e3%81%a7%e6%a8%aa%e3%81%ab%e6%b5%81%e3%82%8c%e3%82%8b%e7%84%a1%e9%99%90%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab","status":"publish","type":"post","link":"https:\/\/torakappa-site.com\/?p=513","title":{"rendered":"\u3010Swiper\u3011\u81ea\u52d5\u3067\u6a2a\u306b\u6d41\u308c\u308b\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u7c21\u5358\u306b\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"\n<p>Swiper\u3067\u753b\u50cf\u7b49\u3092\u9014\u5207\u308c\u306a\u304f\u6a2a\u306b\u6d41\u308c\u308b\u8868\u793a\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n\n\n\n<h2 id=\"%25e5%25ae%259f%25e8%25a3%2585%25e4%25be%258b\" class=\"wp-block-heading\">\u5b9f\u88c5\u4f8b<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"VYLzEeb\" data-pen-title=\"Untitled\" 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\/VYLzEeb\">\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=\"%25e6%2580%259d%25e3%2581%2584%25e9%2580%259a%25e3%2582%258a%25e3%2581%25ab%25e5%258b%2595%25e3%2581%258b%25e3%2581%25aa%25e3%2581%2584%25e6%2599%2582%25e3%2581%25af\" class=\"wp-block-heading\">\u601d\u3044\u901a\u308a\u306b\u52d5\u304b\u306a\u3044\u6642\u306f<\/h2>\n\n\n\n<p>Swiper\u3067\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u304c\u3001\u3061\u3087\u3063\u3068\u3057\u305f\u4e8b\u304c\u539f\u56e0\u3067\u3001\u610f\u56f3\u3057\u305f\u3068\u304a\u308a\u306b\u52d5\u304b\u306a\u3044\u4e8b\u304c\u3042\u308a\u307e\u3059\u3002Swiper\u3067\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u5b9f\u88c5\u3059\u308b\u3046\u3048\u3067\u6ce8\u610f\u3057\u305f\u65b9\u304c\u826f\u3044\u6240\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 id=\"%25e3%2582%25b9%25e3%2583%25a9%25e3%2582%25a4%25e3%2583%2589%25e3%2581%25ae%25e6%2595%25b0%25e3%2582%2584%25e6%25a8%25aa%25e5%25b9%2585%25e3%2581%258c%25e8%25b6%25b3%25e3%2582%258a%25e3%2581%259a%25e8%25a1%25a8%25e7%25a4%25ba%25e9%25a0%2598%25e5%259f%259f%25e3%2582%2592%25e5%259f%258b%25e3%2582%2581%25e3%2581%258d%25e3%2582%258c\" class=\"wp-block-heading\">\u30b9\u30e9\u30a4\u30c9\u306e\u6570\u3084\u6a2a\u5e45\u304c\u8db3\u308a\u305a\u3001\u8868\u793a\u9818\u57df\u3092\u57cb\u3081\u304d\u308c\u3066\u3044\u306a\u3044<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"zxGdmWK\" data-pen-title=\"swiper\u3067\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u5b9f\u88c5\u3059\u308b\uff08\u52d5\u304b\u306a\u3044\u4f8b\uff09\" 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\/zxGdmWK\">\n  swiper\u3067\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u5b9f\u88c5\u3059\u308b\uff08\u52d5\u304b\u306a\u3044\u4f8b\uff09<\/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<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u306e\u5834\u5408\u3001\u30b9\u30de\u30db\u7b49\u306e\u6a2a\u5e45\u304c\u72ed\u3044\u6642\u306f\u4e0a\u624b\u304f\u52d5\u304d\u307e\u3059\u304c\u3001PC\u7b49\u306e\u6a2a\u5e45\u304c\u5e83\u3044\u6642\u306f\u4e0a\u624b\u304f\u52d5\u304d\u307e\u305b\u3093\u3002\u3053\u308c\u306f\u8981\u7d20\u304c\u8db3\u308a\u306a\u3044\u3068\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u304c\u6210\u7acb\u3057\u306a\u3044\u304b\u3089\u3067\u3059\u3002\u3053\u306e\u5834\u5408\u3001HTML\u4e0a\u306e\u8981\u7d20\u3092\u5897\u3084\u3059\uff08\u3053\u306e\u5834\u5408\u753b\u50cf\uff09\u304bjavaScript\u3067\u7591\u4f3c\u7684\u306b\u8981\u7d20\u3092\u5897\u3084\u3059\u4e8b\u3067\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002<\/p>\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\n  const wrapper = document.querySelector(&#39;.swiper-wrapper&#39;);\n  const slides = wrapper.innerHTML;\n\n \u3000\/\/ \u30b9\u30e9\u30a4\u30c9\u3092\u8907\u88fd\u3059\u308b(\u91cd\u8981)\n  wrapper.insertAdjacentHTML(&#39;beforeend&#39;, slides);\n\n  \/\/ Swiper\u3092\u521d\u671f\u5316\n});<\/code><\/pre><\/div>\n\n\n\n<h3 id=\"swiper%25e3%2581%25ae%25e3%2582%25b9%25e3%2583%25a9%25e3%2582%25a4%25e3%2583%2589%25e3%2581%25ae%25e8%25a8%2588%25e7%25ae%2597%25e3%2581%258c%25e4%25b8%258a%25e6%2589%258b%25e3%2581%258f%25e3%2581%2584%25e3%2581%25a3%25e3%2581%25a6%25e3%2581%25aa%25e3%2581%2584\" class=\"wp-block-heading\">Swiper\u306e\u30b9\u30e9\u30a4\u30c9\u306e\u8a08\u7b97\u304c\u4e0a\u624b\u304f\u3044\u3063\u3066\u306a\u3044<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.swiper-slide {\n  flex-shrink: 0;\n  \/*\u91cd\u8981*\/\n  width: auto !important; \n}<\/code><\/pre><\/div>\n\n\n\n<p>.swiper-slide\u30af\u30e9\u30b9\u306ewidth: auto;\u306e\u6307\u5b9a\u304c\u5fc5\u9808\u306a\u306e\u3067\u3059\u304c\u3001swiper\u5074\u306eCSS\u306e\u65b9\u304c\u512a\u5148\u3055\u308c\u3066\u3057\u307e\u3044\u3001\u4e0a\u624b\u304f\u3044\u304b\u306a\u3044\u4e8b\u304c\u3042\u308a\u307e\u3059\u3002<br>\u3053\u3053\u3067\u306f\u3001\u5206\u304b\u308a\u3084\u3059\u304f!importat\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u304c\u3001.swiper-slide[class]\u306a\u3069\u3067\u8a73\u7d30\u5ea6\u3092\u9ad8\u3081\u308b\u65b9\u6cd5\u304c\u3088\u308a\u826f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"swiper%25e3%2581%25a7%25e3%2581%25ae%25e5%25ae%259f%25e8%25a3%2585%25e3%2581%25a7%25e3%2581%25af%25e5%25b9%2585%25e3%2581%25ae%25e6%258c%2587%25e5%25ae%259a%25e3%2581%25ab%25e6%25b0%2597%25e3%2582%2592%25e3%2581%25a4%25e3%2581%2591%25e3%2582%258b\" class=\"wp-block-heading\">Swiper\u3067\u306e\u5b9f\u88c5\u3067\u306f\u3001\u5e45\u306e\u6307\u5b9a\u306b\u6c17\u3092\u3064\u3051\u308b<\/h2>\n\n\n\n<p>\u500b\u4eba\u7684\u306bSwiper\u3067\u30b9\u30e9\u30a4\u30c9\u3092\u5b9f\u88c5\u3059\u308b\u3068\u304d\u3001\u30b9\u30e9\u30a4\u30c9\u3092\u69cb\u6210\u3059\u308b\u8981\u7d20\u304c\u8868\u793a\u3059\u308b\u9818\u57df\u3092\u6e80\u305f\u3057\u3066\u306a\u3044\u305f\u3081\u4e0a\u624b\u304f\u52d5\u304b\u306a\u3044\u7b49\u3001\u5e45\u306b\u95a2\u3059\u308b\u4e8b\u304c\u539f\u56e0\u3067\u8a70\u307e\u308b\u4e8b\u304c\u591a\u3044\u5370\u8c61\u3067\u3059\u3002\u3067\u3059\u306e\u3067\u3001\u30b9\u30e9\u30a4\u30c9\u306e\u5e45\u3084\u6570\u3092\u610f\u8b58\u3059\u308b\u3053\u3068\u3067\u3001\u72d9\u3063\u305f\u6319\u52d5\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"%25e3%2582%25b3%25e3%2583%25bc%25e3%2583%2589%25e5%2585%25a8%25e4%25bd%2593\" class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u5168\u4f53<\/h2>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;link\n  rel=&quot;stylesheet&quot;\n  href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper\/swiper-bundle.min.css&quot;\n\/&gt;\n&lt;script\n  src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper\/swiper-bundle.min.js&quot;\n  defer\n&gt;&lt;\/script&gt;\n\n&lt;div class=&quot;swiper&quot; id=&quot;js-swiper&quot;&gt;\n  &lt;div class=&quot;swiper-wrapper&quot;&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img\n        src=&quot;https:\/\/picsum.photos\/id\/237\/400\/200&quot;\n        width=&quot;400&quot;\n        height=&quot;200&quot;\n        alt=&quot;&quot;\n      \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img\n        src=&quot;https:\/\/picsum.photos\/id\/238\/400\/200&quot;\n        width=&quot;400&quot;\n        height=&quot;200&quot;\n        alt=&quot;&quot;\n      \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img\n        src=&quot;https:\/\/picsum.photos\/id\/239\/400\/200&quot;\n        width=&quot;400&quot;\n        height=&quot;200&quot;\n        alt=&quot;&quot;\n      \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img\n        src=&quot;https:\/\/picsum.photos\/id\/240\/400\/200&quot;\n        width=&quot;400&quot;\n        height=&quot;200&quot;\n        alt=&quot;&quot;\n      \/&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.swiper {\n  width: 100%;\n  overflow: hidden;\n}\n\n.swiper-wrapper {\n  display: flex;\n}\n\n.swiper-slide {\n  flex-shrink: 0;\n  width: auto;\n}\n\n.swiper-slide img {\n  display: block;\n}<\/code><\/pre><\/div>\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 wrapper = document.querySelector(&#39;.swiper-wrapper&#39;);\n  const slides = wrapper.innerHTML;\n\n  \/\/ \u30b9\u30e9\u30a4\u30c9\u3092\u8907\u88fd\u3057\u3066\u6c34\u5897\u3057\n  wrapper.insertAdjacentHTML(&#39;beforeend&#39;, slides);\n\n  \/\/ Swiper\u3092\u521d\u671f\u5316\n  new Swiper(&#39;#js-swiper&#39;, {\n    loop: true,\n    slidesPerView: &#39;auto&#39;,\n    spaceBetween: 24,\n    speed: 5000,\n    autoplay: {\n      delay: 0,\n      disableOnInteraction: false\n    },\n    allowTouchMove: false\n  });\n});<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Swiper\u3067\u753b\u50cf\u7b49\u3092\u9014\u5207\u308c\u306a\u304f\u6a2a\u306b\u6d41\u308c\u308b\u8868\u793a\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 \u5b9f\u88c5\u4f8b See the Pen Untitled by keiichisawai (@sawakei) on CodePen. \u601d\u3044\u901a\u308a\u306b\u52d5\u304b\u306a\u3044\u6642\u306f  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":524,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[39,40],"class_list":["post-513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-blog","tag-swiper","tag-40"],"_links":{"self":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/513","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=513"}],"version-history":[{"count":7,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/513\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/513\/revisions\/520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/media\/524"}],"wp:attachment":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}