見出し画像

【ゼロから創るWEBサイト】#016 トップページに画像配置

WEB学習の記録

トップページに画像配置

イメージの緑の丸画像を中央に配置。
WEB STUDYの文字をｈ1で配置。

<!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>
			<h1>WEB<br>STUDY</h1>
			<div class="top_image">
				<img src="images/circle.png" alt="">
			</div>
		</section>
		<!-- /メイン -->
		<!-- フッター -->
		<footer class="footer">
			<p class="copyright">All content copyright WEB SUTUDY 2022 ©</p>
		</footer>
		<!-- /フッター -->
	</div>	
</body>
</html>
@charset "UTF-8";
/** {
	outline: 1px dotted #4169e1;
}*/
* {
	box-sizing: border-box;
}
.wrapper {
	max-width: 1600px;
	margin: 0 auto;			/* 中央に配置 */
}


/* ナビゲーション */
header {
	margin-top: 80px;
	margin-bottom: 80px;		/* 上部のマージン */
}
.nav li {
	display: inline;
	list-style-type: none;
}
.nav {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.nav li a {
	display: inline-block;	
	width: 25%;		
	text-align: center;		/* テキストを中央に */
	font-size: 1.3rem;		/* フォントサイズ */
	color: #000000;			/* 文字色 黒 */
	text-decoration: none;		/* 下線を消す */
	font-family: Arial, sans-serif;	/* フォント種類 */
	padding:20px 0 20px 0;		/* 上下パディング */
}
/* ナビゲーションホバー時 */
.nav li a:hover {			
	color: #888888;
}
h1 {
	text-align: center;		/* テキストを中央に */
	margin-bottom: 50px;		/* 下マージン */
	color: #888888;			/* 文字色 グレー */
	font-size: 3rem;		/* フォントサイズ */
	font-family: Arial, sans-serif;	/* フォント種類 */
	letter-spacing: 0.1em;		/* フォント間隔 */
}
.top_image {
	text-align: center;		/* 画像を中央に */
	margin-bottom: 100px;		/* 下マージン */
}
.top_image img {
	width: 200px;			/* 画像縮小 */
}
/* フッター */
.footer {
	background-color: #888888;
	height: 50px;
}
/* フッター_コピーライト */
.copyright {
	text-align: center;		/* テキストを中央に */
	color: #ffffff;			/* 文字色 白 */
	padding-top: 15px;		/* 上パディング */
	margin: 0;			/* マージン */
}

やっぱりデザイン考えてないと、どう作っていこうか迷ってしまう。
時間が無駄になりそうな予感。←そりゃそうだ。
土日にデザインを考えてみようかな。
とにかく、失敗して試行錯誤しながら経験値を積んでいこう。

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