ブラウザによって色や種類の違うボーダーの交わり方が違うので擬似要素使ってみる

見出しなんかで、左と下にボーダーをつけているサイトをよく見かけます。ボーダーの種類が同じで、色も同じだと問題ないのですが、種類や色が違ってくると交わっている部分がななめになり個人的には気持ち悪いです。

headline-border01.png

で、どちらかのボーダーを擬似要素でつければきれいになるって話を書こうと思ったのですが、ブラウザによって交わり方が違うことに気付きました。

ちなみに先ほどのはChromeの最新バージョン(記事を書いているときの)です。バージョン 28.0.1500.95 mになるようです。このスクリーンショットはPCはWindowsのものですが、Macでも同じ感じでした。

拡大するとこんな感じです。

headline-border-zoom.png

交わる部分が斜めになっています。これを利用して三角形や台形を作ることができます。三角形の使い方はこの辺の記事をぜひご覧ください。

では、他のブラウザはどのように交わるのかを見てみます。IEから。

headline-border-ie10.png

直線以外は斜めに、その他は斜めになっていません。旧バージョンでも見てみるとIE9からこのようになっています。他にも色々調べてみた結果、次のことがいえます。

  • solid同士だと斜めに交わる
  • solidはdottedとdashedより優先して表示される

続いてOperaです。

headline-border-opera.png

2番目の下のボーダーの太さが2pxあるものだけ違った交わり方をします。Safariもこのタイプです。で、こちらは次のことがいえます。

  • 2px以上ある線は1pxの線より優先して表示される
  • 2px以上の線が交わると斜めになる

最後にFirefoxです。ちょっと分かりにくいの拡大しています。

headline-border-firefox.png

Chromeに近い感じですが、交わっている部分がドットではなく直線になっています。これはなんか独特です。

片方のボーダーを擬似要素で表示する

ブラウザによって表示のされ方が違いますし、交わり方が気持ち悪いブラウザもあるので何とかしたい。そんなとき、擬似要素が役に立ちます。

片方のボーダーを通常通りに書いて、もう一方は擬似要素で表示します。擬似要素で表示するボーダーが上から乗ることになりますので斜めに交わることもありません。

例えば一番上の見出しのCSSはこんな感じです。

h2{
  margin: 10px 0 30px 0;
  padding: 15px 0 10px 10px;
  border-bottom: 1px solid #aaa;
  border-left: 10px solid #1570A6;
  color: #555;
  font-size: 24px;
}

下のボーダーを擬似要素で表示するとこんな感じになります。

h2{
  position: relative;
  margin: 10px 0 30px 0;
  padding: 15px 0 10px 10px;
  border-left: 10px solid #1570A6;
  color: #555;
  font-size: 24px;
}
h2:after{
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width:100%;
  height: 0;
  border-bottom: 1px solid #aaa;
}

3つ目の見出しの場合は、左右のボーダーはをそのまま記述し、:beforeで上のボーダー、:afterで下のボーダーという風にします。

擬似要素の分だけ記述量も増えますし、擬似要素はIE7以下では対応していませんが私はこちらを使いたいです。

さいごに

当初は擬似要素を使った見出しの作り方を紹介しようと思いサンプルを作ったのですが、ブラウザによって見え方が違ったので調べてみました。

今までまったく知らなかったので、今回はいい勉強になりました。

どのブラウザの交わり方が正しいのかは分かりませんが、例外なくすべて斜めに交わるChromeが基本なのかなと思います。

ただ、個人的にはIEが好きです。基本は押さえつつ、よりきれいに見せるために例外を作っているような気がします。この辺は好みですが。

とにかく、個人的には見出しに関しては斜めに交わっていると気持ちが悪いです。私と同じように気持ち悪く感じる方はぜひ擬似要素をお試しください。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加