溝上です。
主に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 Firefox 1.5
- Macintosh Safari 1.3
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></div>
<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>
- (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;}