cursor: not-allowedとは？効かない原因・Bootstrap・Tailwindでの使い方を完全解説【2026年最新】

.disabled-button {
  cursor: not-allowed;
}

<button class="disabled-button" disabled>送信できません</button>

/* これを設定すると cursor の変更が無効になる */
.disabled {
  pointer-events: none;
  cursor: not-allowed; /* ← 効かない！ */
}

/* アプローチ1: pointer-events を使わない */
button:disabled {
  cursor: not-allowed;
  pointer-events: auto; /* デフォルト値に戻す */
}

/* アプローチ2: 親子で分担する */
.wrapper {
  cursor: not-allowed;
}
.wrapper button:disabled {
  pointer-events: none;
}

<!-- HTMLのdisabled属性を使わない場合 -->
<button class="btn-disabled" aria-disabled="true">送信</button>

.btn-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  /* pointer-events はつけない */
}

document.querySelector(".btn-disabled").addEventListener("click", (e) => {
  e.preventDefault();
  // クリック時は何もしない
});

<!-- Bootstrap 5のdisabledボタン -->
<button type="button" class="btn btn-primary" disabled>無効なボタン</button>

/* Bootstrap 5 でカーソルを上書きする方法1: pointer-events を戻す */
button:disabled,
button.disabled {
  pointer-events: auto !important;
  cursor: not-allowed !important;
}

<!-- 親にcursorを設定する方法 -->
<span style="cursor: not-allowed;" class="d-inline-block">
  <button type="button" class="btn btn-primary" disabled style="pointer-events: none;">
    無効なボタン
  </button>
</span>

/* 再利用可能なラッパークラス */
.cursor-not-allowed-wrapper {
  cursor: not-allowed;
  display: inline-block;
}

.cursor-not-allowed-wrapper [disabled] {
  pointer-events: none;
}

/* Bootstrap 4/5 共通のカスタムクラス */
.not-allowed {
  cursor: not-allowed !important;
}

<button class="cursor-not-allowed opacity-50" disabled>
  無効なボタン
</button>

<!-- Tailwind CSS v3/v4 でdisabled状態を管理 -->
<button
  class="bg-blue-500 text-white px-4 py-2 
         disabled:opacity-50 
         disabled:cursor-not-allowed"
  disabled
>
  送信
</button>

<button
  class="bg-blue-500 text-white px-4 py-2 
         disabled:opacity-50 
         disabled:cursor-not-allowed
         disabled:pointer-events-auto"
  disabled
>
  送信
</button>

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  // ...
}

/* tailwind.config.css (v4) */
@import "tailwindcss";
@source "./src/**/*.{html,js,jsx,ts,tsx}";

<!-- Tailwind の disabled ボタンの完全パターン -->
<button
  class="
    bg-blue-600 hover:bg-blue-700
    text-white font-semibold
    px-6 py-2 rounded-lg
    transition-colors duration-200
    disabled:bg-gray-400
    disabled:text-gray-200
    disabled:cursor-not-allowed
    disabled:pointer-events-auto
    disabled:opacity-60
  "
  disabled
>
  送信する
</button>

// React のインラインスタイルで cursor: not-allowed
const DisabledButton = ({ isDisabled, onClick, children }) => {
  return (
    <button
      onClick={isDisabled ? undefined : onClick}
      style={{
        cursor: isDisabled ? "not-allowed" : "pointer",
        opacity: isDisabled ? 0.6 : 1,
        pointerEvents: isDisabled ? "auto" : undefined,
      }}
      disabled={isDisabled}
    >
      {children}
    </button>
  );
};

// styled-components での実装
import styled from "styled-components";

const Button = styled.button`
  cursor: pointer;
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;

  &:disabled {
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 0.6;
    background-color: #9ca3af;
  }
`;

/* 基本の使い分け */
.clickable {
  cursor: pointer;    /* クリックできる要素 */
}

.disabled {
  cursor: not-allowed; /* 操作不可の要素 */
}

.draggable {
  cursor: grab;        /* ドラッグできる要素 */
}

.dragging {
  cursor: grabbing;    /* ドラッグ中 */
}

.disabled {
  cursor: not-allowed;
  pointer-events: none; /* ← これで cursor も無効になってしまう */
}

<div class="cursor-wrapper" style="cursor: not-allowed; display: inline-block;">
  <button
    disabled
    style="pointer-events: none; opacity: 0.5;"
  >
    クリック不可
  </button>
</div>

/* CSSクラスで再利用可能にする */
.not-allowed-wrapper {
  cursor: not-allowed;
  display: inline-block; /* または inline-flex */
}

.not-allowed-wrapper > * {
  pointer-events: none;
}

// 再利用可能なNotAllowedWrapperコンポーネント
const NotAllowedWrapper = ({ children, disabled }) => {
  if (!disabled) return <>{children}</>;
  
  return (
    <span
      style={{
        cursor: "not-allowed",
        display: "inline-block",
      }}
    >
      <span style={{ pointerEvents: "none" }}>
        {children}
      </span>
    </span>
  );
};

// 使用例
<NotAllowedWrapper disabled={isLoading}>
  <button>送信</button>
</NotAllowedWrapper>

/* カスタムカーソル画像 + フォールバック */
.custom-cursor {
  cursor: url("custom-not-allowed.svg"), not-allowed;
}

/* PNG ファイルのカスタムカーソル */
.custom-not-allowed {
  cursor: url("not-allowed-icon.png") 12 12, not-allowed;
}

/* SVG ファイルのカスタムカーソル */
.custom-not-allowed-svg {
  cursor: url("not-allowed-icon.svg") 12 12, not-allowed;
}

/* SVG → PNG → キーワード のフォールバック */
.cursor-custom {
  cursor: 
    url("icon.svg") 12 12,
    url("icon.png") 12 12,
    not-allowed;
}

<!-- アクセシビリティを考慮したdisabled要素 -->
<button
  aria-disabled="true"
  tabindex="-1"
  style="cursor: not-allowed; opacity: 0.6;"
  onclick="return false;"
>
  送信できません
</button>

// React: 送信中は cursor-not-allowed
const SubmitButton = () => {
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSubmit = async () => {
    setIsLoading(true);
    try {
      await submitForm();
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button
      onClick={handleSubmit}
      disabled={isLoading}
      style={{
        cursor: isLoading ? "not-allowed" : "pointer",
        pointerEvents: "auto",
        opacity: isLoading ? 0.7 : 1,
      }}
    >
      {isLoading ? "送信中..." : "送信"}
    </button>
  );
};

// プラン制限による無効化
const FeatureButton = ({ isPremiumFeature, hasPremium }) => {
  const isDisabled = isPremiumFeature && !hasPremium;
  
  return (
    <div
      style={{
        display: "inline-block",
        cursor: isDisabled ? "not-allowed" : "default",
      }}
    >
      <button
        style={{
          pointerEvents: isDisabled ? "none" : "auto",
          opacity: isDisabled ? 0.5 : 1,
        }}
        onClick={isDisabled ? undefined : handleClick}
      >
        {isPremiumFeature && !hasPremium && (
          <span className="badge">PRO</span>
        )}
        高度な分析を見る
      </button>
    </div>
  );
};

input:disabled,
button:disabled,
select:disabled {
  cursor: not-allowed;
  pointer-events: auto; /* HTMLのdisabledによる制限を解除 */
  opacity: 0.6;
}