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

質問編集履歴

4

grid.cssのコードの追加

2021/03/15 09:29

投稿

tarah
tarah

スコア5

title CHANGED
File without changes
body CHANGED
@@ -77,6 +77,29 @@
77
77
  }
78
78
 
79
79
  ```
80
+ ```css
81
+ コード.section {
82
+ clear: both;
83
+ padding: 0px;
84
+ margin: 0px;
85
+ }
86
+
87
+ /* GROUPING ============================================================================= */
88
+
89
+ .row {
90
+ zoom: 1; /* For IE 6/7 (trigger hasLayout) */
91
+ }
92
+
93
+ .row:before,
94
+ .row:after {
95
+ content:"";
96
+ display:table;
97
+ }
98
+ .row:after {
99
+ clear:both;
100
+ }
101
+
102
+ ```
80
103
  ![イメージ説明](8f0bc8dfd8520390867da6eede61b829.png)
81
104
  上記の画像のように別の部分が変更されてしまいます。
82
105
  transform: translate(-50%, -50%);

3

cssのコードの追加

2021/03/15 09:28

投稿

tarah
tarah

スコア5

title CHANGED
File without changes
body CHANGED
@@ -23,7 +23,35 @@
23
23
  </html>
24
24
  ```
25
25
  ```css 
26
+ コード* {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+
31
+ }
32
+
33
+ html {
34
+ background-color: #fff;
35
+ color: #555;
36
+ font-family: 'Lato', 'Arial', sans-serif;
37
+ font-weight: 300;
38
+ font-size: 20px;
39
+ text-rendering: optimizeLegibility;
40
+ }
41
+
42
+ .row{
43
+ max-width: 1140px;
44
+ margin: 0 auto;
45
+ }
46
+
47
+ header {
48
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
49
+ background-size: cover;
50
+ background-position: center;
51
+ height: 100vh;
52
+ }
53
+
26
- コード.hero-text-box {
54
+ .hero-text-box {
27
55
  position: absolute;
28
56
  width: 1140px;
29
57
  top: 50%;
@@ -39,6 +67,7 @@
39
67
  text-transform: uppercase;
40
68
  letter-spacing: 1px;
41
69
  word-spacing: 4px;
70
+
42
71
  }
43
72
 
44
73
  .btn {
@@ -46,6 +75,7 @@
46
75
  padding: 10px 30px;
47
76
  font-weight: 300;
48
77
  }
78
+
49
79
  ```
50
80
  ![イメージ説明](8f0bc8dfd8520390867da6eede61b829.png)
51
81
  上記の画像のように別の部分が変更されてしまいます。

2

画像の追加 cssのコードの追加

2021/03/15 09:13

投稿

tarah
tarah

スコア5

title CHANGED
File without changes
body CHANGED
@@ -40,9 +40,20 @@
40
40
  letter-spacing: 1px;
41
41
  word-spacing: 4px;
42
42
  }
43
+
44
+ .btn {
45
+ display: inline-block;
46
+ padding: 10px 30px;
47
+ font-weight: 300;
48
+ }
43
49
  ```
44
50
  ![イメージ説明](8f0bc8dfd8520390867da6eede61b829.png)
45
51
  上記の画像のように別の部分が変更されてしまいます。
46
52
  transform: translate(-50%, -50%);
47
53
  このようにtrnasformを使うと文字だけが移動してしまって、.hero-text-boxクラスに含まれるh1のpaddingやmarginなどを変えても反映されません。
48
- どうすればよいでしょうか。
54
+ どうすればよいでしょうか。
55
+
56
+ ![イメージ説明](8c48162c2757e33a221aff3e1ccf8408.png)
57
+ 上記の画像のようにbtnクラスのI’m hungryという部分を囲みたいのですが
58
+ 下の図のように囲んだ部分が別の場所に表示されてしまいます。
59
+ ![イメージ説明](044d513906838c023b51cfb8b73ad525.png)

1

画像の挿入 htmlの追加

2021/03/15 09:03

投稿

tarah
tarah

スコア5

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,28 @@
1
+ ```html
2
+ コード<!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
6
+ <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
7
+ <link rel="stylesheet" type="text/css" href="resources/css/style.css">
8
+ <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
9
+ <title>Omnifood</title>
10
+ </head>
11
+ <body>
12
+ <header>
13
+ <div class="hero-text-box">
14
+ <h1>Goodbye junk food.<br> Hello super healthy meals.</h1>
15
+ <a class="btn" href="#">I’m hungry</a>
16
+ <a href="#">Show me more</a>
17
+ </div>
18
+ </header>
19
+
20
+
21
+ </body>
22
+
23
+ </html>
24
+ ```
1
- ```css
25
+ ```css 
2
26
  コード.hero-text-box {
3
27
  position: absolute;
4
28
  width: 1140px;
@@ -17,7 +41,8 @@
17
41
  word-spacing: 4px;
18
42
  }
19
43
  ```
20
-
44
+ ![イメージ説明](8f0bc8dfd8520390867da6eede61b829.png)
45
+ 上記の画像のように別の部分が変更されてしまいます。
21
46
  transform: translate(-50%, -50%);
22
47
  このようにtrnasformを使うと文字だけが移動してしまって、.hero-text-boxクラスに含まれるh1のpaddingやmarginなどを変えても反映されません。
23
48
  どうすればよいでしょうか。