手牌作成ツール

牌選択

手牌作成ツールとは？

ブログやホームページに麻雀の牌姿（手牌）や画像を挿入したり、何切る問題を作る時などに使用する無料ツールです。麻雀牌の画像をブログやホームページなどで使用した場合、CDNを利用しているため、高速で表示することができます。

ご自由にお使いください。

使い方

牌選択から麻雀牌を複数選択し、局数、巡目、ドラをそれぞれ選択したら、「作成」ボタンをクリックするだけで利用できます。画像のように「何切る問題」のような牌姿と、選択した麻雀牌をブログに挿入できるHTMLコードが生成されます。

牌姿スクリーンショットを画像として保存する方法は以下をご参照ください。
→Chromeの開発者ツールを使って特定の場所だけスクリーンショットする方法

ブログに挿入する際、おすすめのCSSは以下になります。

.janpai {
display: inline-block; /*横並びにする*/
width:64px; /*横幅 7.1%でも可*/
vertical-align: middle; /*縦の中央揃え*/
}

牌を横にする（ポンとカン）場合は、「class=”yoko”」のspanタグで囲ってください。

.yoko {
display: inline-block; /* 幅が指定できるよう inline-block にする */
width: 64px; /* 幅を牌の高さに合わせる */
white-space: nowrap; /* 回転エリア内では改行しない */
text-align: left; /* 回転エリア内では左寄せ */
transform-origin: 0% 0%; /* 左上を起点とする */
transform: rotate(270deg) translate(-64px, 0px); /* まず反時計回りに90度回転、それから「左」に牌の高さ分移動 */
/* 以下はWebkit系ブラウザ(Safari, Chrome)用 */
-webkit-transform-origin: 0% 0%;
-webkit-transform: rotate(270deg) translate(-64px, 0px);
}