CSSサンプルプログ: プロパティ分析

TOP / プロパティ分析

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

Windows Internet Explorer 7

Windows Firefox 1.5

Windows Firefox 2

Windows NetScape 7.1

続いてMacintoshです。

Macintosh Firefox 1.5

Macintosh Safari 1.3

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">

border solid
border dashed
border dotted
border double
border groove
border ridge
border inset
border outset

</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;
}