入力領域作成
実行結果
既存のチェックボックスを消して,大きな丸四角のチェックボックスを作りました。
labelの部分をボタンにしました。
プログラム
HTML
<input type="checkbox" id="input">
<label for="input" class="label"></label>
/*CSS*/
#input{
display: none;/*元のチェックボックスを消します*/
}
.label {
position: relative;
padding-left: 50px;
/*チェックボックス分の隙間を作ります*/}
.label::before {
content: "";/*チェックの場所です*/
width: 50px; height: 50px;/*箱の大きさです*/
position: absolute;
top: 50%;
transform: translateY(-50%);/*中央ぞろえにします*/
border: 1px solid #0104b5;/*太さと色です。*/
border-radius: 15px;/*角の丸さです*/
cursor: pointer;/*ポインターにします*/}
#input:checked+label::before {
/*チェックしたときの箱の色です*/
background: #0104b5;}
単純ですが機能します。
色や形が好みに応じて作れます。
ラベルだけで作りました。
ラベルだけで作りました。
divを使って入力領域作成します
実行結果
divで丸四角のチェックボックスを作りました。
divをチェックボックスにしました。
プログラム
HTML
<input type="checkbox" id="input2">
<label for="input2" class="label2">
<div class="div1"></div>
</label>
/*CSS*/
#input2{
display: none;/*元のチェックボックスを消します*/
}
.div1{
width: 50px; height: 50px;/*箱の大きさです*/
border: 1px solid #000;/*太さと色です。*/
border-radius: 15px;/*角の丸さです*/
cursor: pointer;/*ポインターにします*/}
#input2:checked ~ .label2 .div1{
/*チェックしたときの箱の色です*/
background: #c00;}
コードは短くなります。
divの方が分かり易く見えるのは私だけでしょうか？
divでチェックボックスを作りました。
CSSの記述がすっきりします。
CSSの記述がすっきりします。
複数の入力領域作成します
実行結果
divで4つの丸四角のチェックボックスを作りました。
inputのIDは変更しました。divのクラスdiv1は残しました。
プログラム
HTML
<input type="checkbox" id="input3">
<label for="input3" class="label2">
<div class="div1 a1"></div>
<div class="div1 a2"></div>
<div class="div1 a3"></div>
<div class="div1 a4"></div>
</label>
/*CSS*/
#input3:checked ~ .label2 .div1{
/*チェックしたときの箱の色です*/
background: #dd0;}
クラスが同じなのでチェックボックスは自動的に出来上がっています。
CSSの中にdivのかたちをつくるプログラムが必要です。 上のCSSの.div1{...}と同じです。 クラスは上手に使うと便利です。
複数のdiv要素を入力場所として使います。
それぞれに形を付けることができます。
input,labrl,divを二組作ります。
実行結果
input,labrl,divの組を二組とdiv一つを作成します
OR
OR回路が作れました。
プログラム
HTML
<input type="checkbox" id="input4">
<label for="input4" class="label2">
<div class="div1 a1">入A</div>
</label>
<input type="checkbox" id="input5">
<label for="input5" class="label2">
<div class="div1 a2">入B</div>
</label>
<div class="div1 a3">OR</div>
<hr>
/*CSS*/
#input4:checked ~ .label2 .a1{
/*チェックしたときの箱の色です*/
background: #0d0;}
#input5:checked ~ .label2 .a2{
/*チェックしたときの箱の色です*/
background: #0d0;}
#input4:checked ~ .a3{
/*チェックしたときの箱の色です*/
background: #0d0;}
#input5:checked ~ .a3{
/*チェックしたときの箱の色です*/
background: #0d0;}
CSSのプログラムは改良の必要があります。
2つの入力と1つの出力を作りました。ロジック回路の初めです。
9thsep2020yashi21
9thsep2020yashi21