サンプル５を開いて、ソースを見て下さい。
BODY要素、H1要素、P要素の余白部を ”0” にして、表示可能な巾と高さを最大にしました。
P要素の表示を105%にしました。
スタイルシート内の変更箇所
<style type="text/css">
body { margin : 0px ;
padding : 0px ; }
h1,p { background-color : #ccf ; }
h1 { font-size : 120% ;
margin : 0px ;
padding : 0px ; }
p { font-size : 95% ; font-size : 105% ;
margin : 0px ;
padding : 0px ; }
.posi { float : left ;
width : 20% ; width : 19.95% ; }
</style>少し古いバージョンのＩＥでは、列の表示幅２０％指定では、ブラウザの表示幅をホンノ少し変えただけで表示が崩れる現象が起きてしまいました。
表示幅をホンノ少し変えてだけで、表示が崩れたり崩れなかったり。これでは不安定で実用になりません。他のブラウザでは、正常に表示されます。
各列の表示巾を、表示可能な巾の２０％と単純に考えていました（ 100% / 5= 20% ）が、ブラウザがスタイルシートを解釈して計算した時に、全体の表示幅が１００％を超えると判断して、最後の列を左側に移動したようです。
そこで、表示幅を表示可能な巾の19.95％ とする事で、表示の崩れがなくなりました。少し古いバージョンのＩＥ だけの現象のようです。
ＩＥでの表示崩れが克服できましたので他のブラウザでもサンプル５を表示させてみました・・・・？
ＩＥ での表示
ＮＮ での表示
Opera での表示
Firefox での表示
Sleipnir での表示
HTML という馬子に スタイルシート という衣装を着せただけなのに、何故こんなに見栄えが違うのでしょうか？
この時に使用している各ブラウザも少しバージョンの古いものです。
サンプル６を開いて、ソースを見て下さい。
表示文字を太文字表示にして、要素間を見易い間隔に設定しました。
スタイルシート内の変更箇所
<style type="text/css">
body { margin : 0px ;
padding : 0px ;
font-weight : bold ; }
h1,p { background-color : #ccf ; }
h1 { font-size : 120% ;
margin : 0px 0.2em ;
padding : 0px ; }
p { font-size : 105% ;
margin : 0px 0em 0.2em 0.2em 0.75em ;
padding : 0px ; }
.posi { float : left ;
width : 19.95% ; }
</style>サンプル７を開いて、ソースを見て下さい。
P要素の表示を整列させました。確認の都合上、P要素の左右のマージンを"0"としました。
参照 巾や高さの単位
スタイルシート内の変更箇所
<style type="text/css">
body { margin : 0px ;
padding : 0px ;
font-weight : bold ; }
h1,p { background-color : #ccf ; }
h1 { font-size : 120% ;
margin : 0.2em ;
padding : 0px ; }
p { font-size : 105% ;
margin : 0em 0.2em 0em 0.2em 0.75em 0em ;
padding : 0px ; }
.posi { float : left ;
width : 19.95% ; }
.dan { margin-top : 1.2em ; }
</style>BODY要素内の変更箇所
<body>
：
<h1 class="dan">生活一般</h1>
== 生活一般 ==
：
<h1 class="dan">ＰＣ</h1>
== ＰＣ ==
：
</body>スタイルシートで指定した対象クラス要素に反映させて表示させます。
該当H1要素の上側マージンを調整する事で、私が現在使用しているバージョンの IE ではP要素の高さが揃いましたが、他のブラウザでは、微妙に揃っていません。私は、普段 IE を使用していますので、このまま進みますが、将来、IE のバージョンや使用するブラウザが変わり、表示がずれたとしても、この指定を変えるだけで対処できます。
リンク先の名称が2行表示になった箇所の名称を変更しました。
| 『 HTML 4.01 Specification 』 | ⇒ | 『 HTML 4.01 Spec．』 |
| 『 XHTML 1.0 2'nd Edition 』 | ⇒ | 『 XHTML 1.0 2'nd 』 |
| 『 通信用語(等)の基礎知識 』 | ⇒ | 『 通信用語の基礎知識 』 |
| 『 日本最初のホームページ 』 | ⇒ | 『 日本最初のH.P. 』 |
| 『 南極観測のホームページ 』 | ⇒ | 『 南極観測のH.P. 』 |
サンプルは、私のホームページで、他人が見るわけでもないので勝手に名称を変更しましたが、実際にウェブページ上でリンクする場合、名称を変更して記述するのは失礼ですし、著作権法上も問題があると思います。
サンプル８を開いて、ソースを見て下さい。
H1要素とP要素の背景色を消して、P要素のマージンをサンプル６の状態に戻します。
参照 巾や高さの単位
スタイルシート内の変更箇所
<style type="text/css">
body { margin : 0px ;
padding : 0px ;
font-weight : bold ; }
h1,p { background-color : #ccf ; }
h1 { font-size : 120% ;
margin : 0.2em ;
padding : 0px ; }
p { font-size : 105% ;
margin : 0em 0em 0.2em 0.2em 0em 0.75em ;
padding : 0px ; }
.posi { float : left ;
width : 19.95% ; }
.dan { margin-top : 1.2em ; }
</style>これで、構成要素の配列（レイアウト）が決まりました。次章からは見栄えの変更です。