2008年06月06日

ブラウザ別ボーダーの表示差 一覧表

こんにちは。
溝上です。

主にCSSの基本や、初歩的なことを担当しますが、
今回はある案件でCSSコーディングをしていた時、
どうしても気になった部分があったため、borderのプロパティ(線種)について分析しました。

※プロパティ分析とは、CSSの各プロパティを調べ、
使用する上での注意点や、対策などを紹介しようというものです。

それではプロパティ分析の第一回目、「ブラウザ別ボーダーの表示差 一覧表」です。
今回使用するプロパティは「border」です。

borderはその名前のとおり、指定した要素の周りを線(border)で囲む、
というものです。
画像の周りを囲んだり、各要素のまとまりを分かりやすくするためによく使います。
また線の種類も8種類もあり、なかなか使いやすいプロパティです。
(inherit、hidden、noneも含めれば11種類ですがここでは割愛します。)

しかしこのborder、ブラウザによってかなり見た目が変わってしまいます。
以下、各ブラウザのスクリーンショットです。
見た目を分かりやすくするために
borderの太さ(border-width)は5pxを指定しています。

まずはWindowsから紹介します。

Windows Internet Explorer 6
IE6
Windows Internet Explorer 7
IE6
 
Windows Firefox 1.5
FF1.5
Windows Firefox 2
FF2
 
Windows NetScape 7.1
FF2
 
続いてMacintoshです。
Macintosh Firefox 1.5
FF2
Macintosh Safari 1.3
FF2
 
Internet Explorerとそれ以外では全く違いますね。
MacintoshのSafariはInternet Explorerと似ていますが、
dashedの線はFirefoxと同じようです。

もっとも違うのはgroove、ridge、inset、outsetの4つです。
これら4つは囲まれた要素を立体的に見せるものですが、
Internet ExplorerとSafariは対応していません。
solidと同じように表示されています。
多くのブラウザに対応するようにコーディングする場合、
groove、ridge、inset、outsetは使わないほうが無難です。

またdashed、dotted、doubleの3つも表示のされ方に差があります。
どうやらブラウザ毎にborderを表示するときの
計算方法が違うようです。

これらの差はborder-widthの指定の仕方で
ある程度緩和することが出来ます。

 dashed:border-widthを1pxにする。(微妙に差があります)
 dotted:border-widthを2pxにする。
 double:border-widthを3の倍数にする。

dashedはFirefoxの方が破線のすきまが大きくなるので
まったく同じ表示、というわけにはいきません。
なかなか思い通りにはいかないものですね。

しかし、dottedとdoubleは確認したブラウザでは
ほぼ差もなく、同じように表示されました。
これなら安心して使えそうです。

(htmlコーディング)
<div class="borderSample">
<p class="borderSolid">border solid</p>
<p class="borderDashed">border dashed</p>
<p class="borderDotted">border dotted</p>
<p class="borderDouble">border double</p>
<p class="borderGroove">border groove</p>
<p class="borderRidge">border ridge</p>
<p class="borderInset">border inset</p>
<p class="borderOutset">border outset</p>
</div>
(cssサンプル)
.borderSample p {
width: 100px;
margin-bottom: 10px;
padding: 5px;
border-width: 5px;
border-color: #000000;
}
p.borderSolid {
border-style: solid;
}
p.borderDashed {
border-style: dashed;
}
p.borderDotted {
border-style: dotted;
}
p.borderDouble {
border-style: double;
}
p.borderGroove {
border-style: groove;
}
p.borderInset {
border-style: inset;
}
p.borderOutset {
border-style: outset;
}
p.borderRidge {
border-style: ridge;
}
 
posted by baba at 20:01 | Comment(0) | TrackBack(0) | プロパティ分析
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。