CSS

麻雀の手牌を表示するプログラム

電脳麻将 は HTML5 + CSS3 + JavaScript で動作しています。手牌もHTML5とCSS3だけで表示しています。今回は以下の手牌を例に、どのように表示しているか説明します。手順は以下の流れになります。 牌譜形式 → JavaScript形式 に変換 JavaScript形式 → HTML …

電脳麻将のプログラム構成(2) 〜 HTML/CSS編

電脳麻将のプログラム構成(1) 〜 JavaScript編 - koba::blog に続き、今回はHTML/CSSのプログラム構成。電脳麻将 では、ver.1.0 からCSSの生成に Stylus、ver.1.3 からHTMLの生成に Pug を使っています。HTML/CSS に関して現在リファクタリング中です。以下…

電脳麻将のプログラム構成(0) ~ 全体編

電脳麻将 のプログラム構成について。ver.1.0.0 より電脳麻将は、npm対応のパッケージ になっています。ソースからビルドするには Node.js と npm が必要になりました。今回はこの新しいプログラム構成について説明します。次回リリースする ver.1.4.0 で構…

dl要素のcompact表示をCSSで実現する

CSS

HTML4の頃に dl要素に compact なる属性があり、それを指定すると 用語 説明文 のような簡潔な形式で表示されるはずだったのだが、残念ながらそれを実装したブラウザはなかった。けれど中国語のスクリプトの表記などでどうしても使いたかったので、dt, dd の…

はてなブログのスマホ向け表示を微調整する

CSS

はてなブログが数年前に正式リリースされた時に、はてなダイアリーから乗り換えなかったのには理由があって、 スマホ向けの表示が見にくい(特にソースコードの引用) トラックバック機能がない*1 fotolife連携、はてなグラフ引用、キーワードクラウドなどの機…

はてなブログのデザインを変更する

CSS

はてなダイアリーが1月28日に終了することになったので、はてなブログに引っ越しました。はてなダイアリーでは自分でカスタマイズしたデザインを使用していたので、はてなブログでも同じデザインになるように変更します。

牌画入力ツール

麻雀の牌姿を入力する「牌画入力ツール」はネット上にいろいろある*1 *2が、どれも画面上で牌をクリックして作成する仕様なので大変面倒くさい。そこで簡単な記法を牌画に変換するツールを作ってみた。 電脳麻将: 牌画入力 このような記述ができます。 {s067…

CSS3で加槓を表現する

麻雀に加槓という行為がある。すでにポンした面子と同じ牌をツモってきた場合、ポンをカンにアップグレードすることができるわけだが、晒すときにはポンとしてすでに横向けにした牌に重ねるように牌を置く。この形をCSS3の transform を使って表現してみた。…

Safariの文字サイズ問題にとりあえず対処する

CSS

ブラウザデフォルトの文字サイズというのは、各人がそれぞれ見やすい大きさを設定していると思うので、私は尊重すべきと思っています。なので CSSでもpx単位の font-size の指定は大嫌いでした。しかし、現在のSafariにはデフォルトの文字サイズを変更する方…

Safariのデフォルトの文字サイズを変更する

Mavericksがやってきた - koba::blogで残っていたSafariの文字サイズの問題。Safari6から「環境設定」でデフォルトのフォント、文字サイズが変更できなくなったらしいので、デフォルト・スタイルシートで変更を試みました。

iPod touch の歌詞表示を左寄せにする(再々)

iPod touch の歌詞表示を左寄せにする(再) - koba::blogを書いた後、しばらく他の方法がないかいじっていたのですが、より簡単な方法がありました。

IE7ハック

CSS

IE7からアンダースコア・ハックが使えなくなったようなのですが、代わりにこうすれば大丈夫なようです。 _border: solid 1px; /* アンダースコア・ハック */ // border: solid 1px; /* こうすればOK */ FirefoxとSafariでは // をコメントと解釈するけど、IE…

dt, dd の表示を変更

CSS

はてな記法「定義リスト」を使うつもりなので、はてなダイアリーのCSSを久しぶりに変更。 div#days dt { clear: left; float: left; } div#days dt { font-weight: bold; } div#days dt { padding-right: 0.5em; } div#days dd { margin-left: 4em; } div#da…

blockquoteに対応

CSS

blockquoteを使うつもりなので、はてなダイアリーのCSSを再び変更。本当は「子供セレクタ」の '>' を使いたかったんだけど、はてなダイアリーでCSSを編集すると、HTML内にぶちまけられてしまうので、使用不可。なんてこったい。

はてなグラフ、ASIN記法に対応

CSS

はてなグラフとASIN記法を使うようにしたので、CSSを直しました。 今はこんな感じ。

はてなダイアリーのデザインを変更する

CSS

スタイルシートをいじって、はてなダイアリーのデザインを変更してみました。 position: absolute を使ってるところがミソ。IEではちゃんと表示されないかも。