@masa_beginnerposted at 2021-04-03

ボックスの内側に枠線を作りたい。

Q&A

Closed

解決したいこと

下記の参考画像のようにボックスの内側に枠線を作りたいです。
内側の枠線から外側のボックスまでの距離が均等なボックスはoutlineとoutline-offsetを利用して作ることができたのですが、
内側の枠線から外側のボックスまでの距離が不均等（上下左右それぞれ違うpx）の枠線を作ることができません。

どなたか、下記画像のような内側の枠線から外側のボックスまでの距離が不均等なボックスの作り方を教えていただけないでしょうか？

該当するソースコード

        <div class="engress-toefl-school">
          <h2 class="engress-toefl-school__heading">Engressは</br><span class="under-line">TOEFLに特化したスクールです</h2>
          <p class="engress-toefl-school__sub-heading">完全オーダーメイドで、１人１人の悩みに合わせた最適な指導で</br>TOEFLの苦手分野を克服します。</p>
        </div>

例）

    .engress-toefl-school{
      width:100%;
      max-width: 900px;
      height: 248px;
      margin-top: 83px;
      margin-bottom: 54px;
      background-color: #FFFFFF;
      outline:5px solid #1B224C;
      outline-offset : -16px;
      &__heading{
        @include b-36;
        line-height: 1.38888;
        padding-top: 32px;
        padding-bottom: 25px;
      }
      &__sub-heading{
        @include m-18;
        line-height: 1.7222;
      }
    }

自分で試したこと

engress-toefl-schoolクラスの外側にdiv要素を１つ追加して、
ボックスを２つ重ねることで目標のボックスは作成できるのですが、
読み込みが遅くなりそうなのと、あまり綺麗な書き方ではないと思い質問させていただきます。

1Answer

@yoshi389111 posted at 2021-04-04

おそらくですが、素直な方法ではそのような枠線は描けないと思います。

一番簡単なのは、おっしゃっているように外側に余計な div を追加する方法です。性能的にも気にするほどの影響はないはずです。ただし装飾のためだけに無駄な div タグを足すのは避けたいところですが。

素直ではない、ちょっとトリッキーな方法でなら、一応は描画可能です。ただし、あとから見てわかりにくく、メンテナンス性も悪い書き方になると思います。

方法は ::after 疑似要素（あるいは ::before 疑似要素）に枠線をつけて、位置とサイズを調整して、狙ったところに配置するという方法です。

具体的なコードは以下のような感じになるかと思います。

    .engress-toefl-school{
      width:100%;
      max-width: 900px;
      height: 248px;
      margin-top: 83px;
      margin-bottom: 54px;
      background-color: #FFFFFF;
-     outline:5px solid #1B224C;
-     outline-offset : -16px;
+     position: relative;
+     &::after{
+       content: "";
+       position: absolute;
+       border: 5px solid #1B224C;
+       top: 11px;
+       left: 16px;
+       width: calc(100% - 16px - 16px);
+       height: calc(100% - 11px - 12px);
+       box-sizing: border-box;
+     }
      &__heading{
        @include b-36;
        line-height: 1.38888;
        padding-top: 32px;
        padding-bottom: 25px;
      }
      &__sub-heading{
        @include m-18;
        line-height: 1.7222;
      }
    }

他にも実現方法はあるだろうと思いますが、とりあえず一例として。

0Like

Comments

@masa_beginner
Questioner
なるほど！
擬似要素を用いて狙った箇所に枠線を作る方法があるのですね！

無事に作成することができました。ありがとうございますm(_ _)m

Are you sure you want to delete the question?