CSSで二重線を引く方法をサンプルコード付きで解説！

サイト制作で強調する際など、上記のような二重線を用いることがあると思います。

HTML/CSSで二重線を実装する方法は３種類ありますが、それぞれ特徴が違います。それぞれサンプルコード付きで解説します。ぜひその違いを押さえて、適切な実装方法がとれるようしましょう。

これがもっともシンプルな方法です。borderプロパティの値に対してdoubleを与えます。そうすることで簡単に二重線を実装できます。ここで注意点ですがborderプロパティで二重線にするためには線の太さが3px以上である必要があります。

以下サンプルコードで確認してください。

二重線を簡単に実装できるborderプロパティですが、色違いや太さがそれぞれ違う二重線など複雑な実装は行えません。ですので、シンプルな二重線に適している方法です。

次から解説する方法は、この問題を解決することができます。

次に内側にborderプロパティ、外側にoutlineプロパティを用いる方法を解説します。この方法ではborderプロパティとoutlineプロパティそれぞれを調節できるため細かい表現が可能です。

また、プログラム内にプロパティについての説明を付けていますので合わせて確認ください。

上記のように実装できました。しかしoutlineプロパティを用いる際も注意が必要です。この方法はIEでは実装できません。 outline-offsetプロパティがIE非対応だからです。注意してください。

最後に疑似要素を用いる方法を解説します。borderプロパティの内側に疑似要素の::beforeと::afterを用いて実装します。

この方法でも色違いや太さ違いの線を実装できます。この方法は少しコードが長くなりますが、細かい表現をできますし、非対応のブラウザはありません。では、サンプルコードを確認してください。

また、疑似要素を用いて::beforeと::afterの両方とborderプロパティを用いると3重線を実装することができます。そのほかにもtopやleftプロパティの値を変更することで様々デザインを実装できます。

以下のサンプルコードで確認してください。

以上３つの方法の長所、短所をそれぞれ解説しました。サイトに適切に実装するために、是非それぞれの方法を理解し、使いこなせるようにしてください！