今回は【CSS】要素の中央に縦線を引く方法、疑似要素で指定しよう!!
の解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
CSS
について学びたい方へ - 今回は要素の中央に縦線(疑似要素)について解説しております。
今回は、要素と要素の中央に縦線を引くについての解説です。
下記の画像のようなデザインを見かけることありませんか。
疑似要素::before/::after
を指定すれば簡単に縦線を引くことができます。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
要素の中央に縦線を引く方法
今回は、疑似要素::before/::after
を使い、指定します。
「PART01」では、最初に2つのボックス(要素)を用意し、display: flex
を指定し、横並びにしましょう。
書き方は以下のようになります。
<div class="wrap">
<div class="box-a">ボックスA</div>
<div class="box-b">ボックスB</div>
</div>
/*--CSS--*/
.wrap {
display: flex; /*--横並び指定--*/
/*--下記は自由--*/
text-align: center;
color: #fff;
font-weight: bold;
}
.wrap .box-a {
flex-grow: 1; /*--幅を指定--*/
height: 140px;
line-height: 140px;
margin-right: 2em; /*--AとBの余白--*/
background-color: #aeb2ba;
}
.wrap .box-b {
flex-grow: 1; /*--幅を指定--*/
height: 140px;
line-height: 140px;
background-color: #495464;
}
::before/::afterの疑似要素を指定しよう
上記では、各要素(A、B)を横並びに指定しました。
「PART02」では、要素Aに対し、::afterを指定し縦線を指定したいとおもいます。
書き方は以下のようになります。
<div class="wrap">
<div class="box-a">ボックスA</div>
<div class="box-b">ボックスB</div>
</div>
/*--CSS--*/
.wrap {
display: flex; /*--横並び指定--*/
/*--以下省略--*/
}
.wrap .box-a {
flex-grow: 1; /*--幅を指定--*/
position: relative; /*--positionを追加--*/
height: 140px;
line-height: 140px;
margin-right: 2em;
background-color: #aeb2ba;
}
.wrap .box-a::after {
position: absolute; /*--positionを追加--*/
top: 0;
left: 100%;
margin: 0 1rem;
content: "";
width: 1px; /*--縦線の太さ(幅)--*/
height: 100%;
background-color: #333; /*--縦線の色--*/
}
.wrap .box-b {
/*--以下省略--*/
}
「box-a」に対して、position: relative
を指定します。
次に、「::after」に対してposition: absolute
でleft: 100%
を指定します。
left: 100%とは、ボックスAの右端になります。
今回は、ボーダー(border)要素を指定せず、background-color
を指定します。
縦線の太さ(幅)を変更したい際には、width
の数値を変更しましょう。
CSSの完成形
/*--CSS--*/
.wrap {
display: flex;
text-align: center;
color: #fff;
font-weight: bold;
}
.wrap .box-a {
flex-grow: 1;
position: relative;
height: 140px;
line-height: 140px;
margin-right: 2em;
background-color: #aeb2ba;
}
.wrap .box-a::after {
position: absolute;
top: 0;
left: 100%;
margin: 0 1rem;
content: "";
width: 1px;
height: 100%;
background-color: #333;
}
.wrap .box-b {
flex-grow: 1;
height: 140px;
line-height: 140px;
background-color: #495464;
}
3カラムの指定について
<div class="wrap">
<div class="box-a">ボックスA</div>
<div class="box-b">ボックスB</div>
<div class="box-c">ボックスC</div>
</div>
/*--CSS--*/
.wrap {
display: flex;
/*--以下省略--*/
}
.wrap .box-a {
flex-grow: 1;
/*--以下省略--*/
}
.wrap .box-b {
flex-grow: 1;
/*--以下省略--*/
}
.wrap .box-c {
flex-grow: 1;
/*--以下省略--*/
}
.wrap .box-a,
.wrap .box-b{
position: relative;
margin-right: 2em;
}
.wrap .box-a::after,
.wrap .box-b::after{
position: absolute;
top: 0;
left: 100%;
margin: 0 1rem;
content: "";
width: 1px;
height: 100%;
background-color: #333;
}
ポイント!
3カラムも同様に、::after
を指定します。
必ず、position
要素を忘れないように指定しましょう。
まとめ
今回はこれで以上です。
- POINT
- 疑似要素
::before/::after
を指定すれば簡単に縦線を引くことができます。 - position要素を忘れないように指定しましょう。
スポンサーリンク

SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事