■ オタクな話★スタイルシートの注意点★

最終更新日01/02/21

オタクな話TOP

HOME


最近の市販のhtml作成ソフト(ホームページビルダー等や、word2000などのワープロソフトを含む)では、まるでワープロでレイアウトをするかのように、簡単に文字の位置などを指定できるものが増えてきました。
ですが、これも、一種のスタイルシートなので、ブラウザによっては表示がおかしくなるケースもあります。
そこで、<div "style=xxx といったスタイルシートタグを用いて領域指定する場合の注意点、および、各ブラウザの対応状況についてまとめてみました。
表示サンプルは、実際に表示させた画面を、画像として保存したものを使用しています。
ソースの見本もつけてますので、見比べながら参考にしてください。

●widthの指定がない場合

1.ネスケ4.7Xの表示

2.IE4,5(5.5を含む)の表示

【説明】

領域の範囲が目で見てわかりやすいように、「border-style」で緑色の枠線を指定してみました。
border-style」 がない場合は、枠無しで文字のみになりますが、領域の範囲は同じですので注意が必要です。
領域の幅指定(widh)のない場合、
ネスケ4.7xでは「文字の長さが領域の幅になる」
IE4と5では、「画面の横幅が、そのまま領域の幅になる」ようです。

【ソース】

<body bgcolor="white" text="black">
<DIV STYLE="border-style:solid;border-color:#336633;border-width:2px 2px 2px 2px;">
IE5、IE4、ネスケ4での表示の違い(1)</div>
</body>

 
●widthの指定がある場合

1.ネスケ4.7Xの表示

2.IE4.5(5.5を含む)の表示

【説明】
今度は、「width:300」と領域の横幅を指定してみました。
ネスケでも、IEでも、この幅の指定によって、ほぼ同じ表示になります。

【ソース】

<body bgcolor="white" text="black">
<DIV STYLE="border-style:solid;border-color:#336633;border-width:2px 2px 2px 2px;WIDTH:300">
IE5、IE4、ネスケ4での表示の違い(2)</div>
</body>

 
●位置を指定して横に並べた場合

1.widthの指定あり (IE5.5、ネスケ4.7x)

2.widthの指定なしのネスケ4.7xの表示

3.widthの指定なしのIE4,5(5.5含む)の表示

【説明】

style="top : 10px;left : 10px」といった指定をすることによって、領域の位置をダイレクトに指定できます。
ワープロで編集するように、自由な位置に文字を書き込めるようになりますし、横に並べて配置することもできますが──実は、ここに落とし穴があります。
html作成ソフトによっては、widthの指定を忘れてしまうことがあるからです。
すると、どうなるか──
上の2と3の例では、緑色の枠のほうには、widthの指定がありません。
ネスケでは、2のように、「文字の長さが領域の横幅になる」ので問題がないのですが、
IEでは3のように、緑色の枠の領域が「画面の横幅と同じ幅になる」ので、青い枠線の領域と重なってしまいます。ちょっと、見映えが悪いですね。(^^ゞ
さらに、単に見映えが悪い程度ならば、まだマシなのですが、この領域が重なっている部分にリンクが指定してあるとIE4の場合は、リンクが無効になってしまうケースもありますので、要注意です。

【ソース】

例1
<body bgcolor="white" text="black">
<DIV style="top : 10px;left : 10px; position : absolute;
border-style:solid;border-color:#336633;border-width:2px 2px 2px 2px;WIDTH:150;
z-index : 1;" id="Layer1">表示の違い(3)</div>
<DIV style="top : 10px;left : 200px; position : absolute;
border-style:solid;border-color:blue;border-width:3px 3px 3px 3px;WIDTH: 150;
z-index : 2;" id="Layer2">表示の違い(4)</div>
</body>

例2、例3
<body bgcolor="white" text="black">
<DIV style="top : 10px;left : 10px; position : absolute;
border-style:solid;border-color:#336633;border-width:2px 2px 2px 2px;
z-index : 1;" id="Layer1">表示の違い(3)</div>
<DIV style="top : 10px;left : 200px; position : absolute;
border-style:solid;border-color:blue;border-width:3px 3px 3px 3px;WIDTH: 150;
z-index : 2;" id="Layer2">表示の違い(4)</div>
</body>

 
●border-styleの表示と実装の違い

最近のhtml作成ソフトでは、border-styleを利用して、テーブルの枠線の代わりにしたり、色々な飾りに使うこともできるようになりました。
たしかに便利ですし、工夫しだいで面白いレイアウトもできるのですが──このborder-styleにもブラウザのバージョンによって実装の違いがありますので要注意です。

説明 IE5.5 NC4.7x

dotted 
ドット

dashed 
ダッシュ

solid
普通の線

double
二重線

groove
溝のような線

ridge
浮き出た線

inset
インセット

outset
アウトセット

IE5.01以下では実装していません。ネスケと同じような実線になります。

「お遊び」の例は、ソースを見ていただくとわかるかと思いますが、単純な線(solid)の上下左右の太さ(border-width)を変えてみたものです。
ちなみに、太さを「0px」にすると、その部分の線が消えます。

【ソース】

<body bgcolor="white" text="black">
<DIV style="border-style:dotted;border-color:blue;border-width:3px 3px 3px 3px;WIDTH:150">
border-style:dotted</div><br>
<DIV style="border-style:dashed;border-color:blue;border-width:3px 3px 3px 3px;WIDTH:150;">
border-style:dashed</div><br>
<DIV style="border-style:solid;border-color:blue;border-width:3px 3px 3px 3px;WIDTH:150;">
border-style:solid</div><br>
<DIV style="border-style:double;border-color:blue;border-width:6px 6px 6px 6px;WIDTH:150;">
border-style:double</div><br>
<DIV style="border-style:groove;border-color:blue;border-width:6px 6px 6px 6px;WIDTH:150;">
border-style:groove</div><br>
<DIV style="border-style:ridge;border-color:blue;border-width:6px 6px 6px 6px;WIDTH:150;">
border-style:ridge</div><br>
<DIV style="border-style:inset;border-color:blue;border-width:6px 6px 6px 6px;WIDTH:150;">
border-style:inset</div><br>
<DIV style="border-style:outset;border-color:blue;border-width:6px 6px 6px 6px;WIDTH:150;">
border-style:outset</div><br>
<DIV style="border-style:solid;border-color:blue;border-width:2px 6px 6px 2px;WIDTH:150;">
お遊び</div><br>
</body>



▲オタクな話TOPへ戻る

Copyright © 2000-2001 MASATO KASHIWAE All Rights Reserved.