共謀罪を含む改悪組織犯罪処罰法は
2007.02.04 03:39
「:after」に未対応だから
So-net blogの「エコ」スキンが私の使っている「MacOS9.2.2+IE5.1.7」と「MacOS9.2.2+Netscape 7.02」ではまともに表示されない問題は以前に書いた【「clear:both」が抜けていた】でほとんど解決したと思っていた。しかし、解決してなかった。それは【「clear:both」が抜けていた】で解説したことを理解しやすくするためのサンプルファイルを作っている時に気付いた。
下にSo-net blogのスキンの基本構造を図のように示してあるが、どのように見えるだろうか。
ソースには次のように記述してある。
「Windows XP+IE6」以外では「test_container」要素の背景色（white）がヘッダ（「test_header」要素）の下までしかなく、サイドバー（「test_side-a」要素）とメイン（「test_main」要素）を含む「test_content」要素の背景色が「test_body」要素の背景色（gray）になってしまう。「float:left;」「float:right;」「clear:both;」の使い方に問題があると思われた。ちなみに、「Windows XP+IE6」では「test_footer」要素の「clear:both;」を省いて次のように記述しても問題が生じない。
ここで一つ注意がある。サンプルファイルを作る時にはファイルの一番上に「!DOCTYPE」を記述することが必要である。So-net blogでは次のようになっている。
【「clear:both」が抜けていた】では、「MacOS9.2.2+IE5.1.7」で生じる背景色の問題を解消するために、main要素が終わってcontent要素が終わる前に「clear:both;」を挿入する案を示した。このエントリーで使っているソースでは次のようになる。
ちなみに、サンプルファイルによるテストでは「<div style="clear:both;"></div>」の位置は「test_content」要素の後でも同じ結果になった。 しかし、So-net blogの「エコ」スキンでテストした時には別の問題が生じたように思う。「エコ」スキンのままでは分からないが、各要素に色を付けた時に問題に気付いたように思う。詳細は忘れた（追記：【「clear:both;」の位置】で補足しました）。それに「clear:both;」の正しい使い方はmain要素の後に挿入することだろう。
また、「<div style="clear:both;"></div>」を「test_container」要素の後に入れると、「test_footer」要素で「clear:both;」を指定しているのと同じ結果になって「MacOS9.2.2+IE5.1.7」でも背景色の問題が残る。
さて、「<div style="clear:both;"></div>」を「test_main」要素の下に挿入しただけでは「MacOS9.2.2+Netscape 7.02」で閲覧した時に背景色の問題が残るのなら、So-net blogで問題が生じなかったのは何故か。「blog_base.css」の中を捜したら次の記述を見つけた。
「MacOS9.2.2+Netscape 7.02」では改善されたが「MacOS9.2.2+IE5.1.7」では「clear:both;」が無視されてしまったようで表示が乱れた。「:after」をサポートしていないのかもしれない。
ところで、So-net blogでは「content」要素の下で指定しているが、私が以前に示した改善策ではmain要素（「test_main」要素）の下で「clear:both;」を指定した。そこで「test_main」要素の下で「clear:both;」を指定するサンプルも作ってみた。
「MacOS9.2.2+Netscape 7.02」でも表示が乱れるようである。
「test_main」要素の下で「clear:both;」を指定した状態で「test_footer」要素にも「clear:both;」を指定してみた。
表示の乱れはなくなったが、背景色の問題が生じ、最初の状態と同じになった。
さて、以上のことから「MacOS9.2.2+Netscape 7.02」では「clear:both;」を指定するだけでなく、指定した後に最低でも「1px」（height:1px;）のブロック要素（display:block;）が必要だということが分かった。これは、「clear:both;」を指定した後に「一番下です」などの文字を入れても確認できる。そこで、「test_main」要素の下に「<div style="clear:both; height:1px;"></div>」を指定するサンプルを作ってみた。
「MacOS9.2.2+IE5.1.7」だけでなく「MacOS9.2.2+Netscape 7.02」でも背景色の問題が消えた。
しかし、「Windows XP+IE6」ではサイドバーの下が「1px」だけでなく、かなり開いてしまった。そこで一度は省いた「overflow:hidden;」を復活させた。
これで、私が使っている３種類のブラウザ「MacOS9.2.2+IE5.1.7」「MacOS9.2.2+Netscape 7.02」「Windows XP+IE6」で表示の乱れなく背景色の問題が解消した。
ちなみに、So-net blogでは「:after」を使って「content」要素の下で「clear:both;」を指定しているので、それに合わせたサンプルも作った。
問題がなさそうに見える。しかし、上でも述べた通り、以前に「エコ」スキンで実験していた時に何らかの問題が生じた（追記：【「clear:both;」の位置】で補足しました）。やはりmain要素の下で「clear:both;」を指定した方が良いだろう。content要素（ブロック）の中での「float」はcontent要素の中でクリアしておくべきだろう。
ついでに、「test_container」要素の下に「<div style="clear:both; height:1px; overflow:hidden;"></div>」を挿入したサンプルも作っておいた。
これは「test_footer」要素で「clear:both;」を指定した場合と同じなので背景色の問題は解消しない。
さて、これでかなりスッキリした。最後に上記の中で私が一番良いと思うソースを記述しておく。
ヘッダ
サイドバー
サイドバー
サイドバー
サイドバー
サイドバー
メイン
ソースには次のように記述してある。
<style type="text/css">これが「エコ」スキンの基本的な構造である。この記述ではブラウザによって見え方の異なることが問題だった。サンプルファイルと「Windows XP+IE6」、「MacOS9.2.2+IE5.1.7」、「MacOS9.2.2+Netscape 7.02」のそれぞれの見え方を示した図へのリンクは次の通りである。
<!--
#test_body{ background:gray; width:380px; }
#test_container{ background:white; width:300px; margin:0 auto; }
#test_header{ background:yellow; width:290px; height:30px; margin:0 auto; }
#test_content{ width:300px; margin:0 auto; }
#test_side-a{ background:blue; float:left; width:90px; margin:0 5px; }
#test_main{ background:red; float:right; width:180px; margin:0 5px; }
#test_footer{ background:green; clear:both; width:300px; height:30px; margin:0 auto; }
-->
</style>
<div id="test_body">
<div id="test_container">
<div id="test_header">
ヘッダ
</div>
<div id="test_content">
<div id="test_side-a">
サイドバー<BR>サイドバー<BR>サイドバー<BR>
</div>
<div id="test_main">
メイン
</div>
</div>
</div>
<div id="test_footer">
フッタ
</div>
</div>
「Windows XP+IE6」以外では「test_container」要素の背景色（white）がヘッダ（「test_header」要素）の下までしかなく、サイドバー（「test_side-a」要素）とメイン（「test_main」要素）を含む「test_content」要素の背景色が「test_body」要素の背景色（gray）になってしまう。「float:left;」「float:right;」「clear:both;」の使い方に問題があると思われた。ちなみに、「Windows XP+IE6」では「test_footer」要素の「clear:both;」を省いて次のように記述しても問題が生じない。
#test_footer{ background:green; width:300px; height:30px; margin:0 auto; }しかし、他のブラウザでは表示が乱れる。
ここで一つ注意がある。サンプルファイルを作る時にはファイルの一番上に「!DOCTYPE」を記述することが必要である。So-net blogでは次のようになっている。
<!DOCTYPE htmlサンプルファイルでは一番厳格だと思われる次の記述でもほとんど同じ結果になった。
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"「MacOS9.2.2+Netscape 7.02」ではサイドバーの行間が少し伸びたような気がする。
"http://www.w3.org/TR/html4/strict.dtd">
【「clear:both」が抜けていた】では、「MacOS9.2.2+IE5.1.7」で生じる背景色の問題を解消するために、main要素が終わってcontent要素が終わる前に「clear:both;」を挿入する案を示した。このエントリーで使っているソースでは次のようになる。
<style type="text/css">「<div style="clear:both;"></div>」が加えられている。「test_footer」要素の「clear:both;」は必要ない。これで背景色の問題が解消したと思っていたし、実際にブログでは改善した。しかし、サンプルファイルでは「MacOS9.2.2+Netscape 7.02」で背景色の問題が残った。
<!--
#test_body{ background:gray; width:380px; }
#test_container{ background:white; width:300px; margin:0 auto; }
#test_header{ background:yellow; width:290px; height:30px; margin:0 auto; }
#test_content{ width:300px; margin:0 auto; }
#test_side-a{ background:blue; float:left; width:90px; margin:0 5px; }
#test_main{ background:red; float:right; width:180px; margin:0 5px; }
#test_footer{ background:green; width:300px; height:30px; margin:0 auto; }
-->
</style>
<div id="test_body">
<div id="test_container">
<div id="test_header">
ヘッダ
</div>
<div id="test_content">
<div id="test_side-a">
サイドバー<BR>サイドバー<BR>サイドバー<BR>
</div>
<div id="test_main">
メイン
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="test_footer">
フッタ
</div>
</div>
ちなみに、サンプルファイルによるテストでは「<div style="clear:both;"></div>」の位置は「test_content」要素の後でも同じ結果になった。 しかし、So-net blogの「エコ」スキンでテストした時には別の問題が生じたように思う。「エコ」スキンのままでは分からないが、各要素に色を付けた時に問題に気付いたように思う。詳細は忘れた（追記：【「clear:both;」の位置】で補足しました）。それに「clear:both;」の正しい使い方はmain要素の後に挿入することだろう。
また、「<div style="clear:both;"></div>」を「test_container」要素の後に入れると、「test_footer」要素で「clear:both;」を指定しているのと同じ結果になって「MacOS9.2.2+IE5.1.7」でも背景色の問題が残る。
さて、「<div style="clear:both;"></div>」を「test_main」要素の下に挿入しただけでは「MacOS9.2.2+Netscape 7.02」で閲覧した時に背景色の問題が残るのなら、So-net blogで問題が生じなかったのは何故か。「blog_base.css」の中を捜したら次の記述を見つけた。
#content:after,「:after」を使って「content」要素の下に「clear:both;」などを指定している。さっそくサンプルファイルでも指定を加えた。（「overflow:hidden;」は省いても変わらなかったようなので省いた。）
#profile dl:after,
#nice ul:after,
.archive-title:after,
.archive-bottom:after,
.articles-body:after {
content:"";
display:block;
clear:both;
height:1px;
overflow:hidden;
}
「MacOS9.2.2+Netscape 7.02」では改善されたが「MacOS9.2.2+IE5.1.7」では「clear:both;」が無視されてしまったようで表示が乱れた。「:after」をサポートしていないのかもしれない。
ところで、So-net blogでは「content」要素の下で指定しているが、私が以前に示した改善策ではmain要素（「test_main」要素）の下で「clear:both;」を指定した。そこで「test_main」要素の下で「clear:both;」を指定するサンプルも作ってみた。
「MacOS9.2.2+Netscape 7.02」でも表示が乱れるようである。
「test_main」要素の下で「clear:both;」を指定した状態で「test_footer」要素にも「clear:both;」を指定してみた。
表示の乱れはなくなったが、背景色の問題が生じ、最初の状態と同じになった。
さて、以上のことから「MacOS9.2.2+Netscape 7.02」では「clear:both;」を指定するだけでなく、指定した後に最低でも「1px」（height:1px;）のブロック要素（display:block;）が必要だということが分かった。これは、「clear:both;」を指定した後に「一番下です」などの文字を入れても確認できる。そこで、「test_main」要素の下に「<div style="clear:both; height:1px;"></div>」を指定するサンプルを作ってみた。
「MacOS9.2.2+IE5.1.7」だけでなく「MacOS9.2.2+Netscape 7.02」でも背景色の問題が消えた。
しかし、「Windows XP+IE6」ではサイドバーの下が「1px」だけでなく、かなり開いてしまった。そこで一度は省いた「overflow:hidden;」を復活させた。
これで、私が使っている３種類のブラウザ「MacOS9.2.2+IE5.1.7」「MacOS9.2.2+Netscape 7.02」「Windows XP+IE6」で表示の乱れなく背景色の問題が解消した。
ちなみに、So-net blogでは「:after」を使って「content」要素の下で「clear:both;」を指定しているので、それに合わせたサンプルも作った。
問題がなさそうに見える。しかし、上でも述べた通り、以前に「エコ」スキンで実験していた時に何らかの問題が生じた（追記：【「clear:both;」の位置】で補足しました）。やはりmain要素の下で「clear:both;」を指定した方が良いだろう。content要素（ブロック）の中での「float」はcontent要素の中でクリアしておくべきだろう。
ついでに、「test_container」要素の下に「<div style="clear:both; height:1px; overflow:hidden;"></div>」を挿入したサンプルも作っておいた。
これは「test_footer」要素で「clear:both;」を指定した場合と同じなので背景色の問題は解消しない。
さて、これでかなりスッキリした。最後に上記の中で私が一番良いと思うソースを記述しておく。
<style type="text/css">
<!--
#test_body{ background:gray; width:380px; }
#test_container{ background:white; width:300px; margin:0 auto; }
#test_header{ background:yellow; width:290px; height:30px; margin:0 auto; }
#test_content{ width:300px; margin:0 auto; }
#test_side-a{ background:blue; float:left; width:90px; margin:0 5px; }
#test_main{ background:red; float:right; width:180px; margin:0 5px; }
#test_footer{ background:green; width:300px; height:30px; margin:0 auto; }
-->
</style>
<div id="test_body">
<div id="test_container">
<div id="test_header">
ヘッダ
</div>
<div id="test_content">
<div id="test_side-a">
サイドバー<BR>サイドバー<BR>サイドバー<BR>
</div>
<div id="test_main">
メイン
</div>
<div style="clear:both; height:1px; overflow:hidden;"></div>
</div>
</div>
<div id="test_footer">
フッタ
</div>
</div>
追記（2007/2/9）：
続きがあります。→【「clear:both;」の位置】
読者の反応
トラックバック 0
トラックバックの受付は締め切りましたfooter(side-b)
|
一番下まで読んでくださり、 
|
|
コメント 0
コメントの受付は締め切りました