jqueryで描くWeb Safe Color背景色と文字色のカラーシミュレーター

2020.04.25 /

HTML・CSS・JavaScript

jqueryを使い、Web Safe Colorによる３６列６行のカラーチャートを作成しました。

これを使用し、背景色と文字色のシミュレーションができます。テキストボックスには選択した色のRGB値が表示され、ボタンを押下することにより、背景色や文字色が反映されます。

jqueryで記載したプログラムを掲載しておきます。

jQueryでのカラーシミュレーター

　　

タイトル　タイトル　タイトル

タイトル　タイトル　タイトル

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

jQueryコード

jqueryで記載した上記カラーシミュレーターの一部抜粋したプログラムを掲載いたします。


<script>
$(function(){
var color=["00","33","66","99","cc","ff"];
for(var i=0;i<6;i++){
$("<div/>").appendTo("#palette");
for(var j=0;j<6;j++){
for(var k=0;k<6;k++){
var iro="#"+color[i]+color[j]+color[k];
$("<div/>").css("backgroundColor",iro).attr("title",iro).appendTo("#palette>div:eq("+i+")");
}
}
}
$("#palette>div>div").click(function(){
$("#setColor").val($(this).attr("title"));
});
$("#bg").click(function(){
$("#simulate").css("backgroundColor",$("#setColor").val());
});
$("#tc").click(function(){
$("#simulate").css("color",$("#setColor").val());
});
});
<body>
<div id="palette"></div>
<div id="settei">
<input type="text" id="setColor" size="10">　<input type="button" value="背景色" id="bg">　<input type="button" value="文字色" id="tc">
</div>
<div id="simulate" style="border:1px solid black; margin-top:1em;">
<h1>タイトル　タイトル　タイトル</h1>
<h3>タイトル　タイトル　タイトル</h3>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
</body>