なでしこ３ではDOMスタイル設定、DOMスタイル一括設定を使ってCSSを操作できるので、それを使って角丸サイコロを作ります。
tableを設置
前回、サイコロの目の位置って３×３のテーブルみたいなことじゃね？ というコトに気が付いたので、tableを使って作ることにする。
取りあえずテーブルを設置。繰り返しでもっと効率よく作れた気がするけど、何も考えずにコピペコピペで作ってしもうた（＾▽＾；
３×３くらいならこの方がはやい～この方がサイコロ感が分かる～（言い訳感；）
DOM親要素に「<table id="dice">
<tr><td id="eye0"></td><td id="eye1"></td><td id="eye2"></td></tr>
<tr><td id="eye3"></td><td id="eye4"></td><td id="eye5"></td></tr>
<tr><td id="eye6"></td><td id="eye7"></td><td id="eye8"></td></tr>
</table>」をHTML設定。
tableをサイコロの外枠とし、tdを目にする。
なでしこから操作するためのIDを振る。
目のIDは配列で扱いたいので連番にする。
CSS
なでしこ３では、基本的なCSSも日本語で設定することが出来るんです！
何が使えるかはここから確認出来ます☆ もそっと増えてゆくと嬉しい。
目＝13。
「#dice」に{
"border-collapse":"separate",//隣接するセルのボーダーを重ねない
"border-spacing":"2px",//セルのボーダーの間隔
"ボーダー":"solid 3px {黒色}",
"余白":"{目/2}px",
"border-radius":"{目/2}px"//角丸
}をDOMスタイル一括設定。
呪文率多め（＠＿＠）
border-radiusが、サイコロの角を丸める呪文です（英語はみな呪文～ｗ）
もっと簡単に出来る予定だったけど、簡易エディタで動かそうとしたら、tableに元々設定されているCSSがあったために思いがけず苦戦；(自前のHTMLでは問題なかった)
最初のborder-collapseは、それを戻すためだけの呪文。
標準では、table（外枠）も、各tdも、ボーダーは全て独立した□だけど、それではすっきりしないので、隣り合ったボーダーを重ねて線にして、表らしく表示するやつだけど、それだとtableのボーダーの角が丸められなかった。当然ながら目も全部くっついてしまうので、重ねない設定に戻す。
それだけのコトなんだけど、そこに気付くまでが大変よ（＋＿＋）だって呪文だものｗ なんて読むのかわっかんないんだぜｗｗｗ
９回
「#eye{回数-1}」に{
"幅":"{目}px","高さ":"{目}px",
"line-height":"{目}px",//行高さ
"ボーダー":"なし",
"余白":"0px",
"背景色":白色,
"border-radius":"{目/2}px"//角丸
}をDOMスタイル一括設定。
ここまで。
角丸設定で、td自体を●に。
幅、高さの半分のサイズで角丸設定すれば、●が出来ます☆
classで指定は出来ないようなので繰り返しで設定していますが、HTML埋め込みの場合なら、こういう出目によって変化しない部分は、別途ふつーにCSSで設定した方がすっきりするかな？
でも、サイコロの大きさを変えたいとなった時、目の部分全部手直しとなるから、後のことを考えたらやっぱりプログラム中で設定した方が便利かな？（後のこと……？）
サイコロ表示
HTMLの設置とCSSの設定で長くなってるけど、実際にサイコロ振って見た目に反映する部分は基本、前のと同じようなこと。
目位置＝[[4],[0,8],[0,4,8],[0,2,6,8],[0,2,4,6,8],[0,2,3,5,6,8]]
((６の乱数)+1)のサイコロ表示。
●（数の）サイコロ表示
９回
「#eye{回数-1}」の「背景色」に白色をDOMスタイル設定。
ここまで。
もし、数が１ならば、目色は赤色。
違えば、目色は黒色。
(数)回
「#eye{目位置[数-1][回数-1]}」の「背景色」に目色をDOMスタイル設定。
ここまで。
ここまで。
tdの背景色を変えることで出目が見えるようにする。
振るのが一回限りなら別にいらないけど、今後のことを考えて繰り返しで先に全てのtdの背景色を白にして、前の出目をクリアする処理を一応入れとく（……今後？）
あっっ、わたしバカだったな。[2,1]と[2,3]は使われていないんだから、IDの連番をちょこっと変えたら７回でクリア出来たのに。ま、いっか（えっ；）
タイマー
ゲームと言えば、タイマー！
大したアレじゃ無いけど、一瞬でぱっと表示させるのではなく、何が出るかな感を出してみる。
C=0
0.1秒タイマー開始した時には(T)
((６の乱数)+1)のサイコロ表示。
C=C+1。
もし、C=10ならば、Tのタイマー停止。
ここまで。
そんなこんなで……
おぉ～！ 保存されたプログラムの一覧を見るページが、かっこよくなってますよ！^^
サイコロがcanvasかtableかってだけで、動作自体は前のサイコロ１と同様、実行ボタンを押すたびサイコロを振るだけです。
続くかも知れないし終わるかも知れない
うーん。もうちょっとかっこよくできないかな～。
rotateやanimationで回したり転がってるっぽくしたりはできるんだけど、CSSだけで立方体が描けるとかいうのも見つけたんだけど、知識とセンスが不足だからイマイチな上、なでしこのコトって言うより完全にCSSのことになってしまうから棚上げとして、canvasに描画でアニメーションするのもめんどくさいセンスが不足でイマイチだから棚上げとして……
……なんか、ぽいもの作りたいけどひらめかない(´・ω・｀)