カミュプリィのホームページの上部にある『ホーム』『ウェブ』『維持』『ついて』の４つのタブを等間隔で並べています。
HTML
<div class="menu">
<div class="current"><a href="./index.html">ホーム</a></div>
<div><a href="./site-create/index.html">ウェブ</a></div>
<div><a href="./system-keep/index.html">維持</a></div>
<div><a href="./aboutus/index.html">ついて</a></div>
</div>CSS
.menu {
display: flex;
justify-content: space-between;
}
.menu div {
list-style: none;
width: 25%;
height: 2rem;
line-height: 2rem;
text-align: center; /* 文字の位置: 中央寄せ */
border: 1px solid white; /* 枠線 */
background-color: #f7b977cc; /* 背景色 */
}
.menu div:hover {
background-color: #f7b97777; /* 背景色 */
}
.menu a {
display: block;
color: black; /* 文字色 */
text-decoration: none;
}
.current a {
border: 2px solid; /* 枠線 */
border-color: black white white black;
background-color: #f7b977ff; /* 背景色 */
}