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

質問編集履歴

3

HTML全文

2020/01/07 01:41

投稿

taktak0201
taktak0201

スコア6

title CHANGED
File without changes
body CHANGED
@@ -2,9 +2,67 @@
2
2
  大きくなりません。。何故でしょうか?どなたかご教授ください。よろしくお願い致します。
3
3
 
4
4
  ```
5
+ <!doctype html>
5
- <section id="list">
6
+ <html lang="ja">
7
+
8
+ <head>
9
+ <!-- Required meta tags -->
10
+ <meta charset="utf-8">
11
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
12
+ <link rel="stylesheet" href="css/style.css">
13
+ <!-- Bootstrap CSS -->
14
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
15
+ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
16
+
17
+ <title>Hello, world!</title>
18
+ </head>
19
+
20
+ <body>
21
+
22
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
6
23
  <div class="container">
24
+ <a class="navbar-brand" href="#">
25
+ <img src="img/logo.png" width="60px" alt="ロゴ画像">
26
+ </a>
27
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
28
+ aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
29
+ <span class="navbar-toggler-icon"></span>
30
+ </button>
31
+ <div class="collapse navbar-collapse" id="navbarNav">
32
+ <ul class="navbar-nav">
33
+ <li class="nav-item active">
34
+ <a class="nav-link" href="#">ダウンロード <span class="sr-only">(current)</span></a>
35
+ </li>
36
+ <li class="nav-item">
37
+ <a class="nav-link" href="#">ファミリーアプリ</a>
38
+ </li>
39
+ <li class="nav-item">
40
+ <a class="nav-link" href="#">ゲーム</a>
41
+ </li>
42
+ <li class="nav-item">
43
+ <a class="nav-link" href="#">LINE STORE</a>
44
+ </li>
45
+ <li class="nav-item">
46
+ <a class="nav-link" href="#">LINE Out</a>
47
+ </li>
48
+ <li class="nav-item">
49
+ <a class="nav-link" href="#">LINE Pay</a>
50
+ </li>
51
+ </ul>
52
+ </div>
53
+ </div>
54
+ </nav>
55
+
56
+ <div class="jumbotron">
57
+ <div class="container">
58
+ <h1>LINE STOREでは<br>さまざま支払い方法で<br>LINEのアイテムを購入できます!</h1>
59
+ <p>最新のアイテムを購入したり、LINE STOREだけのイベントで<br>お得にお買い物しましょう!</p>
60
+ <a class="btn btn-primary btn-lg" href="#" role="button">LINE STORE »</a>
61
+ </div>
62
+ </div>
63
+ <section id="list">
64
+ <div class="container">
7
- <div class="row pt-5">
65
+ <div class="row pt-5 ">
8
66
  <div class="col-6">
9
67
  <img src="img/2016_ja_02.jpg" width="100%">
10
68
  </div>
@@ -17,9 +75,38 @@
17
75
  <a href="#">もっと見る</a>
18
76
  </div>
19
77
  </div>
78
+ <div class="row pt-5">
79
+ <div class="col-6">
80
+ <h2 class="mb-5 mt-5">LINEスタンプ</h2>
81
+ <p>お気に入りのLINEキャラクターや世界中の有名キャラクターが勢揃い!<br>
82
+ 多彩なLINEスタンプからお気に入りをゲットして、トークを盛り上げよう!</p>
83
+ <p>LINE STOREには、アニメーションスタンプや<br>
84
+ サウンドスタンプもあります!</p>
85
+ <a href="#">もっと見る</a>
86
+ </div>
87
+ <div class="col-6">
88
+ <img src="img/2016_ja_02.jpg" width="100%">
89
+ </div>
90
+ </div>
20
91
  </div>
21
92
  </section>
22
93
 
94
+
95
+
96
+ <!-- Optional JavaScript -->
97
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
98
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
99
+ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
100
+ crossorigin="anonymous"></script>
101
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
102
+ integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
103
+ crossorigin="anonymous"></script>
104
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
105
+ integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
106
+ crossorigin="anonymous"></script>
107
+ </body>
108
+
109
+ </html>
23
110
  ```
24
111
 
25
112
 

2

マークアップ

2020/01/07 01:41

投稿

taktak0201
taktak0201

スコア6

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,8 @@
1
1
  現在勉強のため、LINEのサイト模写をしているのですが、h2タグに対してcssからfont-sizeに数値を入れても
2
2
  大きくなりません。。何故でしょうか?どなたかご教授ください。よろしくお願い致します。
3
3
 
4
-
4
+ ```
5
- <section id="list">
5
+ <section id="list">
6
6
  <div class="container">
7
7
  <div class="row pt-5">
8
8
  <div class="col-6">
@@ -20,9 +20,12 @@
20
20
  </div>
21
21
  </section>
22
22
 
23
+ ```
24
+
25
+
23
26
  質問修正、ありがとうございます。
24
27
  下記がCSSになります。
25
-
28
+ ```
26
29
  @charset "UTF-8";
27
30
  /* *{ は全体的に反映させる記述 */
28
31
 
@@ -52,5 +55,5 @@
52
55
  h2{
53
56
  font-size: 100px;
54
57
  }
55
-
58
+ ```
56
59
  どうぞよろしくお願い致します。

1

CSSの追加

2020/01/06 23:20

投稿

taktak0201
taktak0201

スコア6

title CHANGED
File without changes
body CHANGED
@@ -18,4 +18,39 @@
18
18
  </div>
19
19
  </div>
20
20
  </div>
21
- </section>
21
+ </section>
22
+
23
+ 質問修正、ありがとうございます。
24
+ 下記がCSSになります。
25
+
26
+ @charset "UTF-8";
27
+ /* *{ は全体的に反映させる記述 */
28
+
29
+ * {
30
+ padding: 0;
31
+ -webkit-box-sizing: border-box;
32
+ box-sizing: border-box;
33
+ list-style-type: none;
34
+ text-decoration: none;
35
+ }
36
+
37
+ .jumbotron {
38
+ background-image: url("../img/header.png");
39
+ height: 440px;
40
+ background-position: center;
41
+ background-repeat: no-repeat;
42
+ }
43
+
44
+ .jumbotron h1 {
45
+ color: white;
46
+ }
47
+
48
+ .jumbotron p {
49
+ color: white;
50
+ }
51
+
52
+ h2{
53
+ font-size: 100px;
54
+ }
55
+
56
+ どうぞよろしくお願い致します。