<p>今記事ではJavaScriptを使わずにアコーディオンの作り方を紹介します。<br>細かいアニメーションなどはまだまだJavaScriptのお力を借りなければなりませんが、HTMLだけでアコーディオンが作れるようになったのは驚きですねw<br></p><h2 id="h116fd24dee">とりあえず作ってみた。</h2><p><code>details</code>と<code>summary</code>といったタグを使うことにより簡単にアコーディオンを作ることができます。</p><pre><code>&lt;details class="accordion"&gt;
  &lt;summary class="label"&gt;フロントエンドエンジニア&lt;/summary&gt;
  ダミーテキストダミーテキストダミーテキストダミーテキスト
&lt;/details&gt;
&lt;details class="accordion"&gt;
  &lt;summary class="label"&gt;バックエンドエンジニア&lt;/summary&gt;
  ダミーテキストダミーテキストダミーテキストダミーテキスト
&lt;/details&gt;
&lt;details class="accordion"&gt;
  &lt;summary class="label"&gt;デザイナー&lt;/summary&gt;
  ダミーテキストダミーテキストダミーテキストダミーテキスト
&lt;/details&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/d6b83c8a3bf04fabaff687c5a456848e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%2017.18.56.png" alt=""></p><h2 id="h8ba5c4e0d9">応用編</h2><p>では、応用編です。今回は<a href="https://code-jump.com/" target="_blank" rel="noopener noreferrer">CodeJump</a>さんの<a href="https://code-jump.com/extra2-menu/" target="_blank" rel="noopener noreferrer">「【jQuery コーディング練習】番外編：アコーディオンメニューの練習」</a>を参考にデザインを作っています。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fembed%2Fpreview%2FJjxyezr%3Fdefault-tabs%3Dhtml%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DJjxyezr&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fpen%2FJjxyezr&image=https%3A%2F%2Fshots.codepen.io%2Fusername%2Fpen%2FJjxyezr-512.jpg%3Fversion%3D1699953628&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe><p><br></p><pre><code>&lt;div class="wrapper"&gt;
&nbsp; &lt;h1 class="title"&gt;募集職種&lt;/h1&gt;
&nbsp; &lt;details class="accordion"&gt;
&nbsp; &nbsp; &lt;summary class="label"&gt;1. フロントエンドエンジニア&lt;/summary&gt;
&nbsp; &nbsp; &lt;dl class="detail"&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;仕事内容&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;応募資格&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;必須スキル&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;給与&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;XXX万～XXX万 (スキル・経験・実績により優遇)&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;休日・休暇&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
&nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;雇用形態&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;正社員（試用期間3ヶ月）&lt;br /&gt;業務委託&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務時間&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;フレックスタイム&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務地&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;東京&lt;/dd&gt;
&nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &lt;/details&gt;
&nbsp; &lt;details class="accordion"&gt;
&nbsp; &nbsp; &lt;summary class="label"&gt;2. バックエンドエンジニア&lt;/summary&gt;
&nbsp; &nbsp; &lt;dl class="detail"&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;仕事内容&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;応募資格&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;必須スキル&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;給与&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;XXX万～XXX万 (スキル・経験・実績により優遇)&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;休日・休暇&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
&nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;雇用形態&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;正社員（試用期間3ヶ月）&lt;br /&gt;業務委託&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務時間&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;フレックスタイム&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務地&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;東京&lt;/dd&gt;
&nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &lt;/details&gt;
&nbsp; &lt;details class="accordion"&gt;
&nbsp; &nbsp; &lt;summary class="label"&gt;3. デザイナー&lt;/summary&gt;
&nbsp; &nbsp; &lt;dl class="detail"&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;仕事内容&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;応募資格&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;必須スキル&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;給与&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;XXX万～XXX万 (スキル・経験・実績により優遇)&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;休日・休暇&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
&nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;雇用形態&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;正社員（試用期間3ヶ月）&lt;br /&gt;業務委託&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務時間&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;フレックスタイム&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務地&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;東京&lt;/dd&gt;
&nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &lt;/details&gt;
&lt;/div&gt;</code></pre><p><br></p><pre><code>* {
&nbsp; margin: 0;
&nbsp; padding: 0;
&nbsp; box-sizing: border-box;
}

