teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

すみません。コードが画像では途切れている箇所があり、問題の発見が困難のため、コード本文をコピペで追記しました。

2020/03/06 16:50

投稿

Uga917
Uga917

スコア6

title CHANGED
File without changes
body CHANGED
@@ -4,4 +4,104 @@
4
4
 
5
5
  ![HTMLの記述](ce4fdae8d2990ab45cec044f06c69489.png)
6
6
 
7
- ![CSSの記述](4657ff176f7b53721852d29d47a9bc68.png)
7
+ ![CSSの記述](4657ff176f7b53721852d29d47a9bc68.png)
8
+
9
+ 以下、コード本文のコピペ
10
+ HTML
11
+ <!DOCTYPE html>
12
+ <html>
13
+ <head>
14
+ <title>案件テスト</title>
15
+ <link rel="stylesheet" type="text/css" href="チェックテスト.css">
16
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
17
+ </head>
18
+ <body>
19
+
20
+ <div class="site-header">
21
+ <p class="ryoukin">
22
+ 予想月収 ? <span class="yen">¥3億</span>
23
+ </p>
24
+ <button type="button" value="はじめる" class="button">
25
+ はじめる
26
+ </button>
27
+ <img class="button" src="https://images-na.ssl-images-amazon.com/images/I/31SqyQ7PphL.jpg">
28
+ </div>
29
+
30
+ <div class="haikei">
31
+
32
+ <div class="">
33
+
34
+ </div>
35
+
36
+ </div>
37
+
38
+ <br><br><br><br><br>
39
+ <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
40
+
41
+ </body>
42
+ </html>
43
+
44
+ CSS
45
+ .site-header{
46
+ position: fixed;
47
+ top: 0px;
48
+ left: 0px;
49
+ height: 80px;
50
+ width: 100%;
51
+ background: green;
52
+
53
+
54
+ }
55
+
56
+ .button{
57
+ height: 40px;
58
+ width: 40px;
59
+ position: absolute;
60
+ top: 20px;
61
+ left: 20px;
62
+ background-color: red;
63
+
64
+
65
+
66
+
67
+ }
68
+
69
+ .haikei{
70
+ background-image: url(https://eikaiwa.dmm.com/blog/wp-content/uploads/2016/05/20160317182055.jpg);
71
+
72
+
73
+
74
+
75
+
76
+ }
77
+
78
+ p.ryoukin{
79
+ text-align: right;
80
+ position: absolute;
81
+ top: 17px;
82
+ right: 170px;
83
+ color: #C0C0C0;
84
+ font-size: 15px;
85
+
86
+
87
+
88
+
89
+ }
90
+ .yen{
91
+ font-size: 30px;
92
+
93
+ }
94
+
95
+ button.button{
96
+ margin: 0 0 0 auto;
97
+ top:25px;
98
+ right: 50px;
99
+ height: 30px;
100
+ width: 100px;
101
+ color: white;
102
+
103
+
104
+
105
+
106
+
107
+ }