最新 RSS Twilog 掲示板

くでんな日々や公開どう?

2005/03/28

[Mozilla] CSS3のcolumnの先行実装を強化中

シリーズ・(くでんのような)「馬鹿どもにCSSを与えるなっ!!!」

私の手元に一つのテキストファイルがあって、ファイル名を"moz-column 段組.txt"といいます。内容はたった9行で

.col_test { 
    -moz-column-count: 2;
    -moz-column-gap: 1em;
}

-moz-column-count
-moz-column-width
-moz-column-gap
::-moz-column-content

これだけです。

妖精現実 フェアリアルさんの記事(2004年11月24日)Mozilla 1.8 Alpha5にCSS3のcolumnの先行実装がされたというのを知って、実例を見て「ふーーん?」と感心してとりあえずメモっていたのでした。今回、記事を読んで実装してるMozillaの開発者の人のBlogからCSSをとりあえずコピペ。

ウィンドウの縦サイズにちょうど収まるように段組してくれるのでスクロールさせなくていいのは嬉しいけど、段組の一番下、つまり画面の一番下から次の段の一番上まで視線を斜めに大きく移動させなきゃいけないので読みやすいのか読みにくいのか……これも使い方しだいですね。あと、過去ログの横サイズの大きい画像があるエントリとかどう表示されるんだろう?

横解像度1280ドット以上のディスプレイでFirefoxのウィンドウを最大化にすると段組が3段以上に自動的に調整されるはずです。

あと、さすがにこれは落ち着かないので2〜3日で元に戻る予定です。

追記:うわ、やっぱりすごいことになってる……こういう体裁で使う場合は画像の横サイズを-moz-column-widthで指定したサイズより小さくするか、もしくは他の対策を取らないとだめっぽいです。ちなみに無理矢理改造したCSSなのであちこち無理が……

コメント

もとひこ 『こういう場合の「回り込み」は未実装ですね。:hoverでz-indexでも弄りますか。column-span (注:未実装) だとフローを変えるしというかspanを幾つにすりゃいいのか判らんし、float:in-column (注:未実装) でもcolumn-widthが広がっちゃうしなぁ。』 (03/29 07:53)

お名前 コメント