TOP > 19.AIがwebデザイン用語を教えます > webデザイナー用語「疑似クラス」を全部教えます

神戸ホームページ制作プロ公式ブログ

7.52023

webデザイナー用語「疑似クラス」を全部教えます

こんにちは、ハナさん。将来webデザイナーになりたいんですね、素晴らしいです！今日はwebデザイナーにとって重要な用語の一つ、「疑似クラス」についてお話しましょう。疑似クラスとは、HTMLの要素に対して特定の条件に基づいてスタイルを適用するためのクラスです。例えば、特定の要素がマウスオーバーされた時だけ色を変えるような効果を実現する際に使います。疑似クラスは「:」（コロン）で始まり、その後に条件に合わせて指定します。少し難しいかもしれませんが、疑似クラスを使えばより魅力的なウェブサイトを作ることができますよ。
このブログは、webデザイナーに興味のある女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。

webデザイナー用語「疑似クラス」を全部教えます

ハナ: webデザイナー用語「疑似クラス」を全部教えいます！
リュウ: それは素晴らしいね、ハナさん！疑似クラスとは、webデザインの中で使われる特別なクラスのことなんだよ。クラスは、似たような要素をグループ化して一つのまとまりにするもので、疑似クラスはさらに要素を範囲別にグループ化するためのものなんだ。例えば、リンクの色を変えたい場合、そのリンクに疑似クラスを指定することで、その範囲内のみでスタイルを適用することができるんだよ。イメージは「お絵かきの色鉛筆セット」みたいな感じかな。鉛筆セット全体はクラスで、同じ色の鉛筆を一緒にまとめているのが疑似クラスだね。お絵かきする時に、使いたい色の鉛筆だけでクラスを作れるんだよ。分かりやすいかな？

疑似クラスとは何ですか？

ハナ: 疑似クラスって何ですか？
リュウ: 疑似クラスは、プログラムの中でオブジェクトの設計図のようなものですよ。例えば、家を作るために設計図が必要なように、疑似クラスはプログラムで使うオブジェクトの設計図となります。

なぜ疑似クラスが重要なのですか？

ハナ:なぜ疑似クラスが重要なのですか？
リュウ:疑似クラスは、ウェブデザインにおいてとても重要な概念ですよ。簡単な例えで説明すると、疑似クラスはウェブページの要素に特定のスタイルを適用するための指示書のようなものです。たとえば、ボタンをクリックしたときに色を変えたり、マウスを重ねると影がつくようにしたりすることができます。この指示はHTMLやCSSで記述され、ウェブページがより魅力的になるように役立ちますよ。
ハナ:なるほど、疑似クラスはウェブページのスタイルを制御するための指示書みたいなものなんですね。それで、なぜ疑似クラスを使うのですか？
リュウ:そうですね、疑似クラスを使うと、特定の状況や状態に応じて要素にスタイルを適用することができます。例えば、ボタンがクリックされた瞬間に色を変えたり、マウスが要素の上に重なったときに特定の影を表示したりすることができます。これによって、ユーザーがウェブページと対話する際により効果的な反応を見せることができるのです。
ハナ:なるほど、疑似クラスを使うことで、ウェブページがより動きがあって楽しいものになるんですね！それに、どんな状況で疑似クラスを使えばいいのですか？
リュウ:いろいろな場面で疑似クラスを使うことができますよ。たとえば、リンクをクリックした時に色が変わったり、マウスを要素の上に乗せている間だけ特定のスタイルを適用したり、フォームにカーソルが合っているときだけ入力欄を強調したりすることができます。これらの状況や状態に合わせて、ユーザーに対して視覚的なフィードバックを与えることができるんですよ。
ハナ:わかりました！疑似クラスは、ユーザーがウェブページと対話する際に、より見やすく楽しいものにするために使うんですね。疑似クラスの使い方にも色々あるんだなあ。ありがとうございました、リュウさん！

疑似クラスの使い方を教えてください

ハナ: 疑似クラスって何ですか？教えてください！
リュウ: 疑似クラスとは、プログラミングの世界で使われる概念の一つです。クラスとは、オブジェクト指向プログラミングで使われる設計図のようなもので、疑似クラスはその設計図の一部を模倣したものです。例えば、ボールのクラスという設計図があるとします。疑似クラスでは、ボールの色や大きさなど、特定のボールに関する情報だけを使えるようにします。疑似クラスは、特定のプログラムの機能を絞り込んで使いたい場合に便利ですよ！例えば、ウェブサイトを作る時に、ボタンの疑似クラスを作れば、それを使って繰り返し使うボタンのデザインや機能を設定できます。わかりやすかったですか？

