【CSS/html】メニューの横に区切り線を付ける方法4種
横並びメニューは区切り線がなくても機能しますが、区切り線があることで誤クリックを減らすことができ、ユーザーにやさしいサイトになります。
メニューの横に区切り線を付ける方法をデザインを変えて4種類紹介します。
目次
【ベース】区切り線なし状態のメニュー
まずは区切り線がない状態のメニューを作りましょう。
<style>
.example{
list-style: none;
display: flex;
padding: 0;
}
.example li{
width: 100%;
display: flex;
margin: 0;
}
.example a{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
padding: 20px;
background: #d9f5ff;
}
</style>
<ul class="example">
<li><a href="#">メニュー1メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>ulにdisplay: flexを指定して横並べにしましょう。
一つ目のメニューをわざと長くしています。メニュー内の文字数が違うことでそれぞれのメニューの長さ・高さが異なります。
liにwidth: 100%を指定しておくとliの数に関わらず一定の長さにできます。
liにdisplay: flexを指定することで子要素のaタグの高さをliと同じにできます。
aタグにdisplay: flexなどを指定することでテキストを上下左右中央寄せにします。
背景色をつけているのはaタグのクリック範囲をわかりやすくするためであり、必須ではありません。
さて、このメニューに区切り線をつけていきましょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【長い区切り線】border-left
メニューの高さと同じ区切り線をつける方法です。
ベースのソースに下記を追加します。
.example li+li{
border-left: 1px solid #999;
}やりかたは単純で各メニューの左か右に線を引くというものです。
「li+li」と指定することで一番目を除外できます。よって2番目以降のliの左に線を引くとメニュー間の区切り線を引くことができます。
【短い区切り線】before
長い区切り線はちょっとカッコ悪いので短くさりげない区切り線をつけてみましょう。
ベースのソースに下記を追加します。
.example li+li{
position: relative;
}
.example li+li::before{
content: "";
display: block;
height: 1em;
border-left: 1px solid #999;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}beforeに高さを指定し「position: absolute」で上下中央寄せします。
【斜めの区切り線】transform: rotate(45deg)
区切り線を斜めにすることでオシャレ感を増すデザインです。
先述した「短い区切り線」のbeforeに下記CSSを追記します。
transform: rotate(45deg);「transform: rotate(○○deg)」は指定した角度だけ要素を傾けるCSSです。○○の部分に数値をいれて調整可能です。
【丸で区切る】beforeにborder-radius: 50%
区切り線を線ではなく、●で区切る方法です。
先述した「短い区切り線」の方法の応用です。ベースのソースに下記を追加します。
.example li+li{
position: relative;
}
.example li+li::before{
content: "";
display: block;
height: 5px;
width: 5px;
background: #999;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}heightとwidthを同じ値にし、「border-radius: 50%」を指定すると●になります。
【まとめ】メニューの横に区切り線を付ける方法
長い区切り線
li+liにborder-left
短い区切り線
li+li::beforeにheightとborderで線を作り、position: absoluteで位置調整
斜めの区切り線
上記beforeに「transform: rotate(45deg)」を追加
丸で区切る
li+li::beforeのheightとwidthを同じ値にし、border-radius: 50%で丸にする
以上、メニューの横に区切り線を付ける方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
