ゼロから創るWEBサイト#004 ナビゲーションを横並びにする

WEB学習の記録

2022年9月17日 08:22

ナビゲーションを横並びにする

特にHTMLでは記述はしない。
liに対してCSSで設定する。

display: inline;
インラインボックスに変えることで、横並びになる。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>WEB STUDY / TOP</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<!-- ヘッダー -->
	<header>
		<nav>
			<ul class="nav">
				<li>
					<a href="#">TOP</a>
				</li>
				<li>
					<a href="#">ABOUT</a>
				</li>
				<li>
					<a href="#">HTML</a>
				</li>
				<li>
					<a href="#">CSS</a>
				</li>
			</ul>
		</nav>
	</header>
	<!-- /ヘッダー -->
	<!-- メイン -->
	<section>

	</section>
	<!-- /メイン -->
	<!-- フッター -->
	<footer>All content copyright WEB SUTUDY 2022 ©</footer>
	<!-- /フッター -->
</body>
</html>

@charset "UTF-8";
/** {
	outline: 1px dotted #000;
}*/
.nav {
	list-style-type: none;
}
.nav li {
	display: inline;
}

この記事が気に入ったらサポートをしてみませんか？