:hoverとはどんな疑似クラスですか？

ハナ: すみません、リュウさん！ :hoverという言葉がよく分かりません。どんな疑似クラスなんですか？
リュウ: こんにちは、ハナさん！:hoverという疑似クラスは、ウェブデザインでよく使われるものですね。これはマウスカーソルが要素に乗った時に、要素に対して指定したスタイルが適用されるクラスです。例えば、ボタンに:hoverを指定すると、マウスがボタンの上に来た時に、ボタンが少し大きくなったり色が変わったりすることができますよ。
ハナ: へえ、:hoverはマウスが乗った時にスタイルが変わるんだね！例えば、ボタンを押す前と押した後の色が違うってこと？
リュウ: そうですね、ハナさん！ボタンを押す前は普通の色で表示されていますが、マウスがボタンに乗った時に:hoverが適用され、色が変わるんです。これによって、ボタンを押す前と押した後を視覚的に区別することができます。
ハナ: 分かったような気がする！それで、他にも:hoverを使うことができる要素はあるの？
リュウ: そうですね、ハナさん！:hoverはボタンだけでなく、テキストや画像、リンク、メニューなど、ウェブサイトのさまざまな要素に適用することができます。たとえば、メニューの項目に:hoverを指定すると、マウスがメニューの項目に乗った時に、項目が少し大きくなったり、背景色が変わったりすることができますよ。
ハナ: なるほど、ボタンだけでなく色んな要素に使えるんだね！素敵な演出ができそうだね！
リュウ: そうですね、ハナさん！ホバーエフェクトを使うことで、ウェブサイトの見た目を魅力的にすることができますよ。ぜひ将来、デザインする時にも:hoverを使ってみてくださいね。きっと素敵なウェブサイトが作れることでしょう！

:activeとはどんな疑似クラスですか？

ハナ: お願いです、リュウさん！:activeという疑似クラスがどういう意味なのか教えてください！
リュウ: わかりました、ハナさん。:activeという疑似クラスは、ボタンを押した瞬間やリンクをクリックした瞬間に適用されるスタイルですよ。たとえば、ボタンを押している間は色が変わったり、文字が大きくなったりすることがあります。
ハナ: なるほど！つまり、ボタンをクリックした時に反応するスタイルってことなんですね！
リュウ: そうです、ハナさん！:activeは、ユーザーが何かを操作した時に、その操作に対して視覚的なフィードバックを与えるために使われることが多いです。ボタンやリンクを使った時に、ユーザーに「押したよ！」という感覚を持たせるんですよ。
ハナ: なるほど、操作した時にすぐに分かるようにデザインしてあげるんですね！楽しそう！
リュウ: そうですね、ハナさん。ユーザーが操作した結果をすぐに感じられるようにすることは、ユーザーエクスペリエンスを向上させる大切な要素の一つです。ぜひ将来のWebデザイナーとして、活用してみてくださいね！
ハナ: はい！がんばります！ありがとうございました、リュウさん！
リュウ: どういたしまして、ハナさん！いつでも質問があればお答えしますよ。応援していますからね！頑張ってくださいね！

:focusとはどんな疑似クラスですか？

ハナ: リュウさん、:focusとはどんな疑似クラスですか？
リュウ: こんにちは、ハナさん。:focusは、ウェブデザインでよく使われる疑似クラスの一つですよ。これは、ユーザーがウェブページ上の特定の要素にフォーカス（注目）している時にスタイルを適用するために使われるんです。たとえば、ボタンをクリックしたり、テキスト入力欄にカーソルを合わせたりすると、その要素に:focusが適用され、デザインが変わることがあります。注目されている要素をわかりやすくするために、色や大きさ、背景などのスタイルを変えることができるんですよ。

:visitedとはどんな疑似クラスですか？

