[1つ前] [] [戻る]


段組のテスト

<TABLE>タグを使う

<TABLE> を使えば、やりたいことはできる。ただし、<OL>のSTARTエレメントを使う必要があるので、HTML 4.01 Strict は使えず、HTML 4.01 Transitional を使わざるを得ない。


<TABLE>タグを利用した段組サンプル

  1. 1つ目。

    ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい うううううううううううううううううううううう ええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ

  1. 2つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか

    さささささささささささささささささ しししししししししししししししし すすすすすすすすすすす

  1. 3つ目。

    1111111111111111111111 111111111111111 11111111111111 222222222222 22222 333333333333333 3333333333333 444444444444 44444444444444 5555555 555555555 666666666 666666666666 6666666666 66666666666

    11111111111 111111111111 111111111 111111111111111111 22222 222222222222 33333333 333333333 3333333333 444444444 444444444 4444444 5555 5555 5555555 6666666 666666666 666666666 66666 66666666666

    1111 1111111111 111111111 11111111 1111111 1111111111 22222 2222 2222222 3333333 33333333333 333333333 44444444 4444444 44 4444444 5555555 55555 555 6666 666 66666666 66666 66 6666666 6666 66666

  1. 4つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお


スタイルシートを使ってみる

<TABLE> を使わずに、同じような段組をスタイルシートを駆使して実現しようとすると...。

まずは、<LI>以降をグループ化して、段組を試みる。

<STYLE type="text/css">
.column { text-align: left; width: 20%; float: left; padding: 1 1 1 10 }
</STYLE>
と定義しておいて、段組したいところを
<DIV class="column"> ... </DIV>
ではさんでみる。

スタイルシート(CSS)を利用した段組サンプル・その1

  1. 1つ目。

    ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい うううううううううううううううううううううう ええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ

  2. 2つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか

    さささささささささささささささささ しししししししししししししししし すすすすすすすすすすす

  3. 3つ目。

    1111111111111111111111 111111111111111 11111111111111 222222222222 22222 333333333333333 3333333333333 444444444444 44444444444444 5555555 555555555 666666666 666666666666 6666666666 66666666666

    11111111111 111111111111 111111111 111111111111111111 22222 222222222222 33333333 333333333 3333333333 444444444 444444444 4444444 5555 5555 5555555 6666666 666666666 666666666 66666 66666666666

    1111 1111111111 111111111 11111111 1111111 1111111111 22222 2222 2222222 3333333 33333333333 333333333 44444444 4444444 44 4444444 5555555 55555 555 6666 666 66666666 66666 66 6666666 6666 66666

  4. 4つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお


ちょっと変更。<DIV class="column"> の位置を少し後ろにずらしてみる。あんまり変わらん...。

スタイルシート(CSS)を利用した段組サンプル・その2

  1. 1つ目。

    ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい うううううううううううううううううううううう ええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ

  2. 2つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか

    さささささささささささささささささ しししししししししししししししし すすすすすすすすすすす

  3. 3つ目。

    1111111111111111111111 111111111111111 11111111111111 222222222222 22222 333333333333333 3333333333333 444444444444 44444444444444 5555555 555555555 666666666 666666666666 6666666666 66666666666

    11111111111 111111111111 111111111 111111111111111111 22222 222222222222 33333333 333333333 3333333333 444444444 444444444 4444444 5555 5555 5555555 6666666 666666666 666666666 66666 66666666666

    1111 1111111111 111111111 11111111 1111111 1111111111 22222 2222 2222222 3333333 33333333333 333333333 44444444 4444444 44 4444444 5555555 55555 555 6666 666 66666666 66666 66 6666666 6666 66666

  4. 4つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお


更に変更。<DIV class="column">を<OL>と<LI>の間に移動してみる。これは明らかに文法違反なのだが...。 IE では、それっぽく表示されちゃいますねぇ。<OL> が <UL> のようにレンダリングされてしまってるけど、 これは、<OL> や <UL> なしにいきなり <LI> が来てしまった場合(当然、文法違反)の IE のレンダリング結果と同じですね。

スタイルシート(CSS)を利用した段組サンプル・その3

  1. 1つ目。

    ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい うううううううううううううううううううううう ええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ

  2. 2つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか

    さささささささささささささささささ しししししししししししししししし すすすすすすすすすすす

  3. 3つ目。

    1111111111111111111111 111111111111111 11111111111111 222222222222 22222 333333333333333 3333333333333 444444444444 44444444444444 5555555 555555555 666666666 666666666666 6666666666 66666666666

    11111111111 111111111111 111111111 111111111111111111 22222 222222222222 33333333 333333333 3333333333 444444444 444444444 4444444 5555 5555 5555555 6666666 666666666 666666666 66666 66666666666

    1111 1111111111 111111111 11111111 1111111 1111111111 22222 2222 2222222 3333333 33333333333 333333333 44444444 4444444 44 4444444 5555555 55555 555 6666 666 66666666 66666 66 6666666 6666 66666

  4. 4つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお


結局、<OL>のSTARTエレメントに頼らざるを得ないのか。

スタイルシート(CSS)を利用した段組サンプル・その4

  1. 1つ目。

    ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい うううううううううううううううううううううう ええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ

  1. 2つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか

    さささささささささささささささささ しししししししししししししししし すすすすすすすすすすす

  1. 3つ目。

    1111111111111111111111 111111111111111 11111111111111 222222222222 22222 333333333333333 3333333333333 444444444444 44444444444444 5555555 555555555 666666666 666666666666 6666666666 66666666666

    11111111111 111111111111 111111111 111111111111111111 22222 222222222222 33333333 333333333 3333333333 444444444 444444444 4444444 5555 5555 5555555 6666666 666666666 666666666 66666 66666666666

    1111 1111111111 111111111 11111111 1111111 1111111111 22222 2222 2222222 3333333 33333333333 333333333 44444444 4444444 44 4444444 5555555 55555 555 6666 666 66666666 66666 66 6666666 6666 66666

  1. 4つ目。

    おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお


[1つ前] [] [戻る]


[活動メモへ戻る]
[Tsuporoneのトップページへ戻る]


Google

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:02 JST