body {
&nbsp; background-color: #addff2;
&nbsp; color: #000;
}

.wrapper {
&nbsp; max-width: 960px;
&nbsp; padding: 0 20px;
&nbsp; margin: 40px auto;
}

.title {
&nbsp; font-size: 2rem;
&nbsp; font-weight: normal;
&nbsp; margin-bottom: 30px;
}

.accordion {
&nbsp; border-top: solid 1px #000;
}

.accordion:last-child {
&nbsp; border-bottom: solid 1px #000;
}

.accordion[open] {
&nbsp; background-color: #5bbee5;
}

.accordion .label {
&nbsp; list-style: none;
&nbsp; cursor: pointer;
&nbsp; font-size: 1.125rem;
&nbsp; font-weight: bold;
&nbsp; padding: 40px 30px;
&nbsp; position: relative;
&nbsp; transition: 0.5s;
}

.accordion .label::-webkit-details-marker&nbsp;{
  display: none;
}

.accordion .label:hover {
&nbsp; background-color: #5bbee5;
}

.accordion .label::before,
.accordion .label::after {
&nbsp; content: "";
&nbsp; width: 20px;
&nbsp; height: 1px;
&nbsp; background: #000;
&nbsp; position: absolute;
&nbsp; top: 50%;
&nbsp; right: 5%;
&nbsp; transform: translateY(-50%);
}

.accordion .label::after {
&nbsp; transform: translateY(-50%) rotate(90deg);
&nbsp; transition: 0.5s;
}

.accordion[open] .label::after {
&nbsp; transform: rotate(180deg);
}

.accordion .detail {
&nbsp; border-top: solid 1px #ccc;
&nbsp; padding: 32px 24px;
&nbsp; display: flex;
&nbsp; flex-wrap: wrap;
&nbsp; background-color: #addff2;
}

.accordion .detail dt {
&nbsp; padding-bottom: 32px;
&nbsp; font-weight: bold;
&nbsp; width: 20%;
}

.accordion .detail dd {
&nbsp; padding-bottom: 32px;
&nbsp; width: 80%;
}</code></pre><h3 id="hc499e4ad38">解説</h3><p>HTMLの方は最初の方に解説したので省略しますね。<br></p><h4 id="h2a6e107b90">デフォルトの三角形を消す</h4><p>デフォルトで左についてある開閉式ができるやつです。<br>作成するデザインによってはそれが不要になる場合があります。</p><pre><code>.accordion .label {
&nbsp; list-style: none;
}</code></pre><p><br>通常は上記の指定で消えてくれますが、Safariだけ<code>-webkit-details-marker&nbsp;</code>というCSSの擬似要素で三角形を表示しています。以下のように別途指定して三角形を消してやる必要があります。</p><pre><code>.accordion .label::-webkit-details-marker&nbsp;{
  display: none;
}</code></pre><p>ちなみにデフォルトでは<code>display: list-item;</code>が指定されています。</p><h4 id="h7c6f0987d7">開閉状態のスタイルの切り替え</h4><p>アコーディオンには開いている時、閉じている時があります。<br>開いている時のスタイルは「こう！」閉じている時のスタイルは「こう！」のように開閉状態を調べてスタイルを切り替える方法をここでは紹介します。</p><pre><code>.accordion {
  /* アコーディオンが閉じている時 */
}

.accordion[open] {
  /* アコーディオンが開いている時 */
}</code></pre><p>アコーディオンが開いているときは<code>open</code>属性が付与され、閉じている時には付与されない為、上記のような指定の仕方になるわけです。</p><h2 id="h44e51f96ce">参考資料</h2><ul><li><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/details" target="_blank" rel="noopener noreferrer">&lt;details&gt;:詳細折りたたみ要素 - MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/summary" target="_blank" rel="noopener noreferrer">&lt;summary&gt;:概要明示要素 - MDN</a></li><li><a href="https://ics.media/entry/220901/" target="_blank" rel="noopener noreferrer">detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法</a></li></ul><p><br><br><br><br><br></p>

