回答編集履歴
4
続きを書く
test
CHANGED
|
@@ -267,3 +267,87 @@
|
|
|
267
267
|
|
|
268
268
|
|
|
269
269
|
※回答者はこのまま失踪する可能性があります。一週間音沙汰が無く、調べてもどうすれば良いのかわからない、そもそもできるのかすらわかっていない場合は、別途質問として投稿していただければ、親切な方が答えてくれるかもしまれん。回答者自身がそのような質問をこっそり投稿していた場合は、色々と察していただきますようお願いします。
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
---
|
|
274
|
+
|
|
275
|
+
【続き】
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
```SCSS
|
|
280
|
+
|
|
281
|
+
.dltable {
|
|
282
|
+
|
|
283
|
+
width: 90%;
|
|
284
|
+
|
|
285
|
+
margin: 15px;
|
|
286
|
+
|
|
287
|
+
dl {
|
|
288
|
+
|
|
289
|
+
display: flex;
|
|
290
|
+
|
|
291
|
+
flex-flow: row nowrap;
|
|
292
|
+
|
|
293
|
+
border: 1px solid #cccccc;
|
|
294
|
+
|
|
295
|
+
border-radius: 4px;
|
|
296
|
+
|
|
297
|
+
text-align: center;
|
|
298
|
+
|
|
299
|
+
justify-content: left;
|
|
300
|
+
|
|
301
|
+
font-size: 12px;
|
|
302
|
+
|
|
303
|
+
.col {
|
|
304
|
+
|
|
305
|
+
display: flex;
|
|
306
|
+
|
|
307
|
+
flex: auto;
|
|
308
|
+
|
|
309
|
+
flex-flow: column nowrap;
|
|
310
|
+
|
|
311
|
+
+.col {
|
|
312
|
+
|
|
313
|
+
border-left: 1px solid #cccccc;
|
|
314
|
+
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.row {
|
|
318
|
+
|
|
319
|
+
margin: 0;
|
|
320
|
+
|
|
321
|
+
padding: 10px 0;
|
|
322
|
+
|
|
323
|
+
+.row {
|
|
324
|
+
|
|
325
|
+
border-top: 1px solid #cccccc;
|
|
326
|
+
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
dt.row {
|
|
332
|
+
|
|
333
|
+
background: #f2f2f2 none repeat;
|
|
334
|
+
|
|
335
|
+
color: #333;
|
|
336
|
+
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
[jsfiddleでの結果](https://jsfiddle.net/8enosu90/1/)
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
かなりやっつけでつくりましたが、元記事とほぼ同じように見せるようにはできたと思います。普段はBootstrapで誤魔化している私には、一から作るのは~~面倒くさい~~きついです。flexを(フレームワークではなく生で)初めて使ったので、私には解説できません。まだよくわかってなくて、無駄なことをしている部分もあるかも知れません。テーブルとは違って、改行が入ると縦は高さがズレていきます。そういう所の調整は私にはわからないので、別途質問でも上げてください。
|
3
dlをテーブルのように表示するのではなく、テーブルを作るのにdlを使うのが目的だと気付いたので。
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
参考にしているサイトの`dl`の使い方が意味論として全く通じないものになっています。仕様書もろくに読んでいないようなレベルが低いサイトを見て論じても意味がありません。正しい`dl`の使い方をしていて、かつ、`dl`を
|
|
1
|
+
参考にしているサイトの`dl`の使い方が意味論として全く通じないものになっています。仕様書もろくに読んでいないようなレベルが低いサイトを見て論じても意味がありません。正しい`dl`の使い方をしていて、かつ、テーブルを作る場合は`dl`を使うことを推奨しているというサイトを見つけてから、再度ご質問ください。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
2
行はrow、列はcolunm。元記事に騙された。
test
CHANGED
|
@@ -196,53 +196,53 @@
|
|
|
196
196
|
|
|
197
197
|
<dl>
|
|
198
198
|
|
|
199
|
-
<div class="
|
|
199
|
+
<div class="col">
|
|
200
|
-
|
|
200
|
+
|
|
201
|
-
<dt class="
|
|
201
|
+
<dt class="row">見出し1</dt>
|
|
202
|
-
|
|
202
|
+
|
|
203
|
-
<dd class="
|
|
203
|
+
<dd class="row">内容1-1</dd>
|
|
204
|
-
|
|
204
|
+
|
|
205
|
-
<dd class="
|
|
205
|
+
<dd class="row">内容1-2</dd>
|
|
206
|
-
|
|
206
|
+
|
|
207
|
-
</div>
|
|
207
|
+
</div>
|
|
208
|
-
|
|
208
|
+
|
|
209
|
-
<div class="
|
|
209
|
+
<div class="col">
|
|
210
|
-
|
|
210
|
+
|
|
211
|
-
<dt class="
|
|
211
|
+
<dt class="row">見出し2</dt>
|
|
212
|
-
|
|
212
|
+
|
|
213
|
-
<dd class="
|
|
213
|
+
<dd class="row">内容2-1</dd>
|
|
214
|
-
|
|
214
|
+
|
|
215
|
-
<dd class="
|
|
215
|
+
<dd class="row">内容2-2</dd>
|
|
216
|
-
|
|
216
|
+
|
|
217
|
-
</div>
|
|
217
|
+
</div>
|
|
218
|
-
|
|
218
|
+
|
|
219
|
-
<div class="
|
|
219
|
+
<div class="col">
|
|
220
|
-
|
|
220
|
+
|
|
221
|
-
<dt class="
|
|
221
|
+
<dt class="row">見出し3</dt>
|
|
222
|
-
|
|
222
|
+
|
|
223
|
-
<dd class="
|
|
223
|
+
<dd class="row">内容3-1</dd>
|
|
224
|
-
|
|
224
|
+
|
|
225
|
-
<dd class="
|
|
225
|
+
<dd class="row">内容3-2</dd>
|
|
226
|
-
|
|
226
|
+
|
|
227
|
-
</div>
|
|
227
|
+
</div>
|
|
228
|
-
|
|
228
|
+
|
|
229
|
-
<div class="
|
|
229
|
+
<div class="col">
|
|
230
|
-
|
|
230
|
+
|
|
231
|
-
<dt class="
|
|
231
|
+
<dt class="row">見出し4</dt>
|
|
232
|
-
|
|
232
|
+
|
|
233
|
-
<dd class="
|
|
233
|
+
<dd class="row">内容4-1</dd>
|
|
234
|
-
|
|
234
|
+
|
|
235
|
-
<dd class="
|
|
235
|
+
<dd class="row">内容4-2</dd>
|
|
236
|
-
|
|
236
|
+
|
|
237
|
-
</div>
|
|
237
|
+
</div>
|
|
238
|
-
|
|
238
|
+
|
|
239
|
-
<div class="
|
|
239
|
+
<div class="col">
|
|
240
|
-
|
|
240
|
+
|
|
241
|
-
<dt class="
|
|
241
|
+
<dt class="row">見出し5</dt>
|
|
242
|
-
|
|
242
|
+
|
|
243
|
-
<dd class="
|
|
243
|
+
<dd class="row">内容5-1</dd>
|
|
244
|
-
|
|
244
|
+
|
|
245
|
-
<dd class="
|
|
245
|
+
<dd class="row">内容5-2</dd>
|
|
246
246
|
|
|
247
247
|
</div>
|
|
248
248
|
|
|
@@ -254,6 +254,10 @@
|
|
|
254
254
|
|
|
255
255
|
|
|
256
256
|
|
|
257
|
+
class名についてですが、元記事のコードでは"row*"というクラスが列を表していましたが、「列」は英語で"colunmn"です。**なぜ列の番号付けに「行」である"row"と付けていたのかはわかりません。**上のコードでは「行」と「列」が"row"と"col"のクラスを付けるようにしました。また、将来増えることも考え、クラス名に無意味に番号を付けることもやめました。
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
|
|
257
261
|
今度はこれをテーブルっぽいレイアウトしたいとき、素直にスタイルを調整しようとすると、横では無く縦に見出しが並ぶ形になってしまいます。では、記事のように横並びにするにはどうしたらいいのかというと、(...来週に続く)
|
|
258
262
|
|
|
259
263
|
|
1
脱字の修正
test
CHANGED
|
@@ -262,4 +262,4 @@
|
|
|
262
262
|
|
|
263
263
|
|
|
264
264
|
|
|
265
|
-
※回答者はこのまま失踪する可能性があります。一週間音沙汰が無く、調べてもどうすれば良いのかわからない、そもそもできるのかすらわかっていない場合は、別途質問として投稿していただければ、親切な方が答えてくれるかもしまれん。回答者自身がそのような質問をこそり投稿していた場合は、色々と察していただきますようお願いします。
|
|
265
|
+
※回答者はこのまま失踪する可能性があります。一週間音沙汰が無く、調べてもどうすれば良いのかわからない、そもそもできるのかすらわかっていない場合は、別途質問として投稿していただければ、親切な方が答えてくれるかもしまれん。回答者自身がそのような質問をこっそり投稿していた場合は、色々と察していただきますようお願いします。
|