段組のテストその2

スタイルシートを使う

前回の試みの最終形は、図1のようなスタイルシートを導入し、図2のように <DIV class="column"> ～ </DIV> で囲むというものだった。

<!--

.column { text-align: left; width: 20%; float: left; padding: 1 1 1 10 }

-->

</STYLE>

図1 前回の試みのスタイルシート最終形

<OL>

</OL>

</DIV>

</OL>

</DIV>

</OL>

</DIV>

<LI>16こ目。<P>もきゅもきゅ。</P></LI>
<LI>17こ目。<P>もきゅもきゅ。</P></LI>
<LI>18こ目。<P>もきゅもきゅ。</P></LI>

</OL>

</DIV>

図2 <OL> が含まれる text の段組

1つ目。
なんたら。
2つ目。
なんたら。
3つ目。
なんたら。
4つ目。
なんたら。
5つ目。
なんたら。

6つ目。
かんたら。
7つ目。
かんたら。
8つ目。
かんたら。
9つ目。
かんたら。
10こ目。
かんたら。

11こ目。
やんやん。
12こ目。
やんやん。
13こ目。
やんやん。
14こ目。
やんやん。
15こ目。
やんやん。

16こ目。
もきゅもきゅ。
17こ目。
もきゅもきゅ。
18こ目。
もきゅもきゅ。

図3 実際の表示例

で、何が問題なのかというと、2段目以降は <OL> の START をいちいち指定しないといけないということ、START は HTML 4.01 Transitional にはあるが、HTML 4.01 Strict にはないということ。できれば、START は使いたくない。さらに、<LI> の数に合わせて、自動的に段組を(ブラウザ側で)組み直して表示して欲しい。<LI> の数が増えるたびに、HTML のソースを見直さないといけなくなるのは面倒だ。

要するに、図4のようなことができれば嬉しいという話。

<DIV class="autoJustifyColumns">
<OL>
<LI>1つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>2つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>3つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>4つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>5つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>6つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>7つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>8つ目。<P>ぽげむたびげなみょ～ん</P></LI>
<LI>9つ目。<P>ぽげむたびげなみょ～ん</P></LI>
</OL>
</DIV>

→→→→→
ブラウザでレンダリング...

1つ目。
ぽげむたびげなみょ～ん
2つ目。
ぽげむたびげなみょ～ん
3つ目。
ぽげむたびげなみょ～ん

4つ目。
ぽげむたびげなみょ～ん
5つ目。
ぽげむたびげなみょ～ん
6つ目。
ぽげむたびげなみょ～ん

7つ目。
ぽげむたびげなみょ～ん
8つ目。
ぽげむたびげなみょ～ん
9つ目。
ぽげむたびげなみょ～ん

↓↓↓↓↓ 9個だった<LI>が11個に増えると...

→→→→→
ブラウザでレンダリング...

1つ目。
ぽげむたびげなみょ～ん
2つ目。
ぽげむたびげなみょ～ん
3つ目。
ぽげむたびげなみょ～ん
4つ目。
ぽげむたびげなみょ～ん

5つ目。
ぽげむたびげなみょ～ん
6つ目。
ぽげむたびげなみょ～ん
7つ目。
ぽげむたびげなみょ～ん
8つ目。
ぽげむたびげなみょ～ん

9つ目。
ぽげむたびげなみょ～ん
10こ目。
ぽげむたびげなみょ～ん
11こ目。
ぽげむたびげなみょ～ん

図4 こんなのは不可能なのか?

タイムリーというか、「Extensible Stylesheet Language 1.0 の公開について (W3C 勧告) (2001年10月17日発表)」なんてのが、勧告されたんですね。

[1つ前] [次(は、まだない)] [戻る]

Access Count:

Copyright (c) 1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009, 2010, 2011, 2012 by Hiroshi Tsujimura (tsupo@na.rim.or.jp) Some Rights Reserved.
Last Modified: Tuesday, 21-Aug-2007 03:12:03 JST

段組のテスト その2

スタイルシートを使う

段組のテストその2