[JavaScript不要]　アコーディオンの作り方

<p>こんにちは。<br>久しぶりの更新になってしまいました。<br>今回のお話はSwiperを使って「前へ、次へ」の矢印のデザインなどを自身でカスタマイズする方法を紹介していきます。<br></p><h2 id="h2295b759c0">対象者</h2><ul><li>Swiperのデザインをカスタマイズしたい方。</li><li>Swiperの基礎がある程度わかっている方。</li></ul><h2 id="h07e283c641">「前へ、次へ」の矢印のデザインとページネーションのデザインを変更する方法</h2><p>デフォルトで設定した「前へ、次へ」の矢印はしたの画像のような青色の矢印であったりページネーションです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/f79c08e9649441129b0650d43852d5ca/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-01%2012.09.05.png" alt=""><br>それを今回はしたの画像のようにCSSで変更してみたいと思います。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/d5cb0b9e947a48a4b2b0d3b903b0519f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-01%2012.14.39.png" alt=""><br>まずは「前へ、次へ」の矢印のデザインから変えていきます。</p><pre><code>.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}</code></pre><p>上記のセレクタを弄るのですが、デフォルトでは<code>.swiper-button-prev::after</code>に<code>content: "prev";</code> 、<code>.swiper-button-next::after</code>に<code>content: "next";</code> が設定されていて、各青い矢印が表示されています。これを<code>content: "";</code> で打ち消してやります。<br>打ち消した後に、各セレクタに矢印とかをCSSで記述していきます。</p><pre><code>.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-button-prev {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  left: 0;
}

.swiper-button-prev::after {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  line-height: 1;
  width: 14px;
  height: 14px;
  border: 4px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(23%) rotate(-135deg);
}

.swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  right: 0;
}

.swiper-button-next::after {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  line-height: 1;
  width: 14px;
  height: 14px;
  border: 4px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-20%) rotate(-315deg);
}</code></pre><p>次にページネーションのデザインを変更していきます。<br>ページネーションのデザインを変更する場合は<code>.swiper-pagination-bullet</code>を触ります。</p><pre><code>.swiper-pagination-bullet {
  background-color: #111;
  height: 6px;
  width: 6px;
  margin: 0 16px !important;
}</code></pre><h2 id="hf730a4b43c">左右にはみ出すスライド</h2><p>自分自身も執筆していて表現が正しいのか微妙なかんじですが下記の画像のようなデザインです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/ac4b7e2db6824b01b4afec846885aef6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-01%2016.12.48.png" alt=""></p><pre><code>new Swiper(".swiper", {
  loop: true,
  speed: 500,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  centeredSlides: true,
  slidesPerView: 1,
  breakpoints: {
    600: {
      slidesPerView: 1.6, 
      spaceBetween: 40,
    },
  },
});</code></pre><p><br>左右にはみ出すスライドを実装するために重要になってくるプロパティは<code>slidesPerView</code>です。<br>このプロパティは画面に何枚のスライドを表示させるかを指定するものでデフォルトの値は「1」です。<br>これを「1.6」などのように小数にすることで、<u>複数スライドを表示かつスライドをはみ出させる</u>ことができます。<br><br>もう一つ、重要なプロパティがあります。それが<code>centeredSlides</code>です。<br>このプロパティの値を「true」にすることで<u>スライドが中央寄せで表示</u>されるようになります。<br><br>あとは<code>spaceBetween</code>でスライド間の余白を調整すれば完成です。<br><span style="color:#d75969">※CSSのmarginプロパティでスライド間を開けるより、こちらを使う方が推奨されています。</span><br></p><h2 id="h73d3c0432b">「前へ、次へ」の矢印、ページネーションを外に出す</h2><p>「前へ、次へ」の矢印、ページネーションを外に出す場合まずはHTML構造を変更する必要があります。<br>通常のHTML構造では下記の通りです。</p><pre><code>&lt;div class="swiper"&gt;
  &lt;div class="swiper-wrapper"&gt;
    &lt;div class="swiper-slide"&gt;
      &lt;img src="img/・・・" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="swiper-slide"&gt;
      &lt;img src="img/・・・" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="swiper-slide"&gt;
      &lt;img src="img/・・・" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre><p>これを以下のように作り替えます。</p><pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="swiper"&gt;
    &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img src="img/・・・" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img src="img/・・・" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img src="img/・・・" alt="" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre><p><code>.swiper</code>をさらに<code>div要素</code>で囲み<code>.swiper-pagination</code>、<code>.swiper-button-prev</code>、<code>.swiper-button-next</code>を<code>.swiper</code>と同じ階層に配置します。<br><code>.swiper</code>には「overflow:hidden」がついており、これはswiperスライダにおいて外せないものなので、「前へ、次へ」の矢印、ページネーションのパーツを外に移動させたいからです。<br><br>HTML構造を書き換えたらCSSで位置を調整します。<br>ここで注意が必要なのですが必ず一番外側の<code>div要素</code>に「position: relative」を指定してください。</p><pre><code>.wrapper {
  position: relative;
}</code></pre><p>ここまで来たら後は各々適当に各々調整してください。</p><pre><code>.swiper-button-prev {
  left: -10px;
}

