【CSS/html】flexにborderで枠線や区切り線を付ける方法

• メニュー
• メニュー
• メニュー
• メニュー
• メニュー

「flexで横並びしたんだけど、線はどうやってつけるの？」

「線を付けると重なって太くなるのを解消したい！」

display:flexで横並びした要素にborderで枠線や区切り線を付ける方法を解説します。

flexの基本はこちら↓

外側だけに枠線をつける

親要素にborderを指定しましょう。

• メニュー
• メニュー
• メニュー
• メニュー
• メニュー

<style>
.example{
    display: flex;
    /*コレ*/border: 1px solid #333;
    padding: 0;
}
.example>li{
    width: 20%;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #ebfdfc;
    text-align: center;
}
</style>
<ul class="example">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

線を指定するにはborderを使いましょう。

borderについて詳しくはこちら↓

diaplay:flexを指定した親要素に線を指定すると全体を囲うことができます。

ただし、子要素のwidthを調整して親要素いっぱいになっていることが条件です。

内側に枠線をつける

子要素にborderを指定しましょう。

• メニュー
• メニュー
• メニュー
• メニュー
• メニュー

<style>
.example2{
    display: flex;
    padding: 0;
}
.example2>li{
    /*コレ*/border: 1px solid #333;
    width: 20%;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #ebfdfc;
    text-align: center;
}
</style>
<ul class="example2">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

子要素にborderを指定することでメニュー間の区切りが明確になりました。

しかし、その区切り部分が太くなってしまっています。線が重なり二重になっているためです。

これを解消しましょう。

線の重なりを解消する

子要素の右か左のborderを消して、親要素で蓋をしましょう。

• メニュー
• メニュー
• メニュー
• メニュー
• メニュー

<style>
.example3{
    display: flex;
    padding: 0;
    /*コレ*/border-right: 1px solid #333;
}
.example3>li{
    /*コレ*/border: 1px solid #333;
    /*コレ*/border-right: none;
    width: 20%;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #ebfdfc;
    text-align: center;
}
</style>
<ul class="example3">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

線が重なるのは右の線と左の線がくっついているからです。

ならばどちらか消してやればいいのです。ここでは右の線を消しています。

ただ、すべての子要素から右の線を消すと全体の右に線がない状態になります。

これを塞ぐために親要素の右に線を引きました。

他には最後の子要素の右線は消さない、右線をつける、といった方法もあります。

区切り線をつける

before,afterで線を作り、position:absoluteで位置指定しましょう。

• メニュー
• メニュー
• メニュー
• メニュー
• メニュー

<style>
.example4{
    display: flex;
    padding: 0;
}
.example4>li{
    position: relative;
    width: 20%;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #ebfdfc;
    text-align: center;
}
.example4>li::before{
    content: "";
    display: block;
    height: 10px;
    width: 0;
    border-right: 1px solid #333;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.example4>li:first-of-type::before{
    content: none;
}
</style>
<ul class="example4">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

子要素にborderを指定した場合、その区切り線は子要素の高さと同じになります。

そこまで高さがいらず、装飾程度の線にしたい場合はbefore,afterを使うといいでしょう。

before,afterは各要素に対して指定できる疑似要素です。

装飾するときによく使います。

before,afterで疑似的な線を作り、小さめの区切り線を作ることができます。

positionの基本はこちら↓

【まとめ】flexに枠線をつける方法

• 外側だけに枠線をつけるには親要素にborderを指定しましょう。
• 内側に枠線をつけるには子要素にborderを指定しましょう。
• 線の重なりを解消するには子要素の右か左のborderを消して、親要素で蓋をしましょう。
• 装飾線をつけるにはbefore,afterで線を作り、position:absoluteで位置指定しましょう。

以上、flexにborderで枠線や区切り線を付ける方法でした。