posititionの使い方やクラスの付け方など

質問が複数ございます。
・親要素にabsolute、子要素にrelativeで指定するので合っているのでしょうか？
・クラスの付け方について
・親要素はほとんどdivなのですが大丈夫でしょうか？

発生している問題・エラーメッセージ

HTML
1<!DOCTYPE html>
2<html lang="jp">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
7    <link rel="stylesheet" href="CSS/style.css">
8    <title>lesson2</title>
9  </head>
10
11  <body>
12
13<header>
14  <h1>Musia</h1>
15  <div class="header-menu">
16  <a href="#">Premium</a>
17  <a href="#">Help</a>
18  <a href="#">Register</a>
19  <a href="#">Login</a>
20  </div>
21</header>
22
23
24
25<div class="one">
26<img src="./CSS/img/画像 1.png" alt="画像 1.png">
27<h1>Musiaで音楽を聴こう。</h1>
28<p>配信曲は4000万曲以上</p>
29<p>好きな曲をいつでも、好きな時に</p>
30<a href="#">今すぐ登録</a>
31</div>
32
33
34<div class="two">
35
36</div>
37<div class="three">
38
39</div>
40<div class="four">
41
42</div>
43<div class="five">
44
45</div>
46<div class="six">
47
48</div>
49<div class="seven">
50
51</div>
52
53
54
55<footer>
56
57</footer>
58
59  </body>
60
61</html>

css
1@import url("sanitize.css");
2
3body {
4  width: 100%;
5}
6
7header {
8  width: 100%;
9  height: 150px;
10  position: relative;
11  font-family: Apple LiGothic;
12}
13
14header h1{
15  margin: 0;
16  width: 126px;
17  position: absolute;
18  top: 55px;
19  left: 80px;
20  font-size: 60px;
21  color: #1BD3C5;
22
23}
24
25.header-menu {
26  font-size: 40px;
27  margin-right:20px;
28  position: absolute;
29  top: 55px;
30  right: 20px;
31}
32
33.header-menu a {
34  margin: 0;
35  color: #1BD3C5;
36  margin-right: 60px;
37}
38
39a {
40    text-decoration: none;
41}
42
43.one {
44    width: 100%;
45    height: 1025px;
46    background: linear-gradient(118deg, #00FFD8, #00CEFF);
47    font-family: Apple SD Gothic Neo;
48    position: relative;
49    color: #FFFFFF;
50}
51
52.one img {
53  width: 1367px;
54  height: 100%;
55  position: absolut;
56  top: 0;
57  right: 0;
58  opacity:0.7;
59}
60
61.one h1 {
62  margin: 0;
63  font-size: 130px;
64}
65
66.one p {
67  font-size: 60px;
68}
69
70.one a {
71  font-size: 60px;
72}
73

ご回答のほどよろしくお願いいたします。

azuapricot

2019/05/02 02:09

まずはインデックスからお勉強しましょう。

Lhankor_Mhy

2019/05/02 02:20

『親要素にabsolute、子要素にrelativeで指定するので合っている』とありますが、どういう状態のことを「合っている」と定義するのでしょうか？　JunJuさんが正しい状態だと思っているものをご提示ください。『クラスの付け方について』とありますが、具体的にはどのような問題が発生していますか？「こうなると思って」「このようにコードを書いたが」「結果はこうだった」など、起きている問題について、目的とコードと結果をご提示ください。『親要素はほとんどdivなのですが大丈夫でしょうか？』とありますが、どういう状態のことを「大丈夫」と定義するのでしょうか？　JunJuさんが大丈夫な状態だと思っているものをご提示ください。

JunJu

2019/05/02 02:33

『親要素にabsolute、子要素にrelativeで指定するので合っている』という状態は親要素にabsolute、子要素にrelativeで指定することで、子要素を移動させることができる状態のことです。『クラスの付け方について』ですが、クラスの付け方に決まりなどありましたら教えて欲しいです。『親要素はほとんどdivなのですが大丈夫でしょうか？』の質問に関しては、親要素を決める時にdivでなんとかなってしまうので、他のタグを使わなくても良いのか？ということです。

Lhankor_Mhy

2019/05/02 03:06

『子要素を移動させることができる状態』とのことですが、これはブラウザで表示させて視認すればいいかと思うのですが、なにか問題が起きていますか？

JunJu

2019/05/02 03:20

思っている位置にいかないのですが、解決することができました！！