CSS

スポンサー広告

将棋の駒を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の値を調整してください

rssfeed
コメント

コメントよろしくお願いします。

お名前
コメント