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

回答編集履歴

2

コード追加

2019/12/11 14:19

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -16,8 +16,8 @@
16
16
  ```html
17
17
  <div class="content">
18
18
  <div class="item1">1</div>
19
+ <div class="item2">2</div>
19
20
  <div class="item3">3</div>
20
- <div class="item2">2</div>
21
21
  </div>
22
22
  ```
23
23
  ```scss
@@ -65,4 +65,49 @@
65
65
  }
66
66
  }
67
67
  ```
68
- [動作確認用サンプル](https://codepen.io/hatena19/pen/KKwzxNY)
68
+ [動作確認用サンプル](https://codepen.io/hatena19/pen/KKwzxNY)
69
+
70
+ 下記のような書き方もできます。
71
+ grid-template-areas を使います。こちらの方が視覚的にレイアウトが把握しやすいと思います。
72
+
73
+ ```scss
74
+ .content{
75
+ display:grid;
76
+ grid-template-rows: auto auto auto;
77
+ grid-template-columns: 1fr 300px;
78
+ grid-template-areas:
79
+ "area1 area2"
80
+ "area3 area2";
81
+ grid-gap: 10px;
82
+ .item1{
83
+ grid-area: area1;
84
+ height:300px;
85
+ background-color: #ff8e8e;
86
+ }
87
+ .item2{
88
+ grid-area: area2;
89
+ width: 300px;
90
+ background-color: #996cff;
91
+ }
92
+ .item3{
93
+ grid-area: area3;
94
+ height:300px;
95
+ background-color: #8fe470;
96
+ }
97
+ }
98
+
99
+ @media (max-width:768px) {
100
+ .content{
101
+ grid-template-areas:
102
+ "area1 area1"
103
+ "area2 area2"
104
+ "area3 area3";
105
+
106
+ .item2{
107
+ width: 100%;
108
+ height: 300px;
109
+ }
110
+ }
111
+ }
112
+ ```
113
+ [動作確認用サンプル](https://codepen.io/hatena19/pen/dyPMQBp)

1

コード追加

2019/12/11 14:18

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -7,4 +7,62 @@
7
7
  他にも方法はいろいろあります。
8
8
 
9
9
  上記のヒントを参考にWEB検索してできるところまで作成してください。
10
- そして行き詰ったら、その時点でのHTML、CSSを提示して、どこがどのようにうまくいかないかを質問してください。
10
+ そして行き詰ったら、その時点でのHTML、CSSを提示して、どこがどのようにうまくいかないかを質問してください。
11
+
12
+ 追記
13
+ ---
14
+ コードとレイアウトの画像が提示されたので、ご希望のレイアウトをgridで実現する場合のコード例
15
+
16
+ ```html
17
+ <div class="content">
18
+ <div class="item1">1</div>
19
+ <div class="item3">3</div>
20
+ <div class="item2">2</div>
21
+ </div>
22
+ ```
23
+ ```scss
24
+ .content{
25
+ display:grid;
26
+ grid-template-rows: auto auto auto;
27
+ grid-template-columns: 1fr 300px;
28
+ grid-gap: 10px;
29
+ .item1{
30
+ grid-row: 1;
31
+ grid-column: 1;
32
+ height:300px;
33
+ background-color: #ff8e8e;
34
+ }
35
+ .item2{
36
+ grid-row: 1 / 3;
37
+ grid-column: 2;
38
+ width: 300px;
39
+ background-color: #996cff;
40
+ }
41
+ .item3{
42
+ grid-row: 2;
43
+ grid-column: 1;
44
+ height:300px;
45
+ background-color: #8fe470;
46
+ }
47
+ }
48
+
49
+ @media (max-width:768px) {
50
+ .content{
51
+ .item1{
52
+ grid-row: 1;
53
+ grid-column: 1 / 3;
54
+ }
55
+ .item2{
56
+ grid-row: 2;
57
+ grid-column: 1 / 3;
58
+ width: 100%;
59
+ height: 300px;
60
+ }
61
+ .item3{
62
+ grid-row: 3;
63
+ grid-column: 1 / 3;
64
+ }
65
+ }
66
+ }
67
+ ```
68
+ [動作確認用サンプル](https://codepen.io/hatena19/pen/KKwzxNY)