CSSで2つの要素の真ん中に縦線を引く方法を解説!

CSSで2つの要素の中央に縦線を引く方法を解説します。余白が入りborderだと上手く中央に線が引けませんが、今回解説するやり方であれば余白込で真ん中に縦線が引けます。

コンテンツ [表示]

  1. 1CSSで2つの要素の真ん中に縦線を引きたい
  2. 2CSSで2つの要素の真ん中に縦線を引く方法
  3. 2.1一方の要素の::before/::afterの疑似要素を使う
  4. 2.2第三の要素を用意し間に挿入する

CSSで2つの要素の真ん中に縦線を引きたい

HTMLで2カラムの状態、つまり左と右側にブロックが分かれている状態で、その区切りとして中央に縦線を引きたい場合があります。

線といえばborderプロパティを真っ先に思い浮かべると思いますが、余白を上手く調整したい時にborderで線を引くと要素の間に対しては上手く引けない場合があります。

今回は下記のような状態を目指します。

2つの要素の間の区切り線

今回はCSSで2つの要素の真ん中に縦線を引く方法を解説していきます。

CSSで2つの要素の真ん中に縦線を引く方法

それでは順番に2つの要素の真ん中に縦線を引く方法を解説していきます。

一方の要素の::before/::afterの疑似要素を使う

::afterの疑似要素を使って縦線を引いたサンプルコードは下記となります。

index.cssの中の枠線部分は.A:afterの箇所です。positionrelativeを設定した.Aに対して、absoluteleft: 100%としています。つまり.Aの右端に位置します。

更にwidth(ここでは線の太さ)を4pxとしてheight100%とすることで枠線の様に見せています。

第三の要素を用意し間に挿入する

次に第三の要素(ここでは.lineとする)を用意し、間に挿入するやり方です。

.linedivタグを挿入することでAとBの間に要素が一つ入り、そのスタイルを縦線にすることでAとBの間の区切り線のように見せています。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次