どうもチャーさんです。
あなたは、cssでメニューに区切り線を、
表示させたいと思っていませんか？
この記事では、以下の画像のような、
区切り線を表示させる方法を書いています。
↓
なので、あなたがcssでメニューに、
区切り線を表示させたい場合、
このまま読み進めてみてください。
スポンサードサーチ
cssでメニューに区切り線を表示させるコード
とゆうことでまず結論からいきまして、
コードから紹介しますと、以下の記述を書けば、
区切り線つきのメニューが表示されます。
HTML
<body>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</body>
CSS
li {
display:inline;
}
li::after {
content:”/”;
margin:10px;
}
こちらを記述すると、
以下のような画像が表示されます。
区切り線を表示させる記述の説明
では補足説明に入ります。
liタグはわかると思うので、
li::after {
content:”/”;
の記述のとこを説明しますと、
この::afterというのは、
擬似要素というものです。
擬似要素を使うと、
HTMLで書いたように文字や、
記号を表示させることができます。
で、この機能を使うと、
cssでも文字や記号を表示できます。
これを使って、メニューの間に、
区切り線を表示させてるわけです。
で、区切り線を表示させるには、
このcontent:の””ダブルクオーテーションの、
間に書いた記号が表示されます。
li::after {
content:”/”;
なので、このcontentの後にスラッシュではなく、
|を書けば|が表示されますし、
*と書けば*が表示されるわけです。
で、擬似要素で、区切り線を表示させても、
間が詰まってるので、
左右にmarginを入れてあげると綺麗になります。
li::after {
content:”/”;
margin:10px;
}
というわけで、
CSSの記述として、
li {
display:inline;
}
li::after {
content:”/”;
margin:10px;
}
と書いてやればメニューの間に、
区切り線を表示できます。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssでメニューに区切り線を表示したい場合、
HTML
<body>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</body>
CSS
li {
display:inline;
}
li::after {
content:”/”;
margin:10px;
}
上記を、
bodyの中と、cssの中に書けば、
表示できますよ。
それでは、読んでもらってありがとうございました。
チャーさん
