質問編集履歴

1

html,cssのコードを追記しました。

2017/01/05 08:21

投稿

_ryu-akashi.49
_ryu-akashi.49

スコア10

test CHANGED
File without changes
test CHANGED
@@ -10,12 +10,70 @@
10
10
 
11
11
  ```html
12
12
 
13
- <section id="top">…</section>
13
+ <section id="top">
14
+
15
+ <header>
16
+
17
+ <ul>
18
+
19
+ <li id="logo "><a href="” target="_blank"><img src="image/logo_b.png"></a></li>
20
+
21
+ <li class="jump"><a href="#question" id="q">お問合わせ</a></li>
22
+
23
+ <li class="jump"><a href="#application">募集要項</a></li>
24
+
25
+ <li class="jump"><a href="#entryPeriod">プレエントリー期間</a></li>
26
+
27
+ <li class="jump"><a href="#about">概要</a></li>
28
+
29
+ </ul>
30
+
31
+ </header>
32
+
33
+ <div id="top_msg">
34
+
35
+ <p id="subtitle">ああああああああああ</p>
36
+
37
+ <h1>ああああああああ<br>あああああああああ</h1>
38
+
39
+ <h4>サブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピー</h4>
40
+
41
+ <div class="triangle"></div> <!--スクロールピクトグラム-->
42
+
43
+ </div>
44
+
45
+ </section>
46
+
47
+
14
48
 
15
49
  ```
16
50
 
17
51
  ```css
18
52
 
53
+ body{
54
+
55
+ font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",helvetica,"Open Sans", sans-serif; font-weight: 500;
56
+
57
+ margin: 0;
58
+
59
+ box-sizing: border-box;
60
+
61
+ width: 100vw;
62
+
63
+ }
64
+
65
+
66
+
67
+ section{
68
+
69
+ text-align: center;
70
+
71
+ position: relative;
72
+
73
+ }
74
+
75
+
76
+
19
77
  #top{
20
78
 
21
79
  height: 100vh;
@@ -32,6 +90,108 @@
32
90
 
33
91
  }
34
92
 
93
+ header{
94
+
95
+ top: 0;
96
+
97
+ padding: 0 2%;
98
+
99
+ background-color: rgba(255,255,255,1.0);
100
+
101
+ }
102
+
103
+ header li{
104
+
105
+ list-style: none;
106
+
107
+ display: inline-block;
108
+
109
+ float: right;
110
+
111
+ margin-left: 45px;
112
+
113
+ }
114
+
115
+ header ul{
116
+
117
+ margin-top: 0;
118
+
119
+ padding: 25px 0;
120
+
121
+ height: 1.3em;
122
+
123
+ /*border-bottom: 1px solid #fff;*/
124
+
125
+ }
126
+
127
+ header a{
128
+
129
+ text-decoration: none;
130
+
131
+ color: #000;
132
+
133
+ }
134
+
135
+ #logo{
136
+
137
+ float: left;
138
+
139
+ margin-left: 0;
140
+
141
+ }
142
+
143
+ #logo img{
144
+
145
+ width: 130px;
146
+
147
+ }
148
+
149
+ #top_msg{
150
+
151
+ padding: 0 250px;
152
+
153
+ margin-top: 90px;
154
+
155
+ text-align: left;
156
+
157
+ color: white;
158
+
159
+ }
160
+
161
+ #subtitle{
162
+
163
+ margin-bottom: 20px;
164
+
165
+ }
166
+
167
+ #top_msg h1{
168
+
169
+ font-size: 50px;
170
+
171
+ letter-spacing: 5.5px;
172
+
173
+ text-shadow: 0.5px 0.5px 7px #999999;
174
+
175
+ }
176
+
177
+ .triangle{
178
+
179
+ margin-top: 100px;
180
+
181
+ margin: 60px auto;
182
+
183
+ width: 0;
184
+
185
+ height: 0;
186
+
187
+ border: 20px solid transparent;
188
+
189
+ border-top: 20px solid #fff;
190
+
191
+ }
192
+
193
+
194
+
35
195
  ```
36
196
 
37
197