質問編集履歴

4

質問の訂正

2018/03/04 03:12

投稿

idkohhi
idkohhi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -89,3 +89,31 @@
89
89
  }
90
90
 
91
91
  ```
92
+
93
+
94
+
95
+ 修正後
96
+
97
+ ```CSS
98
+
99
+ @media only screen and (max-width:480px) {
100
+
101
+ td {
102
+
103
+ display:list-item;
104
+
105
+ list-style:none;
106
+
107
+ }
108
+
109
+
110
+
111
+ td:first-child {
112
+
113
+ list-style:inherit;
114
+
115
+ }
116
+
117
+ }
118
+
119
+ ```

3

ソースの添付

2018/03/04 03:12

投稿

idkohhi
idkohhi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,26 +1,16 @@
1
- 下記サイトで説明されている通り、レスポンシブデザインで
1
+ レスポンシブデザインで
2
2
 
3
- tdタグをスマホ(max-width:480px)で見た時はlist-itemにし
3
+ tdタグをスマホ(max-width:480px)で見た時は
4
+
5
+ list-itemにし
4
6
 
5
7
  さらに「・」を非表示にしています。
6
8
 
7
9
 
8
10
 
9
- 私のCSS抜粋
11
+ スマホ(max-width:480px)で見た時に
10
12
 
11
- @media only screen and (max-width:480px) {
12
-
13
- td {
14
-
15
- display: list-item;
16
-
17
- list-style:none;
18
-
19
- }
20
-
21
-
22
-
23
- スマホ(max-width:480px)で見た時に最初の「・」だけ表示し
13
+ 最初の「・」だけ表示し
24
14
 
25
15
  あとは非表示にしたいのですが、できますか。
26
16
 
@@ -28,22 +18,74 @@
28
18
 
29
19
 
30
20
 
31
- 参考サイト
32
21
 
22
+
23
+ ```HTML
24
+
25
+ <!DOCTYPE html>
26
+
27
+ <html lang="ja">
28
+
29
+ <head>
30
+
31
+ <meta charset="utf-8">
32
+
33
+ <title></title>
34
+
33
- [リスト風にした場合 list-item を使用した例](https://www.unionnet.jp/blog/responsive-table-css/#sec03)
35
+ <meta name="viewport" content="width=device-width, initial=1.0">
36
+
37
+ <link rel="stylesheet" href="mystyle.css">
38
+
39
+ </head>
40
+
41
+ <body>
42
+
43
+ <table class="demo03">
44
+
45
+ <tr>
46
+
47
+ <td>Google Chrome</td>
48
+
49
+ <td>Safari</td>
50
+
51
+ <td>Mozilla Firefox</td>
52
+
53
+ <td>Internet Explorer</td>
54
+
55
+ </tr>
56
+
57
+ <tr>
58
+
59
+ <td>Illustrator</td>
60
+
61
+ <td>Photoshop</td>
62
+
63
+ <td>Lightroom</td>
64
+
65
+ <td>Dreamweaver</td>
66
+
67
+ </tr>
68
+
69
+ </table>
70
+
71
+ </body>
72
+
73
+ </html>
74
+
75
+ ```
34
76
 
35
77
 
36
78
 
79
+ ```CSS
37
80
 
81
+ @media only screen and (max-width:480px) {
38
82
 
39
- デモサイト
83
+ td {
40
84
 
41
- [【demo03】リスト風にした場合 list-item を使用した例](https://www.unionnet.jp/demo/20140818/#sec03)
85
+ display: list-item;
42
86
 
43
- *「スマホ(max-width:480px)で見た時にGoogle Chrome」と「Illustrator」にだけliが表示される
87
+ list-style:none;
44
88
 
89
+ }
45
90
 
46
-
47
-
48
-
49
- よろしくお願いします。
91
+ ```

2

文章変更

2018/03/04 01:33

投稿

idkohhi
idkohhi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -46,6 +46,4 @@
46
46
 
47
47
 
48
48
 
49
- 初めての質問です。
50
-
51
49
  よろしくお願いします。

1

誤字

2018/03/03 09:16

投稿

idkohhi
idkohhi

スコア15

test CHANGED
@@ -1 +1 @@
1
- レスポンシブデザインでtdタグをdisplay:list-itemにして最初の最初の「・」だけ表示したい
1
+ レスポンシブデザインでtdタグをdisplay:list-itemにして最初の「・」だけ表示したい
test CHANGED
File without changes