input要素でCSSを動的に操作する(jQurey)

#目次
　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では

```html
 <input type="color">
```

となります。

```html
<input type="color" value="#ffffff">
```
このように、value="小文字16進数"とすると初期値としてその色が設定されます。
##2-2.コード
まずは動作です。

カラーピッカーを操作することで灰色の正方形の色が変わると思います。
後ほど説明しますが、リセットボタンを押すと正方形もカラーピッカーの色も元に戻ります。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wveERVa" data-user="Senkogaeru" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Senkogaeru/pen/wveERVa">
  カラーピッカー</a> by センコウガエル (<a href="https://codepen.io/Senkogaeru">@Senkogaeru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
各コードの説明をします。ほぼcodepenのコメントと同じです。

まず、**HTML**の説明です。
**カラーピッカー**

```html
 <input type="color" id="colorBack" value="#555555"> 
```

**CSSが変更される正方形**

```html
<div class="box"></div>
```
次に**jQurey**での記述です。

```javascript
$("#colorBack").on("input", function(){

});
```
カラーピッカー(#colorBack)を動かすと(**"input"**は操作中も、**"change"**は停止後)

```javascript
 $(".box").css("background-color", $("#colorBack").val()) 
```

正方形(.box)のCSSの"background-color"を"#colorBack"の値にする。

ここで、CSSの変えるプロパティが一つの場合

```javascript
$("要素").css("プロパティ","値");
```

複数の場合

```javascript
$('要素').css({"プロパティ":"値","プロパティ":"値"});
```
となります。

個人的には改行したり、テスト用に複数プロパティを使うので一行で書ける場合以外は":"にしています。


#3.スライダーでCSSを変更する
##3-1.type="range"
まずは簡単な説明として、スライダーはhtmlでは

```html
 <input type="range">
```

となります。

```html
 <input type="range"  value="0" min="-5" max="5" step="1">
```

とすると初期値=0,最小値=-5,最大値=5,目盛りが1となります。
最小値はもちろん負の数も可能です。
##3-2.コード
まずは動作です。
スライダーを動かすと正方形の角が丸くなるはずです。
さらにスライダーの下にその際のCSSの値が表示されます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdwGaYY" data-user="Senkogaeru" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Senkogaeru/pen/mdwGaYY">
  角丸</a> by センコウガエル (<a href="https://codepen.io/Senkogaeru">@Senkogaeru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

まず、**HTML**の説明です。

```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**での記述です。

```javascript
$("#radius-slider").on('input', function() {

});
```
スライダー(#radius-slider)を操作

```javascript
let radiusValue = $(this).val();    //入力されたスライダーの値
let radius = radiusValue * 10;  //CSSに使われる値
```

変数を設定
この時、最初から**計算された値**を変数にしたり、**スライダーの値自体を計算済みの値**にすると行数が減ります。

```javascript
$(".radius-value").html(radius);  //現在の値の表示
```
span(.radius-value)に変数**radius**を表示させます。

```javascript
$(".box").css({  //  角丸にする 
        "border-radius" : (radius) + "%"
    }); 
```

正方形(.box)のCSSの"border-radius"を変数**radius**にします。
＊ここで、**"%"**をつけることを忘れずに


##3-3.その他のプロパティを変える場合のポイント

例えば正方形(.box)の**"width"**を変えるとします。
その際にそのまま

```javascript
$(".box").css({"width":(変数)+"px"}); 
```

としてしまうと箱(#window)のサイズを超えたり、中心点がズレてしまいます。

それを防ぐために

```javascript
$(".box").css({
　"width":(変数)+"px", //変えたいプロパティ
　"margin":(変数2)+"px" //位置調整のプロパティ
});
$("#window").css({"pading":(変数3)+"vw"});
```

のように変数を増やし、**対象のmargin**を変えて更にその**親のpadding**も変えて調整しましょう。


変数を表示する際に、**1.000003**のように表示されてしまうことがあります。
計算上に小数点が含まれているとなります。(詳しくは検索してください…)
それを回避するためには

```javascript
 let number = (15 + 3 * value)/10;  //(1.5*10+0.3*10*x)/10で整数化
```
このようにして整数化した値を変数とします。
また、100で割ってもできるようです。

#4.リセットボタンの設定
リセットボタンを押したら**CSSの値,表示される値,スライダーの位置**を元に戻す方法です。


```javascript
$("#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で書いてみて後半から力尽きてしまい若干説明が荒いかもしれません。
少なくともこのコードで動作はしているので、初心者の方はコピペで検索して詳しいものを見てみてください！

少しでも誰かの「分からない、できない」を解決できていたらなと思います。

修正点、疑問点等ありましたらコメントにてお願いします。