突然ですが、NSは本日を以てブログをやめます。
嘘です。
日附が変わったらやめておこうと思っていたんですが、余裕で間に合ってしまった…まあ、一応ね？
はい、そんなことよりちょっとちょっと、聞きました？奥さん！
愛宕の奥さん、41歳なんですってー(公式発表あり)
b.png)
23歳の誕生日の四日後に洋榎を産んでることになるので、今のインハイ世代の保護者たちの中でもかなり若い方と思われます。
まじめな話、綺麗なアラフォーですよね。
あ、世の中には可愛いアラフォーもいますけどね！
.png)
優希ちゃん、今日の本題は何でしたっけ？
そうそうこういうやつ。
これとかも。
不要牌を切り出すとき、その牌を浮かせて表現するんですよね。
たったそれだけのことなのに、ブログの記事で画像タグを並べるやり方だと、なかなか調節が難しいわけです。
「浮いた牌」を別画像として登録すればいいんですけど、別途約40枚の画像ファイルを用意するのは大変。
<align>タグを使う手もありそうですが、浮かして→また戻すのを、具体的にどうやるんだかわっかんにゃー。
そこで先日も紹介したスプライトさんに、再びお出で願おうと、こういうわけですよ。
スプライトさん(初代)です。
今回はわかりやすいように、透明な部分はグリーンで表示しています。
作るときに浮かせる場合があると考慮してればよかったんですが、今更言っても仕方ない。
なので、これをベースにver.2を作ることにしました。
まず、ハイテクノロジーによって表示されている上のダヴァンさんの手牌の画像をお手本に、AとBの長さを測ります。ここはもちろん目測でもいいんですけど。
次に同じ比率の隙間が何ピクセルになるか計算し、スプライト画像の上半分の40牌を、列ごとにずらします。
今回は書き出しサイトのお世話にはならず、画像編集ソフトでパパッと済ませました。
この画像をアップロードしたら、最後ににスタイルシートを書き変えます。
縦にすらしただけなのでx座標の値はそのまま。
y座標も、二列目以降にずらした分を足し算して(値はマイナスですが)オフラインのテキストエディタで置換すればすぐに終わります。
そして、今回の目玉、浮かせる牌用のクラスを新たに定義しなければなりません。
これは浮かせない牌の高さに隙間のピクセル数を足すだけなので、結局
- 浮かせない牌のクラスをコピペ
- 浮かせる牌のクラス名を適当に置換( { → _k{ など)
- 浮かせる牌のheightの値を書き変え
の３ステップで終わりです。
あ、２,３では範囲指定を忘れないようにします。
以上で必要な作業は終わりです。
いじったのは画像とスタイルシートの関連づけだけですから、過去記事のHTMLのコードはそのまま使えます。
では最後に、この新しいスプライトで牌画を表示してみましょう。
メグの手牌
三四八①②④⑧ⅢⅣⅥⅨ白白 五
竜の手牌
ⅠⅢⅢⅢ一三三①②③ Ⅰ 中中中
ⅠⅠⅢⅢⅢ一三①②③ Ⅰ 中中中
ⅠⅠⅠⅢⅢ一三①②③ ⑤ 中中中
ⅠⅠⅠⅢⅢ一三①②③ Ⅱ 中中中
ていうか竜さんのツモすごいっすね。
NS所蔵の哭きの竜１巻がどこかの地層に埋もれ中で発見できなかったので、上の画像は急遽ネットで拾ってきたやつです。
しかしその後いろいろ調べてみると、今はSVG画像というフォーマットが主流になりつつあり、ラスタ画像のCSSスプライトはもう古い技術らしいです。
うーん、もっと勉強しなくては…
