実用的なコード例集

<form>
  <div style="margin-bottom: 1rem;">
    <label style="display: block; margin-bottom: 0.5rem;">メールアドレス</label>
    <input type="email" placeholder="your@email.com" style="width: 100%;">
  </div>

  <div style="margin-bottom: 1rem;">
    <label style="display: block; margin-bottom: 0.5rem;">パスワード</label>
    <input type="password" placeholder="••••••••" style="width: 100%;">
  </div>

  <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
    <label>
      <input type="checkbox"> ログイン状態を保持
    </label>
    <a href="#">パスワードを忘れた？</a>
  </div>

  <button type="submit" class="btn btn-primary" style="width: 100%;">ログイン</button>
</form>

<div style="display: flex; gap: 0.5rem;">
  <input type="search" placeholder="検索..." style="flex: 1;">
  <button class="btn btn-primary">検索</button>
</div>

<div style="border: 2px dashed var(--color-border); padding: 3rem; text-align: center; cursor: pointer;"
     onclick="document.getElementById('fileInput').click()">
  <div style="font-size: 3rem; margin-bottom: 1rem;"></div>
  <p>ファイルをドラッグ&ドロップ</p>
  <p style="font-size: 0.9rem;">または クリックして選択</p>
  <input type="file" id="fileInput" multiple style="display: none;">
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
  <div class="card">
    <img src="product.jpg" alt="Product" style="width: 100%; border-radius: var(--border-radius) var(--border-radius) 0 0;">
    <div class="card-body">
      <h4>商品名</h4>
      <p>商品の説明文</p>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <strong style="font-size: 1.25rem; color: var(--color-primary);">¥9,800</strong>
        <button class="btn btn-sm btn-primary">カートに追加</button>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body" style="display: flex; align-items: center; gap: 1rem;">
    <div class="avatar avatar-md">
      <img src="user.jpg" alt="User">
      <span class="avatar-status avatar-status-online"></span>
    </div>
    <div style="flex: 1;">
      <strong>田中太郎</strong>
      <div style="font-size: 0.9rem;">tanaka@example.com</div>
    </div>
    <span class="badge badge-success badge-pill">アクティブ</span>
    <button class="btn btn-sm btn-outline-primary">編集</button>
  </div>
</div>

<!-- ボタン -->
<button class="btn btn-danger" onclick="showDialog()">削除</button>

<!-- モーダル -->
<div id="modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-box); padding: 2rem; border-radius: var(--border-radius); max-width: 400px; width: 90%;">
    <h3>本当に削除しますか？</h3>
    <p>この操作は取り消せません。</p>
    <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
      <button class="btn btn-secondary" onclick="closeDialog()" style="flex: 1;">キャンセル</button>
      <button class="btn btn-danger" onclick="confirmDelete()" style="flex: 1;">削除</button>
    </div>
  </div>
</div>

<script>
function showDialog() {
  document.getElementById('modal').style.display = 'block';
}

function closeDialog() {
  document.getElementById('modal').style.display = 'none';
}

function confirmDelete() {
  alert('削除されました');
  closeDialog();
}
</script>

<!-- トースト表示エリア -->
<div id="toastContainer" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999;"></div>

<script>
function showToast(type, message) {
  const container = document.getElementById('toastContainer');
  const toast = document.createElement('div');
  toast.className = `alert alert-${type} alert-dismissible`;
  toast.style.cssText = 'margin-bottom: 0.5rem; animation: slideIn 0.3s ease;';
  toast.innerHTML = `
    ${message}
    <button class="alert-close" onclick="this.parentElement.remove()">×</button>
  `;

  container.appendChild(toast);

  // 3秒後に自動削除
  setTimeout(() => {
    toast.style.animation = 'slideOut 0.3s ease';
    setTimeout(() => toast.remove(), 300);
  }, 3000);
}

// アニメーション
const style = document.createElement('style');
style.textContent = `
  @keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(400px); opacity: 0; }
  }
`;
document.head.appendChild(style);
</script>

<button class="btn btn-primary" onclick="simulateLoading(this)">
  データを読み込む
</button>

<script>
function simulateLoading(btn) {
  // ローディング開始
  btn.disabled = true;
  btn.innerHTML = '<span class="loading loading-spinner"></span> 読み込み中...';

  // 3秒後に完了
  setTimeout(() => {
    btn.disabled = false;
    btn.textContent = 'データを読み込む';
  }, 3000);
}
</script>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
  <div class="card">
    <div class="card-body">
      <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
        <span style="color: var(--color-text-secondary);">総売上</span>
        <span style="font-size: 2rem;">💰</span>
      </div>
      <div style="font-size: 2rem; font-weight: bold;">¥1,234,567</div>
      <div style="color: var(--color-success); font-size: 0.9rem; margin-top: 0.5rem;">
        ↑ 12.5% 先月比
      </div>
    </div>
  </div>
</div>

<div style="display: flex; justify-content: space-between; align-items: center;">
  <!-- ステップ1: 完了 -->
  <div style="text-align: center; flex: 1;">
    <div style="width: 40px; height: 40px; background: var(--color-success); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;">1</div>
    <div>注文情報</div>
  </div>

  <div style="height: 2px; background: var(--color-success); flex: 1;"></div>

  <!-- ステップ2: 現在 -->
  <div style="text-align: center; flex: 1;">
    <div style="width: 40px; height: 40px; background: var(--color-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;">2</div>
    <div>配送先</div>
  </div>

  <div style="height: 2px; background: var(--color-border); flex: 1;"></div>

  <!-- ステップ3: 未完了 -->
  <div style="text-align: center; flex: 1;">
    <div style="width: 40px; height: 40px; background: var(--color-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;">3</div>
    <div>支払い</div>
  </div>
</div>