CSSで複数の枠線(border)を引く方法(太さや色を個別指定可能)

今回はCSSで複数の枠線(border)を引く方法をまとめます。

「border-style: double」の話ではなくて、この↓ように

それぞれのボーダーの太さや色を自由に設定しつつ、二重、三重と囲う方法です。 DIVを何重にも囲えば簡単にできますがどうにもエレファント。

上のサンプルはPタグ1個で実現しています。

古い考えかもですが、デザインのために無駄なdivやspanを増やすのはナンセンスです。

これまでは「before」「after」を利用して3本まで引くことはできていたんですが、今回見つけてきた方法だと無制限に何本でもボーダーを追加できます。

「before」を使うよりコードが非常にシンプルなのも素敵。今までけっこう苦労してきたので、割と真面目に感動すら覚えるアイデアでした。

参考にしたのはSPYWEBさんです。僕が自分用にまとめ直す価値が1ミリもないほど分かりやすく解説されているので、検索から来た人はSPYWEBさんの方を見た方がいいです。

著者さんの似顔絵が僕に似てますね。

このページの目次

1 枠線を複数引くコード
2 複数の枠線の実装サンプル

枠線を複数引くコード

上で書いた通り、HTML側はタグ1個置くだけなので省略して、CSSはこんな↓感じになります。


box-shadow: 0 0 0 2px #ffa500,
            0 0 0 4px #ffff00,
            0 0 0 6px #008000,
            0 0 0 8px #00ffff,
            0 0 0 10px #0000ff,
            0 0 0 12px #800080;

このコードで先ほどのレインボーの枠線↓になります。

キモは「box-shadow」がカンマ連結で複数設定できるところで、やろうと思えば70色でも700色でも設置可能。

「box-shadow」はドロップシャドウ目的以外で使ったことがなかったので、改めてMDNで調べ直してみると、

最低限必要なのは数値2つと色設定で、数値は横方向と縦方向のズレ、色は影の色
3つ目の数値が設定されていた場合、ぼかしの量として解釈
4つ目の数値が設定されていた場合、元のボックスからの拡大する量として解釈
「inset」を設定すると影を内側に表示

今回の例では縦横のズレを0px、ぼかしの量も0にして、拡大と色だけが設定されています。

拡大の量の設定がポイントで、2本目以降の枠線の太さはひとつ前の枠線の拡大量との差になります。例えば、5本目の枠線を5pxにしたくて、4本目の拡大量が8pxだった場合は、5本目の拡大量を5＋8＝13pxに設定。

1回感じを掴むと理解しやすいのですが、言葉で説明されても伝わりにくいと思うので、ぜひSPYWEBさんの図解を見てください。とても理解しやすい図解があります。

複数の枠線の実装サンプル

インサガECというブラウザゲーのサイトでいくつかのパターンを実装しました。

インサガECはこんな↓感じで、

再現しようとすると複数の枠線を使いたくなるUIデザインがめちゃくちゃ多いです。

こんなのとか

めっちゃお手軽に実装できたので、マジ感謝。

あとは、最近FFのピクセルリマスターが出ましたが、

こんなFFっぽいデザインも

ちょちょいのちょい。