質問編集履歴

3

HTML全文

2020/01/07 01:41

投稿

taktak0201
taktak0201

スコア6

test CHANGED
File without changes
test CHANGED
@@ -6,34 +6,176 @@
6
6
 
7
7
  ```
8
8
 
9
+ <!doctype html>
10
+
9
- <section id="list">
11
+ <html lang="ja">
12
+
13
+
14
+
15
+ <head>
16
+
17
+ <!-- Required meta tags -->
18
+
19
+ <meta charset="utf-8">
20
+
21
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
22
+
23
+ <link rel="stylesheet" href="css/style.css">
24
+
25
+ <!-- Bootstrap CSS -->
26
+
27
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
28
+
29
+ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
30
+
31
+
32
+
33
+ <title>Hello, world!</title>
34
+
35
+ </head>
36
+
37
+
38
+
39
+ <body>
40
+
41
+
42
+
43
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
10
44
 
11
45
  <div class="container">
12
46
 
47
+ <a class="navbar-brand" href="#">
48
+
49
+ <img src="img/logo.png" width="60px" alt="ロゴ画像">
50
+
51
+ </a>
52
+
53
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
54
+
55
+ aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
56
+
57
+ <span class="navbar-toggler-icon"></span>
58
+
59
+ </button>
60
+
61
+ <div class="collapse navbar-collapse" id="navbarNav">
62
+
63
+ <ul class="navbar-nav">
64
+
65
+ <li class="nav-item active">
66
+
67
+ <a class="nav-link" href="#">ダウンロード <span class="sr-only">(current)</span></a>
68
+
69
+ </li>
70
+
71
+ <li class="nav-item">
72
+
73
+ <a class="nav-link" href="#">ファミリーアプリ</a>
74
+
75
+ </li>
76
+
77
+ <li class="nav-item">
78
+
79
+ <a class="nav-link" href="#">ゲーム</a>
80
+
81
+ </li>
82
+
83
+ <li class="nav-item">
84
+
85
+ <a class="nav-link" href="#">LINE STORE</a>
86
+
87
+ </li>
88
+
89
+ <li class="nav-item">
90
+
91
+ <a class="nav-link" href="#">LINE Out</a>
92
+
93
+ </li>
94
+
95
+ <li class="nav-item">
96
+
97
+ <a class="nav-link" href="#">LINE Pay</a>
98
+
99
+ </li>
100
+
101
+ </ul>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ </nav>
108
+
109
+
110
+
111
+ <div class="jumbotron">
112
+
113
+ <div class="container">
114
+
115
+ <h1>LINE STOREでは<br>さまざま支払い方法で<br>LINEのアイテムを購入できます!</h1>
116
+
117
+ <p>最新のアイテムを購入したり、LINE STOREだけのイベントで<br>お得にお買い物しましょう!</p>
118
+
119
+ <a class="btn btn-primary btn-lg" href="#" role="button">LINE STORE »</a>
120
+
121
+ </div>
122
+
123
+ </div>
124
+
125
+ <section id="list">
126
+
127
+ <div class="container">
128
+
129
+ <div class="row pt-5 ">
130
+
131
+ <div class="col-6">
132
+
133
+ <img src="img/2016_ja_02.jpg" width="100%">
134
+
135
+ </div>
136
+
137
+ <div class="col-6">
138
+
139
+ <h2 class="mb-5 mt-5">LINEスタンプ</h2>
140
+
141
+ <p>お気に入りのLINEキャラクターや世界中の有名キャラクターが勢揃い!<br>
142
+
143
+ 多彩なLINEスタンプからお気に入りをゲットして、トークを盛り上げよう!</p>
144
+
145
+ <p>LINE STOREには、アニメーションスタンプや<br>
146
+
147
+ サウンドスタンプもあります!</p>
148
+
149
+ <a href="#">もっと見る</a>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
13
155
  <div class="row pt-5">
14
156
 
15
157
  <div class="col-6">
16
158
 
159
+ <h2 class="mb-5 mt-5">LINEスタンプ</h2>
160
+
161
+ <p>お気に入りのLINEキャラクターや世界中の有名キャラクターが勢揃い!<br>
162
+
163
+ 多彩なLINEスタンプからお気に入りをゲットして、トークを盛り上げよう!</p>
164
+
165
+ <p>LINE STOREには、アニメーションスタンプや<br>
166
+
167
+ サウンドスタンプもあります!</p>
168
+
169
+ <a href="#">もっと見る</a>
170
+
171
+ </div>
172
+
173
+ <div class="col-6">
174
+
17
175
  <img src="img/2016_ja_02.jpg" width="100%">
18
176
 
19
177
  </div>
20
178
 
21
- <div class="col-6">
22
-
23
- <h2 class="mb-5 mt-5">LINEスタンプ</h2>
24
-
25
- <p>お気に入りのLINEキャラクターや世界中の有名キャラクターが勢揃い!<br>
26
-
27
- 多彩なLINEスタンプからお気に入りをゲットして、トークを盛り上げよう!</p>
28
-
29
- <p>LINE STOREには、アニメーションスタンプや<br>
30
-
31
- サウンドスタンプもあります!</p>
32
-
33
- <a href="#">もっと見る</a>
34
-
35
- </div>
36
-
37
179
  </div>
38
180
 
39
181
  </div>
@@ -42,6 +184,38 @@
42
184
 
43
185
 
44
186
 
187
+
188
+
189
+
190
+
191
+ <!-- Optional JavaScript -->
192
+
193
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
194
+
195
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
196
+
197
+ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
198
+
199
+ crossorigin="anonymous"></script>
200
+
201
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
202
+
203
+ integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
204
+
205
+ crossorigin="anonymous"></script>
206
+
207
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
208
+
209
+ integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
210
+
211
+ crossorigin="anonymous"></script>
212
+
213
+ </body>
214
+
215
+
216
+
217
+ </html>
218
+
45
219
  ```
