:checked と JavaScript/jQuery で実現する、インタラクティブなWebページ
CSSセレクターの ":checked"
使い方
:checked
は、以下の形式で記述します。
要素名:checked {
スタイル
}
例えば、以下のコードは、チェックされたチェックボックスに赤い背景色を適用します。
input[type="checkbox"]:checked {
background-color: red;
}
注意点
:checked
は、以下の点に注意する必要があります。
- チェックボックスやラジオボタン以外の要素には使用できません。
- フォーカスされた要素には適用されません。
- フォーム要素が初期化された後、
:checked
は無効になります。
応用例
:checked
は、以下のような用途に使用できます。
- チェックされた項目を強調表示する
- チェックされた項目に基づいて、他の要素のスタイルを変える
その他の擬似クラス
:checked
の他にも、以下のような擬似クラスがあります。
:hover
: マウスが要素の上に乗っているとき:focus
: 要素がフォーカスされているとき:active
: 要素がクリックされているとき:disabled
: 要素が無効化されているとき
これらの擬似クラスを組み合わせることで、より複雑なスタイルを適用することができます。
:checked
は、チェックされた入力要素にスタイルを適用する便利な擬似クラスです。このセレクターを理解することで、よりインタラクティブなWebページを作成することができます。
CSS セレクター ":checked" のサンプルコード
チェックされたチェックボックスを強調表示する
<input type="checkbox" id="checkbox1">
<label for="checkbox1">チェックボックス1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">チェックボックス2</label>
input[type="checkbox"]:checked {
background-color: red;
}
チェックされた項目に基づいて、他の要素のスタイルを変える
<input type="checkbox" id="checkbox1">
<label for="checkbox1">チェックボックス1</label>
<p id="text1">テキスト1</p>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">チェックボックス2</label>
<p id="text2">テキスト2</p>
#checkbox1:checked ~ #text1 {
color: red;
}
#checkbox2:checked ~ #text2 {
color: blue;
}
チェックされた項目の数を表示する
<input type="checkbox" id="checkbox1">
<label for="checkbox1">チェックボックス1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">チェックボックス2</label>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">チェックボックス3</label>
<span id="count"></span>
#count {
display: block;
}
input[type="checkbox"]:checked {
display: none;
}
#count::after {
content: "選択された項目数: " attr(data-count);
}
#checkbox1:checked ~ #count::after {
content: "選択された項目数: 1";
}
#checkbox2:checked ~ #count::after {
content: "選択された項目数: 2";
}
#checkbox3:checked ~ #count::after {
content: "選択された項目数: 3";
}
チェックされたラジオボタンに基づいて、画像を切り替える
<input type="radio" id="radio1" name="image" value="image1">
<label for="radio1">画像1</label>
<input type="radio" id="radio2" name="image" value="image2">
<label for="radio2">画像2</label>
<img id="image" src="image1.jpg">
img {
display: none;
}
#radio1:checked ~ #image {
display: block;
src: "image1.jpg";
}
#radio2:checked ~ #image {
display: block;
src: "image2.jpg";
}
チェックされた項目をリストに表示する
<input type="checkbox" id="checkbox1">
<label for="checkbox1">項目1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">項目2</label>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">項目3</label>
<ul id="list"></ul>
#list {
list-style: none;
}
input[type="checkbox"]:checked ~ #list {
display: block;
}
#list::after {
content: "";
display: table;
clear: both;
}
#list li {
float: left;
padding: 5px;
border: 1px solid #ccc;
margin: 5px;
}
:checked
CSS セレクター ":checked" 以外の方法
JavaScript を使って、チェックボックスやラジオボタンの状態を取得し、それに応じてスタイルを適用することができます。
例:
<input type="checkbox" id="checkbox">
<label for="checkbox">チェックボックス</label>
<script>
const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
// チェックされた時の処理
checkbox.style.backgroundColor = "red";
} else {
// チェックされていない時の処理
checkbox.style.backgroundColor = "";
}
});
</script>
jQuery を使って、チェックボックスやラジオボタンの状態を取得し、それに応じてスタイルを適用することができます。
例:
<input type="checkbox" id="checkbox">
<label for="checkbox">チェックボックス</label>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#checkbox").change(() => {
if ($("#checkbox").is(":checked")) {
// チェックされた時の処理
$("#checkbox").css("background-color", "red");
} else {
// チェックされていない時の処理
$("#checkbox").css("background-color", "");
}
});
</script>
CSS の :indeterminate 擬似クラスを使う方法
ラジオボタンの場合、indeterminate
という擬似クラスを使って、半選択状態 (一部のラジオボタンが選択されている状態) を指定することができます。
例:
<input type="radio" name="radio" value="1">
<label for="radio1">ラジオボタン1</label>
<input type="radio" name="radio" value="2">
<label for="radio2">ラジオボタン2</label>
<input type="radio" name="radio" value="3">
<label for="radio3">ラジオボタン3</label>
input[type="radio"]:indeterminate {
background-color: yellow;
}
:checked
ゲーム理論:ビジネス、政治、日常生活に潜む戦略的思考
ゲーム理論の基本的な要素は以下の3つです。プレイヤー: 意思決定を行う主体戦略: プレイヤーが選択できる行動の選択肢利得: プレイヤーが各戦略を選択したときの得られる利益ゲーム理論は、これらの要素を数学的なモデルを用いて分析することで、プレイヤーがどのような戦略を選択するのか、どのような結果になるのかを予測することができます。
CSSでセピア色の世界へようこそ!画像や要素をレトロに変身させる魔法の方法
CSSの「Filter Effects」機能の一つである「sepia()」は、画像や要素をモノクロ化し、茶褐色(セピア色)のトーンを適用する関数です。古い写真のようなレトロな雰囲気を演出したい場合などに効果的に使用できます。構文n は、セピア色の強さを表す数値です。0.0の場合は元の画像の色合いが維持され、1.0になると完全にセピア色になります。
初心者向け!CSSのMedia Queriesと@media.device-widthでレスポンシブデザインを作ろう
@media. device-widthは、デバイスの幅に基づいてスタイルシートを切り替えるためのメディアクエリです。例えば、以下のように記述することで、スマートフォンとタブレット、デスクトップそれぞれに異なるスタイルを適用できます。@media
@media.any-pointer 完全ガイド: タッチスクリーンデバイスとペン入力デバイス向けスタイルシート
@media. any-pointer は、ユーザーが タッチスクリーン や ペン などのポインティングデバイスを使用しているかどうかを検知する CSS メディアクエリです。デバイスの種類に関わらず、これらのデバイスで操作しやすいようにスタイルを調整できます。
デバイスに合わせた最適な表示: CSS Media Queriesと@media.monochrome
@media. monochromeは、モノクロディスプレイ向けのスタイルシートを指定するメディアクエリです。カラーディスプレイではないデバイスで、どのようにコンテンツを表示するかを制御できます。利用例:上記の例では、モノクロディスプレイでは背景色を白、テキスト色を黒に設定しています。
CSS Miscellaneous: view-timeline-name 詳細解説
view-timeline-name は CSS の Miscellaneous モジュールで定義されるプロパティで、スクロールタイムラインの名前を指定します。スクロールタイムラインは、スクロールによってアニメーションを制御するために使用されます。
「scroll-margin-bottom」でスクロールバー下部の余白を調整し、読みやすいページを作ろう
**「scroll-margin-bottom」**は、主に以下の目的に使用されます。スクロールバーとコンテンツの間の余白を調整し、読みやすさを向上させるスクロールバーがコンテンツに重なって表示されるのを防ぐスクロールバーのデザインを調整し、サイトの全体的なデザインと調和させる
初心者向け!CSSのMedia Queriesと@media.device-widthでレスポンシブデザインを作ろう
@media. device-widthは、デバイスの幅に基づいてスタイルシートを切り替えるためのメディアクエリです。例えば、以下のように記述することで、スマートフォンとタブレット、デスクトップそれぞれに異なるスタイルを適用できます。@media
CSS Miscellaneous: background-origin プロパティのサンプルコード
background-origin プロパティは、背景画像の原点を設定するプロパティです。これは、背景画像がどのように配置され、どのようにトリミングされるかを決定します。値border-box: 背景画像の原点は、要素のボーダーの開始位置になります。
カラーパレット作成ツールも紹介!CSS Miscellaneous color でデザインのインスピレーションを高める
最も簡単な色指定方法は、140種類以上用意されているカラーネームを使用することです。例えば、red、blue、green といった色の名前を指定することで、その色を表示することができます。より正確な色指定には、16進数コードを使用することができます。16進数コードは、#記号 followed by 6桁の数字で構成されます。最初の2桁は赤、次の2桁は緑、最後の2桁は青の強度を表します。例えば、#FF0000 は赤、#0000FF は青、#FFFF00 は黄色を表します。