2021/02/16

CSSで二重線を引く方法【現役エンジニアが解説】

PROGRAM

今回は、CSSで二重線を引く方法について、3種類に分け、簡単に解説していきます。

枠

二重線の枠を引くには、borderプロパティを使います。

borderプロパティのスタイルには二重線のdoubleを指定します。

.hoge{
    border:double 10px #000000;
}

上記のコードでは、borderプロパティで要素の周りに二重線の枠を引いています。

下線

二重線の下線では、border-bottomプロパティを使用します。

border-bottomプロパティのスタイルには二重線のdoubleを用います。

.hoge{
    border-bottom:double 10px #000000;
}

上記のコードでは、border-bottomプロパティで要素に対し、二重線の下線を引いています。

打ち消し線

二重線の打ち消し線を引くためには、2つの擬似要素で表現します。

:beforeのborder-topプロパティ、:afterのborder-bottomプロパティで線を引きます。

.hoge{
    display:inline-block;
    position:relative;
}
.hoge:before{
    content:'';
    width:100%;
    height:1px;
    border-top:solid 1px #000000;
    position:absolute;
    left:0;
    top:calc(50% - 2px);
}
.hoge:after{
    content:'';
    width:100%;
    height:1px;
    border-bottom:solid 1px #000000;
    position:absolute;
    left:0;
    bottom:calc(50% - 2px);
}

上記のコードでは、:beforeのborder-topプロパティと:afterのborder-bottomプロパティで、要素に打ち消し線を引いています。

• facebook
• Tweet
• Read Later