.swiper-button-next {
  right: -10px;
}

.swiper-pagination {
  bottom: -30px !important;
}</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/2a1d3142679945cd8afa3739e0890007/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-03%2018.36.29.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>今回はSwiperのデザインを変更する方法をご紹介しました。<br>デフォルトの青のままのデザインだけでもいいのですが、Web制作の場面でほぼデフォルトの青のままのデザインで終わる場面はほぼないと思います。そんな場面でも自分でデザインをカスタマイズできるようになればSwiperがもっと使いやすくなるはずです。<br><br>この記事を読んで少しでも参考になれば幸いです。<br><br><br><br></p>

Swiperのデザインをいい感じにカスタマイズする方法

<p><a href="https://swiperjs.com/" target="_blank" rel="noopener noreferrer">https://swiperjs.com/</a></p><h2 id="hd8d793506b">インストール</h2><p>インストール方法は3種類あります。</p><ul><li>CDN</li></ul><pre><code>&lt;link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"&gt;&lt;/script&gt;</code></pre><ul><li>NPMでインストール</li></ul><pre><code>$ npm install swiper</code></pre><p>また、typescriptをお使いの方は以下のコマンドも叩いてください。</p><pre><code>$ npm install --save-dev @types/swiper</code></pre><p><br><span style="color:#cf3e51">もう一つ、ファイルをダウンロードして使用する方法もあるのですが今回は割愛とします。興味のある方はご自身でお調べになってください。</span></p><h2 id="h81a5ad2f19">Swiperを扱う</h2><p>では、インストールが完了できたと思うので早速Swiperを使ったスライダーを作っていきましょう。<br>まずはHTMLです。</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&nbsp;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width"&gt;
&lt;title&gt;Swiper&lt;/title&gt;

&lt;!-- CDNを使う場合のみ記述 --&gt;
&lt;link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/&gt;

&lt;/head&gt;
&nbsp;
&lt;body&gt;
  &lt;div class="swiper"&gt;
&nbsp;  &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img
&nbsp; &nbsp; &nbsp; &nbsp; src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp; alt=""
&nbsp; &nbsp; &nbsp;  /&gt;
&nbsp; &nbsp;   &lt;/div&gt;
&nbsp; &nbsp;   &lt;div class="swiper-slide"&gt;
&nbsp; &nbsp; &nbsp;  &lt;img
&nbsp; &nbsp; &nbsp; &nbsp;  src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp;  alt=""
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp;   &lt;/div&gt;
&nbsp; &nbsp;   &lt;div class="swiper-slide"&gt;
&nbsp; &nbsp; &nbsp;   &lt;img
&nbsp; &nbsp; &nbsp; &nbsp;   src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp;   alt=""
&nbsp; &nbsp; &nbsp;   /&gt;
&nbsp; &nbsp;   &lt;/div&gt;
&nbsp;   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- CDNを使う場合のみ記述 --&gt;
　　&lt;script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>こちらが基本の作りです。<br><code>.swiper</code><span style="color:#333333"> </span><code>.swiper-wrapper</code><span style="color:#333333">&nbsp;</span><code>.swiper-slide</code>&nbsp;の3つは必須です。<br><br><code>.swiper-wrapper</code><span style="color:#cf3e51">&nbsp;と&nbsp;</span><code>.swiper-slide</code><span style="color:#cf3e51">&nbsp;の間に「他の要素を割り込ませたりするとうまく動かなくなる」のでご注意ください。</span><br><br>次にJavaScriptの記述です。</p><pre><code>// npmでインストールした場合のみ記述
import Swiper　from "swiper";
import "swiper/swiper-bundle.css";
// -----------------------------------------