46
220
 
47
221
 

2

マークアップ

2020/01/07 01:41

投稿

taktak0201
taktak0201

スコア6

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
 
6
6
 
7
+ ```
7
8
 
8
-
9
- <section id="list">
9
+ <section id="list">
10
10
 
11
11
  <div class="container">
12
12
 
@@ -42,11 +42,17 @@
42
42
 
43
43
 
44
44
 
45
+ ```
46
+
47
+
48
+
49
+
50
+
45
51
  質問修正、ありがとうございます。
46
52
 
47
53
  下記がCSSになります。
48
54
 
49
-
55
+ ```
50
56
 
51
57
  @charset "UTF-8";
52
58
 
@@ -106,6 +112,6 @@
106
112
 
107
113
  }
108
114
 
109
-
115
+ ```
110
116
 
111
117
  どうぞよろしくお願い致します。

1

CSSの追加

2020/01/06 23:20

投稿

taktak0201
taktak0201

スコア6

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,73 @@
39
39
  </div>
40
40
 
41
41
  </section>
42
+
43
+
44
+
45
+ 質問修正、ありがとうございます。
46
+
47
+ 下記がCSSになります。
48
+
49
+
50
+
51
+ @charset "UTF-8";
52
+
53
+ /* *{ は全体的に反映させる記述 */
54
+
55
+
56
+
57
+ * {
58
+
59
+ padding: 0;
60
+
61
+ -webkit-box-sizing: border-box;
62
+
63
+ box-sizing: border-box;
64
+
65
+ list-style-type: none;
66
+
67
+ text-decoration: none;
68
+
69
+ }
70
+
71
+
72
+
73
+ .jumbotron {
74
+
75
+ background-image: url("../img/header.png");
76
+
77
+ height: 440px;
78
+
79
+ background-position: center;
80
+
81
+ background-repeat: no-repeat;
82
+
83
+ }
84
+
85
+
86
+
87
+ .jumbotron h1 {
88
+
89
+ color: white;
90
+
91
+ }
92
+
93
+
94
+
95
+ .jumbotron p {
96
+
97
+ color: white;
98
+
99
+ }
100
+
101
+
102
+
103
+ h2{
104
+
105
+ font-size: 100px;
106
+
107
+ }
108
+
109
+
110
+
111
+ どうぞよろしくお願い致します。