【CSS】borderプロパティを使ってカスマイズ！二重線や三重線の作り方

皆さんこんにちは！

デザインで二重線を使ったものって見出しやボタンでよく見かけますよね。

今回はそんな時に便利なborderプロパティの便利な使い方について解説します！

さらにborderプロパティを使って三重線を再現する方法や

よくある二重線のレイアウトも紹介しています！

また、別記事でborderプロパティを使って破線や点線の作り方も解説しています。

ご興味ある方はそちらもどうぞご覧になってください！

【CSS】破線や点線を自由自在に操ろう！点の間隔を調整するテクニック

点線や破線を利用したウェブデザインはよく見かけるデザインですよね。 今回はCSSを使って点線や破線の作り方を解説していきます！ 特に点と点の間を調節したい方には必見！！ 自分でカスタマイズした点線や破 ...

borderプロパティを使って二重線を作ろう！

borderプロパティを使えば簡単に二重線が出来ちゃいます！！

  border: double 10px pink;

borderプロパティに対してdoubleを指定します。

一本線の時はここがsolidになりますね！

そして線の太さ（10px）と色の指定（pink）を指定すると二重線の枠が出来ます。

See the Pen 二重線 by kanae (@suzukana) on CodePen.

また、borderプロパティの指定方法を

border-bottom: double 10px pink;

こちらにすると下線の二重線になります。

このdoubleは二重線のやり方の中でとても簡単でポピュラーな方法です。

でもこのdoubleにはデメリットがあります。

それはカスタマイズができないこと！

例えば線のどちらか一つだけ色を変えたい！！！

２本、それぞれ別の太さにしたい！！！など、細かな指定はできません。

擬似要素を使って二重線を作ろう！

そんな時はCSSの擬似要素を使って表現してみましょう！

まず、元の要素の方にborderプロパティを使って直線を作ります。

border: solid 10px pink;

そして、擬似要素にもborderプロパティで直線を作り、ずらして配置すると二重線になります。

See the Pen 二重線擬似要素 by kanae (@suzukana) on CodePen.

二重の下線を作る場合も基本的には一緒です。

擬似要素を作ってそこにborderプロパティで直線を作ります。

先ほどのdoubleと少し違うのはborder-bottomを使うのではなくborderで作ります。

そして位置を指定する際に　left: 0;　right: 0;　を指定。

二重線の幅の分だけbottomで指定します。

このように指定すると二重の下線が表現できます。

border: solid 2px #e8439d;
bottom: 5px;
left: 0;
right: 0;

これらのやり方だと、線それぞれに太さや色の指定ができ、

線の間隔も調節でき、自由にカスタマイズが可能になります。

擬似要素を使って三重線を使おう！

二重線でも使った擬似要素を使って三重線も表現してみましょう。

今度は擬似要素の::afterも使っていきます。

::afterにも同じようにborderプロパティで直線を作ります。

border: solid 2px #760442;

top、left、bottom、rightで位置を調節します。

top: -15px;
left: -15px;
bottom: -15px;
right: -15px;

上で解説した::beforeと一緒に表示させることで、三重線が表現できます。

See the Pen 三重線 by kanae (@suzukana) on CodePen.

三重線の下線も同じように::afterを使って作っていきます。

borderプロパティを使って三本目の線を作ります。

border: solid 1px #760440;

そして位置を指定します。

bottomで線の間隔を指定します。

二重線と同じような要領でleft: 0;、right: 0;で指定してください。

そうすると三重線が出来上がります。

よくある二重線を使ったレイアウト

二重線を使った見出しやボタンなど、よくある実装例を紹介します！

点線を使った丸みのある二重線

擬似要素を使って二重線を作ります。

元の要素と擬似要素、両方ともborder-radiusを使うことで丸みを出すことができます。

そして元の要素と擬似要素、どちらか一方を点線で指定します。

 border: 4px dotted #03281a;

See the Pen Untitled by kanae (@suzukana) on CodePen.

ズレた二重線

二重線がズレているデザインです。

top、left、right、bottomで擬似要素の位置を指定し、ズラした二重線を表現させています。

See the Pen ズレた二重線 by kanae (@suzukana) on CodePen.

背景色のあるズレた二重線

上記の方法だと、枠線が重なっているところが見えていましたが、

コチラは見えないようにする方法です。

例えば背景色をつけたい場合などに適しています。

今回の場合は今まで紹介してきた擬似要素ではなく、

box-shadowプロパティを使います。

box-shadowプロパティについては他記事で解説してますので、

詳しく知りたい方はそちらをどうぞ。

【CSS】影の表現をマスターしよう！box-shadowプロパティの使い方と効果的な活用法

今回は、CSSのbox-shadowプロパティについてお話しします。 このプロパティを使うと、HTML要素に影をつけることができ、デザイン性が格段に上がります！ 実は、とても簡単に使いこなせるので、初 ...

backgroundプロパティを使って背景色を指定し、

box-shadowプロパティを使い、下に重なる枠を作り二重線を作ります。

 background: #ee0303;
 box-shadow: 0 0 0 4px #ee0303, 12px 12px 0 0 #fff, 12px 12px 0 4px #eab3bc;

See the Pen ズレた二重線boxshadow by kanae (@suzukana) on CodePen.

まとめ

borderプロパティを使って二重線や三重線を作る方法を解説してきました。

ぜひ実際に手を動かして、さまざまな二重線や三重線を作ってみてください！