JavaScriptで描くWeb Safe Color背景色と文字色のカラーシミュレーター
2020.04.25 /
JavaScriptを使い、Web Safe Colorによる３６列６行のカラーチャートを作成しました。
これを使用し、背景色と文字色のシミュレーションができます。テキストボックスには選択した色のRGB値が表示され、ボタンを押下することにより、背景色や文字色が反映されます。
JavaScriptのみで記載したプログラムを掲載しておきます。
JavaScriptでのカラーシミュレーター
タイトル タイトル タイトル
タイトル タイトル タイトル
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
JavaScriptコード
JavaScriptで記載した上記カラーシミュレーターの一部抜粋したプログラムを掲載いたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style>
#palette>div{
width:120px;
height:120px;
font-size:0px;
display: inline-block;
}
#palette>div>div{
width: 20px;
height:20px;
display: inline-block;
}
#settei>input:nth-child(1){
text-align: center;
}
#simulate{
width: 720px;
}
</style>
<script>
window.addEventListener("load",init,false);
function init(){
document.getElementById("bg").addEventListener("click",function(){
document.getElementById("simulate").style.backgroundColor=document.getElementById("setColor").value;
},false);
document.getElementById("tc").addEventListener("click",function(){
document.getElementById("simulate").style.color=document.getElementById("setColor").value;
},false);
var color=["00","33","66","99","cc","ff"];
var moji="";
for(var i=0;i<6;i++){
moji+="<div>";
for(var j=0;j<6;j++){
for(var k=0;k<6;k++){
var iro=color[i]+color[j]+color[k];
moji+="<div style='background-color:#"+iro+"' title='"+iro+"' onclick='showColor(\"#"+iro+"\")'></div>";
}
}
moji+="</div>";
}
document.getElementById("palette").innerHTML=moji;
}
function showColor(iro){
document.getElementById("setColor").value=iro;
}
</script>
</head>
<body>
<h1>『JavaScripto及びjQueryで描くWeb Safe Color背景色と文字色のカラーシミュレーター』</h1>
<section>
<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">
<h1>タイトル タイトル タイトル</h1>
<h1>タイトル タイトル タイトル</h1>
<h3>タイトル タイトル タイトル</h3>
<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>
関連記事
