teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問サムネイルでメイン画像を切り替え、メイン画像をクリックしたらlightboxのように画像を切り替えたい

編集履歴

質問編集履歴

1

2018/10/24 08:29

投稿

akinco
akinco

スコア17

test CHANGED
File without changes
test CHANGED
@@ -86,57 +86,73 @@
86
86
 
87
87
  ```
88
88
 
89
- ```sass
89
+ ```css
90
90
 
91
- div.press_img{
91
+ div.press_img {
92
92
 
93
- @include Yohaku((0 auto) (0 0 2em));
93
+ margin: 0 auto;
94
94
 
95
- p{
96
-
97
- text-align: center;
95
+ padding: 0 0 2em;
98
-
99
- img {
100
-
101
- width: 60%;
102
-
103
- border-radius: 2px;
104
-
105
- }
106
-
107
- }
108
96
 
109
97
  }
110
98
 
111
99
 
112
100
 
113
- ul.sumnail_list{
101
+ div.press_img p {
114
102
 
115
- @include BlockFlexBox(flex-start,baseline);
103
+ text-align: center;
116
104
 
117
- padding: 1em 0 2em;
105
+ }
118
106
 
119
- li{
120
107
 
121
- width: $base_width / 6;
122
108
 
123
- padding: 0.5em 0;
109
+ div.press_img p img {
124
110
 
125
- text-align: center;
111
+ width: 60%;
126
112
 
127
- line-height: $lheight - 0.7;
113
+ border-radius: 2px;
128
114
 
129
- font-size: $fsize - 3;
115
+ }
130
116
 
131
- img{
132
117
 
133
- width: 90%;
134
118
 
135
- border-radius: 2px;
119
+ ul.sumnail_list {
136
120
 
137
- }
121
+ display: flex;
138
122
 
123
+ flex-flow: row wrap;
124
+
125
+ justify-content: flex-start;
126
+
127
+ align-items: baseline;
128
+
129
+ padding: 1em 0 2em;
130
+
139
- }
131
+ }
132
+
133
+
134
+
135
+ ul.sumnail_list li {
136
+
137
+ width: 16.66667%;
138
+
139
+ padding: 0.5em 0;
140
+
141
+ text-align: center;
142
+
143
+ line-height: 1.3em;
144
+
145
+ font-size: 12px;
146
+
147
+ }
148
+
149
+
150
+
151
+ ul.sumnail_list li img {
152
+
153
+ width: 90%;
154
+
155
+ border-radius: 2px;
140
156
 
141
157
  }
142
158