今回はメニューなどで使われている、要素と要素を区切る線の作り方です。
こんなやつ↓
では打っていきましょう！
例１ 端にも区切り線があるパターン
上に表示されている画像の文です。
html
<ul>
<li> <span> News </span> お知らせ </li>
<li> <span> Voice </span> 受講生の声 </li>
<li> <span> Price </span> 料金 </li>
<li> <span> Free Trail </span> 無料体験 </li>
</ul>
メニューに使う想定でこんな感じにしました。
続いて、
CSS
li {
width: 12rem;
height: 5rem;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
margin-top: auto;
margin-bottom: auto;
/*↓ここからボーダー*/
border-left: 2px solid #cc5955;
border-right: 2px solid #cc5955;
}
li + li {
border-left: 0;
border-right: 2px solid #cc5955;
}
赤字で記載しているところが両サイドに線をいれるために入れたものです。
（黒字はその他の見栄えの部分の調整です）
そして注目すべきは li + li とある隣接セレクタの箇所。
隣接セレクタ → とある要素の次の要素を指す。
書き方 要素A ＋ 要素B { ・・・}
要素Aと要素Bを「＋」で結ぶことで、要素Aの後の要素Bにのみスタイル適用可能。
今回の例であれば、はじめ li（要素A）の両サイドに線をいれて、
li + li （要素B）は右側にのみ線を入れる、ということ。
例2 両端に線がないパターン
両端に線がないパターンはいかの通り。
li + li {
border-left: 2px solid #cc5955;
}
※ちなみに、scssを使った時の記述は以下のようにしました。
li {
width: 12rem;
height: 5rem;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
margin-top: auto;
margin-bottom: auto;
/*↓ここからボーダー*/
border-left: 2px solid #cc5955;
border-right: 2px solid #cc5955;
+ li {
border-left: 0;
border-right: 2px solid #cc5955;
}
}
以上！！
