かえでのWebログ

div要素のcontents

上記のようなブロック要素があった場合、

div:before{ content: "div:before"; }
div:after{ content: "div:after"; }

という指定を行うと

div:before

div要素のcontents

div:after

のようにdiv要素が生成するblockの内側に:before/:afterのブロックが生成される

テーマ独自に記法を拡張しました。これらは今後開発するテーマに実装します。

div.console

console風なdivボックスを生成します。

span.blink

テキストを点滅させます。(IE6では点滅しません)

div.xterm

xterm風なdivボックスを生成します。(IE6未対応)

実際に使ってみる

ソース

>>>console
YUKI.N>みえてる？
 >[class:blink:_]
<<<

>>>xterm
YUKI.N>これは(ry
Ready?
 >[class:blink:_]
<<<

で、こうなる

新着コメント/TBがある時に出るマーク（♪）の置き換えをやってみた。スケルトンを弄らなくてもここまでできます。

[album:adiary/theme:newcome.jpg:large]

これでお姉さま度が大幅アップ（笑

W3Cで規定されている内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border

padding

contents

contents部分の幅はwidthで指定した値となります。

contents部分の幅 = widthの値

heightも同様です。

IE6の内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border
padding
contents

よって、IE6の場合はcontents部分の幅は

contents部分の幅 = widthの値 - paddingの値 - borderの値

となります。heightも同様です。

paddingがwidthに含まれることは知っていましたがborderまで含まれるとは思いませんでした。

作成中のテーマがとりあえず閲覧には困らない程度には出来上がったので変更しました。
Firefox/Operaでの閲覧を激しく推奨、IEでの閲覧を激しく非推奨((いや、もちろんIEでもそれなりに表示できるようには作りましたが、かなりの部分で処理が簡略化されています。
何よりもお姉さまになれません（爆）))。

システムモードとかカレンダーの部分はやっつけで調整に時間がかかりそう。このあたりがちゃんとできれば公開するつもりです。