目次
1.はじめに
2.カラーピッカーで色を変える
2-1.type="color"について
2-2.コード
3.スライダーでCSSを変更する
3-1.type="range"
3-2.コード
3-3.その他のプロパティを変える場合のポイント
4.リセットボタンの設定
5．おわりに
1.はじめに
CSSを動的に操作したいと思い調べてみても作りたいものとは違っていたり、少しややこしかったので備忘録として纏めてみました。
今回扱うinput要素は、color(カラーピッカー)とrange(スライダー)です。
そして、input要素で変更した値を戻す方法も記載しておきます。
私自身プログラミング初心者なので、間違いやもっといい方法があると思いますが、少しでも役に立てば幸いです。
2．カラーピッカーで色を変える
2-1.type="color"について
まずは簡単な説明として、カラーピッカーはhtmlでは
<input type="color">
となります。
<input type="color" value="#ffffff">
このように、value="小文字16進数"とすると初期値としてその色が設定されます。
2-2.コード
まずは動作です。
カラーピッカーを操作することで灰色の正方形の色が変わると思います。
後ほど説明しますが、リセットボタンを押すと正方形もカラーピッカーの色も元に戻ります。
See the Pen
カラーピッカー by センコウガエル (@Senkogaeru)
on CodePen.
各コードの説明をします。ほぼcodepenのコメントと同じです。
まず、HTMLの説明です。
カラーピッカー
<input type="color" id="colorBack" value="#555555">
CSSが変更される正方形
<div class="box"></div>
次にjQureyでの記述です。
$("#colorBack").on("input", function(){
});
カラーピッカー(#colorBack)を動かすと("input"は操作中も、"change"は停止後)
$(".box").css("background-color", $("#colorBack").val())
正方形(.box)のCSSの"background-color"を"#colorBack"の値にする。
ここで、CSSの変えるプロパティが一つの場合
$("要素").css("プロパティ","値");
複数の場合
$('要素').css({"プロパティ":"値","プロパティ":"値"});
となります。
個人的には改行したり、テスト用に複数プロパティを使うので一行で書ける場合以外は":"にしています。
3.スライダーでCSSを変更する
3-1.type="range"
まずは簡単な説明として、スライダーはhtmlでは
<input type="range">
となります。
<input type="range" value="0" min="-5" max="5" step="1">
とすると初期値=0,最小値=-5,最大値=5,目盛りが1となります。
最小値はもちろん負の数も可能です。
3-2.コード
まずは動作です。
スライダーを動かすと正方形の角が丸くなるはずです。
さらにスライダーの下にその際のCSSの値が表示されます。
See the Pen
角丸 by センコウガエル (@Senkogaeru)
on CodePen.
まず、HTMLの説明です。
<input type="range" id="radius-slider" value="0" min="0" max="5" step="1">
<p class="option-value">border-radius:<span class="radius-value">0</span>%</p>
radius-valueクラスのspanに値が表示されるようにします。ここで初期値０も書いておきます。
次にjQureyでの記述です。
$("#radius-slider").on('input', function() {
});
スライダー(#radius-slider)を操作
let radiusValue = $(this).val(); //入力されたスライダーの値
let radius = radiusValue * 10; //CSSに使われる値
変数を設定
この時、最初から計算された値を変数にしたり、スライダーの値自体を計算済みの値にすると行数が減ります。
$(".radius-value").html(radius); //現在の値の表示
span(.radius-value)に変数radiusを表示させます。
$(".box").css({ // 角丸にする
"border-radius" : (radius) + "%"
});
正方形(.box)のCSSの"border-radius"を変数radiusにします。
＊ここで、"%"をつけることを忘れずに
3-3.その他のプロパティを変える場合のポイント
例えば正方形(.box)の"width"を変えるとします。
その際にそのまま
$(".box").css({"width":(変数)+"px"});
としてしまうと箱(#window)のサイズを超えたり、中心点がズレてしまいます。
それを防ぐために
$(".box").css({
"width":(変数)+"px", //変えたいプロパティ
"margin":(変数2)+"px" //位置調整のプロパティ
});
$("#window").css({"pading":(変数3)+"vw"});
のように変数を増やし、対象のmarginを変えて更にその親のpaddingも変えて調整しましょう。
変数を表示する際に、1.000003のように表示されてしまうことがあります。
計算上に小数点が含まれているとなります。(詳しくは検索してください…)
それを回避するためには
let number = (15 + 3 * value)/10; //(1.5*10+0.3*10*x)/10で整数化
このようにして整数化した値を変数とします。
また、100で割ってもできるようです。
4.リセットボタンの設定
リセットボタンを押したらCSSの値,表示される値,スライダーの位置を元に戻す方法です。
$("#reset").click(function() { //リセットボタンを押したら
$(".box").css({ //.boxのCSSを変更(元に戻す)
"background-color":"#555555",
"border-radius" : "0px"
});
$("#colorBack").val("#555555"); //カラーコードの値を元に戻す
$(".radius-value").html(0); //表示されている値を変更(0にする)
$("#radius-slider").val(0); //スライダーの値を変更(0にする)
});
2,3章のリセットボタンを複合したものです。
コメントにあるように、CSSで設定している初期値にします。
5．おわりに
初めてQiitaで書いてみて後半から力尽きてしまい若干説明が荒いかもしれません。
少なくともこのコードで動作はしているので、初心者の方はコピペで検索して詳しいものを見てみてください！
少しでも誰かの「分からない、できない」を解決できていたらなと思います。
修正点、疑問点等ありましたらコメントにてお願いします。
↧