最近、ちょっとしたサイトを作ってみようと思いHTML、CSSのコーディングをやっているところです。
自分は今までサーバサイドの開発に携わっていたのでHTML、CSSの知識はなんちゃってな部分が多く理解しているところは歯抜けな状態です。
今回自分でサイトを構築していく中で、HTML、CSS、JSの知識をもっと深めていきたいと思っています。
今回まとめる内容はCSS界隈では本当に初歩的な内容かと思いますが、自分はなるほどなと思ったのでまとめておきます。
HTMLの内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Good Gears</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<!-- ヘッダー ここから -->
<div id="header">
</div>
<!-- ヘッダー ここまで-->
<p>HTML5で作成しました！</p>
<img src="./img/test.png"><br>
</body>
</html>
divタグでヘッダーの要素を追加しそこにデザインを適用させます。
CSSの内容
ファイル名style.css
@charset "utf-8";
body {
margin: 0;
}
#header {
position: fixed; /* スクロール固定 */
width: 100%;
height: 70px;
background-color: #000;
margin: 0;
}
bodyとheaderにmagin:0を指定しているのに何故かヘッダーの上部に余白が表示されてしまう。
解決方法
* {
margin: 0px;
padding: 0px;
}
この内容をCSSに記述したらヘッダーの余白が削除された。
しかし、納得がいかないmagin:0指定してるのに。
どうやら別の原因がありそう。
もう少し調べてみよう。
