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

質問編集履歴

1

写真の追加とcode囲みました

2019/01/02 07:41

投稿

tomotomotomo
tomotomotomo

スコア18

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,7 @@
5
5
  どなたかご伝授お願いいたします。
6
6
 
7
7
  HTMLの方は
8
+ ```
8
9
  <div class="gallery_wrap">
9
10
  <div class="gallery_box box01">
10
11
  <img src="img\category\sotugyou.PNG" alt="">
@@ -37,6 +38,64 @@
37
38
  <img src="./image/slide_img02.jpg" alt="">
38
39
  </div>
39
40
  </div>
41
+ ```
40
42
  にしています。
43
+
44
+ CSSは
45
+ ```
46
+ .gallery_wrap{
47
+ display: flex;
48
+ width: 70%;
49
+ height: auto;
50
+ margin: 20px auto;
51
+
52
+ }
53
+
54
+ .gallery_box{
55
+ width: 33%;
56
+ height: 100%;
57
+ margin: 10px;
58
+
59
+ }
60
+
61
+
62
+ .box3{
63
+ display: flex;
64
+ flex-direction: column;
65
+ }
66
+
67
+ .box4{
68
+ display: flex;
69
+ flex-direction: column;
70
+ }
71
+
72
+ .box8{
73
+ display: flex;
74
+ flex-direction: column;
75
+ }
76
+
77
+ .gallery_box img{
78
+ width: 100%;
79
+ height: 100%;
80
+ object-fit: cover;
81
+ }
82
+
83
+ .box03 img{
84
+ width: 100%;
85
+ height: 50%;
86
+ }
87
+
88
+ .box04 img{
89
+ width: 100%;
90
+ height: 50%;
91
+ }
92
+
93
+ .box08 img{
94
+ width: 100%;
95
+ height: 50%;
96
+ }
97
+ ```
41
98
  よろしくお願いいたします。
99
+
42
- ![イメージ説明](f8e4f07d912f89da2adb3488aedb6eb8.jpeg)
100
+ ![イメージ説明](c0e52fd11a4c5ddaa99cb68445673a66.jpeg)
101
+ ![イメージ説明](fa2e9a1e12b76d66319d1690ac544827.jpeg)