sugulogの日記

JavaScript、ランダム変更!ランダムに色、大きさを変えてみよう!!

スポンサードリンク

f:id:sugulog:20210110125641p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptでランダムに色、大きさを変えてみようということで

  •  ランダム変更

について簡単に解説します!!

その為このブログを読むことで、ランダムに色を変更できるようになるのはもちろん、大きさまでも変更できるようになります。

是非最後までご愛読ください。

 

今回は、

  • ランダムにグラデーションを変えてみよう

  • ランダムにBOXの大きさを変えてみよう

の順で解説していきます。

では早速、みていきましょう!!

・ランダムにグラデーションを変えてみよう

まずはHTMLの設定からです。

ボタンと色を変えたいboxだけ作成しています。

f:id:sugulog:20210109220322p:plain

次にCSSでboxにグラデーションを設定します。

f:id:sugulog:20210109212757p:plain

今回は数値で色を変更させたいため、hslで色を指定しています。
またCSS変数を使い指定することで、JavaScriptでその変数のみを後ほど変更することができます。

この変数の値をランダムに変更することで、ランダムにグラデーションを変更していきます。

では最後にJavaScriptの設定をします。

f:id:sugulog:20210109221012p:plain

CSS変数の値を更新することによりlinear-gradientの値を変更し、グラデーションが変更されるという流れです。

では実際に動きを確認してみましょう。

f:id:sugulog:20210109222705g:plain

ボタンを押すたびにグラデーションがランダムに変更されているのが確認できますね!!

・ランダムにBOXの大きさを変えてみよう

では先程の実装を参考にBOXの大きさも変えてみましょう。

JavaScriptに以下を追記しました。

f:id:sugulog:20210110000132p:plain

randomな数値を2つ変数として定義することで縦横の大きさを同じ比率ではなく、個々で変更されるように定義しています。

後は予めCSSで定義されていたwidht、heightにランダムな数字を適用するだけです。

ではこちらも実際に動きを確認してみましょう。

f:id:sugulog:20210110001018g:plain

グラデーションだけではなく、大きさもランダムに変更されているのが確認できますね!!

数値で値を定義することができるCSSにはこのランダム変更が適用でき、さまざまな形で応用できそうですね!!

 

以上、今回のブログでした。

ランダムに色を変更できるようになり、大きさまでも変更できるようになりましたか??

 様々な形で応用できるので、知識として習得しておきたい実装ですね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!