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

時計 2020.04.25 / 時計

HTML・CSS・JavaScript

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

これを使用し、背景色と文字色のシミュレーションができます。テキストボックスには選択した色の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>