リュウ: こんにちは、ハナさん！webデザイナーになりたいんだね。素敵な夢を持っているね！:visitedについて教えてあげるよ。:visitedは、ウェブページ上で既に訪れたリンク要素を表します。例えば、あなたがインターネットでサイトを見てまわっていて、訪れたリンクの色を変えたい場合に使うことができるんだよ。
ハナ: そうなんだ！既に訪れたリンク要素を表すのね。でも、具体的にどんな使い方があるの？
リュウ: いい質問だね！例えば、訪れたことのあるリンクを薄く表示することで、ユーザーがどのリンクをクリックしたか分かりやすくすることができるよ。また、:visitedを使って、訪れたリンクにスタイルを付けることで、ユーザーが自分がどのページに訪れたかを視覚的に確認できるんだ。
ハナ: なるほど！:visitedを使うと、ユーザーが訪れたことのあるリンクを分かりやすく表示できるんだね。すごい！それを使ったwebサイトを作りたいな！
リュウ: そう思ってくれて嬉しいよ！:visitedは、ユーザーにとって便利な要素なので、ぜひ意識してデザインに取り入れてみてね。ハナさんが将来webデザイナーになったら、素敵なサイトを作ってくれるだろうな。応援してるよ！

:first-childとはどんな疑似クラスですか？

ハナ: おーい、リュウさん！初めまして！私の名前はハナだよ！
リュウ: こんにちは、ハナさん！どんな質問があるのかな？
ハナ: ねぇリュウさん、:first-childって何なの？
リュウ: なるほど、:first-childについて知りたいんだね！:first-childは、ウェブデザインで使われる疑似クラスの一つだよ。イメージとしては、グループで並んでいるものの中で、最初の要素を指定するんだよ。
ハナ: グループで並んでいる最初の要素っていうこと？
リュウ: そうだよ！たとえば、ウェブページ上に複数のボックスが並んでいる場合、:first-childを使うことで、最初のボックスだけをスタイリングしたり、色を変えたりすることができるんだ。
ハナ: なるほど！じゃあ、:first-childって、いろんな場面で使えるの？
リュウ: そうだね！例えば、メニューバーで最初の項目を太字にしたいときや、記事一覧で最初の見出しを特別なスタイルにするときに使えるよ。
ハナ: わーい、すごいね！ありがとう、リュウさん！
リュウ: どういたしまして！もし他にも質問があったら聞いてね！

:last-childとはどんな疑似クラスですか？

ハナ: あの、リュウさん。:last-childってどんな疑似クラスですか？
リュウ: ええと、:last-childというのは、要素の中で最後の子要素を選択するための疑似クラスですよ。例えば、ある要素に複数の子要素があった場合、その中で最後の子要素だけを指定できるんです。たとえば、お兄ちゃんと妹がいて、テーブルのなかで一番上に並んでいるのがお兄ちゃんで、一番下に並んでいるのが妹だったとしましょう。この場合、妹だけを指定するということができるんですね。
ハナ: なるほど！そういう使い方ができるんだね。やっぱりCSSって面白い！
リュウ: そうだね、CSSには色々な疑似クラスがあって、それぞれ使い方や効果が違うんだ。たくさん覚えて、自分のデザインに活かしてみてね。応援してるよ！
ハナ: ありがとう、リュウさん！わかりやすく教えてくれて、嬉しいな。これからもたくさん質問するから、よろしくお願いします！
リュウ: いつでもどんな質問でも答えるよ。頑張って学んでいこうね、ハナさん！

:nth-child()とはどんな疑似クラスですか？

ハナ: リュウさん、こんにちは！私、webデザイナーになりたいんですけど、:nth-child()ってどんな疑似クラスなんですか？
リュウ: こんにちは、ハナさん！:nth-child()は、指定した要素の子要素の中で、指定した順番に該当する要素を選択するための疑似クラスですよ。例えば、ulタグの子要素の中で、2番目に該当するliタグを選択したい場合に使います。
ハナ: なるほど、要素の順番によって選択できるんですね！でも、それをどうやって使うんですか？
リュウ: 良い質問ですね！実際には、セレクタの後ろに:nth-child()を書き、括弧内に順番を指定します。例えば、ul:nth-child(2)とすると、2番目に該当するul要素を選択することができます。
ハナ: なるほど、確かに簡単ですね！でも、この疑似クラスの応用はどんな場面で使われるんですか？
リュウ: いいですね、ハナさん！たとえば、ブログの記事一覧ページで、最初の数個の記事に特別なスタイルを適用する場合に使用することがあります。また、テーブルの偶数行や奇数行に交互の背景色を適用する際にも便利ですよ。
ハナ: なるほど！記事一覧ページで特別なスタイルを適用するのはおしゃれですね！テーブルの背景色も便利そうです！
リュウ: そうですね、ハナさん！要素の順番によって、スタイリングを変えることができるんですよ。これを使いこなせば、さまざまなデザインのアイデアを表現することができますよ！
ハナ: わーい、楽しそう！今度自分で試してみます！リュウさん、ありがとう！
リュウ: どういたしまして、ハナさん！いつでも質問があれば聞いてくださいね。頑張ってwebデザイナーになる応援しています！がんばってください！

