見出し画像

ゼロから創るWEBサイト#006 ページの真ん中に表示する

WEB学習の記録

ページの真ん中に表示する

CSSで.wrapper { margin: 0 auto; }を指定する。

@charset "UTF-8";
.wrapper {
	max-width: 1600px;
	margin: 0 auto;
}
.nav {
	list-style-type: none;
}
.nav li {
	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>
	<div class="wrapper">
		<!-- ヘッダー -->
		<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>
		<!-- /フッター -->
	</div>	
</body>
</html>

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