ソースの表示

■ CSShanoi.htm ■
<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート ハノイの塔</TITLE>

<STYLE TYPE="text/css">
<!--

body {
  background-color:#CCFFFF;
}

#title {
  color:#CC0000;
  font-size:large;
  font-weight:bold;
  text-align:center;
}

.pos, .sel {
  display:none;
}

#base {
  width:604px;
  margin-left:auto;
  margin-right:auto;
}

#back {
  position:relative;
  height:162px;
  margin-top:0.5em;
  background-color:black;

  --a-1:0;
  --a-2:0;
  --a-3:0;
  --a-4:0;
  --a-5:0;
  --b-1:0;
  --b-2:0;
  --b-3:0;
  --b-4:0;
  --b-5:0;
  --c-1:0;
  --c-2:0;
  --c-3:0;
  --c-4:0;
  --c-5:0;
}

:is(#pos-a-1, #sel-a-1):checked ~ #back {
  --a-1:1;
}
:is(#pos-a-2, #sel-a-2):checked ~ #back {
  --a-2:1;
}
:is(#pos-a-3, #sel-a-3):checked ~ #back {
  --a-3:1;
}
:is(#pos-a-4, #sel-a-4):checked ~ #back {
  --a-4:1;
}
:is(#pos-a-5, #sel-a-5):checked ~ #back {
  --a-5:1;
}

:is(#pos-b-1, #sel-b-1):checked ~ #back {
  --b-1:1;
}
:is(#pos-b-2, #sel-b-2):checked ~ #back {
  --b-2:1;
}
:is(#pos-b-3, #sel-b-3):checked ~ #back {
  --b-3:1;
}
:is(#pos-b-4, #sel-b-4):checked ~ #back {
  --b-4:1;
}
:is(#pos-b-5, #sel-b-5):checked ~ #back {
  --b-5:1;
}

:is(#pos-c-1, #sel-c-1):checked ~ #back {
  --c-1:1;
}
:is(#pos-c-2, #sel-c-2):checked ~ #back {
  --c-2:1;
}
:is(#pos-c-3, #sel-c-3):checked ~ #back {
  --c-3:1;
}
:is(#pos-c-4, #sel-c-4):checked ~ #back {
  --c-4:1;
}
:is(#pos-c-5, #sel-c-5):checked ~ #back {
  --c-5:1;
}

#disks-3:checked ~ #back {
  /* :is(#pos-a-4, #sel-a-4):checked ~ #back 等の設定を上書きする */
  --a-4:0;
  --a-5:0;
  --b-4:0;
  --b-5:0;
  --c-4:0;
  --c-5:0;
}

#disks-4:checked ~ #back {
  /* :is(#pos-a-5, #sel-a-5):checked ~ #back 等の設定を上書きする */
  --a-5:0;
  --b-5:0;
  --c-5:0;
}

.loc {
  position:absolute;
  top:1px;
  width:200px;
  height:160px;
  background-color:white;
}

.disk {
  position:absolute;
  height:24px;
  background-color:green;
}

#disk-1 {
  left:calc(var(--a-1) * 21px + var(--b-1) * 222px + var(--c-1) * 423px);
  top:135px;
  width:160px;
}
#disk-2 {
  left:calc(var(--a-2) * 35px + var(--b-2) * 236px + var(--c-2) * 437px);
  top:calc(135px - (var(--a-2) * var(--a-1)
                  + var(--b-2) * var(--b-1)
                  + var(--c-2) * var(--c-1)) * 26px);
  width:132px;
}
#disk-3 {
  left:calc(var(--a-3) * 49px + var(--b-3) * 250px + var(--c-3) * 451px);
  top:calc(135px - (var(--a-3) * (var(--a-1) + var(--a-2))
                  + var(--b-3) * (var(--b-1) + var(--b-2))
                  + var(--c-3) * (var(--c-1) + var(--c-2))) * 26px);
  width:104px;
}
#disk-4 {
  left:calc(var(--a-4) * 63px + var(--b-4) * 264px + var(--c-4) * 465px);
  top:calc(135px - (var(--a-4) * (var(--a-1) + var(--a-2) + var(--a-3))
                  + var(--b-4) * (var(--b-1) + var(--b-2) + var(--b-3))
                  + var(--c-4) * (var(--c-1) + var(--c-2) + var(--c-3))) * 26px);
  width:76px;
}
#disk-5 {
  left:calc(var(--a-5) * 77px + var(--b-5) * 278px + var(--c-5) * 479px);
  top:calc(135px - (var(--a-5) * (var(--a-1) + var(--a-2) + var(--a-3) + var(--a-4))
                  + var(--b-5) * (var(--b-1) + var(--b-2) + var(--b-3) + var(--b-4))
                  + var(--c-5) * (var(--c-1) + var(--c-2) + var(--c-3) + var(--c-4))) * 26px);
  width:48px;
}

