複数のボーダーを引く方法【CSS】
公開日：こんにちは、ゆきまるです。
デザイナーさんからデザインカンプをもらった時に、ボーダーが2本以上あって困ったことはありませんか？
画像にしてしまって問題ない時はいいですが、なんとかCSSで実装したいときもありますよね？
一応、border-typeをdoubleとすれば2本線になりますが、色や太さなどがこれで対処できない場合の解決策の一つを今回紹介していきます。
borderの仕様
borderに指定できるのは、
- border-width
- border-type
- border-color
の3つです。border-typeにdoubleを指定して、無機質な2本線にするのが精一杯です。
ちなみにborder-typeにdoubleを指定しても、border-widthを3以上にしないとちゃんと2本にならないです。
2以下の時はくっついて1本に、2～3の小数で指定した場合は、環境によってまちまちです。
box-shadowでボーダーを作る
ということでbox-shadowでボーダーを作っていきましょう。
box-shadowといえば影を作るときに使うプロパティですね。
影を作る用のプロパティですが、ぼかしをかけなければボーダーの見た目を作ることも可能です。
borderとbox-shadowで2色の線
とりあえず、デモをみましょう。
See the Pen BayKNmo by ゆきまる (@yukimaru-org) on CodePen.
box-shadowのおさらい
box-shadowに指定できるもの
box-shadowには以下のものを指定できます。
- 水平方向のオフセット（ずらす距離）
- 垂直方向のオフセット（ずらす距離）
- ぼかし距離（ある点の色をまき散らす範囲）
- 広がり距離
- 影の色
- inset（内側にかけるとき）
box-shadowはそのままだとボックスと同じ大きさになります。
何も見えません。
水平オフセットに正の値を指定すると、右からちょっと見えます。
ぼかし半径に値を指定すると、ボケて広がった分が周囲からはみ出るのが見えます。
広がり距離に値を指定すると、その分だけボックスより大きな影になります。
もちろん複合して指定することもできます。
box-shadowをボーダーっぽくするためには
box-shadowでボーダーを作る際は、水平オフセット、垂直オフセット、ぼかし距離の3つは0にしておきます。これらはいりません。
使うのは広がり半径です。
borderが一本ある状態で、広がり半径5px、色redのbox-shadowを引くとこうなります。
See the Pen bGNpdPq by ゆきまる (@yukimaru-org) on CodePen.
これだと、まだ間が埋まっていますね。
box-shadowはボックスの真裏にある四角い影を広げているだけなので、こうなってしまいます。
しかし、box-shadowはコンマ区切りで複数していできるので、間の部分を背景に合わせた色で埋めましょう。
今回は、広がり距離4px、色#fffのbox-shadowを追加します。
その際に、注意点ですが、box-shadowは手前に指定したものほど、手前に描写されます。
See the Pen BayKNmo by ゆきまる (@yukimaru-org) on CodePen.
上記のように2色のボーダーを引くことができました。
応用すればいろんなボーダーを引くことができるでしょう。
box-shadowでボーダーを引く際の注意点
このように見た目に関しては、かなり不自由なくボーダーを補うことができますがひとつ注意点があります。
box-shadowはborderと違いレイアウトの計算に影響を与えません。
つまり、左右に要素があって、box-shadowでボーダーを引いても、その分だけ離れてくれるようなことはないということです。
以下のような問題が起きえます。
- 隣の要素にボーダーが意図せず重なってしまう。
- 画面の端で使うと、はみでてしまい、横スクロールが発生してします。
まあ、こういった特性の違いはありますが、正しく理解した上でコーディングに生かしましょう。
