<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート ペグ ソリティア</TITLE>
<STYLE TYPE="text/css">
<!--
body {
background-color:#CCFFFF;
}
#title {
text-align:center;
color:#CC0000;
font-weight:bold;
}
form {
text-align:center;
user-select:none;
}
input {
display:none;
}
#back {
position:relative;
width:200px;
height:200px;
margin-left:auto;
margin-right:auto;
background-color:#FFE000;
border:solid 30px #FFE000;
border-radius:6px;
/* 縦方向の反転状態 */
--v12:0; --v13:0; --v14:0;
--v22:0; --v23:0; --v24:0;
--v30:0; --v31:0; --v32:0; --v33:0; --v34:0; --v35:0; --v36:0;
--v42:0; --v43:0; --v44:0;
--v52:0; --v53:0; --v54:0;
/* 横方向の反転状態 */
--h03:0;
--h13:0;
--h21:0; --h22:0; --h23:0; --h24:0; --h25:0;
--h31:0; --h32:0; --h33:0; --h34:0; --h35:0;
--h41:0; --h42:0; --h43:0; --h44:0; --h45:0;
--h53:0;
--h63:0;
/* ペグの有無 */
--p02:mod(1 + var(--v12) + var(--h03), 2);
--p03:mod(1 + var(--v13) + var(--h03), 2);
--p04:mod(1 + var(--v14) + var(--h03), 2);
--p12:mod(1 + var(--v12) + var(--v22) + var(--h13), 2);
--p13:mod(1 + var(--v13) + var(--v23) + var(--h13), 2);
--p14:mod(1 + var(--v14) + var(--v24) + var(--h13), 2);
--p20:mod(1 + var(--v30) + var(--h21), 2);
--p21:mod(1 + var(--v31) + var(--h21) + var(--h22), 2);
--p22:mod(1 + var(--v12) + var(--v22) + var(--v32) + var(--h21) + var(--h22) + var(--h23), 2);
--p23:mod(1 + var(--v13) + var(--v23) + var(--v33) + var(--h22) + var(--h23) + var(--h24), 2);
--p24:mod(1 + var(--v14) + var(--v24) + var(--v34) + var(--h23) + var(--h24) + var(--h25), 2);
--p25:mod(1 + var(--v35) + var(--h24) + var(--h25), 2);
--p26:mod(1 + var(--v36) + var(--h25), 2);
--p30:mod(1 + var(--v30) + var(--h31), 2);
--p31:mod(1 + var(--v31) + var(--h31) + var(--h32), 2);
--p32:mod(1 + var(--v22) + var(--v32) + var(--v42) + var(--h31) + var(--h32) + var(--h33), 2);
--p33:mod( var(--v23) + var(--v33) + var(--v43) + var(--h32) + var(--h33) + var(--h34), 2);
--p34:mod(1 + var(--v24) + var(--v34) + var(--v44) + var(--h33) + var(--h34) + var(--h35), 2);
--p35:mod(1 + var(--v35) + var(--h34) + var(--h35), 2);
--p36:mod(1 + var(--v36) + var(--h35), 2);
--p40:mod(1 + var(--v30) + var(--h41), 2);
--p41:mod(1 + var(--v31) + var(--h41) + var(--h42), 2);
--p42:mod(1 + var(--v32) + var(--v42) + var(--v52) + var(--h41) + var(--h42) + var(--h43), 2);
--p43:mod(1 + var(--v33) + var(--v43) + var(--v53) + var(--h42) + var(--h43) + var(--h44), 2);
--p44:mod(1 + var(--v34) + var(--v44) + var(--v54) + var(--h43) + var(--h44) + var(--h45), 2);
--p45:mod(1 + var(--v35) + var(--h44) + var(--h45), 2);
--p46:mod(1 + var(--v36) + var(--h45), 2);
--p52:mod(1 + var(--v42) + var(--v52) + var(--h53), 2);
--p53:mod(1 + var(--v43) + var(--v53) + var(--h53), 2);
--p54:mod(1 + var(--v44) + var(--v54) + var(--h53), 2);
--p62:mod(1 + var(--v52) + var(--h63), 2);
--p63:mod(1 + var(--v53) + var(--h63), 2);
--p64:mod(1 + var(--v54) + var(--h63), 2);
/* 選択状態 */
--s02:0; --s03:0; --s04:0;
--s12:0; --s13:0; --s14:0;
--s20:0; --s21:0; --s22:0; --s23:0; --s24:0; --s25:0; --s26:0;
--s30:0; --s31:0; --s32:0; --s33:0; --s34:0; --s35:0; --s36:0;
--s40:0; --s41:0; --s42:0; --s43:0; --s44:0; --s45:0; --s46:0;
--s52:0; --s53:0; --s54:0;
--s62:0; --s63:0; --s64:0;
}
/* ペグの場所 */
.place {
position:absolute;
left:calc(var(--ch) * 30px);
top: calc(var(--cv) * 30px);
width:20px;
height:20px;
}
/* ペグ */
.place::before {
position:absolute;
left:0;
top:0;
width:20px;
height:20px;
border-radius:10px;
background-image:radial-gradient(closest-side at 7px 7px, #FFFFFF, #0000FF);
outline:solid calc(var(--sel) * 2px) #FF4000; /* 選択の表示 */
z-index:calc(var(--peg) - 1);
content:"";
}
/* 穴 */
.place::after {
position:absolute;
left:0;
top:0;
width:20px;
height:20px;
border-radius:10px;
background-color:#807000;
z-index:calc(0 - var(--peg));
content:"";
}
#p02 {
--peg:var(--p02);
--sel:var(--s02);
}
#p03 {
--peg:var(--p03);
--sel:var(--s03);
}
#p04 {
--peg:var(--p04);
--sel:var(--s04);
}
#p12 {
--peg:var(--p12);
--sel:var(--s12);
}
#p13 {
--peg:var(--p13);
--sel:var(--s13);
}
#p14 {
--peg:var(--p14);
--sel:var(--s14);
}
#p20 {
--peg:var(--p20);
--sel:var(--s20);
}
#p21 {
--peg:var(--p21);
--sel:var(--s21);
}
#p22 {
--peg:var(--p22);
--sel:var(--s22);
}
#p23 {
--peg:var(--p23);
--sel:var(--s23);
}
#p24 {
--peg:var(--p24);
--sel:var(--s24);
}
#p25 {
--peg:var(--p25);
--sel:var(--s25);
}
#p26 {
--peg:var(--p26);
--sel:var(--s26);
}
#p30 {
--peg:var(--p30);
--sel:var(--s30);
}
#p31 {
--peg:var(--p31);
--sel:var(--s31);
}
#p32 {
--peg:var(--p32);
--sel:var(--s32);
}
#p33 {
--peg:var(--p33);
--sel:var(--s33);
}
#p34 {
--peg:var(--p34);
--sel:var(--s34);
}
#p35 {
--peg:var(--p35);
--sel:var(--s35);
}
#p36 {
--peg:var(--p36);
--sel:var(--s36);
}
#p40 {
--peg:var(--p40);
--sel:var(--s40);
}
#p41 {
--peg:var(--p41);
--sel:var(--s41);
}
#p42 {
--peg:var(--p42);
--sel:var(--s42);
}
#p43 {
--peg:var(--p43);
--sel:var(--s43);
}
#p44 {
--peg:var(--p44);
--sel:var(--s44);
}
#p45 {
--peg:var(--p45);
--sel:var(--s45);
}
#p46 {
--peg:var(--p46);
--sel:var(--s46);
}
#p52 {
--peg:var(--p52);
--sel:var(--s52);
}
#p53 {
--peg:var(--p53);
--sel:var(--s53);
}
#p54 {
--peg:var(--p54);
--sel:var(--s54);
}
#p62 {
--peg:var(--p62);
--sel:var(--s62);
}
#p63 {
--peg:var(--p63);
--sel:var(--s63);
}
#p64 {
--peg:var(--p64);
--sel:var(--s64);
}
/* 選択／選択の取り消し用 */
.place label {
display:block;
position:absolute;
left:0;
top:0;
width:20px;
height:20px;
border-radius:10px;
}
.place label:nth-of-type(2) {
z-index:calc(var(--sel) - 1);
}
/* 選択用ラベルの表示／非表示 */
#ls02 {
z-index:calc(var(--p02) * min(var(--p12) * (1 - var(--p22))
+ var(--p03) * (1 - var(--p04)), 1) - 1);
}
#ls03 {
z-index:calc(var(--p03) * var(--p13) * (1 - var(--p23)) - 1);
}
#ls04 {
z-index:calc(var(--p04) * min(var(--p14) * (1 - var(--p24))
+ var(--p03) * (1 - var(--p02)), 1) - 1);
}
#ls12 {
z-index:calc(var(--p12) * min(var(--p22) * (1 - var(--p32))
+ var(--p13) * (1 - var(--p14)), 1) - 1);
}
#ls13 {
z-index:calc(var(--p13) * var(--p23) * (1 - var(--p33)) - 1);
}
#ls14 {
z-index:calc(var(--p14) * min(var(--p24) * (1 - var(--p34))
+ var(--p13) * (1 - var(--p12)), 1) - 1);
}
#ls20 {
z-index:calc(var(--p20) * min(var(--p30) * (1 - var(--p40))
+ var(--p21) * (1 - var(--p22)), 1) - 1);
}
#ls21 {
z-index:calc(var(--p21) * min(var(--p31) * (1 - var(--p41))
+ var(--p22) * (1 - var(--p23)), 1) - 1);
}
#ls22 {
z-index:calc(var(--p22) * min(var(--p12) * (1 - var(--p02))
+ var(--p32) * (1 - var(--p42))
+ var(--p21) * (1 - var(--p20))
+ var(--p23) * (1 - var(--p24)), 1) - 1);
}
#ls23 {
z-index:calc(var(--p23) * min(var(--p13) * (1 - var(--p03))
+ var(--p33) * (1 - var(--p43))
+ var(--p22) * (1 - var(--p21))
+ var(--p24) * (1 - var(--p25)), 1) - 1);
}
#ls24 {
z-index:calc(var(--p24) * min(var(--p14) * (1 - var(--p04))
+ var(--p34) * (1 - var(--p44))
+ var(--p23) * (1 - var(--p22))
+ var(--p25) * (1 - var(--p26)), 1) - 1);
}
#ls25 {
z-index:calc(var(--p25) * min(var(--p35) * (1 - var(--p45))
+ var(--p24) * (1 - var(--p23)), 1) - 1);
}
#ls26 {
z-index:calc(var(--p26) * min(var(--p36) * (1 - var(--p46))
+ var(--p25) * (1 - var(--p24)), 1) - 1);
}
#ls30 {
z-index:calc(var(--p30) * var(--p31) * (1 - var(--p32)) - 1);
}
#ls31 {
z-index:calc(var(--p31) * var(--p32) * (1 - var(--p33)) - 1);
}
#ls32 {
z-index:calc(var(--p32) * min(var(--p22) * (1 - var(--p12))
+ var(--p42) * (1 - var(--p52))
+ var(--p31) * (1 - var(--p30))
+ var(--p33) * (1 - var(--p34)), 1) - 1);
}
#ls33 {
z-index:calc(var(--p33) * min(var(--p23) * (1 - var(--p13))
+ var(--p43) * (1 - var(--p53))
+ var(--p32) * (1 - var(--p31))
+ var(--p34) * (1 - var(--p35)), 1) - 1);
}
#ls34 {
z-index:calc(var(--p34) * min(var(--p24) * (1 - var(--p14))
+ var(--p44) * (1 - var(--p54))
+ var(--p33) * (1 - var(--p32))
+ var(--p35) * (1 - var(--p36)), 1) - 1);
}
#ls35 {
z-index:calc(var(--p35) * var(--p34) * (1 - var(--p33)) - 1);
}
#ls36 {
z-index:calc(var(--p36) * var(--p35) * (1 - var(--p34)) - 1);
}
#ls40 {
z-index:calc(var(--p40) * min(var(--p30) * (1 - var(--p20))
+ var(--p41) * (1 - var(--p42)), 1) - 1);
}
#ls41 {
z-index:calc(var(--p41) * min(var(--p31) * (1 - var(--p21))
+ var(--p42) * (1 - var(--p43)), 1) - 1);
}
#ls42 {
z-index:calc(var(--p42) * min(var(--p32) * (1 - var(--p22))
+ var(--p52) * (1 - var(--p62))
+ var(--p41) * (1 - var(--p40))
+ var(--p43) * (1 - var(--p44)), 1) - 1);
}
#ls43 {
z-index:calc(var(--p43) * min(var(--p33) * (1 - var(--p23))
+ var(--p53) * (1 - var(--p63))
+ var(--p42) * (1 - var(--p41))
+ var(--p44) * (1 - var(--p45)), 1) - 1);
}
#ls44 {
z-index:calc(var(--p44) * min(var(--p34) * (1 - var(--p24))
+ var(--p54) * (1 - var(--p64))
+ var(--p43) * (1 - var(--p42))
+ var(--p45) * (1 - var(--p46)), 1) - 1);
}
#ls45 {
z-index:calc(var(--p45) * min(var(--p35) * (1 - var(--p25))
+ var(--p44) * (1 - var(--p43)), 1) - 1);
}
#ls46 {
z-index:calc(var(--p46) * min(var(--p36) * (1 - var(--p26))
+ var(--p45) * (1 - var(--p44)), 1) - 1);
}
#ls52 {
z-index:calc(var(--p52) * min(var(--p42) * (1 - var(--p32))
+ var(--p53) * (1 - var(--p54)), 1) - 1);
}
#ls53 {
z-index:calc(var(--p53) * var(--p43) * (1 - var(--p33)) - 1);
}
#ls54 {
z-index:calc(var(--p54) * min(var(--p44) * (1 - var(--p34))
+ var(--p53) * (1 - var(--p52)), 1) - 1);
}
#ls62 {
z-index:calc(var(--p62) * min(var(--p52) * (1 - var(--p42))
+ var(--p63) * (1 - var(--p64)), 1) - 1);
}
#ls63 {
z-index:calc(var(--p63) * var(--p53) * (1 - var(--p43)) - 1);
}
#ls64 {
z-index:calc(var(--p64) * min(var(--p54) * (1 - var(--p44))
+ var(--p63) * (1 - var(--p62)), 1) - 1);
}
/* 選択 */
/* 1 でなく var(--p??) をセットしているのは，反転の結果，ボタンがチェック状態で
ペグが無い状態になっている場合を除くため */
#s02:checked ~ #back {
--s02:var(--p02);
}
#s03:checked ~ #back {
--s03:var(--p03);
}
#s04:checked ~ #back {
--s04:var(--p04);
}
#s12:checked ~ #back {
--s12:var(--p12);
}
#s13:checked ~ #back {
--s13:var(--p13);
}
#s14:checked ~ #back {
--s14:var(--p14);
}
#s20:checked ~ #back {
--s20:var(--p20);
}
#s21:checked ~ #back {
--s21:var(--p21);
}
#s22:checked ~ #back {
--s22:var(--p22);
}
#s23:checked ~ #back {
--s23:var(--p23);
}
#s24:checked ~ #back {
--s24:var(--p24);
}
#s25:checked ~ #back {
--s25:var(--p25);
}
#s26:checked ~ #back {
--s26:var(--p26);
}
#s30:checked ~ #back {
--s30:var(--p30);
}
#s31:checked ~ #back {
--s31:var(--p31);
}
#s32:checked ~ #back {
--s32:var(--p32);
}
#s33:checked ~ #back {
--s33:var(--p33);
}
#s34:checked ~ #back {
--s34:var(--p34);
}
#s35:checked ~ #back {
--s35:var(--p35);
}
#s36:checked ~ #back {
--s36:var(--p36);
}
#s40:checked ~ #back {
--s40:var(--p40);
}
#s41:checked ~ #back {
--s41:var(--p41);
}
#s42:checked ~ #back {
--s42:var(--p42);
}
#s43:checked ~ #back {
--s43:var(--p43);
}
#s44:checked ~ #back {
--s44:var(--p44);
}
#s45:checked ~ #back {
--s45:var(--p45);
}
#s46:checked ~ #back {
--s46:var(--p46);
}
#s52:checked ~ #back {
--s52:var(--p52);
}
#s53:checked ~ #back {
--s53:var(--p53);
}
#s54:checked ~ #back {
--s54:var(--p54);
}
#s62:checked ~ #back {
--s62:var(--p62);
}
#s63:checked ~ #back {
--s63:var(--p63);
}
#s64:checked ~ #back {
--s64:var(--p64);
}
/* 移動（反転）用 */
.move-v, .move-h {
display:block;
position:absolute;
width:20px;
height:20px;
border-radius:10px;
}
.move-v {
left:calc(var(--ch) * 30px);
}
.move-h {
top: calc(var(--cv) * 30px);
}
/* 縦移動用ラベルの表示／非表示と位置合わせ */
#lv12 {
top:calc(var(--p02) * 2 * 30px);
z-index:calc(var(--p12) * mod(var(--p02) + var(--p22), 2) * (var(--s02) + var(--s22)) - 1);
}
#lv13 {
top:calc(var(--p03) * 2 * 30px);
z-index:calc(var(--p13) * mod(var(--p03) + var(--p23), 2) * (var(--s03) + var(--s23)) - 1);
}
#lv14 {
top:calc(var(--p04) * 2 * 30px);
z-index:calc(var(--p14) * mod(var(--p04) + var(--p24), 2) * (var(--s04) + var(--s24)) - 1);
}
#lv22 {
top:calc((1 + var(--p12) * 2) * 30px);
z-index:calc(var(--p22) * mod(var(--p12) + var(--p32), 2) * (var(--s12) + var(--s32)) - 1);
}
#lv23 {
top:calc((1 + var(--p13) * 2) * 30px);
z-index:calc(var(--p23) * mod(var(--p13) + var(--p33), 2) * (var(--s13) + var(--s33)) - 1);
}
#lv24 {
top:calc((1 + var(--p14) * 2) * 30px);
z-index:calc(var(--p24) * mod(var(--p14) + var(--p34), 2) * (var(--s14) + var(--s34)) - 1);
}
#lv30 {
top:calc((2 + var(--p20) * 2) * 30px);
z-index:calc(var(--p30) * mod(var(--p20) + var(--p40), 2) * (var(--s20) + var(--s40)) - 1);
}
#lv31 {
top:calc((2 + var(--p21) * 2) * 30px);
z-index:calc(var(--p31) * mod(var(--p21) + var(--p41), 2) * (var(--s21) + var(--s41)) - 1);
}
#lv32 {
top:calc((2 + var(--p22) * 2) * 30px);
z-index:calc(var(--p32) * mod(var(--p22) + var(--p42), 2) * (var(--s22) + var(--s42)) - 1);
}
#lv33 {
top:calc((2 + var(--p23) * 2) * 30px);
z-index:calc(var(--p33) * mod(var(--p23) + var(--p43), 2) * (var(--s23) + var(--s43)) - 1);
}
#lv34 {
top:calc((2 + var(--p24) * 2) * 30px);
z-index:calc(var(--p34) * mod(var(--p24) + var(--p44), 2) * (var(--s24) + var(--s44)) - 1);
}
#lv35 {
top:calc((2 + var(--p25) * 2) * 30px);
z-index:calc(var(--p35) * mod(var(--p25) + var(--p45), 2) * (var(--s25) + var(--s45)) - 1);
}
#lv36 {
top:calc((2 + var(--p26) * 2) * 30px);
z-index:calc(var(--p36) * mod(var(--p26) + var(--p46), 2) * (var(--s26) + var(--s46)) - 1);
}
#lv42 {
top:calc((3 + var(--p32) * 2) * 30px);
z-index:calc(var(--p42) * mod(var(--p32) + var(--p52), 2) * (var(--s32) + var(--s52)) - 1);
}
#lv43 {
top:calc((3 + var(--p33) * 2) * 30px);
z-index:calc(var(--p43) * mod(var(--p33) + var(--p53), 2) * (var(--s33) + var(--s53)) - 1);
}
#lv44 {
top:calc((3 + var(--p34) * 2) * 30px);
z-index:calc(var(--p44) * mod(var(--p34) + var(--p54), 2) * (var(--s34) + var(--s54)) - 1);
}
#lv52 {
top:calc((4 + var(--p42) * 2) * 30px);
z-index:calc(var(--p52) * mod(var(--p42) + var(--p62), 2) * (var(--s42) + var(--s62)) - 1);
}
#lv53 {
top:calc((4 + var(--p43) * 2) * 30px);
z-index:calc(var(--p53) * mod(var(--p43) + var(--p63), 2) * (var(--s43) + var(--s63)) - 1);
}
#lv54 {
top:calc((4 + var(--p44) * 2) * 30px);
z-index:calc(var(--p54) * mod(var(--p44) + var(--p64), 2) * (var(--s44) + var(--s64)) - 1);
}
/* 横移動用ラベルの表示／非表示と位置合わせ */
#lh03 {
left:calc((2 + var(--p02) * 2) * 30px);
z-index:calc(var(--p03) * mod(var(--p02) + var(--p04), 2) * (var(--s02) + var(--s04)) - 1);
}
#lh13 {
left:calc((2 + var(--p12) * 2) * 30px);
z-index:calc(var(--p13) * mod(var(--p12) + var(--p14), 2) * (var(--s12) + var(--s14)) - 1);
}
#lh21 {
left:calc(var(--p20) * 2 * 30px);
z-index:calc(var(--p21) * mod(var(--p20) + var(--p22), 2) * (var(--s20) + var(--s22)) - 1);
}
#lh22 {
left:calc((1 + var(--p21) * 2) * 30px);
z-index:calc(var(--p22) * mod(var(--p21) + var(--p23), 2) * (var(--s21) + var(--s23)) - 1);
}
#lh23 {
left:calc((2 + var(--p22) * 2) * 30px);
z-index:calc(var(--p23) * mod(var(--p22) + var(--p24), 2) * (var(--s22) + var(--s24)) - 1);
}
#lh24 {
left:calc((3 + var(--p23) * 2) * 30px);
z-index:calc(var(--p24) * mod(var(--p23) + var(--p25), 2) * (var(--s23) + var(--s25)) - 1);
}
#lh25 {
left:calc((4 + var(--p24) * 2) * 30px);
z-index:calc(var(--p25) * mod(var(--p24) + var(--p26), 2) * (var(--s24) + var(--s26)) - 1);
}
#lh31 {
left:calc(var(--p30) * 2 * 30px);
z-index:calc(var(--p31) * mod(var(--p30) + var(--p32), 2) * (var(--s30) + var(--s32)) - 1);
}
#lh32 {
left:calc((1 + var(--p31) * 2) * 30px);
z-index:calc(var(--p32) * mod(var(--p31) + var(--p33), 2) * (var(--s31) + var(--s33)) - 1);
}
#lh33 {
left:calc((2 + var(--p32) * 2) * 30px);
z-index:calc(var(--p33) * mod(var(--p32) + var(--p34), 2) * (var(--s32) + var(--s34)) - 1);
}
#lh34 {
left:calc((3 + var(--p33) * 2) * 30px);
z-index:calc(var(--p34) * mod(var(--p33) + var(--p35), 2) * (var(--s33) + var(--s35)) - 1);
}
#lh35 {
left:calc((4 + var(--p34) * 2) * 30px);
z-index:calc(var(--p35) * mod(var(--p34) + var(--p36), 2) * (var(--s34) + var(--s36)) - 1);
}
#lh41 {
left:calc(var(--p40) * 2 * 30px);
z-index:calc(var(--p41) * mod(var(--p40) + var(--p42), 2) * (var(--s40) + var(--s42)) - 1);
}
#lh42 {
left:calc((1 + var(--p41) * 2) * 30px);
z-index:calc(var(--p42) * mod(var(--p41) + var(--p43), 2) * (var(--s41) + var(--s43)) - 1);
}
#lh43 {
left:calc((2 + var(--p42) * 2) * 30px);
z-index:calc(var(--p43) * mod(var(--p42) + var(--p44), 2) * (var(--s42) + var(--s44)) - 1);
}
#lh44 {
left:calc((3 + var(--p43) * 2) * 30px);
z-index:calc(var(--p44) * mod(var(--p43) + var(--p45), 2) * (var(--s43) + var(--s45)) - 1);
}
#lh45 {
left:calc((4 + var(--p44) * 2) * 30px);
z-index:calc(var(--p45) * mod(var(--p44) + var(--p46), 2) * (var(--s44) + var(--s46)) - 1);
}
#lh53 {
left:calc((2 + var(--p52) * 2) * 30px);
z-index:calc(var(--p53) * mod(var(--p52) + var(--p54), 2) * (var(--s52) + var(--s54)) - 1);
}
#lh63 {
left:calc((2 + var(--p62) * 2) * 30px);
z-index:calc(var(--p63) * mod(var(--p62) + var(--p64), 2) * (var(--s62) + var(--s64)) - 1);
}
/* 縦移動 */
#v12:checked ~ #back {
--v12:1;
}
#v13:checked ~ #back {
--v13:1;
}
#v14:checked ~ #back {
--v14:1;
}
#v22:checked ~ #back {
--v22:1;
}
#v23:checked ~ #back {
--v23:1;
}
#v24:checked ~ #back {
--v24:1;
}
#v30:checked ~ #back {
--v30:1;
}
#v31:checked ~ #back {
--v31:1;
}
#v32:checked ~ #back {
--v32:1;
}
#v33:checked ~ #back {
--v33:1;
}
#v34:checked ~ #back {
--v34:1;
}
#v35:checked ~ #back {
--v35:1;
}
#v36:checked ~ #back {
--v36:1;
}
#v42:checked ~ #back {
--v42:1;
}
#v43:checked ~ #back {
--v43:1;
}
#v44:checked ~ #back {
--v44:1;
}
#v52:checked ~ #back {
--v52:1;
}
#v53:checked ~ #back {
--v53:1;
}
#v54:checked ~ #back {
--v54:1;
}
/* 横移動 */
#h03:checked ~ #back {
--h03:1;
}
#h13:checked ~ #back {
--h13:1;
}
#h21:checked ~ #back {
--h21:1;
}
#h22:checked ~ #back {
--h22:1;
}
#h23:checked ~ #back {
--h23:1;
}
#h24:checked ~ #back {
--h24:1;
}
#h25:checked ~ #back {
--h25:1;
}
#h31:checked ~ #back {
--h31:1;
}
#h32:checked ~ #back {
--h32:1;
}
#h33:checked ~ #back {
--h33:1;
}
#h34:checked ~ #back {
--h34:1;
}
#h35:checked ~ #back {
--h35:1;
}
#h41:checked ~ #back {
--h41:1;
}
#h42:checked ~ #back {
--h42:1;
}
#h43:checked ~ #back {
--h43:1;
}
#h44:checked ~ #back {
--h44:1;
}
#h45:checked ~ #back {
--h45:1;
}
#h53:checked ~ #back {
--h53:1;
}
#h63:checked ~ #back {
--h63:1;
}
/* やり直し */
#reset-btn {
display:inline-block;
height:28px;
margin-top:10px;
padding-left:10px;
padding-right:10px;
color:white;
font-size:12px;
line-height:28px;
background-color:#0000A0;
border-radius:4px;
cursor:pointer;
}
-->
</STYLE>
</HEAD>
<BODY>
<BR>
<DIV ID="title">スタイルシート ペグ ソリティア</DIV>
<BR>
<FORM>
<!-- 選択用 -->
<INPUT TYPE=RADIO NAME="sel" ID="s02">
<INPUT TYPE=RADIO NAME="sel" ID="s03">
<INPUT TYPE=RADIO NAME="sel" ID="s04">
<INPUT TYPE=RADIO NAME="sel" ID="s12">
<INPUT TYPE=RADIO NAME="sel" ID="s13">
<INPUT TYPE=RADIO NAME="sel" ID="s14">
<INPUT TYPE=RADIO NAME="sel" ID="s20">
<INPUT TYPE=RADIO NAME="sel" ID="s21">
<INPUT TYPE=RADIO NAME="sel" ID="s22">
<INPUT TYPE=RADIO NAME="sel" ID="s23">
<INPUT TYPE=RADIO NAME="sel" ID="s24">
<INPUT TYPE=RADIO NAME="sel" ID="s25">
<INPUT TYPE=RADIO NAME="sel" ID="s26">
<INPUT TYPE=RADIO NAME="sel" ID="s30">
<INPUT TYPE=RADIO NAME="sel" ID="s31">
<INPUT TYPE=RADIO NAME="sel" ID="s32">
<INPUT TYPE=RADIO NAME="sel" ID="s33">
<INPUT TYPE=RADIO NAME="sel" ID="s34">
<INPUT TYPE=RADIO NAME="sel" ID="s35">
<INPUT TYPE=RADIO NAME="sel" ID="s36">
<INPUT TYPE=RADIO NAME="sel" ID="s40">
<INPUT TYPE=RADIO NAME="sel" ID="s41">
<INPUT TYPE=RADIO NAME="sel" ID="s42">
<INPUT TYPE=RADIO NAME="sel" ID="s43">
<INPUT TYPE=RADIO NAME="sel" ID="s44">
<INPUT TYPE=RADIO NAME="sel" ID="s45">
<INPUT TYPE=RADIO NAME="sel" ID="s46">
<INPUT TYPE=RADIO NAME="sel" ID="s52">
<INPUT TYPE=RADIO NAME="sel" ID="s53">
<INPUT TYPE=RADIO NAME="sel" ID="s54">
<INPUT TYPE=RADIO NAME="sel" ID="s62">
<INPUT TYPE=RADIO NAME="sel" ID="s63">
<INPUT TYPE=RADIO NAME="sel" ID="s64">
<INPUT TYPE=RADIO NAME="sel" ID="can">
<!-- 縦移動用 -->
<INPUT TYPE=CHECKBOX ID="v12">
<INPUT TYPE=CHECKBOX ID="v13">
<INPUT TYPE=CHECKBOX ID="v14">
<INPUT TYPE=CHECKBOX ID="v22">
<INPUT TYPE=CHECKBOX ID="v23">
<INPUT TYPE=CHECKBOX ID="v24">
<INPUT TYPE=CHECKBOX ID="v30">
<INPUT TYPE=CHECKBOX ID="v31">
<INPUT TYPE=CHECKBOX ID="v32">
<INPUT TYPE=CHECKBOX ID="v33">
<INPUT TYPE=CHECKBOX ID="v34">
<INPUT TYPE=CHECKBOX ID="v35">
<INPUT TYPE=CHECKBOX ID="v36">
<INPUT TYPE=CHECKBOX ID="v42">
<INPUT TYPE=CHECKBOX ID="v43">
<INPUT TYPE=CHECKBOX ID="v44">
<INPUT TYPE=CHECKBOX ID="v52">
<INPUT TYPE=CHECKBOX ID="v53">
<INPUT TYPE=CHECKBOX ID="v54">
<!-- 横移動用 -->
<INPUT TYPE=CHECKBOX ID="h03">
<INPUT TYPE=CHECKBOX ID="h13">
<INPUT TYPE=CHECKBOX ID="h21">
<INPUT TYPE=CHECKBOX ID="h22">
<INPUT TYPE=CHECKBOX ID="h23">
<INPUT TYPE=CHECKBOX ID="h24">
<INPUT TYPE=CHECKBOX ID="h25">
<INPUT TYPE=CHECKBOX ID="h31">
<INPUT TYPE=CHECKBOX ID="h32">
<INPUT TYPE=CHECKBOX ID="h33">
<INPUT TYPE=CHECKBOX ID="h34">
<INPUT TYPE=CHECKBOX ID="h35">
<INPUT TYPE=CHECKBOX ID="h41">
<INPUT TYPE=CHECKBOX ID="h42">
<INPUT TYPE=CHECKBOX ID="h43">
<INPUT TYPE=CHECKBOX ID="h44">
<INPUT TYPE=CHECKBOX ID="h45">
<INPUT TYPE=CHECKBOX ID="h53">
<INPUT TYPE=CHECKBOX ID="h63">
<INPUT TYPE=RESET ID="reset">
<DIV ID="back">
<!-- ペグの場所 -->
<DIV ID="p02" CLASS="place" STYLE="--cv:0; --ch:2">
<LABEL ID="ls02" FOR="s02"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p03" CLASS="place" STYLE="--cv:0; --ch:3">
<LABEL ID="ls03" FOR="s03"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p04" CLASS="place" STYLE="--cv:0; --ch:4">
<LABEL ID="ls04" FOR="s04"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p12" CLASS="place" STYLE="--cv:1; --ch:2">
<LABEL ID="ls12" FOR="s12"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p13" CLASS="place" STYLE="--cv:1; --ch:3">
<LABEL ID="ls13" FOR="s13"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p14" CLASS="place" STYLE="--cv:1; --ch:4">
<LABEL ID="ls14" FOR="s14"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p20" CLASS="place" STYLE="--cv:2; --ch:0">
<LABEL ID="ls20" FOR="s20"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p21" CLASS="place" STYLE="--cv:2; --ch:1">
<LABEL ID="ls21" FOR="s21"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p22" CLASS="place" STYLE="--cv:2; --ch:2">
<LABEL ID="ls22" FOR="s22"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p23" CLASS="place" STYLE="--cv:2; --ch:3">
<LABEL ID="ls23" FOR="s23"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p24" CLASS="place" STYLE="--cv:2; --ch:4">
<LABEL ID="ls24" FOR="s24"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p25" CLASS="place" STYLE="--cv:2; --ch:5">
<LABEL ID="ls25" FOR="s25"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p26" CLASS="place" STYLE="--cv:2; --ch:6">
<LABEL ID="ls26" FOR="s26"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p30" CLASS="place" STYLE="--cv:3; --ch:0">
<LABEL ID="ls30" FOR="s30"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p31" CLASS="place" STYLE="--cv:3; --ch:1">
<LABEL ID="ls31" FOR="s31"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p32" CLASS="place" STYLE="--cv:3; --ch:2">
<LABEL ID="ls32" FOR="s32"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p33" CLASS="place" STYLE="--cv:3; --ch:3">
<LABEL ID="ls33" FOR="s33"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p34" CLASS="place" STYLE="--cv:3; --ch:4">
<LABEL ID="ls34" FOR="s34"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p35" CLASS="place" STYLE="--cv:3; --ch:5">
<LABEL ID="ls35" FOR="s35"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p36" CLASS="place" STYLE="--cv:3; --ch:6">
<LABEL ID="ls36" FOR="s36"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p40" CLASS="place" STYLE="--cv:4; --ch:0">
<LABEL ID="ls40" FOR="s40"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p41" CLASS="place" STYLE="--cv:4; --ch:1">
<LABEL ID="ls41" FOR="s41"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p42" CLASS="place" STYLE="--cv:4; --ch:2">
<LABEL ID="ls42" FOR="s42"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p43" CLASS="place" STYLE="--cv:4; --ch:3">
<LABEL ID="ls43" FOR="s43"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p44" CLASS="place" STYLE="--cv:4; --ch:4">
<LABEL ID="ls44" FOR="s44"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p45" CLASS="place" STYLE="--cv:4; --ch:5">
<LABEL ID="ls45" FOR="s45"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p46" CLASS="place" STYLE="--cv:4; --ch:6">
<LABEL ID="ls46" FOR="s46"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p52" CLASS="place" STYLE="--cv:5; --ch:2">
<LABEL ID="ls52" FOR="s52"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p53" CLASS="place" STYLE="--cv:5; --ch:3">
<LABEL ID="ls53" FOR="s53"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p54" CLASS="place" STYLE="--cv:5; --ch:4">
<LABEL ID="ls54" FOR="s54"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p62" CLASS="place" STYLE="--cv:6; --ch:2">
<LABEL ID="ls62" FOR="s62"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p63" CLASS="place" STYLE="--cv:6; --ch:3">
<LABEL ID="ls63" FOR="s63"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<DIV ID="p64" CLASS="place" STYLE="--cv:6; --ch:4">
<LABEL ID="ls64" FOR="s64"></LABEL>
<LABEL FOR="can"></LABEL>
</DIV>
<!-- 縦移動用 -->
<LABEL ID="lv12" CLASS="move-v" FOR="v12" STYLE="--ch:2"></LABEL>
<LABEL ID="lv13" CLASS="move-v" FOR="v13" STYLE="--ch:3"></LABEL>
<LABEL ID="lv14" CLASS="move-v" FOR="v14" STYLE="--ch:4"></LABEL>
<LABEL ID="lv22" CLASS="move-v" FOR="v22" STYLE="--ch:2"></LABEL>
<LABEL ID="lv23" CLASS="move-v" FOR="v23" STYLE="--ch:3"></LABEL>
<LABEL ID="lv24" CLASS="move-v" FOR="v24" STYLE="--ch:4"></LABEL>
<LABEL ID="lv30" CLASS="move-v" FOR="v30" STYLE="--ch:0"></LABEL>
<LABEL ID="lv31" CLASS="move-v" FOR="v31" STYLE="--ch:1"></LABEL>
<LABEL ID="lv32" CLASS="move-v" FOR="v32" STYLE="--ch:2"></LABEL>
<LABEL ID="lv33" CLASS="move-v" FOR="v33" STYLE="--ch:3"></LABEL>
<LABEL ID="lv34" CLASS="move-v" FOR="v34" STYLE="--ch:4"></LABEL>
<LABEL ID="lv35" CLASS="move-v" FOR="v35" STYLE="--ch:5"></LABEL>
<LABEL ID="lv36" CLASS="move-v" FOR="v36" STYLE="--ch:6"></LABEL>
<LABEL ID="lv42" CLASS="move-v" FOR="v42" STYLE="--ch:2"></LABEL>
<LABEL ID="lv43" CLASS="move-v" FOR="v43" STYLE="--ch:3"></LABEL>
<LABEL ID="lv44" CLASS="move-v" FOR="v44" STYLE="--ch:4"></LABEL>
<LABEL ID="lv52" CLASS="move-v" FOR="v52" STYLE="--ch:2"></LABEL>
<LABEL ID="lv53" CLASS="move-v" FOR="v53" STYLE="--ch:3"></LABEL>
<LABEL ID="lv54" CLASS="move-v" FOR="v54" STYLE="--ch:4"></LABEL>
<!-- 横移動用 -->
<LABEL ID="lh03" CLASS="move-h" FOR="h03" STYLE="--cv:0"></LABEL>
<LABEL ID="lh13" CLASS="move-h" FOR="h13" STYLE="--cv:1"></LABEL>
<LABEL ID="lh21" CLASS="move-h" FOR="h21" STYLE="--cv:2"></LABEL>
<LABEL ID="lh22" CLASS="move-h" FOR="h22" STYLE="--cv:2"></LABEL>
<LABEL ID="lh23" CLASS="move-h" FOR="h23" STYLE="--cv:2"></LABEL>
<LABEL ID="lh24" CLASS="move-h" FOR="h24" STYLE="--cv:2"></LABEL>
<LABEL ID="lh25" CLASS="move-h" FOR="h25" STYLE="--cv:2"></LABEL>
<LABEL ID="lh31" CLASS="move-h" FOR="h31" STYLE="--cv:3"></LABEL>
<LABEL ID="lh32" CLASS="move-h" FOR="h32" STYLE="--cv:3"></LABEL>
<LABEL ID="lh33" CLASS="move-h" FOR="h33" STYLE="--cv:3"></LABEL>
<LABEL ID="lh34" CLASS="move-h" FOR="h34" STYLE="--cv:3"></LABEL>
<LABEL ID="lh35" CLASS="move-h" FOR="h35" STYLE="--cv:3"></LABEL>
<LABEL ID="lh41" CLASS="move-h" FOR="h41" STYLE="--cv:4"></LABEL>
<LABEL ID="lh42" CLASS="move-h" FOR="h42" STYLE="--cv:4"></LABEL>
<LABEL ID="lh43" CLASS="move-h" FOR="h43" STYLE="--cv:4"></LABEL>
<LABEL ID="lh44" CLASS="move-h" FOR="h44" STYLE="--cv:4"></LABEL>
<LABEL ID="lh45" CLASS="move-h" FOR="h45" STYLE="--cv:4"></LABEL>
<LABEL ID="lh53" CLASS="move-h" FOR="h53" STYLE="--cv:5"></LABEL>
<LABEL ID="lh63" CLASS="move-h" FOR="h63" STYLE="--cv:6"></LABEL>
</DIV>
<LABEL ID="reset-btn" FOR="reset">やり直し</LABEL>
</FORM>
</BODY>
</HTML>
|