.sel-1:checked ~ #back #disk-1 {
  background-color:orange;
}
.sel-2:checked ~ #back #disk-2 {
  background-color:orange;
}
.sel-3:checked ~ #back #disk-3 {
  background-color:orange;
}
.sel-4:checked ~ #back #disk-4 {
  background-color:orange;
}
.sel-5:checked ~ #back #disk-5 {
  background-color:orange;
}

.sel-l, .pos-l {
  position:absolute;
  top:1px;
  width:200px;
  height:160px;
  z-index:-1;
  cursor:pointer;
}

#loc-a,
#sel-a-1-l, #sel-a-2-l, #sel-a-3-l, #sel-a-4-l, #sel-a-5-l,
#pos-a-1-l, #pos-a-2-l, #pos-a-3-l, #pos-a-4-l, #pos-a-5-l {
  left:1px;
}
#loc-b,
#sel-b-1-l, #sel-b-2-l, #sel-b-3-l, #sel-b-4-l, #sel-b-5-l,
#pos-b-1-l, #pos-b-2-l, #pos-b-3-l, #pos-b-4-l, #pos-b-5-l {
  left:202px;
}
#loc-c,
#sel-c-1-l, #sel-c-2-l, #sel-c-3-l, #sel-c-4-l, #sel-c-5-l,
#pos-c-1-l, #pos-c-2-l, #pos-c-3-l, #pos-c-4-l, #pos-c-5-l {
  left:403px;
}

#disks-3:checked ~ #back .hide-4 {
  display:none;
}
:is(#disks-3, #disks-4):checked ~ #back .hide-5 {
  display:none;
}

.sel:checked ~ #back .sel-l {
  display:none;
}

#pos-a-1:checked ~ #back #sel-a-1-l {
  z-index:1;
}
#pos-b-1:checked ~ #back #sel-b-1-l {
  z-index:1;
}
#pos-c-1:checked ~ #back #sel-c-1-l {
  z-index:1;
}

#pos-a-2:checked ~ #back #sel-a-2-l {
  z-index:2;
}
#pos-b-2:checked ~ #back #sel-b-2-l {
  z-index:2;
}
#pos-c-2:checked ~ #back #sel-c-2-l {
  z-index:2;
}

#pos-a-3:checked ~ #back #sel-a-3-l {
  z-index:3;
}
#pos-b-3:checked ~ #back #sel-b-3-l {
  z-index:3;
}
#pos-c-3:checked ~ #back #sel-c-3-l {
  z-index:3;
}

#pos-a-4:checked ~ #back #sel-a-4-l {
  z-index:4;
}
#pos-b-4:checked ~ #back #sel-b-4-l {
  z-index:4;
}
#pos-c-4:checked ~ #back #sel-c-4-l {
  z-index:4;
}

#pos-a-5:checked ~ #back #sel-a-5-l {
  z-index:5;
}
#pos-b-5:checked ~ #back #sel-b-5-l {
  z-index:5;
}
#pos-c-5:checked ~ #back #sel-c-5-l {
  z-index:5;
}

.sel-1:checked ~ #back #pos-a-1-l {
  z-index:calc(0 - var(--a-2) - var(--a-3) - var(--a-4) - var(--a-5));
}
.sel-1:checked ~ #back #pos-b-1-l {
  z-index:calc(0 - var(--b-2) - var(--b-3) - var(--b-4) - var(--b-5));
}
.sel-1:checked ~ #back #pos-c-1-l {
  z-index:calc(0 - var(--c-2) - var(--c-3) - var(--c-4) - var(--c-5));
}

.sel-2:checked ~ #back #pos-a-2-l {
  z-index:calc(0 - var(--a-3) - var(--a-4) - var(--a-5));
}
.sel-2:checked ~ #back #pos-b-2-l {
  z-index:calc(0 - var(--b-3) - var(--b-4) - var(--b-5));
}
.sel-2:checked ~ #back #pos-c-2-l {
  z-index:calc(0 - var(--c-3) - var(--c-4) - var(--c-5));
}