const mySwiper = new Swiper('.swiper', {
&nbsp;&nbsp;// この中にオプションを書いていく。
});</code></pre><p>ここまで行うとスライダーが動き出します！</p><h3 id="h32a67f9128">オプション</h3><p>ここからオプションについて記述していくのですが数が膨大のため私がよく使うオプションだけを抜粋して書きます。<br></p><h4 id="hd76776d2c4">ページング</h4><pre><code>&lt;div class="swiper"&gt;
&nbsp;&lt;div class="swiper-wrapper"&gt;
  &lt;!-- 省略 --&gt;    
&nbsp;&lt;/div&gt;
  &lt;div class="swiper-pagination"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
&lt;/div&gt;</code></pre><p><br></p><pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Pagination } from "swiper";
Swiper.use([Pagination]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリックを可能にする
  },
});</code></pre><h4 id="he3e924b320">前後の矢印</h4><pre><code>&lt;div class="swiper"&gt;
&nbsp;&lt;div class="swiper-wrapper"&gt;
  &lt;!-- 省略 --&gt;    
&nbsp;&lt;/div&gt;
　　&lt;div class="swiper-button-prev"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
  &lt;div class="swiper-button-next"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
&lt;/div&gt;</code></pre><p><br></p><pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Navigation } from "swiper";
Swiper.use([Navigation]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});</code></pre><h4 id="hf7ee70b482">スピード</h4><p>スライドのスピードを設定できます。デフォルトでは300です。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  speed: 500
});</code></pre><h4 id="hcbe3576d32">ループさせる</h4><p>簡単です。下記コードをつけるだけです。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  loop: true
});</code></pre><h4 id="hd264691107">自動再生</h4><p>デフォルトでは自動再生されないので、させたい場合はオプションを書く必要があります。</p><pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  autoplay: true,
});</code></pre><p>パラメータを追記して細かい設定をすることも可能です。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  autoplay: {
    delay: 1500, // (デフォルトは3000)1.5秒後に次のスライド
&nbsp; &nbsp; disableOnInteraction: false, // 矢印またはページネーションをクリックしても自動再生を止めない
&nbsp; }
});</code></pre><h4 id="h11244fc379">表示させるスライドの枚数を指定する</h4><p>指定した枚数分がコンテナ内に収まるように調整される。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  slidesPerView: 3 // デフォルトでは1
});</code></pre><p>小数点以下の値も指定可能(2.8などの小数を指定すると左右にはみ出たスライダが実装できる)。<br>CSSでサイズ調整したい場合は<code>‘auto’</code>&nbsp;を指定。</p><h4 id="h627921dd59">アクティブなスライドが中央に来るようにする</h4><p>主に、<code>slidesPreView</code>の値が小数を指定したときに使用します。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  centeredSlides: true,
  slidesPerView:  1.4
});</code></pre><h4 id="h0201d4f644">レスポンシブ</h4><p>デバイスのサイズによって<code>slidesPreView</code>の数を変えたいときなどに使います。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  breakpoints: {
    // デバイスが320px以上の時
    320: {
       slidesPerView:  1.4
    },
    // デバイスが640px以上の時
    640: {
       slidesPerView:  2.8
    }
  },
  slidesPerView:  1,
  centeredSlides: true
});</code></pre><h4 id="hb3954a0c7e">スライド感の余白を指定する</h4><p>CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  spaceBetween: 40 // px
});</code></pre><p><br>先ほども記載しましたが、ここに記載したオプションは本の一部で、僕自身がよく使うものだけ取り上げさせていただきました。なので、ご興味がある方は各自で調べてみてください。また、Jqueryに依存せず使えることやオプションが多く<span style="color:#000000">カスタマイズ性が豊かなポイントもグッドです。</span><br><span style="color:#000000">皆さんもよければSwiperを使ってみてくださいね。</span></p>

