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

cursor: not-allowedとは？使えない・効かない原因から、CSS・Bootstrap・Tailwindの実装まで完全解説【2026年最新】

cursor: not-allowedの基本

基本的な書き方

基本的な記述はシンプルです。

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

HTML側と組み合わせると、こうなります。

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

cursor: not-allowedが効かない原因と解決策

pointer-eventsとcursorの関係

これを理解するには、pointer-events プロパティの仕組みを知る必要があります。

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

1. pointer-events: none を外して cursor: not-allowed だけにする（クリックは JavaScript で防ぐ）
2. 親要素に cursor: not-allowed を設定して、子要素に pointer-events: none を設定する

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

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

button disabled cursor not-allowedの問題

<!-- 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 4/5でのcursor: not-allowedの設定方法

Bootstrap 5での解決策

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

Bootstrap 5 で cursor: not-allowed を表示するには、カスタムCSSで上書きします。

/* 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でのcursor not-allowed

Bootstrap 4 は基本的に Bootstrap 5 と同じアプローチが有効です。ただし Bootstrap 4 のバージョンによってスタイルが微妙に異なるため、DevToolsで当たっているスタイルを確認しながら調整するのが確実です。

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

TailwindCSSでのcursor-not-allowedの使い方

<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 cursor not allowed not workingの対処法

1. Tailwind の disabled: バリアントの優先度が pointer-events の設定に勝っていない
2. Tailwindのバージョンによって動作が異なる
3. Purge設定でクラスが削除されている（v2以前）

// 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への応用

<!-- 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>

cursor: not-allowedをReactで使う方法

Reactでのインラインスタイル

// 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;
  }
`;

react cursor pointerとの使い分け

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

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

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

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

cursor: not-allowedとpointer-events: noneを同時に使う方法

.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>

cursor: not-allowedのCSS詳細：cursorプロパティ全体を理解する

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

cursor pngとcursor svgでカスタム禁止カーソルを作る

/* 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 cursorの種類一覧

まとめるとこういう対応になります。

cursor not allowedとCSS disabled：アクセシビリティの考慮

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

cursor: not-allowedの実装例：よくある使用シーン

フォームの送信ボタン（送信中）

// 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>
  );
};

よくある質問（FAQ）

Q: cursor: not-allowedとcursor: defaultの違いは？

Q: cursor: not-allowedはiPhoneやAndroidでも効く？

Q: CSSの disabled 擬似クラスとnot-allowedを組み合わせる方法は？

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

Q: Bootstrapのdisabledクラスとdisabled属性はどう違う？

まとめ

• cursor: not-allowed は pointer-events: none と同時に使えない
• Bootstrap 4/5 の disabled 要素は pointer-events: none を持っているので、ラッパー要素で回避する
• Tailwind では disabled:cursor-not-allowed と disabled:pointer-events-auto を組み合わせる
• アクセシビリティのために aria-disabled="true" と tabindex="-1" もセットで設定する
• カスタムカーソル画像（PNG/SVG）と組み合わせる場合はフォールバックを忘れずに

出典

• cursor - CSS: カスケーディングスタイルシート | MDN
• Cursor - Tailwind CSS
• Interactions · Bootstrap v5.3