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
2019年09月04日 20時24分
Tittysimpalay さん
XRumer 19.0 + XEvil 4.0: innovative software complex for breaking any Captcha

1. Powerful Neuronets: XEvil OCR can solve more than 12000 of different types of Captcha's,
including such of popular, like Google CAPTCHA's ReCaptcha v2, v3 (in XEvil 4.0 Ultra only!), Captcha.Com, SolveMedia, Bing-Captcha,
Facebook-captcha and Bitfinex-captcha, Yandex-captcha, DLE-captcha, VBulletin-Captcha, and a lot of other types!

2. Very High speed and precision: recognition speed 0.01 .. 0.02 second per image (but only 1 second in DEMO version!),
XEvil can bypass and solve wide types spectre of captcha with high precision,
without depending of difficulty, distortion, noises, fonts, colors.

3. Very simple UI: just 3 main buttons to start recognition,
so XEvil easily to use with a wide spectre programs of SEO, SMM, Analytics,
Mass Auto-Registering/Posting/Sending/Bruteforcing/CryptoCurrency Mining programs.

Interested? ;)
Just do search in google "XEvil for Free".
2019年10月04日 01時54分
xnubtragaea さん
2r0zOL <a href="http://ndfivdhhnacj.com/">ndfivdhhnacj</a>, [url=http://dkblonrlxwno.com/]dkblonrlxwno[/url], [link=http://yzorulfuzsgi.com/]yzorulfuzsgi[/link], http://llwxaspedwsg.com/
2020年09月21日 10時38分
twqpmbtvn さん
将棋の駒をCSSで表示する。/netkansai
[url=http://www.gm3w5sleq666tng78570u5277vpt0bq2s.org/]utwqpmbtvn[/url]
twqpmbtvn http://www.gm3w5sleq666tng78570u5277vpt0bq2s.org/
<a href="http://www.gm3w5sleq666tng78570u5277vpt0bq2s.org/">atwqpmbtvn</a>
2020年10月28日 05時48分
FrankMUQAQ さん
this is a new browser
you will get 50 usd per installation to any wallet
the number of codes is limited
promo codes
FrankMUQAQ-QvCtr6XPOBdpojY
FrankMUQAQ-WUtKif9KDQyRsQE
FrankMUQAQ-vQnIyLE1eAFYxvc
FrankMUQAQ-1b2XTM9RkSRFGgF
FrankMUQAQ-JwGYozNsp2vb7ip
FrankMUQAQ-lNBale0kyk3o5UF
FrankMUQAQ-OBhVeFU2mhldrhP
FrankMUQAQ-RBoq8J388Bgm7p7
FrankMUQAQ-AkZ1RcRPf4mVuZW
FrankMUQAQ-jVNGvVyhXrR0LQo
you also get bonuses for the brought friend
https://anonfiles.com/ZfDan3kdp3/new_browser_1.3_rar
2020年11月11日 23時03分
arachni_name さん
1"'`--
2020年11月11日 23時03分
arachni_name さん
1)
2020年11月11日 23時03分
arachni_name"'`-- さん
1
2020年11月11日 23時03分
arachni_name さん
1
2020年11月11日 23時04分
arachni_name さん
1"'`--
2020年11月11日 23時04分
arachni_name) さん
1
2020年11月11日 23時04分
arachni_name さん
1
2020年11月11日 23時04分
arachni_name さん
1
2020年11月11日 23時04分
arachni_name さん
1
2020年11月11日 23時04分
arachni_name"'`-- さん
1
2020年11月11日 23時04分
arachni_name さん
1)
2021年02月15日 20時37分
hweroyffjk さん
将棋の駒をCSSで表示する。/netkansai
[url=http://www.gsa1gha8jng7wh0g75345tw217o91o28s.org/]uhweroyffjk[/url]
hweroyffjk http://www.gsa1gha8jng7wh0g75345tw217o91o28s.org/
<a href="http://www.gsa1gha8jng7wh0g75345tw217o91o28s.org/">ahweroyffjk</a>
2021年03月20日 15時21分
hbcwtsnls さん
将棋の駒をCSSで表示する。/netkansai
<a href="http://www.g11phuco39e6z66m5t6563700r9vcmrts.org/">ahbcwtsnls</a>
[url=http://www.g11phuco39e6z66m5t6563700r9vcmrts.org/]uhbcwtsnls[/url]
hbcwtsnls http://www.g11phuco39e6z66m5t6563700r9vcmrts.org/
2021年03月24日 01時39分
posjhmgsqq さん
将棋の駒をCSSで表示する。/netkansai
<a href="http://www.gvp02rh5pr2jx54pnx4n764e217i073js.org/">aposjhmgsqq</a>
posjhmgsqq http://www.gvp02rh5pr2jx54pnx4n764e217i073js.org/
[url=http://www.gvp02rh5pr2jx54pnx4n764e217i073js.org/]uposjhmgsqq[/url]
2021年04月24日 15時32分
LzlOX さん
Pills information for patients. Effects of Drug Abuse.
<a href="https://topregabalin.top">lyrica refill online</a> in the USA
Some what you want to know about medicine. Get information here.
2021年04月25日 20時24分
HyiSN さん
Medication information for patients. What side effects?
<a href="https://toplyrica.top">where buy pregabalin no prescription</a> in Canada
Some about medicines. Read information here.
2021年04月30日 20時51分
JaniceFut さん
cialis 60 mg <a href="https://mycialistabs.com/">cialis cheap</a> cialis versus viagra
2021年04月30日 21時08分
JaniceFut さん
where to buy cialis online <a href="https://mycialistabs.com/">how long for cialis to peak</a> cialis price walgreens
2021年05月01日 18時13分
TiffanyVione さん
cialis otc <a href="https://toptadalafiltabs.com/">tadalafil liquid</a> cialis alternative over the counter
2021年05月04日 01時07分
StellaNum さん
topic to write an essay <a href="https://topessaywriterfas.com/">cheap essay writing service us</a> how to write an essay in apa format step by step
2021年05月04日 08時30分
TiffanyVione さん
cialis canadian pharmacy ezzz <a href="https://toptadalafiltabs.com/">cialis vs. viagra recreational use</a> how long does cialis take to kick in
2021年05月05日 22時17分
RebeccaFrome さん
admisson essay service <a href="http://writemyessayslfd.com/">writemyessayslfd.com</a> writing essay correction service
2021年05月06日 00時58分
StellaNum さん
how to write a title of an article in an essay <a href="https://topessaywriterfas.com/">college supplement essay</a> write an essay on spreading greenery for a healthy living
2021年05月06日 19時17分
Francesvat さん
itsoktocry viagra <a href="https://mrviagrashop.com">viagra from india</a> viagra jokes
2021年05月07日 15時44分
Martinahug さん
ingrediants in viagra <a href="https://mysildenafilkr.com/">sildenafil para que sirve</a> chinese herb viagra
2021年05月07日 21時07分
Francesvat さん
buy real viagra online <a href="https://mrviagrashop.com">viagra connect</a> women viagra pills
2021年05月08日 10時23分
Martinahug さん
itsoktocry viagra <a href="https://mysildenafilkr.com/">viagra from india</a> viagra jokes
2021年05月11日 20時32分
KathrynFiemn さん
cialis generic <a href="http://tadalafilled.com/">cialis side effects with alcohol</a> cialis logo
2021年05月11日 22時35分
VmpRD さん
babysitting resume <a href="http://coverletterforresumetop.com/">resume and cover letter services</a> entry level software engineer resume
2021年05月12日 21時01分
PcvFF さん
graphic resume <a href="http://coverletterforresumetop.com/">write a cover letter for me</a> ending a cover letter
2021年05月13日 03時50分
KathrynFiemn さん
free trial cialis <a href="http://tadalafilled.com/">generic cialis 2018</a> free sample cialis
2021年05月13日 17時13分
YdqXM さん
teacher assistant resume <a href="https://writingacoverletteronline.com/">it professional cover letter</a> education section of resume
2021年05月14日 00時40分
IbpDE さん
viagra for men online <a href="https://edviagramaster.net/">sildenafil citrate 100mg lowest price</a> viagra online no prescription
2021年05月14日 15時24分
XsuYM さん
sildenafil prescription <a href="https://edviagramaster.net/">viagra triangle chicago</a> sildenafil pronunciation
2021年05月15日 09時26分
YxrSZ さん
viagra cost <a href="https://sildenafilviagratop.com">otc viagra</a> viagra prescription
2021年05月15日 23時41分
ZgnIN さん
how long does 5mg cialis last <a href="https://cialisortadalafil.com/">liquid tadalafil</a> best online pharmacy for cialis
2021年05月16日 12時26分
GbyIB さん
cialis reviews photos <a href="https://cialisortadalafil.com/">viagra versus cialis</a> cialis 5mg best price
2021年05月16日 13時02分
PleHI さん
alternative to viagra <a href="https://sildenafilviagratop.com">sildenafil cost</a> sildenafil costs
2021年05月16日 23時25分
GesLU さん
viagra or cialis <a href="https://topcialistabs.com/">cialis without a doctor prescription</a> cialis free trial coupon
2021年05月17日 15時14分
FrlAM さん
cialis overdose <a href="https://topcialistabs.com/">canadian pharmacy ezzz cialis</a> viagra versus cialis
2021年05月18日 00時03分
AkmDM さん
Medicine information sheet. Short-Term Effects.
<a href="https://flagyl4u.top">cheap flagyl no prescription</a> in USA
Actual information about drugs. Get now.
2021年05月26日 07時16分
AbratabeK さん
<a href=http://vslasixv.com/>lasix overnight delivery[/url]
2021年06月13日 00時12分
AbratabeK さん
<a href=http://gcialisk.com>buy cialis daily online[/url]
2021年06月13日 05時14分
rsmzwbfdjd さん
将棋の駒をCSSで表示する。/netkansai
rsmzwbfdjd http://www.g9os1135au6s5y20290hduxu3i8p2by5s.org/
[url=http://www.g9os1135au6s5y20290hduxu3i8p2by5s.org/]ursmzwbfdjd[/url]
<a href="http://www.g9os1135au6s5y20290hduxu3i8p2by5s.org/">arsmzwbfdjd</a>
2021年06月26日 03時43分
AbratabeK さん
<a href=https://vsamoxilv.com>[/url]
2021年07月16日 14時07分
AbratabeK さん
<a href=http://propeciaset.com/>cheapest propecia</a>

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

お名前
コメント