.sel-3:checked ~ #back #pos-a-3-l {
  z-index:calc(0 - var(--a-4) - var(--a-5));
}
.sel-3:checked ~ #back #pos-b-3-l {
  z-index:calc(0 - var(--b-4) - var(--b-5));
}
.sel-3:checked ~ #back #pos-c-3-l {
  z-index:calc(0 - var(--c-4) - var(--c-5));
}

.sel-4:checked ~ #back #pos-a-4-l {
  z-index:calc(0 - var(--a-5));
}
.sel-4:checked ~ #back #pos-b-4-l {
  z-index:calc(0 - var(--b-5));
}
.sel-4:checked ~ #back #pos-c-4-l {
  z-index:calc(0 - var(--c-5));
}

.sel-5:checked ~ #back #pos-a-5-l {
  z-index:0;
}
.sel-5:checked ~ #back #pos-b-5-l {
  z-index:0;
}
.sel-5:checked ~ #back #pos-c-5-l {
  z-index:0;
}

-->
</STYLE>

</HEAD>

<BODY>
<BR>
<DIV ID="title">スタイルシート ハノイの塔</DIV>
<BR>

<DIV ID="base">

<INPUT TYPE=RADIO NAME="radio-1" ID="pos-a-1" CLASS="pos" CHECKED>
<INPUT TYPE=RADIO NAME="radio-1" ID="pos-b-1" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-1" ID="pos-c-1" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-1" ID="sel-a-1" CLASS="sel sel-1">
<INPUT TYPE=RADIO NAME="radio-1" ID="sel-b-1" CLASS="sel sel-1">
<INPUT TYPE=RADIO NAME="radio-1" ID="sel-c-1" CLASS="sel sel-1">

<INPUT TYPE=RADIO NAME="radio-2" ID="pos-a-2" CLASS="pos" CHECKED>
<INPUT TYPE=RADIO NAME="radio-2" ID="pos-b-2" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-2" ID="pos-c-2" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-2" ID="sel-a-2" CLASS="sel sel-2">
<INPUT TYPE=RADIO NAME="radio-2" ID="sel-b-2" CLASS="sel sel-2">
<INPUT TYPE=RADIO NAME="radio-2" ID="sel-c-2" CLASS="sel sel-2">

<INPUT TYPE=RADIO NAME="radio-3" ID="pos-a-3" CLASS="pos" CHECKED>
<INPUT TYPE=RADIO NAME="radio-3" ID="pos-b-3" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-3" ID="pos-c-3" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-3" ID="sel-a-3" CLASS="sel sel-3">
<INPUT TYPE=RADIO NAME="radio-3" ID="sel-b-3" CLASS="sel sel-3">
<INPUT TYPE=RADIO NAME="radio-3" ID="sel-c-3" CLASS="sel sel-3">

<INPUT TYPE=RADIO NAME="radio-4" ID="pos-a-4" CLASS="pos" CHECKED>
<INPUT TYPE=RADIO NAME="radio-4" ID="pos-b-4" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-4" ID="pos-c-4" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-4" ID="sel-a-4" CLASS="sel sel-4">
<INPUT TYPE=RADIO NAME="radio-4" ID="sel-b-4" CLASS="sel sel-4">
<INPUT TYPE=RADIO NAME="radio-4" ID="sel-c-4" CLASS="sel sel-4">

<INPUT TYPE=RADIO NAME="radio-5" ID="pos-a-5" CLASS="pos" CHECKED>
<INPUT TYPE=RADIO NAME="radio-5" ID="pos-b-5" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-5" ID="pos-c-5" CLASS="pos">
<INPUT TYPE=RADIO NAME="radio-5" ID="sel-a-5" CLASS="sel sel-5">
<INPUT TYPE=RADIO NAME="radio-5" ID="sel-b-5" CLASS="sel sel-5">
<INPUT TYPE=RADIO NAME="radio-5" ID="sel-c-5" CLASS="sel sel-5">

ディスク枚数
<INPUT TYPE=RADIO NAME="disks" ID="disks-3" TABINDEX="-1" CHECKED><LABEL FOR="disks-3">3枚</LABEL>
<INPUT TYPE=RADIO NAME="disks" ID="disks-4" TABINDEX="-1"><LABEL FOR="disks-4">4枚</LABEL>
<LABEL><INPUT TYPE=RADIO NAME="disks" TABINDEX="-1">5枚</LABEL>
<BR>

