teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ＣＳＳで、いくつかわからない<li>を、自動で伸縮させて綺麗に並べるコード

編集履歴

質問編集履歴

5

タイトルを修正

2018/11/23 09:11

投稿

5656shitai
5656shitai

スコア15

test CHANGED
@@ -1 +1 @@
1
- ＣＳＳで、いくつかわからない<li>を綺麗に並べるコード
1
+ ＣＳＳで、いくつかわからない<li>を、自動で伸縮させて綺麗に並べるコード
test CHANGED
File without changes

4

誤字

2018/11/23 09:11

投稿

5656shitai
5656shitai

スコア15

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  ```
26
26
 
27
- 出力するパターンとしては例えば次のようなものです。
27
+ このように、リストを囲む全体のdivは横250✕縦100までで、リスト数とサイズの出力パターンとしては例えば下記のようなものです。
28
28
 
29
29
 
30
30
 

3

誤字

2018/11/23 09:10

投稿

5656shitai
5656shitai

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- <li>のリストを並べるときに、いくつ（１から１０個）出力されても綺麗に並ぶＣＳＳを知りたいです。
1
+ <li>のリストを並べるときに、いくつ出力されても綺麗に並ぶＣＳＳを知りたいです。
2
2
 
3
3
 
4
4
 

2

コードを見やすく枠で囲む

2018/11/23 09:08

投稿

5656shitai
5656shitai

スコア15

test CHANGED
@@ -1 +1 @@
1
- 不明な数のリストを綺麗に並べるＣＳＳ
1
+ ＣＳＳで、いくつかわからない<li>を綺麗に並べるコード
test CHANGED
@@ -1,65 +1,65 @@
1
- ＣＳＳで良い方法誰か知りませんでしょうか？
1
+ <li>のリストを並べるときに、いくつ（１から１０個）出力されても綺麗に並ぶＣＳＳを知りたいです。
2
2
 
3
3
 
4
4
 
5
- リストを並べるときに、最大で２行５列にしたいのですが、リストがいくつ（１から１０個）出力されても綺麗に並ぶＣＳＳを知りたいです。
5
+ リストの数は１個から１０個で、最大で２行５列にしたく、こんな感じのHTMLです。
6
+
7
+ ```html
8
+
9
+ <div style="width:250px;height:100px;">
10
+
11
+ <ul>
12
+
13
+ <li>１</li>
14
+
15
+ <li>２</li>
16
+
17
+ <li>３</li>
18
+
19
+ <!-- いくつかわからない -->
20
+
21
+ </ul>
22
+
23
+ </div>
24
+
25
+ ```
26
+
27
+ 出力するパターンとしては例えば次のようなものです。
6
28
 
7
29
 
8
30
 
9
31
  ・リストが１つなら、
10
32
 
11
- 250✕50の■
33
+ 横250✕縦50のリストを１つ
12
34
 
13
35
 
14
36
 
15
37
  ・リストが２つなら、
16
38
 
17
- 125✕50の■■
39
+ 125✕50のリストを２つ
18
40
 
19
41
 
20
42
 
21
43
  ・リストが５つなら、
22
44
 
23
- 50✕50の■■■■■
45
+ 50✕50ののリストを５つ
24
46
 
25
47
 
26
48
 
27
49
  ・リストが６つなら、
28
50
 
29
- 50✕50の■■■■■と、
51
+ 50✕50ののリスト５つと
30
52
 
31
- 250✕50の■
53
+ 250✕50のリストを１つ
32
54
 
33
55
 
34
56
 
35
57
  ・リストが８つなら、
36
58
 
37
- 50✕50の■■■■■と、
59
+ 50✕50ののリストを５つと、
38
60
 
39
- 83.3✕50の■■■つ
61
+ 83.3✕50ののリストを３つ
40
62
 
41
63
 
42
64
 
43
- のように並べたい感じです。
44
-
45
-
46
-
47
- こんな感じのHTMLで、marginやpaddingは０です。
48
-
49
-
50
-
51
- <div style="width:250px;height:100px;">
65
+ flexboxを使えばできるとのことですが、実際のコードはどのようになりますでしょうか？
52
-
53
- <ul>
54
-
55
- <li>１</li>
56
-
57
- <li>２</li>
58
-
59
- <li>３</li>
60
-
61
- <!-- いくつかわからない -->
62
-
63
- </ul>
64
-
65
- </div>

1

図を削除した

2018/11/23 09:07

投稿

5656shitai
5656shitai

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,54 @@
1
- リストが０から１０個のいくつになるかわからない（ＰＨＰで出力されるため）ときに、下図の例ような配置を自動的にCSSでやるときは、フレックスボックスでできますか？グリッドレイアウトでしょうか？
2
-
3
- より簡単なコードを教えてください。
1
+ ＣＳＳで良い方法誰か知りませんでしょうか？
4
2
 
5
3
 
6
4
 
7
- ↓こういうHTMLで、<li>がいくつになるか不明ですが、最低幅は５０ｐｘです。（ｄｉｖが２５０ｐｘなので）
5
+ リストを並べるときに、最大で２行５列にしたいのですが、リストがいくつ（１から１０個）出力されても綺麗に並ぶＣＳＳを知りたいです。
8
6
 
9
7
 
10
8
 
9
+ ・リストが１つなら、
10
+
11
+ 250✕50の■
12
+
13
+
14
+
15
+ ・リストが２つなら、
16
+
17
+ 125✕50の■■
18
+
19
+
20
+
21
+ ・リストが５つなら、
22
+
23
+ 50✕50の■■■■■
24
+
25
+
26
+
27
+ ・リストが６つなら、
28
+
29
+ 50✕50の■■■■■と、
30
+
31
+ 250✕50の■
32
+
33
+
34
+
35
+ ・リストが８つなら、
36
+
37
+ 50✕50の■■■■■と、
38
+
39
+ 83.3✕50の■■■つ
40
+
41
+
42
+
43
+ のように並べたい感じです。
44
+
45
+
46
+
47
+ こんな感じのHTMLで、marginやpaddingは０です。
48
+
49
+
50
+
11
- <div style="width:250px;">
51
+ <div style="width:250px;height:100px;">
12
52
 
13
53
  <ul>
14
54
 
@@ -23,45 +63,3 @@
23
63
  </ul>
24
64
 
25
65
  </div>
26
-
27
-
28
-
29
- ---
30
-
31
- ★★★★★★★
32
-
33
- ★★★例★★★
34
-
35
- ★★★★★★★
36
-
37
-
38
-
39
-
40
-
41
- ２個ならこう
42
-
43
- ![イメージ説明](d181e1ef47ab2825711ab3a1e5e74114.jpeg)
44
-
45
-
46
-
47
- ３個ならこう
48
-
49
- ![イメージ説明](37c3ab06ebebd41ae0bc9504c1fe1d53.jpeg)
50
-
51
-
52
-
53
- ６個ならこう
54
-
55
- ![イメージ説明](6ef84c3ff090fdcf4faef71b7734d70e.jpeg)
56
-
57
-
58
-
59
- ７個ならこう
60
-
61
- ![イメージ説明](95793117beb7b404f69c9df173ef2382.jpeg)
62
-
63
-
64
-
65
- １０個ならこう
66
-
67
- ![イメージ説明](8c80764c924c7b6db1cd574a657c21f5.jpeg)