キタックCGソリューションセンター

制作室の叫び

最近麻雀ずっとやってる

2020年07月08日(水)

石本貴康

1

11

PV 90

ずっとやってる。弱いからずっと負けてるけど。
あんなに一生懸命やっていたあつ森も最近はほったらかし気味です。
今頃雑草だらけになっているんだろうなぁ。

敷居が高い、おっさんの遊戯と思われがちな麻雀ですが、そんなことはありません。某有名オンラインRPGになぜか麻雀が実装されたり、VTuberがオンライン麻雀配信したりしていて、最近はかなり広い層で楽しまれているような気がします。

麻雀興味があるけどルールがわからん!マジで全くわからん!って言う人は、こちらの記事がおすすめです。

これを読めば上がれる! ソシャゲに慣れきった現代人のための、ド初心者向け楽しいネット麻雀講座

この上の記事内でも紹介されている雀魂というアプリでずっとやっています。
かなりユーザーが増えてきていて、初心者の人もいっぱい始めているみたいです。
「やってみたいけどボコボコにされそうで嫌だなぁ」という人こそ、是非今始めてみてください。「あれ?こいつ、さては……?」みたいなプレイヤーが結構いるはずです。

ついでに、CSSで麻雀牌っぽいものを書いてみました。
流石に絵柄は画像ですが……
あんまりチェックしていないので、変になっていたらごめんなさい。
chromeなら大丈夫なはず……

インライン用に調整したのがこちら。

たのしい麻雀大会

たのしい麻雀大会

たのしい麻雀大会

ソースは大体こんな感じです。

【HTML】
<div class="mahjong">
  <div class="mHai"><img src="tamago_hai.png" alt=""></div>
  <div class="mHai"><img src="tamago_hai_2.png" alt=""></div>
  <div class="mHai"><img src="tamago_hai_3.png" alt=""></div>
</div>
<p>たのしい<span class="mHai inline">
<img src="tamago_hai.png" alt=""></span>麻雀大会</p>

※<img>タグの前で改行していますが、実際は改行不要です。
【CSS】
.mahjong {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.mahjong > .mHai {
  margin-right: 2px;
}

.mHai {
  position: relative;
  height: 104px;
  width: 80px;
  border-radius: 8px;
  background-color: #fefefb;
  border-top: none;
  box-shadow: 1px 1px 0 0 #eee,
    -1px 1px 0 0 #eee,
    0 -20px 0 0 #f8f7f0,
    1px -20px 0 0 #eee,
    -1px -20px 0 0 #eee,
    1px -23px 0 0 #ff8d22,
    -1px -23px 0 0 #ff8d22;
}
.mHai::last-child {
  margin-right: 0;
}
.mHai > img {
  position: absolute;
  display: block;
  max-width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mHai.inline {
  display: inline-block;
  height: 1em;
  width: .77em;
  margin: 0 .1em;
  border-radius: .1em;
  box-shadow: 1px 1px 0 0 #eee,
    -1px 1px 0 0 #eee,
    0 -.2em 0 0 #f8f7f0,
    1px -.2em 0 0 #eee,
    -1px -.2em 0 0 #eee,
    1px -.3em 0 0 #ff8d22,
    -1px -.3em 0 0 #ff8d22;
  vertical-align: middle;
}

適当に書いたのでプロパティの順番とかがめちゃくちゃですが……
box-shadowで牌の立体感や背面部分、境界線を描画している感じですね。

しかし、たまいさん麻雀牌可愛いですね。商品化行けるか……?!

皆さんも是非麻雀で遊びましょう。
僕は今日も元気にロンされてきます。では。

Share プリーズ
書き手は私 石本貴康

よろしければどうかご感想を!

この記事のタイトル
最近麻雀ずっとやってる
感想を送るノート
お名前必須
メールアドレス必須
ご意見・ご感想必須

ご入力いただいた内容は、当社プライバシーポリシーに基づき厳重に管理いたします。メールの返信以外には使用しません。プライバシーポリシーに同意の上、お進みください。


表示された5文字の英数字を入力してください。

確認画面はありません。
いったんページの上部に戻りますが、問題なく送信されます。

キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • 高橋未羽
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • こめ
  • 佐久間尭