見出し画像

ゼロから創るWEBサイト#003 ナビゲーションのリストマークを表示しない

WEB学習の記録

ナビゲーションのリストマークを表示しない方法

  • <ul>もしくは<ol>にlist-style: none;を指定するとリスト全体のリストマークを消せる。

  • <li>に指定するとその指定したリスト項目だけ消せる。

<!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";

.nav {
	list-style-type: none;
}

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