CSS

2018/08/07

🀇🀈🀉🀊🀋🀌🀍🀎🀏麻雀牌はあるんです。でも将棋の駒がないんです。unicode11でまたまた絵文字が盛り上がっているようです。しかし、 藤井聡太 七段のお陰で将棋盛り上がっているのですが、将棋の駒がUnicodeで絵文字になる気配がありません。

でももう安心です。

どこに需要があるかわかりませんし、とっくに誰かが作っていると思いますが、大々的に発表いたします。

先手3六歩の様に使っていただきたいです。ただし、所定のCSSを読み込んでHTMLを書いていただかないといけませんが。

shogi_koma.css

.nk_koma{
	font-style:normal;
	position:relative;
}
.nk_koma:after{
	content:"☖";
	font-size:160%;
	position:absolute;
	left:-0.2em;
	top:-0.4em;
}

.nk_koma_r{
	font-style:normal;
	position:relative;
	display:inline-block;
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
  }
.nk_koma_r:after{
	content:"☖";
	font-size:160%;
	position:absolute;
	left:-0.2em;
	top:-0.3em;
}

これを読み込んでいただいて

<i class="nk_koma">歩</i>

とすれば歩と表示され

<i class="nk_koma_r">歩</i> 

とすれば歩の様に逆に表示されます。

是非ご利用ください。枠と文字がずれる場合はCSSのtopの値を調整してください