操作できないトグルスイッチを作る方法【HTML/CSS・サンプルコード付き】

操作できないトグルスイッチを作る方法

操作できないトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLのdisabled属性を使用して、見た目は通常のトグルスイッチのまま、ユーザーがクリックやタップで状態を変更できないトグルスイッチを実装できます。HTMLとCSSだけで動作するため、JavaScriptを使わずに簡単に導入できます。

管理画面で変更権限のない設定項目を表示したい場合や、確認画面で現在の設定内容を表示したい場合、機能が利用できないことを視覚的に伝えたい場面などで活用できます。ON・OFFどちらの状態でも表示できるため、用途に応じて初期状態を変更することも可能です。

サンプルコードでは、タイトルや説明文のほか、トグルスイッチの色やサイズ、角丸、余白などを自由に変更できます。シンプルな構成なので初心者でも編集しやすく、管理画面や会員サイト、ECサイト、お問い合わせ画面など、さまざまなWebサイトへ組み込みやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

操作できないトグルスイッチ

通知を受け取る

このトグルスイッチは操作できません。

disabled属性を付けたトグルスイッチのデモです。見た目は通常のトグルスイッチですが、クリックやタップではON・OFFを切り替えられません。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>操作できないトグルスイッチ</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- トグルスイッチ全体 -->
  <div class="toggle-switch-disabled_wrap">

    <!-- タイトル -->
    <div class="toggle-switch-disabled_title">
      操作できないトグルスイッチ
    </div>

    <!-- 操作できないトグルスイッチ -->
    <label class="toggle-switch-disabled_label">

      <!-- checkedでON、disabledで操作を無効化 -->
      <input
        class="toggle-switch-disabled_input"
        type="checkbox"
        checked
        disabled>

      <!-- スイッチの背景と丸いノブ -->
      <span class="toggle-switch-disabled_slider"></span>

      <!-- 項目名 -->
      <span class="toggle-switch-disabled_text">
        通知を受け取る
      </span>

    </label>

    <!-- 補足文 -->
    <p class="toggle-switch-disabled_note">
      このトグルスイッチは操作できません。
    </p>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* トグルスイッチ全体 */
.toggle-switch-disabled_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:420px; /* 最大横幅。値を大きくすると全体が横へ広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #dbe3ee; /* 全体を囲む枠線 */
  border-radius:16px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 全体の背景色 */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.toggle-switch-disabled_title{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとスイッチとの間隔が広がる */
  color:#1f2937; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* ラベル全体 */
.toggle-switch-disabled_label{
  display:inline-flex; /* スイッチと項目名を横並びにする */
  align-items:center; /* 上下中央へ揃える */
  gap:14px; /* スイッチと項目名の間隔。値を大きくすると広がる */
  cursor:not-allowed; /* 操作できないことを表すカーソル */
  opacity:0.7; /* 全体を少し薄くして無効状態を表す */
}

/* チェックボックス */
.toggle-switch-disabled_input{
  position:absolute; /* レイアウトへ影響させずに配置 */
  width:1px; /* 画面上では見えないサイズにする */
  height:1px; /* 画面上では見えないサイズにする */
  margin:-1px; /* レイアウトへの影響をなくす */
  padding:0; /* 内側余白を削除 */
  overflow:hidden; /* はみ出した部分を非表示 */
  clip:rect(0 0 0 0); /* 視覚的に非表示にする */
  white-space:nowrap; /* 改行を防ぐ */
  border:0; /* 枠線を削除 */
}

/* スイッチの背景 */
.toggle-switch-disabled_slider{
  position:relative; /* 丸いノブの配置基準にする */
  display:inline-block; /* 横幅と高さを指定できるようにする */
  flex-shrink:0; /* 画面幅が狭くても縮めない */
  width:60px; /* スイッチの横幅。値を大きくすると横長になる */
  height:32px; /* スイッチの高さ。値を大きくすると高くなる */
  border-radius:999px; /* 両端を完全に丸くする */
  background:#3b82f6; /* ON状態の背景色 */
}

/* 丸いノブ */
.toggle-switch-disabled_slider::before{
  content:""; /* 疑似要素を表示 */
  position:absolute; /* スイッチ内へ配置 */
  top:3px; /* 上側から3pxの位置 */
  left:31px; /* ON状態のノブ位置 */
  width:26px; /* ノブの横幅。値を大きくするとノブが大きくなる */
  height:26px; /* ノブの高さ。値を大きくするとノブが大きくなる */
  border-radius:50%; /* ノブを円形にする */
  background:#ffffff; /* ノブの背景色 */
  box-shadow:0 2px 6px rgba(15,23,42,0.18); /* ノブの影 */
}

/* 項目名 */
.toggle-switch-disabled_text{
  color:#374151; /* 項目名の文字色 */
  font-size:16px; /* 項目名の文字サイズ */
  font-weight:600; /* 項目名をやや太くする */
  line-height:1.5; /* 項目名の行間 */
}

/* 補足文 */
.toggle-switch-disabled_note{
  margin:24px 0 0; /* 上側24pxの余白。値を大きくするとスイッチとの間隔が広がる */
  color:#4b5563; /* 補足文の文字色 */
  font-size:15px; /* 補足文の文字サイズ */
  line-height:1.8; /* 補足文の行間 */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
  }

  /* トグルスイッチ全体 */
  .toggle-switch-disabled_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではチェックボックスにchecked属性とdisabled属性を指定し、ONの状態を表示したままユーザーが操作できないトグルスイッチを作成します。CSSではスイッチの背景、丸いノブ、文字、無効状態を示す透明度やカーソルなどを設定します。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。タイトル、項目名、補足文を変更できます。チェックボックスのchecked属性によってONの状態を表示し、disabled属性によってクリックやタップによる切り替えを禁止しています。

style.cssはトグルスイッチと周辺要素のデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、スイッチのサイズ、ノブの位置、文字色、透明度などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたトグルスイッチはONの状態になっていますが、クリックやタップではOFFへ切り替えられません。

カスタマイズできる内容
index.htmlでは「操作できないトグルスイッチ」のタイトル、「通知を受け取る」の項目名、「このトグルスイッチは操作できません。」の補足文を変更できます。OFFの状態で操作できないスイッチにしたい場合は、チェックボックスからchecked属性だけを削除します。

style.cssではカード全体の横幅、背景色、余白、角丸、タイトルや項目名の文字サイズ、スイッチの横幅と高さ、ON時の背景色、ノブのサイズ、影、透明度を変更できます。cursor:not-allowed;は操作できないことを示し、opacity:0.7;は全体を少し薄く表示します。

数値調整
style.css
max-width:420px;
トグルスイッチ全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。

border-radius:16px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

gap:14px;
トグルスイッチと項目名の間隔です。値を大きくすると間隔が広がります。

opacity:0.7;
操作できない状態を示す透明度です。値を小さくすると薄くなり、1に近づけると通常表示に近くなります。

width:60px;
トグルスイッチの横幅です。値を大きくすると横長になります。

height:32px;
トグルスイッチの高さです。値を大きくするとスイッチ全体が高くなります。

left:31px;
ON状態で表示する丸いノブの横位置です。スイッチの横幅やノブのサイズを変更した場合は、この値も合わせて調整します。

width:26px;・height:26px;
丸いノブのサイズです。値を大きくするとノブが大きくなります。

box-shadow:0 2px 6px ...
丸いノブの影です。2pxは縦方向の位置、6pxはぼかしの広がりを表します。値を大きくすると影が強く広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:420pxにより、画面幅に合わせて全体が縮小されます。また、640px以下ではページとカードの余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。