teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

8

画像追加

2019/01/16 05:58

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -50,6 +50,9 @@
50
50
  }
51
51
  ```
52
52
 
53
+ ### テスト結果↓
54
+ ![イメージ説明](c5f7c02df4d537027fb124c2e2d4628e.png)
55
+
53
56
  項目1のリストを下まで延ばさずに、項目1だけで終わらせました。
54
57
  中身のリストは小細工で中身に含まれているように見せています。
55
58
 

7

修正

2019/01/16 05:58

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -28,7 +28,6 @@
28
28
  ```CSS
29
29
  .testul {
30
30
  margin:0px auto;
31
- padding-bottom:0px;
32
31
  }
33
32
 
34
33
  .test {

6

修正

2019/01/16 05:54

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ```html
6
6
  <span class="testspan ">項目</span>
7
- <ul class="testul testheader">
7
+ <ul class="testul">
8
8
  <li class="testli test">
9
9
  項目1
10
10
  </li>

5

最終追記

2019/01/16 05:51

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -1,78 +1,38 @@
1
+ だいぶ変更したので一度書き直しました。
1
- 例えばですが、こうやって記述ると、ホバーしたところだけ背景変わります
2
+ HTMLなど結構いじちゃっすがご了承ださい
2
3
 
3
- ```css
4
- .pointer:hover {
5
- background:red;
6
- }
7
- ```
8
4
 
9
- ---
10
- さらに編集
11
-
12
5
  ```html
13
- <section class="menu">
14
6
  <span class="testspan ">項目</span>
15
- <ul class="testul">
7
+ <ul class="testul testheader">
16
- <li class="testli "><p class="test">項目1</p>
17
- <ul class="testul">
18
- <li class="testli pointer " >
8
+ <li class="testli test">
19
- 項目1-1
9
+ 項目1
20
- </li>
10
+ </li>
21
- <li class="testli pointer " >
22
- 項目1-2
23
- </li>
24
- <li class="testli pointer " >
25
- 項目1-3
26
- </li>
27
- <li class="testli pointer " >
28
- 項目1-4
29
- </li>
30
- </ul>
31
- </li>
32
11
  </ul>
33
- <span class="testspan ">項目</span>
34
12
  <ul class="testul">
35
- <li class="testli pointer2"><p class="test">項目2</p>
36
- <ul class="testul">
37
- <li class="testli pointer " >
13
+ <li class="testli pointer " >
38
- 項目2-1
14
+ 項目1-1
39
- </li>
15
+ </li>
40
- <li class="testli pointer " >
16
+ <li class="testli pointer " >
41
- 項目2-2
17
+ 項目1-2
42
- </li>
18
+ </li>
43
- <li class="testli pointer " >
19
+ <li class="testli pointer " >
44
- 項目2-3
20
+ 項目1-3
45
- </li>
21
+ </li>
46
- <li class="testli pointer " >
22
+ <li class="testli pointer " >
47
- 項目2-4
23
+ 項目1-4
48
- </li>
24
+ </li>
49
- </ul>
50
- </li>
51
25
  </ul>
52
-
53
- <span class="testspan ">項目</span>
54
- <ul class="testul">
55
- <li class="testli "><p class="test">項目3</p>
56
- <ul class="testul">
57
- <li class="testli pointer " >
58
- 項目3-1
59
- </li>
60
- <li class="testli pointer " >
61
- 項目3-2
62
- </li>
63
- <li class="testli pointer " >
64
- 項目3-3
65
- </li>
66
- <li class="testli pointer " >
67
- 項目3-4
68
- </li>
69
- </ul>
70
- </li>
71
- </ul>
72
26
  ```
73
27
 
74
- ```css
28
+ ```CSS
29
+ .testul {
30
+ margin:0px auto;
31
+ padding-bottom:0px;
32
+ }
33
+
75
34
  .test {
35
+ list-style-position: inside;
76
36
  margin:0px;
77
37
  }
78
38
  .test:hover {
@@ -80,16 +40,32 @@
80
40
  background:blue;
81
41
  }
82
42
 
43
+ .pointer {
44
+ margin-left:20px;
45
+ list-style-type:circle;
46
+ list-style-position: inside;
47
+ }
48
+
83
49
  .pointer:hover {
84
50
  background:red;
85
51
  }
86
52
  ```
87
53
 
54
+ 項目1のリストを下まで延ばさずに、項目1だけで終わらせました。
88
- リストに背景色をつけると、そのリストに含まれているものまで適用されうので、
55
+ 中身のリストは小細工で中身に含まれているよう見せす。
89
- もしその文字のところだけ背景色を変えたいのであれば、<p>タグや<span>タグで囲んでしまうのが簡単です。
90
56
 
91
- リストマーカーの背景色も変えたいとのことでしたが、
92
- 項目1などのリストの大枠は項目1-4の下まで続いてしまっているので、背景色を変更しようとすると
93
- 項目1、項目1-1~項目1-4まで変わってしまいます。
57
+ **list-style-position: inside;**
94
58
 
59
+ リストマーカーの部分まで背景色を変えたいとのことだったので、上記のCSSも追加しました。
60
+ こちらを入れると、リストマーカーはリストの内部に含まれていると認識されます。
61
+ padding-leftを設定してあげれば、リストマーカーの左部分まで自然に背景色をつけられるかと思います。
62
+
63
+
64
+ **list-style-type:circle; **
65
+
66
+ 小細工で中に含まれていたリストを外に出してしまったので、
67
+ リストマーカーが ○ → ● にかわってしまったのを、上記のCSSで修正しています。
68
+
95
- どうにかできないか調べはみますが、このままでは難しいような気がします。
69
+ 色々小細工が入っっていますが、一応項目毎に色変更できるはずです。
70
+
71
+ 何か認識祖語などございましたら言っていただければ修正します。

4

追記

2019/01/16 05:50

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -86,4 +86,10 @@
86
86
  ```
87
87
 
88
88
  リストに背景色をつけると、そのリストに含まれているものにまで適用されてしまうので、
89
- もしその文字のところだけ背景色を変えたいのであれば、<p>タグや<span>タグで囲んでしまうのが簡単です。
89
+ もしその文字のところだけ背景色を変えたいのであれば、<p>タグや<span>タグで囲んでしまうのが簡単です。
90
+
91
+ リストマーカーの背景色も変えたいとのことでしたが、
92
+ 項目1などのリストの大枠は項目1-4の下まで続いてしまっているので、背景色を変更しようとすると
93
+ 項目1、項目1-1~項目1-4まで変わってしまいます。
94
+
95
+ どうにかできないか調べてはみますが、このままでは難しいような気がします。

3

追記

2019/01/16 05:28

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -86,4 +86,4 @@
86
86
  ```
87
87
 
88
88
  リストに背景色をつけると、そのリストに含まれているものにまで適用されてしまうので、
89
- もしその文字のところだけ背景色を変えたいのであれば、<p>タグで囲んでしまうのが簡単です。
89
+ もしその文字のところだけ背景色を変えたいのであれば、<p>タグや<span>タグで囲んでしまうのが簡単です。

2

追記

2019/01/16 05:24

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -6,6 +6,84 @@
6
6
  }
