JavaScriptなしで作るUIパーツ

<details class="faq" open>
  <summary>送料はいくらかかりますか</summary>
  <div class="faq-body"><div>
    全国一律 500 円です。5,000 円以上のご注文で送料は無料になります。離島の一部地域のみ、別途中継料をいただく場合があります。
  </div></div>
</details>

<details class="faq">
  <summary>注文後に住所を変更できますか</summary>
  <div class="faq-body"><div>
    発送準備に入る前であれば変更できます。注文履歴から「配送先の変更」を選んでください。発送済みの場合は運送会社の再配達手続きをご案内します。
  </div></div>
</details>

<details class="faq">
  <summary>返品の条件を教えてください</summary>
  <div class="faq-body"><div>
    到着から 14 日以内、未使用かつ外装が保たれている場合に限りお受けします。お客様都合の返品は返送料をご負担ください。不良品は当社が全額負担します。
  </div></div>
</details>

.faq {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.faq + .faq { margin-top: 0.75rem; }

/* summary の既定マーカーを消して、自前の記号に差し替える */
.faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  font-weight: 600;
  line-height: 1.6;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.faq > summary::after {
  content: "";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
}
.faq[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* 開閉のアニメーション。height:auto は補間できないので
   grid-template-rows の 0fr → 1fr を使う */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.faq[open] .faq-body { grid-template-rows: 1fr; }
.faq-body > div {
  overflow: hidden;
  color: var(--muted);
  line-height: 1.85;
}
.faq[open] .faq-body > div { padding: 0 1.15rem 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  .faq-body, .faq > summary::after { transition: none; }
}

<div class="tabs">
  <input type="radio" name="plan" id="tab1" checked />
  <input type="radio" name="plan" id="tab2" />
  <input type="radio" name="plan" id="tab3" />

  <div class="tab-list">
    <label for="tab1">個人</label>
    <label for="tab2">チーム</label>
    <label for="tab3">法人</label>
  </div>

  <div class="panel" id="panel1">
    <h3>個人プラン</h3>
    <p>ひとりで使う前提の構成です。保存できるプロジェクトは 3 件まで、書き出しは月 50 回まで。学習と個人制作にはこれで足ります。</p>
  </div>
  <div class="panel" id="panel2">
    <h3>チームプラン</h3>
    <p>5 人までの共同編集と、変更履歴の 30 日保持が付きます。権限は編集者と閲覧者の 2 段階で、招待はリンク発行だけで完了します。</p>
  </div>
  <div class="panel" id="panel3">
    <h3>法人プラン</h3>
    <p>人数の上限がなくなり、シングルサインオンと監査ログが使えます。請求書払い、および利用状況の月次レポートに対応します。</p>
  </div>
</div>

.tabs {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
/* ラジオは同じ name を共有させるだけ。画面からは隠すが
   フォーカスは残すので、キーボードの左右キーで移動できる */
.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tab-list {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem;
  background: #f2f4f9;
  border-bottom: 1px solid var(--line);
}
.tab-list label {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.5rem;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--muted);
  cursor: pointer;
}
.tab-list label:hover { color: var(--ink); }

/* 選択中のラジオから、その id を参照しているラベルへは辿れないので
   :has() で「チェック済みの入力を含むタブ群」の n 番目を塗り分ける */
.tabs:has(#tab1:checked) label[for="tab1"],
.tabs:has(#tab2:checked) label[for="tab2"],
.tabs:has(#tab3:checked) label[for="tab3"] {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(27, 32, 48, 0.12);
}

.panel { display: none; padding: 1.4rem 1.35rem; }
.tabs:has(#tab1:checked) #panel1,
.tabs:has(#tab2:checked) #panel2,
.tabs:has(#tab3:checked) #panel3 { display: block; }

.panel h3 { margin: 0 0 0.5rem; font-size: 1.05rem; line-height: 1.5; }
.panel p { margin: 0; color: var(--muted); line-height: 1.85; }
.tabs input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

<a class="btn" href="#confirm">アカウントを削除する</a>

<div class="modal" id="confirm" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
  <a class="modal-backdrop" href="#" aria-label="閉じる"></a>
  <div class="modal-card">
    <h2 id="confirm-title">本当に削除しますか</h2>
    <p>アカウントを削除すると、保存済みのプロジェクトと共有リンクがすべて失われます。この操作は取り消せません。</p>
    <div class="modal-actions">
      <a class="modal-cancel" href="#">やめる</a>
      <a class="modal-ok" href="#">削除する</a>
    </div>
  </div>
</div>

.btn {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
}

/* :target は「URL のハッシュが自分の id と一致したとき」に当たる。
   JS を使わずに開閉状態を URL に持たせられる唯一の仕組み */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(20, 24, 36, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal:target { opacity: 1; visibility: visible; }

.modal-card {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 1.6rem 1.5rem 1.35rem;
  box-shadow: 0 30px 60px -25px rgba(20, 24, 36, 0.5);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.24s ease;
}
.modal:target .modal-card { transform: none; }

.modal-card h2 { margin: 0 0 0.6rem; font-size: 1.2rem; line-height: 1.5; }
.modal-card p { margin: 0 0 1.3rem; color: var(--muted); line-height: 1.85; }

.modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.modal-actions a {
  padding: 0.6rem 1.1rem;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.7;
  text-decoration: none;
}
.modal-cancel { border: 1px solid var(--line); color: var(--muted); }
.modal-ok { background: var(--accent); color: #fff; }

/* 背景を押しても閉じられるように、カードの下に全面リンクを敷く */
.modal-backdrop { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-card { transition: none; }
}

<div class="demo">
  <h3>スピナー</h3>
  <div class="spinner" role="status" aria-label="読み込み中"></div>
</div>

<div class="demo">
  <h3>スケルトン</h3>
  <div role="status" aria-label="読み込み中">
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton short"></div>
  </div>
</div>

<div class="demo">
  <h3>不定長の進捗バー</h3>
  <div class="bar" role="status" aria-label="読み込み中"></div>
</div>

<div class="demo">
  <h3>三点リーダー</h3>
  <span class="dots" role="status" aria-label="読み込み中"><i></i><i></i><i></i></span>
</div>

/* 1) スピナー — border の一辺だけ色を変えて回す */
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 2) スケルトン — 背景を横に流して「読み込み中」を示す */
.skeleton {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #eceff5 25%, #f6f8fc 37%, #eceff5 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
}
.skeleton + .skeleton { margin-top: 0.7rem; }
.skeleton.short { width: 55%; }
@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* 3) 進捗バー — 不定長。幅を変えながら左右に往復させる */
.bar {
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: var(--accent);
  animation: slide 1.4s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* 4) 三点リーダー — 時間差で沈ませる */
.dots { display: inline-flex; gap: 6px; }
.dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: bounce 1s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: none; opacity: 0.45; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* 動きを減らす設定の利用者には、回さずに存在だけ示す */
@media (prefers-reduced-motion: reduce) {
  .spinner, .skeleton, .bar::after, .dots i { animation: none; }
  .bar::after { width: 100%; }
}