:nth-last-child()とはどんな疑似クラスですか？

ハナ: リュウさん、:nth-last-child()ってどんな疑似クラスですか？
リュウ: ハナさん、:nth-last-child()は、Webデザインの中で要素を指定するためのクラスの一つですよ。このクラスを使うと、要素の中で最後の子要素を特定することができます。例えば、あるウェブページに複数の画像があり、それを1つずつ表示したい場合、:nth-last-child()を使って最後の画像だけを指定することができます。
ハナ: 最後の子要素を指定するってどういうことなの？具体的に教えて！
リュウ: たとえばね、おやつの袋にたくさんのお菓子が入っていて、その中の最後のお菓子だけを取り出したい時があるよね。それと同じように、ウェブページでは要素がトップから下に向かって表示されていると思ってもらえるといいかな。:nth-last-child()を使うと、その要素の中で最後の部分だけを指定できるんだ。例えば、ウェブページの中にある5つの画像があって、それを1つずつ表示したい時に、:nth-last-child(1)を使うと、最後の画像だけを指定できるんだよ。
ハナ: なるほど、お菓子の袋に入ってるお菓子の中でも最後の一つだけ取るって感じなんだね！わかったよ！ありがとう、リュウさん！
リュウ: どういたしまして、ハナさん。わかってもらえて嬉しいです！もしもう何か質問があったら、どんなことでも気軽に聞いてくださいね！

:first-of-typeとはどんな疑似クラスですか？

ハナ: おはようございます、リュウさん！質問があります！
リュウ: おはよう、ハナさん！何か質問があるのかな？
ハナ: はい、:first-of-typeってどんな疑似クラスですか？
リュウ: それはね、ハナさん。まず、HTMLという言語でWebページを作る時、要素（タグ）に対してスタイルを適用することがありますよね。:first-of-typeは、要素の中で最初の特定のタグを選ぶ時に使う疑似クラスなんですよ。
ハナ: え、要素の中で最初のタグってどういうことですか？
リュウ: 例えば、ウェブページの中に複数のpタグ（段落）がある場合、その中の最初のpタグだけを選びたいときに使うんです。それによって、特定のスタイルを付けることができるんですよ。
ハナ: なるほど！pタグだけじゃなくて、他のタグでも使えるんですね！
リュウ: そうですね、ハナさん。pタグだけでなく、h1タグ（見出し）やdivタグ（枠）など、どんなタグでも使うことができますよ。例えば、「最初の見出しだけ色を変えて目立たせたい」という場合にも使うことができるんです。
ハナ: なるほど！それで:first-of-typeって書くんですね！
リュウ: そうです！要素の中で最初の特定のタグを選ぶ時には、CSSで:first-of-typeと書くんですよ。
ハナ: わかりました！ありがとうございました、リュウさん！
リュウ: どういたしまして、ハナさん！いつでも質問してくださいね！

:last-of-typeとはどんな疑似クラスですか？

ハナ: リュウさん、:last-of-typeとはどんな疑似クラスですか？
リュウ: ハナさん、:last-of-typeは、HTMLやCSSで要素を選択するための一つの方法ですよ。例えば、ウェブページに5個の画像があって、その中で最後の1つの画像だけを特定したい場合に使います。つまり、:last-of-typeは、特定の要素の中で最後のものを選ぶためのクラスですね。
ハナ: なるほど、じゃあ例えばどんな時に使うんですか？
リュウ: 例えば、ウェブページで記事の見出しやパラグラフの後に装飾のための線を入れたい場合、最後のパラグラフにだけ線を入れるために:last-of-typeを使うことができます。最後のパラグラフだけを特定することができますよ。
ハナ: なるほど、要素の中で最後のものだけを選べるんですね！何か他にも便利な使い方はありますか？
リュウ: はい、他にも文字の色を変えるときに使えますよ。例えば、ボタンが3つあるウェブページで、最後のボタンだけを赤色にするには、ボタン要素に:last-of-typeを指定して、赤色にするCSSプロパティを設定すればいいです。
ハナ: なるほど、ボタンの中で最後のものだけを赤色にできるんですね！
リュウ: そうです！要素を選択するための汎用的な方法の一つとして、:last-of-typeはとても便利ですよ。要素の中で特定の条件を満たすものを簡単に選ぶことができるんです。
ハナ: なるほど！:last-of-typeってすごい便利なんですね！これからもっとCSSを勉強して使ってみたいです！
リュウ: 素敵ですね、ハナさん！CSSはとても面白くてクリエイティブな要素もたくさんありますから、楽しみながら学んでいってくださいね！応援していますよ！

