[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ
Post on:2011年7月22日
sponsors
高さが可変のボックスに、二重のボーダーの外観を与える5つの実装方法を紹介します。
[ad#ad-2]
デモでは、下記に紹介する5つのメソッドで実装したボックスが確認できます。
各ボックスは「Check」をクリックすると、ボックスの高さを拡張します。
デモページ：ボックスの高さを拡張
以下は、これらの5つの実装方法と解説を意訳したものです。
- Method 1: borderとoutline
- Method 2: 疑似要素
- Method 3: box-shadow
- Method 4: div要素の追加
- Method 5: border-image
[ad#ad-2]
Method 1: borderとoutline
borderプロパティとoutlineプロパティを併用します。
この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。
CSS
.one {
border: solid 6px #fff;
outline: solid 6px #888;
}
この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないということです。他のエレメントに重なってしまいます。
Method 2: 疑似要素
疑似要素を使用する場合は、borderが流動でないようにしておく必要があるためちょっとしたトリックを使用し、垂直方向に流動であるようにします。
CSS
.two {
border: solid 6px #fff;
position: relative;
z-index: 1;
}
.two:before {
content: "";
display: block;
position: absolute;
top: -12px;
left: -12px;
border: solid 6px #888;
width: 312px;
padding-bottom: 12px;
min-height: 100%;
z-index: 10;
}
ポイントはz-indexの設定です、これは疑似要素をコンテンツに重なることを阻止するために使用しています。あと、「position: absolute;」と「min-height:100%;」の設定で流動性を保ちます。
Method 3: box-shadow
今回のさまざまなメソッドを試すきっかけとなったものです。この方法は最もシンプルで、たった一行のコードで実現できます。
CSS
.three {
box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}
シャドウを二重にするために「,（コンマ）」を使用しています。一つ目のシャドウが二つ目に重なるため、二つ目のサイズは一つ目の倍にする必要があります。ポイントとなるのは、ぼやけを無くし完全に不透明な色を使用することです。その結果、borderのようにストレートなエッジをシャドウに与えます。
当然、これはbox-shadowをサポートするブラウザに限定されます。
Method 4: div要素の追加
divを内包するdiv要素を追加し、二重のborderのエフェクトを与えます。内側のdiv要素には単に背景色（#222）を指定し、追加した外側のdiv要素のborderとbackgroundで二重のborderを設定します。
CSS
.four {
border: solid 6px #888;
background: #fff;
width: 312px;
min-height: 312px;
}
.four div {
width: 300px;
min-height: 300px;
background: #222;
margin: 6px auto;
overflow: hidden;
}
この方法のポイントは、内側のdiv要素に「margin: 6px auto;」を指定し、外側のdiv要素のサイズを12px大きいものにすることです。
Method 5: border-image
box-shadowと同様にもう一つモダンブラウザ用に、CSS3のborder-imageを使う方法があります。
CSS
.five {
border-width: 12px;
-webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
-moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
border-image: url(multiple-borders.gif) 12 12 12 12 repeat; /* for Opera */
}
使用する画像は、下記のように小さなものです。
sponsors
