2023.01.25最終更新日：2023.09.17

片方だけコンテンツ幅（インナー）をはみ出すborder-bottomの作り方

こんにちは。五平餅くんです。

少し特殊な例かもしれませんが、こんな感じの片方だけborder-bottomがコンテンツ幅（インナー）をはみ出す見出しデザインはどのように作れば良いでしょう。

見出しの青い線がコンテンツ幅（インナー）を突き出ている — 見出しの青い線がコンテンツ幅（インナー）をはみ出している

今回の条件として、青い線は常に画面の左端にくっついているようにします。

私は先日、ある案件でこちらのデザインを実装できました。

なので備忘録に残しておきたいと思います。

少しマニアックな上に意外と複雑でした。

使うことはほとんどないかと思いますが、興味があればぜひご覧ください！

1 片方だけコンテンツ幅（インナー）をはみ出すborderの最終的なコード
- 1.1 解説

片方だけコンテンツ幅（インナー）をはみ出すborderの最終的なコード

ではまずは最終的なコードとデモページをお見せします。

<div class="inner bg-gray p10">
  <h1>ここがインナー領域です。</h1>
</div>

<!-- ここから重要！ -->
<div class="border-inner mt30">
  <div class="inner">
    <h2 class="border-inner__border-delete"><span class="border-inner__border-base">診療時間</span></h2>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

.mt30 {
  margin-top: 30px;
}

.p10 {
  padding: 10px;
}

.bg-gray {
  background: #ccc;
}

/* ここから重要！ */
.border-inner {
  position: relative;
}
.border-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;/* .border-inner__border-delete::after のz-index値よりも小さくする */
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, blue 0%, blue 50%, transparent 50%, transparent 100%);
}

.border-inner__border-delete {
  position: relative;
}
.border-inner__border-delete::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;/* .border-inner__border-base のz-index値よりも小さくする */
  width: 100%;
  height: 2px;
  background: white;
}

.border-inner__border-base {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
  border-bottom: 2px solid blue;
}

デモはこちら

解説

HTMLは４段構成になっております。

すなわち、このようになっています。

①画面の半分まで青線、もう半分は透明の線がついているブロック
②コンテンツ幅（インナー）※ページ内共通で使用するcssです。
③コンテンツ幅（インナー）内で①の線を消すためのブロック
④テキストの下に線が引いてあるブロック

段階ごとに見ていきます。

①画面の半分まで青線、もう半分は透明の線がついているブロック

この段階では、画面の左半分が青い線、右半分が透明の線をおいています。

線は::afterで作り、position: absoluteで表示させています。

また、z-indexを指定して、その値は次に出てくる.border-inner__border-delete::afterのz-index値よりも小さくしておきます。

z-indexは、重なっている要素に対してどれを一番上に乗せるかを決めるプロパティです。値が大きいほど上に来るようになっております。なお、positionのstatic以外が指定されている要素にしかz-indexは指定できません。

z-indexについて、詳しくはこちらの記事をご覧ください。
z-indexの使い方：CSSで重なり順を指定する

先程のコードから抜粋したものがこちらになります。

<div class="border-inner mt30">
  ・・・
</div>

.border-inner {
  position: relative;
}
.border-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;/* .border-inner__border-delete::after のz-index値よりも小さくする */
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, blue 0%, blue 50%, transparent 50%, transparent 100%);
}

画面の左半分が青い線、右半分が透明の線をposition: absoluteで表示

②コンテンツ幅（インナー）

コンテンツ幅（インナー）は「ここがインナー領域です。」の灰色ボックスの幅になります。

灰色ボックスにも同じinnerというclassが付与されています。

もう一度HTMLを全て見てみると、innerというclassが2回出てきます。

<div class="inner bg-gray p10">
  <h1>ここがインナー領域です。</h1>
</div>

<!-- ここから重要！ -->
<div class="border-inner mt30">
  <div class="inner">
    ・・・
  </div>
</div>

③コンテンツ幅（インナー）内で①の線を消すためのブロック

この段階では、コンテンツ幅（インナー）内のみ①の線を消すために背景色と同じ色の線を置いていきます。

今回、見出しの背景色は白なので、白の線を置きます。

ここでも線は::afterで作り、position: absoluteで表示させています。

また、今回の場合もz-indexを指定して、その値は次に出てくる.border-inner__border-baseのz-index値よりも小さくしておきます。

先程のコードから抜粋したものがこちらになります。

<div class="border-inner mt30">
  <div class="inner">
    <h2 class="border-inner__border-delete">・・・</h2>
  </div>
</div>

.border-inner__border-delete {
  position: relative;
}
.border-inner__border-delete::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;/* .border-inner__border-base のz-index値よりも小さくする */
  width: 100%;
  height: 2px;
  background: white;
}

コンテンツ幅（インナー）に背景と同色の線を作る — コンテンツ幅（インナー）に背景と同色（今回の場合は白）の線を作る

④テキストの下に線が引いてあるブロック

テキスト部分にborder-bottomを指定します。

その際、display: inline-blockを一緒に指定します。

そうすることで、例えばborder-bottomを指定ている要素が＜div＞などのブロック要素のタグでも幅が親要素いっぱいに広がることがなくなります。

また、例えばborder-bottomを指定している要素が＜span＞などのインライン要素のタグでも、paddingなどが使えるようになります。

先程のコードから抜粋したものがこちらになります。

<div class="border-inner mt30">
  <div class="inner">
    <h2 class="border-inner__border-delete"><span class="border-inner__border-base">診療時間</span></h2>
  </div>
</div>

.border-inner__border-base {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
  border-bottom: 2px solid blue;
}

これで完成！意外と構成が複雑ですが、どの画面でもコンテンツ幅（インナー）は変わらず、線ははみ出しています。

今回は以上になります！

最後まで読んでいただきありがとうございました！

html&css