<DIV ID="back">

<DIV ID="loc-a" CLASS="loc"></DIV>
<DIV ID="loc-b" CLASS="loc"></DIV>
<DIV ID="loc-c" CLASS="loc"></DIV>
<DIV ID="disk-1" CLASS="disk"></DIV>
<DIV ID="disk-2" CLASS="disk"></DIV>
<DIV ID="disk-3" CLASS="disk"></DIV>
<DIV ID="disk-4" CLASS="disk hide-4"></DIV>
<DIV ID="disk-5" CLASS="disk hide-5"></DIV>

<LABEL ID="pos-a-1-l" FOR="pos-a-1" CLASS="pos-l"></LABEL>
<LABEL ID="pos-b-1-l" FOR="pos-b-1" CLASS="pos-l"></LABEL>
<LABEL ID="pos-c-1-l" FOR="pos-c-1" CLASS="pos-l"></LABEL>
<LABEL ID="sel-a-1-l" FOR="sel-a-1" CLASS="sel-l"></LABEL>
<LABEL ID="sel-b-1-l" FOR="sel-b-1" CLASS="sel-l"></LABEL>
<LABEL ID="sel-c-1-l" FOR="sel-c-1" CLASS="sel-l"></LABEL>

<LABEL ID="pos-a-2-l" FOR="pos-a-2" CLASS="pos-l"></LABEL>
<LABEL ID="pos-b-2-l" FOR="pos-b-2" CLASS="pos-l"></LABEL>
<LABEL ID="pos-c-2-l" FOR="pos-c-2" CLASS="pos-l"></LABEL>
<LABEL ID="sel-a-2-l" FOR="sel-a-2" CLASS="sel-l"></LABEL>
<LABEL ID="sel-b-2-l" FOR="sel-b-2" CLASS="sel-l"></LABEL>
<LABEL ID="sel-c-2-l" FOR="sel-c-2" CLASS="sel-l"></LABEL>

<LABEL ID="pos-a-3-l" FOR="pos-a-3" CLASS="pos-l"></LABEL>
<LABEL ID="pos-b-3-l" FOR="pos-b-3" CLASS="pos-l"></LABEL>
<LABEL ID="pos-c-3-l" FOR="pos-c-3" CLASS="pos-l"></LABEL>
<LABEL ID="sel-a-3-l" FOR="sel-a-3" CLASS="sel-l"></LABEL>
<LABEL ID="sel-b-3-l" FOR="sel-b-3" CLASS="sel-l"></LABEL>
<LABEL ID="sel-c-3-l" FOR="sel-c-3" CLASS="sel-l"></LABEL>

<LABEL ID="pos-a-4-l" FOR="pos-a-4" CLASS="pos-l hide-4"></LABEL>
<LABEL ID="pos-b-4-l" FOR="pos-b-4" CLASS="pos-l hide-4"></LABEL>
<LABEL ID="pos-c-4-l" FOR="pos-c-4" CLASS="pos-l hide-4"></LABEL>
<LABEL ID="sel-a-4-l" FOR="sel-a-4" CLASS="sel-l hide-4"></LABEL>
<LABEL ID="sel-b-4-l" FOR="sel-b-4" CLASS="sel-l hide-4"></LABEL>
<LABEL ID="sel-c-4-l" FOR="sel-c-4" CLASS="sel-l hide-4"></LABEL>

<LABEL ID="pos-a-5-l" FOR="pos-a-5" CLASS="pos-l hide-5"></LABEL>
<LABEL ID="pos-b-5-l" FOR="pos-b-5" CLASS="pos-l hide-5"></LABEL>
<LABEL ID="pos-c-5-l" FOR="pos-c-5" CLASS="pos-l hide-5"></LABEL>
<LABEL ID="sel-a-5-l" FOR="sel-a-5" CLASS="sel-l hide-5"></LABEL>
<LABEL ID="sel-b-5-l" FOR="sel-b-5" CLASS="sel-l hide-5"></LABEL>
<LABEL ID="sel-c-5-l" FOR="sel-c-5" CLASS="sel-l hide-5"></LABEL>

</DIV>
</DIV>

</BODY>

</HTML>