片山まさゆき先生の打姫オバカミーコを読んでいたら、こんなシーンが。

競技麻雀団体 JMP(日本麻雀プロフェッショナル)の独裁者、我鷹(がたか)プロが突然 D2リーグの対局場に現れ、新人たちのマナー違反などを指摘して回ります。
そのうち、藤木プロが指摘されたところ
obaka-037-04-05_06OBAKA.37 メンターハンター


後日、指導係としての責任を問われた主人公ミーコは、プロ活動停止1ヶ月の処分を受けてしまいますが…
知らんかった。
咲-Saki-の長野決勝で大明槓という言葉が出ているんだから、大があれば小もあるはず。小明槓とは何ぞや?という当り前の思考ができていれば、何年も前に学べていたはずなのに…

というわけで、弊ブログのCSS牌画スプライトでは、この加槓(小明槓)の表示を考慮していませんでした。
以下、改良の覚書です。

CSS

対面からポンをした状態
これに、手牌のを加槓したい。
  • 牌の位置

    真ん中の部分のCSSを<span>タグのstyle属性に
    <span class="ancoro tile_y_m1" style="position:relative">
        <span class="ancoro tile_y_m1" style="position:absolute;top:-20px;left:0"></span>
    </span>
    と指定すると、
    おお、一発で思った通りの位置になりました。
    <span>タグを入れ子にして、子要素を親要素の21px上にずらしています。
    横向きの牌の高さは22pxなんですが、重なった時には立体を表現した牌の裏の色が見えないほうがリアルなので、1pxぶん重ねました。
  • 麻雀マット

    背景の麻雀マットの上側の余白が狭くなってしまったので、少し拡げてみましょう。
    <div class="jongmat" style="padding-top: 2em"><!--(略)--></div>
  • 牌の影

    また、上の牌の影が下にかかるのが不自然なので
    <span style="/*略*/filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.5))!important;" class="ancoro tile_y_m1">
    drop-shadowy方向の影の長さを0にして、
    (影を見やすくするため、背景を白くしています)
    右側にだけ影が来るように調整します。
    ぼかしを指定しているので、境目に僅かに影が出ますが、3D効果()ということで。
    ※Internet Explorer など一部ブラウザでは影が出ません。すみません!
  • 加槓クラス

    以上のスタイルをクラスとして定義
    .kakan{
        position:relative;
    }
    .kakan>span{
        position: absolute;
        top: -21px; left: 0;
        -webkit-filter: drop-shadow(2px 0 2px rgba(0,0,0,0.5))!important;
        filter: drop-shadow(2px 0 2px rgba(0,0,0,0.5))!important;
    }
    ※Chrome52以前、iOS Safari9.2以前、Android4.2 に対応するため-webkit-filterを併記しています。

HTMLで表示させる

  • 代替テキスト

    代替テキストは、二枚一組として、とりあえず
    一( )一
    という感じでいいでしょうか。
  • 完成形

    以上をまとめると、重なり部分のHTMLは、こうなります。
    <span class="ancoro tile_y_m1 kakan">
        <span class="ancoro tile_y_m1">一(<u>一</u> <u>一</u>)一</span>
    </span>
    この方法で、三パターンの小明槓を表示してみましょう。
    ( )   
    できました☆

打姫(うたひめ)オバカミーコについて

打姫オバカミーコは、麻雀漫画が好きな人ならおそらく誰もが知っているであろう超有名な作品らしいのですが、私は最近初めて知って読みました。

両面とノベタンの区別も知らず、点数計算も覚束ない、駆け出しの女子プロ雀士ミーコが、トップから転落した男、波溜(なみだめ)師匠の指導の下、ひたむきに頂点を目指していく成長物語
──の体で、ほぼ毎回、麻雀理論の解説があります。
スリーヘッド最弱理論、セレブ()ち、など興味を惹くキーワードを駆使しながら、麻雀初級~中級の読者にもできるだけわかりやすく描くぞ、という片山先生の情熱が伝わってきます。
永遠の初心者である管理人には難しいところもあるけれど、よく読み込んで理解すれば麻雀──咲-Saki-の闘牌描写なんかも──がもっと楽しめるようになると思います。

キャラやストーリーも一級品なので、未読の方にはとってもお薦めですゥ~(ミーコ風)