:nth-of-type()とはどんな疑似クラスですか？

ハナ:リュウさん、:nth-of-type()とはどんな疑似クラスですか？
リュウ:ハナさん、:nth-of-type()は、HTMLやCSSを使って要素を指定するための一種の指定方法です。たとえば、ウェブページ上にある複数の要素（例えば、p要素やh1要素）の中から、特定の順番にある要素を指定することができます。nthというのは、何番目の要素かを指定するための数字を表していて、of-typeというのは、同じ種類の要素を指定することを意味しています。つまり、:nth-of-type()を使うと、例えば2番目のp要素や3番目のh1要素などを指定することができるんですよ
ハナ:なるほど、:nth-of-type()を使うと特定の順番にある要素を指定できるんですね！それって、何か役立つ場面ってありますか？
リュウ:そうですね、例えばウェブページ内の記事一覧で、2つ目や3つ目の記事にだけ特別なスタイルを付けたい時などに使えます。また、ウェブサイト内のメニューやナビゲーションバーで、特定の順番に配置されているボタンにだけスタイルを適用するのにも便利です。要素の順番によってスタイルを変えたり、操作を行ったりすることができるんですよ
ハナ:なるほど、具体的な使い方が分かりました！:nth-of-type()ってとても便利なんですね！ありがとうございます、リュウさん！
リュウ:どういたしまして、ハナさん！:nth-of-type()はCSSの中でもとても便利な疑似クラスですよ。これを使うことで、さまざまな要素を効果的に操作することができます。将来webデザイナーになるためには、様々なCSSの特徴や機能を学んで活用することが大切です。頑張ってくださいね！

:nth-last-of-type()とはどんな疑似クラスですか？

ハナ: リュウさん、:nth-last-of-type()ってどんな疑似クラスですか？
リュウ: そうですね、ハナさん。:nth-last-of-type()は、特定の要素の最後から何番目かを指定するための疑似クラスですよ。たとえば、ウェブページにあるリストの中で、最後から2番目の要素にスタイルを適用したい場合に使えます。単純な例として、カードゲームでいうと、一番下から2番目のカードを選ぶイメージですね。
ハナ: なるほど、最後から数えてスタイルを指定するんですね。それって便利ですね。他にも似たような疑似クラスってあるんですか？
リュウ: はい、そうですね。同じような働きをする疑似クラスには、:nth-child()と:nth-last-child()があります。:nth-child()は、特定の要素の中で何番目かを指定するもので、:nth-last-child()は最後から数えた場合の番号を指定するものです。例えば、ウェブページの中で3番目の要素にスタイルを指定したい場合は:nth-child(3)と書けますし、最後から3番目の要素にスタイルを指定したい場合は:nth-last-child(3)と書きますね。これらの疑似クラスを使うことで、要素を柔軟に選択することができるんですよ。
ハナ: なるほど、:nth-child()と:nth-last-child()も便利そうですね。たとえば、5個のアイテムがあるリストで、真ん中のアイテムだけを特別なスタイルで表示したい場合はどうするんですか？
リュウ: いい質問ですね。その場合は:nth-child(3)と:nth-last-child(3)の両方を組み合わせて使うことができます。たとえば、:nth-child(3):nth-last-child(3)と書くことで、リストの中央のアイテムだけを選択することができますよ。このように、疑似クラスを組み合わせることで、高度なスタイルの指定が可能になります。
ハナ: ほんとうにおもしろそうですね！たくさんの要素を簡単に選択できるなんて、まるで魔法みたいですね！
リュウ: そうですね、ハナさん。ウェブデザインの世界には、便利な技術がたくさんありますよ。:nth-last-of-type()やその他の疑似クラスもその一つで、デザインの自由度を高める役割を果たしています。まるで魔法のように要素を選択することができるので、ぜひ活用してみてくださいね！

:not()とはどんな疑似クラスですか？

