□TABLEの色組み合わせを試すツール
TABLEの色組み合わせをマウス操作で試すツール：css3出力あり
テーブルの奇数行、偶数行をマウス操作で色々と変えてみることのできるツールを 作成しました。操作はcss3のstyleの表記にも反映します。
要素の色表示テーブルまたは
[色適用要素]を選択し、色チップをクリックすると左のテーブルの
色がかわります。
[枠/ヘッダ/ヘッダの文字/奇数行/同文字/偶数行/同文字]が設定
できます。
適用背景はサンプルテーブルのセルをクリックすることでも選択できます。
文字の色は[色選択要素]で「文字」を選択し、色チップで変更できるほか、ヘッダ/奇数/偶数
の選択状態で[黒][白][青]を選択することもできます。
css3のstyle記述例にも反映されます。色を名前とするか16進値とするかを選択できます。
| 大型 | → | 小型 |
|---|---|---|
| ワシ | → | スズメ |
| ペンギン | → | ツバメ |
| ツル | → | チドリ |
| ハト | → | メジロ |
| 枠 | ヘッダ | ヘッダ文字 | |
| black #000000 |
darkblue #00008b |
white #ffffff |
|
| 奇数行 | 奇数行文字色 | 偶数行 | 偶数行文字色 |
| honeydew #f0fff0 |
black #000000 |
lightcyan #e0ffff |
black #000000 |
色適用要素：
| black #000000 |
dimgray #696969 |
gray #808080 |
darkgray #a9a9a9 |
| silver #c0c0c0 |
lightgrey #d3d3d3 |
gainsboro #dcdcdc |
whitesmoke #f5f5f5 |
| white #ffffff |
snow #fffafa |
ghostwhite #f8f8ff |
floralwhite #fffaf0 |
| linen #faf0e6 |
antiquewhite #faebd7 |
papayawhip #ffefd5 |
blanchedalmond #ffebcd |
| bisque #ffe4c4 |
moccasin #ffe4b5 |
navajowhite #ffdead |
peachpuff #ffdab9 |
| mistyrose #ffe4e1 |
lavenderblush #fff0f5 |
seashell #fff5ee |
oldlace #fdf5e6 |
| ivory #fffff0 |
honeydew #f0fff0 |
mintcream #f5fffa |
azure #f0ffff |
| aliceblue #f0f8ff |
lavender #e6e6fa |
lightsteelblue #b0c4de |
lightslategray #778899 |
| slategray #708090 |
steelblue #4682b4 |
royalblue #4169e1 |
midnightblue #191970 |
| navy #000080 |
darkblue #00008b |
mediumblue #0000cd |
blue #0000ff |
| dodgerblue #1e90ff |
cornflowerblue #6495ed |
deepskyblue #00bfff |
lightskyblue #87cefa |
| skyblue #87ceeb |
lightblue #add8e6 |
powderblue #b0e0e6 |
paleturquoise #afeeee |
| lightcyan #e0ffff |
cyan #00ffff |
aqua #00ffff |
turquoise #40e0d0 |
| mediumturquoise #48d1cc |
darkturquoise #00ced1 |
lightseagreen #20b2aa |
cadetblue #5f9ea0 |
| darkcyan #008b8b |
teal #008080 |
darkslategray #2f4f4f |
darkgreen #006400 |
| green #008000 |
forestgreen #228b22 |
seagreen #2e8b57 |
mediumseagreen #3cb371 |
| mediumaquamarine #66cdaa |
darkseagreen #8fbc8f |
aquamarine #7fffd4 |
palegreen #98fb98 |
| lightgreen #90ee90 |
springgreen #00ff7f |
mediumspringgreen #00fa9a |
lawngreen #7cfc00 |
| chartreuse #7fff00 |
greenyellow #adff2f |
lime #00ff00 |
limegreen #32cd32 |
| yellowgreen #9acd32 |
darkolivegreen #556b2f |
olivedrab #6b8e23 |
olive #808000 |
| darkkhaki #bdb76b |
palegoldenrod #eee8aa |
cornsilk #fff8dc |
beige #f5f5dc |
| lightyellow #ffffe0 |
lightgoldenrodyellow #fafad2 |
lemonchiffon #fffacd |
wheat #f5deb3 |
| burlywood #deb887 |
tan #d2b48c |
khaki #f0e68c |
yellow #ffff00 |
| gold #ffd700 |
orange #ffa500 |
sandybrown #f4a460 |
darkorange #ff8c00 |
| goldenrod #daa520 |
peru #cd853f |
darkgoldenrod #b8860b |
chocolate #d2691e |
| sienna #a0522d |
saddlebrown #8b4513 |
maroon #800000 |
darkred #8b0000 |
| brown #a52a2a |
firebrick #b22222 |
indianred #cd5c5c |
rosybrown #bc8f8f |
| darksalmon #e9967a |
lightcoral #f08080 |
salmon #fa8072 |
lightsalmon #ffa07a |
| coral #ff7f50 |
tomato #ff6347 |
orangered #ff4500 |
red #ff0000 |
| crimson #dc143c |
mediumvioletred #c71585 |
deeppink #ff1493 |
hotpink #ff69b4 |
| palevioletred #db7093 |
pink #ffc0cb |
lightpink #ffb6c1 |
histle #d8bfd8 |
| magenta #ff00ff |
fuchsia #ff00ff |
violet #ee82ee |
plum #dda0dd |
| orchid #da70d6 |
mediumorchid #ba55d3 |
darkorchid #9932cc |
darkviolet #9400d3 |
| darkmagenta #8b008b |
purple #800080 |
indigo #4b0082 |
darkslateblue #483d8b |
| blueviolet #8a2be2 |
mediumpurple #9370db |
slateblue #6a5acd |
mediumslateblue #7b68ee |
<style type="text/css">
table.t {border:1px solid #000000; border-collapse:collapse;}
table.t td{border:1px solid #000000;}
table.t th{border:1px solid #000000;}
table.t th{background-color:#00008b;color:#ffffff;}
table.t tr:nth-child(odd) td{background-color:#f0fff0;color:#000000;}
table.t tr:nth-child(even) td{background-color:#e0ffff;color:#000000;}
</style>
＃＃＃ メモ
イベントが発生した要素をactiveElementで得ることはfirefoxでは出来ませんでした。
firefoxでは複数行からなる文字列の取り扱いは全て細かく利用者が 行わなければなりません。firefox以外ではinnterTextで簡単にできる ものが、firefoxのtextContentでは改行が取り扱われないため、 textNodeの並びとBRElementの並びを自力で操作する必要があります。
次の臨時のコードでテキストの取得、設定を行っています。
<script type="text/javascript">
function setInnerText(elm,txt){
if (typeof elm.innerText == "undefined") {
while (elm.firstChild) {
elm.removeChild(elm.firstChild);
}
var txts = txt.split("<br>"); // <br>で分割
for(var i=0;i<txts.length;++i){
if( i!=0 ) elm.appendChild(document.createElement("br"));
elm.appendChild(document.createTextNode(txts[i]));
}
}
else {
elm.innerText = txt; // firefox以外はこんなに簡単
}
}
function getInnerText(elm){
if (typeof elm.innerText == "undefined") {
var text="";
var childs= elm.childNodes;
if( childs!=null ){
for(var i=0;i<childs.length;++i){
if( childs[i].nodeType==3 ){ // 3 mean Text
text += childs[i].textContent;
}
else if( childs[i].nodeType==1 ){ // BRElementのはず
text +="<br>";
}
}
}
return text;
}
else {
return elm.innerText; // firefox以外はこんなに簡単
}
}
</script>
firefoxではcolor,backgroundColorを取得した場合#xxxxxxでなくrgb(ddd ddd ddd)の
形式が得られます。
１０進数->１６進数変換を行い他のブラウザに揃えます。
<script type="text/javascript">
function toHexRGB(txt){
if( txt.indexOf("rgb") !=0 ) return txt; // startsWithの代わり
txt = txt.replace("rgb(","").replace(")","");
var txts = txt.split(",");
var ret="#";
for(var i=0;i<txts.length;++i){
var val= parseInt(txts[i]);
var h = val.toString(16);
if( h.length==1 ) ret+="0";
ret += h;
}
return ret;
}
</script>
なお、最終的にはこれは使わない形になりました。
いやあ、firefox対応は本当に大変だ。本質プログラムよりfirefox対応の方が長くなる。
| 固定リンク