「HTML・CSS」太さの違う二重線の作り方

CSS

こんにちは、ゆうごろうです。

コーディングをしているときに、普通のborderで一本線じゃなくて二重線で作りたい時ってありますよね。（唐突）

実際、デザインによっては多いと思うんです。

今回は、私なりの実装方法でコーディングした二重線を解説していければなと思います。

border:doubleじゃだめなの？

borderプロパティにdoubleという値があるのはご存知でしょうか？

よく単線でsolidという値を書いていると思いますが、そこの値をdoubleにすると二重線を記載することができるのです。

h2{
  border:1px double #fff;
}
クリン
クリン

これでいいじゃないですか！一行で済むなんて楽チンですね！

しかし、この方法だと片方だけ線の太さを変えることはできないんです。実は自力で作成しないといけないところなんですね。

標準プロパティだとこれが限界なんだよね。
なので自分でカスタムする必要があるんだ。

ゆうごろう
ゆうごろう

太さの違う二重線実装方法

では、私なりにカスタムした二重線の書き方を記します。

実際書いてみるとこんな感じになります。

<div class="page-head">
  <div class="page-head__image">
    <img src="./img/menu-page/img_firstview_menu_sp.png" alt="メニュー">
  </div>
  <div class="page-head__text">
    <h1 class="page-head__title">
      <span class="page-head__text__ja">コンセプト</span>
      <span class="page-head__text__en">concept</span>
    </h1>
  </div>
</div>
.page-head {
  position: relative;
}

/*背景の画像*/
.page-head__image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.page-head__text {
  margin-inline: auto;
  padding: 3%;
}

.page-head__title {
  position: relative;
  width: 100%;
  padding-block: 80px;
  border: 1px solid #ffffff;
  color: #ffffff;

  &::before {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    border: 2px solid #ffffff;
  }
}

.page-head__text__ja {
  font-family: $font-Amatic-Sc;
  font-size: 72px;
  letter-spacing: 14.4px;
}

.page-head__text__en {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.28px;
}

一番重要なプロパティがこの部分です。

.page-head__title {
  position: relative;
  width: 100%;
  padding-block: 80px;
  border: 1px solid #ffffff;
  color: #ffffff;

  &::before {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    border: 2px solid #ffffff;
  }
}
  1. 二重線で囲いたい要素（page-head__title）に枠線をborderプロパティで引く。（内側の線）
  2. position:relative;を設定しておく。
  3. 擬似要素にposition:absolute;を設定。
  4. top、bottom、left、rightにそれぞれ同じ値を設定する。（この時に設定した値が線の間隔となる）
  5. 太さを変えた枠線をborderプロパティで引く。（外側の線）

こうすることにより、あっという間に太さの異なる二重線を記載できます。擬似要素恐るべし。

ちなみにwidth:100%;はレスポンシブ対応で指定したプロパティです。
これを設定しておくと画面幅に応じて二重線の要素が広がっていきます。

まとめ

今回は太さのことなる二重線の実装方法というテーマでお話させていただきました。

デザインにもよりますが、このような実装パターンは多いのではないでしょうか。

今回は見出しのようなブロックで実装しましたが、テーブルやカードのようなブロック要素でも応用できると思います。

ぜひ活用してみてくださいね。