ミルクチョコを作ってみました。

ストロベリーチョコよりいい感じですね。薄ピンクだとヘッダより明細寄りな感じですし、ちょっと浮いた感じもします。
とりあえずストロベリーはコメントアウトにしておくとして、ミルクの方をサブヘッダにしたいと思います。

どのみち使いどころなんてほとんどないんですけどね。。。

ちょっと難しい話になるので、分かる方だけお付き合いください。

h2、h3タグの外観もチョコで統一しようと思い、ボーダーや色をそのように調整。
ブロック要素のままだと画面一杯の幅になってしまうので、インライン要素に。

ところが。

ブロック要素のものを下手にインライン要素にすると、cssを非表示にされた時とかに支障が出てしまいます。
例えばこつぶのページをこのcssファイルで表示しようとすると、タイトルの後改行されずにそのまま下の文章が横に表示されていってしまいます。
これはマズい。

色々試行錯誤した結果、どうやらmargin-right:100%;とするとブロック要素のまま内容物に合わせて幅が調整されることが判明。
良かった良かった、と胸を撫で下ろしたのも束の間。

IE以外でほぼ全滅(_ _;)

そうですよね、右余白100%としたらそうなるのが正しいですよねＴへＴ
でもそうなるとどうすれば……。
具体的にはテーブルみたいな挙動をしてくれれば万々歳なのですが。。。

と。

display:table;

調べていると、普段見ているcss解説サイトにはなかった項目が。
テーブル！？　もしかしてこれって……。

ヽ(Ｔ▽Ｔ)ノ

できました！　IE以外のブラウザでも内容物に合わせたブロック要素ができました！
……うん？　でもこれ、「IEは8以降でないと対応してない」って書いてあるのですが…IE6でも問題なく表示されてます。

ああ！

margin-right:100%;があるおかげでIE6でもちゃんと動いてるのですね。
試しに消してみたらただのブロック要素に戻りました。

というわけで。

同じ悩みをお持ちの方は試してみられては如何でしょうか。
わざわざhタグの後に<br>を入れたり、別途<div>で囲んだりする必要がなくなる程度ですけど、改装の際にそれらを追記する手間がイヤ！とかの状況では役に立ちます。

ちなみにテーブルの中で使うとIE限定で崩れるので、別途以下の記述が必要になります。
td h2 {margin-right:0%;}

cssハックでline-heightが上書きできてませんね。。。
hrのプロパティとかは同じハックと記述順序でちゃんと上書きされてるのに。

まあいいや。


ホワイトチョコの色合いを修正して、それを元にストロベリーチョコを作成しました。こつぶだと黄色い行に当たる部分です。
あと強調と警告と削除と。

とりあえずこれで記事のソースの修正に入れます。
多分一括置換で大体はなんとかなると思うので、そんなに手間ではないはず。

続きを読む

cssのクラス名をこつぶと同じにして、ファイルさえ置き換えれば見た目を使いまわせるようにしたいと思っています。

こつぶのテーブルはtable(と必要ならtr)にそれぞれクラス指定しています。
具体的にはアイテムやモンスターのリストがそれです。

で、

できるならこんな感じにしたいのですが。
残念ながらtableとtrのみのクラス指定では、これは実現できないんですね。
↑はtdの中に更にdivを入れてます。

Tiny Talesはtd内に大抵の場合何かしらのタグが入っているので、クラスが指定されたtable内のそれらを↑になるように指定してあげれば大体は上手く行くのですが。
そうでない部分とか、それ以外でも例外がある可能性もあったりで、下手にすると身動きが取れなくなるかもしれなくてちょっと困りもの。

ちなみにdivを使わないとこんな感じになります。


凹凸を逆にするとこう。


うん、やっぱり納得行かない。

---

……それ以前に同じ行のセルの行数が異なると、一番上のやつダメでした(_ _;)

---

そんなわけで改善妥協案。
Safariだと左上の窪みも表現できるんですけど、とりあえずIE6とOpera10では不可。
逆ならいいですけどそのためにcssハック使うわけにもいきませんし、とりあえずこれで行きましょうか。