Swiperを使ってサクッとスライドを作ってみた。

<h2 id="hd28e9553ca">ダークモード</h2><p>一昨年あたりからwebデザインにおいてもトレンドになったダークモード。<br>「目に優しい」などのさまざまな効果がありますが今回はデモのようなダークモードとライトモードを切り替えるスイッチャーを作りたいと思います。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fembed%2Fpreview%2FNWzzPPG%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DNWzzPPG&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fpen%2FNWzzPPG&image=https%3A%2F%2Fshots.codepen.io%2Fwatataku8911%2Fpen%2FNWzzPPG-512.jpg%3Fversion%3D1671265134&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hedbfa7dcce">スイッチを作る。</h2><p>では、早速ダークモードとライトモードを切り替えるスイッチを作っていきます。<br>スイッチを作るためにはHTMLでチェックボックスを用意する必要があります。</p><pre><code>&lt;form action="#"&gt;
    &lt;label class="switch"&gt;
      &lt;input type="checkbox" class="checkbox"/&gt;
      &lt;span class="slider"&gt;&lt;/span&gt;
    &lt;/label&gt;
&lt;/form&gt;</code></pre><p>これだけでは普通のチェックボックスがひとつできあがるだけです。<br>なのでCSSを適応させます。</p><pre><code>.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #33f321;
}

input:focus + .slider {
  box-shadow: 0 0 1px #33f321;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:before {
  border-radius: 50%;
}</code></pre><p>少し長いかもですがこれで切り替え用のスイッチができました。<br>ですが、このままでは何も変化しない普通のスイッチです。ですのでスイッチをオンにするとダークモードに切り替え、オフるとライトモードに切り替わるようにします。</p><h2 id="hd148c32f21">JavaScript</h2><p>まず、必要になってくるのは「今、スイッチがオンなのかオフなのか」の状態を知らなければいけません。<br>その情報をとってくるには下記コードで取得可能です。</p><pre><code>const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
     console.log("スイッチがオンになりました。");
  } else {
     console.log("スイッチがオフになりました。");
  }
}</code></pre><p>無事チェックボックス(スイッチ)の状態を取得することができました。</p><h2 id="hcfd88cd66f">ダークモードにする</h2><p>ではいよいよダークモードにします。<br>以下のコードでダークモードにできます。</p><pre><code>document.documentElement.setAttribute("data-theme", "dark");</code></pre><p><br>ちなみにダークモードを解除、即ちライトモードにする方法は下記コードです。</p><pre><code>document.documentElement.removeAttribute("data-theme");</code></pre><p><br>従ってスイッチがオンの時にダークモードにオフの時ライトモードにするには</p><pre><code>const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.removeAttribute("data-theme");
  }
}</code></pre><p>これでスイッチがオンの時にダークモードにオフの時ライトモードに切り替わりましたがまだ何も変わりません。<br><br>最後にCSSでダークモードならこの色、ライトモードならこの色を適応させるようにすれば終わりです。</p><pre><code>:root {
  --bgColor: #fff;
}

[data-theme="dark"] {
  --bgColor: #101010;
}

body {
  background-color: var(--bgColor);
}</code></pre><p>これで完成!!<br><br><br></p>

T.W

[JavaScript不要]　アコーディオンの作り方

Swiperのデザインをいい感じにカスタマイズする方法

Swiperを使ってサクッとスライドを作ってみた。

ダークモードとライトモードを切り替えるスイッチャーを作りました。

[JavaScript不要] アコーディオンの作り方

Swiperのデザインをいい感じにカスタマイズする方法

Swiperを使ってサクッとスライドを作ってみた。

ダークモードとライトモードを切り替えるスイッチャーを作りました。

[JavaScript不要]　アコーディオンの作り方