質問編集履歴

6

2019/02/22 11:26

投稿

EXIT
EXIT

スコア43

test CHANGED
File without changes
test CHANGED
@@ -211,9 +211,3 @@
211
211
  ```
212
212
 
213
213
  よろしくお願いします。
214
-
215
- ### 追記
216
-
217
- 自分なりにググりまくったり考えてみたりしましたが、自分の知識や頭が足りず 皆目見当がつかないので質問しました。
218
-
219
- そういう時はないのでしょうか? 「丸投げの質問」という指摘、うざいだけなのでしなくていいです。

5

削除された内容の復元を行いました

2019/02/22 11:26

投稿

EXIT
EXIT

スコア43

test CHANGED
@@ -1 +1 @@
1
- no title no title
1
+ 子要素の幅に合わせたい
test CHANGED
@@ -1 +1,219 @@
1
-
1
+ ### 問題
2
+
3
+ ![子要素の幅に合わせたい](16232691c6c28c8042b9f56337de0675.gif)
4
+
5
+ 要素の幅を、`img.mater`のメーターの所に合わせたい。
6
+
7
+ つまりブロックの基準を、メーター(子要素)の部分にするには?
8
+
9
+ ### イメージ
10
+
11
+ ▼ 全体像
12
+
13
+ ![全体像](074e4f6d5f1f04113c154148813c9b9c.png)
14
+
15
+ ▼ こうしたいからこの緑の幅を基準にしたい、の図(イメージ湧きやすいかなと思って)
16
+
17
+ ![基準と、それでやりたいこと](9bd2c33ef9b57d43a678718e8b5638f0.jpeg)
18
+
19
+ ### 現状
20
+
21
+ (可変時)
22
+
23
+ ![現状](769be58c981bf154870536fbad46a604.png)
24
+
25
+ ### コード
26
+
27
+ ```html
28
+
29
+ <section class="skill">
30
+
31
+ <p class="title">skill</p>
32
+
33
+ <ul class="data">
34
+
35
+ <li class="tool">
36
+
37
+ <figure class="Illustrator">
38
+
39
+ <img class="mater" src="img/4.svg" alt="advanced" />
40
+
41
+ <img class="mater-t" src="img/Ai.svg" alt="Illustrator" />
42
+
43
+ <figcaption>Illustrator</figcaption>
44
+
45
+ </figure>
46
+
47
+ <figure class="Photoshop">
48
+
49
+ <img class="mater" src="img/3.svg" alt="intermediate" />
50
+
51
+ <img class="mater-t" src="img/Ps.svg" alt="Photoshop" />
52
+
53
+ <figcaption>Photoshop</figcaption>
54
+
55
+ </figure>
56
+
57
+ <figure class="Indesign">
58
+
59
+ <img class="mater" src="img/2.svg" alt="elementary" />
60
+
61
+ <img class="mater-t" src="img/Id.svg" alt="Indesign" />
62
+
63
+ <figcaption>Indesign</figcaption>
64
+
65
+ </figure>
66
+
67
+ <figure class="Vectorworks">
68
+
69
+ <img class="mater" src="img/3.svg" alt="intermediate" />
70
+
71
+ <img class="mater-t" src="img/Vw.svg" alt="Vectorworks" />
72
+
73
+ <figcaption>Vectorworks</figcaption>
74
+
75
+ </figure>
76
+
77
+ <figure class="Shade">
78
+
79
+ <img class="mater" src="img/3.svg" alt="intermediate" />
80
+
81
+ <img class="mater-t" src="img/Sd.svg" alt="Shade" />
82
+
83
+ <figcaption>Shade</figcaption>
84
+
85
+ </figure>
86
+
87
+ </li>
88
+
89
+ <li class="code">
90
+
91
+ <figure class="HTML">
92
+
93
+ <img class="mater" src="img/2.svg" alt="elementary" />
94
+
95
+ <img class="mater-t" src="img/HTML.svg" alt="HTML" />
96
+
97
+ <figcaption>HTML</figcaption>
98
+
99
+ </figure>
100
+
101
+ <figure class="CSS">
102
+
103
+ <img class="mater" src="img/2.svg" alt="elementary" />
104
+
105
+ <img class="mater-t" src="img/CSS.svg" alt="CSS" />
106
+
107
+ <figcaption>CSS</figcaption>
108
+
109
+ </figure>
110
+
111
+ <figure class="Javascript">
112
+
113
+ <img class="mater" src="img/1.svg" alt="beginner" />
114
+
115
+ <img class="mater-t" src="img/JS.svg" alt="Javascript" />
116
+
117
+ <figcaption>Javascript</figcaption>
118
+
119
+ </figure>
120
+
121
+ <figure class="PHP">
122
+
123
+ <img class="mater" src="img/1.svg" alt="beginner" />
124
+
125
+ <img class="mater-t" src="img/PHP.svg" alt="PHP" />
126
+
127
+ <figcaption>PHP</figcaption>
128
+
129
+ </figure>
130
+
131
+ </li>
132
+
133
+ </ul>
134
+
135
+ </section>
136
+
137
+ ```
138
+
139
+ ```css
140
+
141
+ .data {
142
+
143
+ padding-top: 1.7rem;
144
+
145
+ padding-bottom: 1.7rem; }
146
+
147
+ .skill li {
148
+
149
+ display: flex;
150
+
151
+ flex-wrap: wrap;
152
+
153
+ align-content: space-between; }
154
+
155
+ .skill li :last-child {
156
+
157
+ margin-right: 0; }
158
+
159
+ .code {
160
+
161
+ margin-top: 1.7rem; }
162
+
163
+ figure {
164
+
165
+ margin-right: .9rem;
166
+
167
+ font-size: 1rem;
168
+
169
+ position: relative; }
170
+
171
+ figure > img {
172
+
173
+ top: 0;
174
+
175
+ bottom: 0; }
176
+
177
+ figure > .mater {
178
+
179
+ height: 4.4rem; }
180
+
181
+ figure > figcaption {
182
+
183
+ line-height: 1;
184
+
185
+ position: absolute; /* yoshinaviさんのアドバイスで追加 */
186
+
187
+ text-align: center; }
188
+
189
+ .mater-t {
190
+
191
+ height: 2.3rem;
192
+
193
+ display: block;
194
+
195
+ position: absolute;
196
+
197
+ top: 0;
198
+
199
+ bottom: 0;
200
+
201
+ right: 0;
202
+
203
+ left: 0;
204
+
205
+ margin: auto; }
206
+
207
+ .PHP > .mater-t {
208
+
209
+ width: 2.4rem; }
210
+
211
+ ```
212
+
213
+ よろしくお願いします。
214
+
215
+ ### 追記
216
+
217
+ 自分なりにググりまくったり考えてみたりしましたが、自分の知識や頭が足りず 皆目見当がつかないので質問しました。
218
+
219
+ そういう時はないのでしょうか? 「丸投げの質問」という指摘、うざいだけなのでしなくていいです。

4

2019/02/22 09:09

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 子要素の幅に合わせたい
1
+ no title no title
test CHANGED
@@ -1,239 +1 @@
1
- ### 問題
2
1
 
3
- ![子要素の幅に合わせたい](16232691c6c28c8042b9f56337de0675.gif)
4
-
5
- 要素の幅を、`img.mater`のメーターの所に合わせたい。
6
-
7
- つまりブロックの基準を、メーター(子要素)の部分にするには?
8
-
9
-
10
-
11
- ### イメージ
12
-
13
- ▼ 全体像
14
-
15
- ![全体像](074e4f6d5f1f04113c154148813c9b9c.png)
16
-
17
-
18
-
19
- ▼ こうしたいからこの緑の幅を基準にしたい、の図(イメージ湧きやすいかなと思って)
20
-
21
- ![基準と、それでやりたいこと](9bd2c33ef9b57d43a678718e8b5638f0.jpeg)
22
-
23
-
24
-
25
- ### 現状
26
-
27
- (可変時)
28
-
29
- ![現状](769be58c981bf154870536fbad46a604.png)
30
-
31
-
32
-
33
- ### コード
34
-
35
- ```html
36
-
37
- <section class="skill">
38
-
39
- <p class="title">skill</p>
40
-
41
- <ul class="data">
42
-
43
- <li class="tool">
44
-
45
- <figure class="Illustrator">
46
-
47
- <img class="mater" src="img/4.svg" alt="advanced" />
48
-
49
- <img class="mater-t" src="img/Ai.svg" alt="Illustrator" />
50
-
51
- <figcaption>Illustrator</figcaption>
52
-
53
- </figure>
54
-
55
- <figure class="Photoshop">
56
-
57
- <img class="mater" src="img/3.svg" alt="intermediate" />
58
-
59
- <img class="mater-t" src="img/Ps.svg" alt="Photoshop" />
60
-
61
- <figcaption>Photoshop</figcaption>
62
-
63
- </figure>
64
-
65
- <figure class="Indesign">
66
-
67
- <img class="mater" src="img/2.svg" alt="elementary" />
68
-
69
- <img class="mater-t" src="img/Id.svg" alt="Indesign" />
70
-
71
- <figcaption>Indesign</figcaption>
72
-
73
- </figure>
74
-
75
- <figure class="Vectorworks">
76
-
77
- <img class="mater" src="img/3.svg" alt="intermediate" />
78
-
79
- <img class="mater-t" src="img/Vw.svg" alt="Vectorworks" />
80
-
81
- <figcaption>Vectorworks</figcaption>
82
-
83
- </figure>
84
-
85
- <figure class="Shade">
86
-
87
- <img class="mater" src="img/3.svg" alt="intermediate" />
88
-
89
- <img class="mater-t" src="img/Sd.svg" alt="Shade" />
90
-
91
- <figcaption>Shade</figcaption>
92
-
93
- </figure>
94
-
95
- </li>
96
-
97
- <li class="code">
98
-
99
- <figure class="HTML">
100
-
101
- <img class="mater" src="img/2.svg" alt="elementary" />
102
-
103
- <img class="mater-t" src="img/HTML.svg" alt="HTML" />
104
-
105
- <figcaption>HTML</figcaption>
106
-
107
- </figure>
108
-
109
- <figure class="CSS">
110
-
111
- <img class="mater" src="img/2.svg" alt="elementary" />
112
-
113
- <img class="mater-t" src="img/CSS.svg" alt="CSS" />
114
-
115
- <figcaption>CSS</figcaption>
116
-
117
- </figure>
118
-
119
- <figure class="Javascript">
120
-
121
- <img class="mater" src="img/1.svg" alt="beginner" />
122
-
123
- <img class="mater-t" src="img/JS.svg" alt="Javascript" />
124
-
125
- <figcaption>Javascript</figcaption>
126
-
127
- </figure>
128
-
129
- <figure class="PHP">
130
-
131
- <img class="mater" src="img/1.svg" alt="beginner" />
132
-
133
- <img class="mater-t" src="img/PHP.svg" alt="PHP" />
134
-
135
- <figcaption>PHP</figcaption>
136
-
137
- </figure>
138
-
139
- </li>
140
-
141
- </ul>
142
-
143
- </section>
144
-
145
- ```
146
-
147
- ```css
148
-
149
- .data {
150
-
151
- padding-top: 1.7rem;
152
-
153
- padding-bottom: 1.7rem; }
154
-
155
-
156
-
157
- .skill li {
158
-
159
- display: flex;
160
-
161
- flex-wrap: wrap;
162
-
163
- align-content: space-between; }
164
-
165
- .skill li :last-child {
166
-
167
- margin-right: 0; }
168
-
169
-
170
-
171
- .code {
172
-
173
- margin-top: 1.7rem; }
174
-
175
-
176
-
177
- figure {
178
-
179
- margin-right: .9rem;
180
-
181
- font-size: 1rem;
182
-
183
- position: relative; }
184
-
185
- figure > img {
186
-
187
- top: 0;
188
-
189
- bottom: 0; }
190
-
191
- figure > .mater {
192
-
193
- height: 4.4rem; }
194
-
195
- figure > figcaption {
196
-
197
- line-height: 1;
198
-
199
- position: absolute; /* yoshinaviさんのアドバイスで追加 */
200
-
201
- text-align: center; }
202
-
203
-
204
-
205
- .mater-t {
206
-
207
- height: 2.3rem;
208
-
209
- display: block;
210
-
211
- position: absolute;
212
-
213
- top: 0;
214
-
215
- bottom: 0;
216
-
217
- right: 0;
218
-
219
- left: 0;
220
-
221
- margin: auto; }
222
-
223
-
224
-
225
- .PHP > .mater-t {
226
-
227
- width: 2.4rem; }
228
-
229
- ```
230
-
231
- よろしくお願いします。
232
-
233
-
234
-
235
- ### 追記
236
-
237
- 自分なりにググりまくったり考えてみたりしましたが、自分の知識や頭が足りず 皆目見当がつかないので質問しました。
238
-
239
- そういう時はないのでしょうか? 「丸投げの質問」という指摘、うざいだけなのでしなくていいです。

3

写真の追加

2019/02/20 10:32

投稿

EXIT
EXIT

スコア43

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,14 @@
22
22
 
23
23
 
24
24
 
25
+ ### 現状
26
+
27
+ (可変時)
28
+
29
+ ![現状](769be58c981bf154870536fbad46a604.png)
30
+
31
+
32
+
25
33
  ### コード
26
34
 
27
35
  ```html
