CSSのセレクタで「:disabled」という記述を見たことはありませんか？

disableは、無効になった要素を表すCSS疑似クラスです。

どんなときに使うものなのか気になりますよね。

今回は、CSSのdisabledについて、使い方などを詳しく知りたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのdisabledの使い方や使用場面などが分かるようになりますよ。

ぜひ最後まで読んでくださいね！

disabledとは？

disabledは、CSSの疑似クラスとして、要素の後ろに記述します。

具体的には、以下のように書きますね。

input:disabled {
  background: #ccc;
}

上記のように書かれたスタイルは、その要素が無効化されているときに適用されます。

無効化されているとは、要素にdisabled属性が指定されている状態のことです。

テキスト入力やチェックボックスなど、ユーザーが操作する要素に指定されるもので、無効化のときには入力やクリックなどの操作ができなくなります。

HTMLでは、以下のようにdisabledを指定できます。

<form action="#">
  <label for="name">名前:</label>
  <input type="text">
  <label for="age">年齢:</label>
  <input type="text" disabled>
</form>

名前の欄は入力ができますが、年齢は入力もフォーカスもできないことが確認できるでしょうか？

先ほどのCSSを使うことで、背景色を灰色にして記入できないことを視覚的に示すことができます。

JavaScriptによるdisabledのオンオフ

HTMLで直接指定するだけでなく、JavaScriptを用いることで、ユーザーの操作で無効化のオンオフを切り替えられるようにできます。

<label><input type="checkbox" name="check" onclick="click1()">入力する</label>
<input type="text" id="text-box" disabled>

JavaScriptでは、以下のように記述します。

function click1(){
    if (document.getElementById("text-box").disabled === true){
        document.getElementById("text-box").disabled = false;
    }else{
        document.getElementById("text-box").disabled = true;
    }
}

上記のコードでは、最初にチェックボックスと無効化された入力欄を表示させています。

チェックボックスにチェックを入れると、無効化が解除され入力欄に記入できるようになり、チェックを外すと再び入力できなくなります。

「onclick=”click1()”」の指定により、チェックボックスをクリックをするたびに、JavaScriptの処理が実行されます。

「document.getElementById(“text-box”)」は、IDが「text-box」の要素を取得します。

この要素に「disabled」が適用されているかどうかを判定し、適用されていればfalseで外して、適用されていなければ、trueで付け加えています。

プログラミングをまだよく知らないという方は、そちらも勉強してみることをおすすめします。

disabledを使う場面とメリットについて

CSSのdisabledの使い方、HTMLの要素のdisabled属性について解説してきました。

また、JavaScriptで無効化のオンオフを切り替える方法も紹介しましたね。

では、この無効化の機能は、どういった場面で利用できるのでしょうか？

HTMLタグの中にdisabledを指定できる要素は、以下のものとなっています。

フォームの中で使われる要素ですね。

disabledは、主にユーザーの操作によってフォーム内の状態を変える目的で使用されます。

先ほどにもチェックしないと入力できないフォームを紹介しましたね。

そういった条件によって表示を切り替えるシステムを作るのに適しています。

テキストを入力しないとフォームを送信するボタンが押せない、といった仕組みを作ることもできますね。

このときに、「入力できない」「送信できない」といったことがはっきりと伝わるようなデザインにすることが大切です。

CSSのdisabledは、無効化を視覚的にわかりやすくするために使用しましょう。

まとめ：disabledの指定にはプログラミングも重要

今回は、CSSでdisabledを使う方法とその使い道について解説してきました。

フォーム内のHTMLタグにdisabledが加わると、要素を無効化することができるため、そのスタイル指定に使うということでしたね。

JavaScriptで切り替える方法も紹介しました。余裕がある方は、プログラミングについても学習を進めてみてくださいね。

今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／