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
コメント
2019年01月23日 03時38分
let me get you, followers for free さん
Hi, I was taking a look at your Instagram account, I noticed you did not have too many followers and not that much engagement.
Instagram can be such a powerful tool for people working in the fitness niche, it's a perfect platform to gain new clients in your local area.
I want to offer you a 5 day 100% free trial of my Instagram growth program so you can see how powerful the platform really can be. Let me grow your local following, and help you gain clients and sales.
get all the details and your free trial here
http://stellationmedia.online
2019年02月03日 01時27分
Let me bring you sales at no cost to you さん
Hey I was just on your website I did not see a link for affiliates, so I am going to take a wild guess that you do not use any to promote your company :)
How about we bring you in sales without you paying for leads or ads or SEO or anything like that!
Imagine having access to 4,000 affiliates that only got paid when they bring you a paying client\sale! yep no paying for leads or emails, just paying for results.
Our company has access to 4,000 affiliates that use paid ads such as Google, Facebook and Youtube from there own resources to bring you in paying clients! you don't pay out for their time or their ad costs you just pay on what matters results!
I would love to get on a quick 15-minute call with you to discuss putting your service and products in front of our 4k affiliates and bringing in you fresh clients.
We will help your business grow while you only pay for what matters REAL results!
find out more information and book a call with me here
http://www.enzlo.online
The call will just be around 15 minutes and we can discuss where your at business-wise and how our networks can get you, new clients.
I am looking forward to having a chat with you..
have a great day ahead.
2019年04月03日 04時39分
About your website さん
Hello, I recently came upon your site through search and I happen to see several elements that did not make much sense. I'm a web developer here in Florida and would really like to jump on a call with you about your website and me possibly redesigning it.
My average site sees an increase of 3.5x more in business. Can I show you some of the work I have done? I would love to chat about your site if you are up for it.
I really think I could do great things for your business. Thanks! My cell is 863-238-1736 or you can see some of my work and request a free mockup from my site https://design.webdevcare.com/
thanks

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

お名前
コメント