@@ -186,7 +194,11 @@
186
194
 
187
195
  figure > figcaption {
188
196
 
189
- line-height: 1; }
197
+ line-height: 1;
198
+
199
+ position: absolute; /* yoshinaviさんのアドバイスで追加 */
200
+
201
+ text-align: center; }
190
202
 
191
203
 
192
204
 
@@ -224,4 +236,4 @@
224
236
 
225
237
  自分なりにググりまくったり考えてみたりしましたが、自分の知識や頭が足りず 皆目見当がつかないので質問しました。
226
238
 
227
- そういう時はないのでしょうか?「丸投げの質問」という指摘、正直うざいです。
239
+ そういう時はないのでしょうか? 「丸投げの質問」という指摘、うざいだけなのしなくていいです。

2

scss→css

2019/02/20 05:26

投稿

EXIT
EXIT

スコア43

test CHANGED
File without changes
test CHANGED
@@ -136,15 +136,15 @@
136
136
 
137
137
  ```
138
138
 
139
- ```scss
139
+ ```css
140
140
 
141
141
  .data {
142
142
 
143
143
  padding-top: 1.7rem;
144
144
 
145
- padding-bottom: 1.7rem;
145
+ padding-bottom: 1.7rem; }
146
-
147
- }
146
+
147
+
148
148
 
149
149
  .skill li {
150
150
 
@@ -152,21 +152,19 @@
152
152
 
153
153
  flex-wrap: wrap;
154
154
 
155
- align-content: space-between;
155
+ align-content: space-between; }
156
-
156
+
157
- :last-child {
157
+ .skill li :last-child {
158
-
158
+
159
- margin-right: 0;
159
+ margin-right: 0; }
160
-
161
- }
160
+
162
-
163
- }
161
+
164
162
 
165
163
  .code {
166
164
 
167
- margin-top: 1.7rem;
165
+ margin-top: 1.7rem; }
168
-
169
- }
166
+
167
+
170
168
 
171
169
  figure {
172
170
 
@@ -174,29 +172,21 @@
174
172
 
175
173
  font-size: 1rem;
176
174
 
177
- position: relative;
175
+ position: relative; }
178
-
176
+
179
- > img {
177
+ figure > img {
180
178
 
181
179
  top: 0;
182
180
 
183
- bottom: 0;
181
+ bottom: 0; }
184
-
185
- }
182
+
186
-
187
- > .mater {
183
+ figure > .mater {
188
-
184
+
189
- height: 4.4rem;
185
+ height: 4.4rem; }
190
-
191
- }
186
+
192
-
193
- > figcaption {
187
+ figure > figcaption {
194
-
188
+
195
- line-height: 1;
189
+ line-height: 1; }
196
-
197
- }
198
-
199
- }
200
190
 
201
191
 
202
192
 
@@ -216,15 +206,13 @@
216
206
 
217
207
  left: 0;
218
208
 
219
- margin: auto;
209
+ margin: auto; }
220
-
221
- }
210
+
211
+
222
212
 
223
213
  .PHP > .mater-t {
224
214
 
225
- width: 2.4rem;
215
+ width: 2.4rem; }
226
-
227
- }
228
216
 
229
217
  ```
230
218
 

1

追記

2019/02/19 16:15

投稿

EXIT
EXIT

スコア43

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  要素の幅を、`img.mater`のメーターの所に合わせたい。
6
6
 
7
- つまりブロックの基準を、メーター(子要素)の部分にしたい。
7
+ つまりブロックの基準を、メーター(子要素)の部分にするには?
8
8
 
9
9
 
10
10
 
@@ -229,3 +229,11 @@
229
229
  ```
230
230
 
231
231
  よろしくお願いします。
232
+
233
+
234
+
235
+ ### 追記
236
+
237
+ 自分なりにググりまくったり考えてみたりしましたが、自分の知識や頭が足りず 皆目見当がつかないので質問しました。
238
+
239
+ そういう時はないのでしょうか?「丸投げの質問」という指摘、正直うざいです。