7
7
  ```
8
8
 
9
+ ---
10
+ さらに編集
11
+
9
- 低評価ついちゃったので追加質問ですが
12
+ ```html
10
- 項目1をマウスホバーしたときは、項目1という文字の背景色のみ変えたいのか、
13
+ <section class="menu">
14
+ <span class="testspan ">項目</span>
15
+ <ul class="testul">
16
+ <li class="testli "><p class="test">項目1</p>
17
+ <ul class="testul">
18
+ <li class="testli pointer " >
19
+ 項目1-1
20
+ </li>
21
+ <li class="testli pointer " >
22
+ 項目1-2
23
+ </li>
24
+ <li class="testli pointer " >
25
+ 項目1-3
26
+ </li>
27
+ <li class="testli pointer " >
28
+ 項目1-4
29
+ </li>
30
+ </ul>
31
+ </li>
32
+ </ul>
33
+ <span class="testspan ">項目</span>
34
+ <ul class="testul">
35
+ <li class="testli pointer2"><p class="test">項目2</p>
36
+ <ul class="testul">
37
+ <li class="testli pointer " >
38
+ 項目2-1
39
+ </li>
40
+ <li class="testli pointer " >
41
+ 項目2-2
42
+ </li>
43
+ <li class="testli pointer " >
44
+ 項目2-3
45
+ </li>
46
+ <li class="testli pointer " >
47
+ 項目2-4
48
+ </li>
49
+ </ul>
50
+ </li>
51
+ </ul>
52
+
53
+ <span class="testspan ">項目</span>
54
+ <ul class="testul">
55
+ <li class="testli "><p class="test">項目3</p>
56
+ <ul class="testul">
57
+ <li class="testli pointer " >
58
+ 項目3-1
59
+ </li>
60
+ <li class="testli pointer " >
61
+ 項目3-2
62
+ </li>
63
+ <li class="testli pointer " >
64
+ 項目3-3
65
+ </li>
66
+ <li class="testli pointer " >
67
+ 項目3-4
68
+ </li>
69
+ </ul>
70
+ </li>
71
+ </ul>
72
+ ```
73
+
74
+ ```css
75
+ .test {
76
+ margin:0px;
77
+ }
78
+ .test:hover {
79
+ margin:0px;
80
+ background:blue;
81
+ }
82
+
83
+ .pointer:hover {
84
+ background:red;
85
+ }
86
+ ```
87
+
11
- 中に含まれているリスト達も同じ背景色に統一したいのかどちらでし
88
+ リスト背景色をつけると、そのリスト含まれてるもにま適用されてので、
89
+ もしその文字のところだけ背景色を変えたいのであれば、<p>タグで囲んでしまうのが簡単です。

1

質問追記

2019/01/16 05:20

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -4,4 +4,8 @@
4
4
  .pointer:hover {
5
5
  background:red;
6
6
  }
7
- ```
7
+ ```
8
+
9
+ 低評価ついちゃったので追加質問ですが
10
+ 項目1をマウスホバーしたときは、項目1という文字の背景色のみ変えたいのか、
11
+ 中に含まれているリスト達も同じ背景色に統一したいのかどちらでしょう。