ハナ: リュウさん、:not()ってどんな疑似クラスですか？
リュウ: 「ほんとうによく考えるハナさんだね！:not()は、CSSで使われる特別な命令の１つだよ。それは、ある条件に当てはまらない要素を選択するためのものなんだ。
イメージしやすい例を挙げると、横浜市内に住んでいる生徒さんの中から、ふりがなの中に「かな」が入っていない子供達を選びたいとき、:not()を使うと便利なんだ。横浜市内に住んでいる生徒さんの中から、まずはふりがなの中に「かな」が入っている子供達を選び、その中から:not(かなの中に「か」が含まれている子供達)を使って除外するんだよ。
簡単に言うと、:not()は「〜ではない」を表現するための命令ってことなんだ。覚えておくと、将来のWEBデザイナーとして役に立つかもしれないね！」

:emptyとはどんな疑似クラスですか？

ハナ: えーっと、リュウさん、僕は「:empty」という疑似クラスについて知りたいんですけど、どんな意味なんですか？
リュウ: わかりました、ハナさん！「:empty」という疑似クラスは、要素が何も中に含まれていない場合に適用されるんですよ。例えば、おもちゃの箱があって、中に何も入っていない状態の時には「:empty」という疑似クラスのスタイルが適用されることがあります。要素の中身が空っぽの場合に特定のスタイルを適用したいときに使えるんですよ。
ハナ: なるほど！要素の中身が何もない時に適用されるんですね。でも、例えば画像が入っている要素って、中身が空っぽじゃないのに「:empty」が適用されたらどうなるんですか？
リュウ: いい質問ですね、ハナさん！実は、「:empty」は要素の中身が空っぽでない限りは適用されないんですよ。つまり、画像などが入っている要素には適用されないんです。要素の中身が空っぽの場合にだけスタイルが適用されるんですよ、すごいですね！
ハナ: わー、すごいですね！なるほど、要素の中身が空っぽの時にだけ使えるんですね！ありがとうございます、リュウさん！
リュウ: どういたしまして、ハナさん！いつでも質問があれば聞いてくださいね。あなたが将来webデザイナーになるために、お手伝いできることがあれば嬉しいですよ！

:checkedとはどんな疑似クラスですか？

ハナ:CSSの勉強をしていて、:checkedという疑似クラスがあるんですけど、それってどんなクラスなんですか？
リュウ:あ、:checkedね！それはね、チェックボックスやラジオボタンの選択状態を指定するためのクラスなんだよ。例えば、お菓子の箱を想像してみて。お菓子の箱の中に、チョコレートが入っているかどうかを確認するために、蓋を開けて中をチェックするよね？それと同じで、:checkedで指定することで、選択された状態を確認できるんだよ。
ハナ:なるほど、チェックボックスやラジオボタンの選択状態を確認するためのクラスなんですね！分かりました、ありがとうございます！
リュウ:どういたしまして！もし他にも質問があれば遠慮なく聞いてね！

:disabledとはどんな疑似クラスですか？

ハナ: “リュウさん、:disabledってどんなやつですか？”
リュウ: “ほんとに将来WEBデザイナーになりたいんだね、ハナさん。:disabledはHTMLやCSSで使われる疑似クラスのひとつで、使われた要素を無効化する効果があります。ある要素が:disabledと指定されると、その要素はクリックや入力などのイベントが受け付けなくなるんだよ。”
ハナ: “ふーん、例えばどんな時に使うのかな？”
リュウ: “例えば、お問い合わせフォームなどでよく使われるよ。フォームの送信ボタンは、必須入力が終わらないと押せないようにしたいですよね。その時に、必須入力が終わっていない時はボタンを:disabledで無効化することができるんだ。”
ハナ: “なるほど！これって、おかあさんがボタンを押せないようにしておくのにも使えるんですか？”
リュウ: “そうだね、それもできるよ。例えば、おかあさんがネットショッピングで「購入するボタン」を押す前に、利用規約に同意してもらったり、必要な情報を入力してもらったりする必要があるよね。その時に、同意していない場合や必要な情報が入力されていない場合は、ボタンを:disabledで無効化することができるんだよ。”
ハナ: “わぁ、便利ですね！自分でホームページを作る時にも使えそうです！”
リュウ: “そうだね、ハナさんが将来WEBデザイナーになったら、ぜひ使ってみてね。きっと素敵なホームページが作れると思うよ！”
 
ページ上部へ戻る