文字の回転と応用：将棋盤

作成日 : 2021-03-30
最終更新日 :

文字を回転させる方法

CSS で文字を回転させるには、 style="transform: scale(-1, -1)" のように指定する。 style="transform: rotate(180deg)" という指定でもよいが、こちらは位置が定めにくいという問題がある。

将棋盤

将棋盤を CSS で実現している例に、将棋アルバトロス (kifusaisei.com) がある。

この将棋アルバトロスのコードを参考にして、CSS で将棋盤を作ってみた。次がその第1案である。

後手持駒　角
987654321
香桂銀金玉金銀桂香一
　飛　　　　　　　二
歩　歩歩歩歩　歩歩三
　　　　　　歩　　四
　歩歩　　　　　　五
　　　　　　　　　六
歩歩　歩歩歩歩歩歩七
　馬飛　　玉　　　八
香桂銀金　金銀桂香九
先手持駒　なし

いろいろな点で改良の余地がある。第2案として、一般的な書籍の例にならい、先手後手の持ち駒を縦書き表示にしよう。

【途中図は☖８八角成まで】
　持駒　☖角 987654321
香桂銀 金玉金 銀桂香 一 持駒　☗なし
　飛　　　　　　　二
歩　歩歩歩歩　歩歩三
　　　　　　歩　　四
　歩歩　　　　　　五
　　　　　　　　　六
歩歩　歩歩歩歩歩歩七
　馬飛　　玉　　　八
香桂銀金　金銀桂香九

デザインとしてはまだ改良の余地はあるが、ここまでにしておく。

sfen 形式

将棋の盤面を表す形式のうち、 sfen 形式で CSS に基づく盤面が表示できるか、試してみる。 sfen 形式の１行テキストを入れて [表示] ボタンをクリックすると、テキストエリアに HTML が生成される。これを WEB ページに貼り付けると、 盤面が表示される。まだバグもあるが、とりあえず作った。