カミュプリィのホームページの上部にある『ホーム』『ウェブ』『維持』『ついて』の４つのタブを等間隔で並べています。

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; /* 背景色 */

}