質問編集履歴

2

タイトルの変更

2020/11/06 07:18

投稿

takawork
takawork

スコア95

test CHANGED
@@ -1 +1 @@
1
- はみ出親要素に背景を追加する方法はありますか?
1
+ 限られHTMLで背景を追加する方法はありますか?
test CHANGED
File without changes

1

再現出来るように全体の質問を書き換えました。

2020/11/06 07:18

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -1,35 +1,109 @@
1
- ![イメージ説明](3a87f3225fbf24b582c68a40c03c6866.png)
1
+ ![イメージ説明](66e3591d4b6f7dacf0e19a29683a525d.png)
2
2
 
3
- 画像の緑でない部分背景を緑にしたいのですがうまくいきません。
4
-
5
- 全体的には背景に画像を差し込んでいます。
6
-
7
- 、部分的の背景を追加したいと思っています。
3
+ 上記よう赤枠の両サイドの外側ピンク色の背景を付けたいと思っています。
8
-
9
- 本来であれば
10
4
 
11
5
  ```
12
6
 
13
7
  <div class="cover">
14
8
 
15
- <div class="filter">
9
+ <div class="filter">
16
10
 
11
+ <p>test</p>
12
+
17
- </div>
13
+ </div>
18
14
 
19
15
  </div>
20
16
 
21
17
  ```
22
18
 
23
- のような感じで親要素であるcoverクラスにbackground: green;と入れればOKなのですが、
19
+ ```
24
20
 
25
- 今回使ってるfilterはプラグインなので親要素を入れられません。
21
+ .cover {
26
22
 
23
+ background: pink;
24
+
25
+ }
26
+
27
+ .filter {
28
+
29
+ max-width: 1140px;
30
+
31
+ margin: 0 auto;
32
+
33
+ border: 2px solid red !important;
34
+
35
+ }
36
+
37
+ .filter p {
38
+
39
+ text-align: center;
40
+
41
+ }
42
+
43
+ ```
44
+
45
+ 上記のようにfilterクラスの親要素であるcoverクラスの背景色を付ければ可能なのですが、実際のサイトでは<div class="cover"></div>が付けれれません。
46
+
47
+ 実際のサイトではreactiveproというプラグインで絞り込み検索を入れており、それが上記のコードのfilter部分にあたります。
48
+
49
+ なので実際のサイトでは、以下のような構造になっております。
50
+
51
+ ```
52
+
53
+ <div class="filter">
54
+
55
+ <p>test</p>
56
+
57
+ </div>
58
+
59
+ ```
60
+
27
- このような場合はどのようにすればいでしょうか?
61
+ このようなhtmlみで冒頭のような背景色を導入するはどうすればいでしょうか?
62
+
63
+ ```
64
+
65
+ .filter {
66
+
67
+ background: pink;
68
+
69
+ max-width: 1140px;
70
+
71
+ margin: 0 auto;
72
+
73
+ border: 2px solid red !important;
74
+
75
+ }
76
+
77
+ .filter p {
78
+
79
+ text-align: center;
80
+
81
+ }
82
+
83
+ ```
84
+
85
+ 上記のようなcssだと赤枠内のみに背景色がついてしまいます。
86
+
87
+ ![イメージ説明](6e63b1c764a755ed8a8bb918b0b765ef.png)
88
+
89
+ また実際のサイトでは、ページ全体に別の背景色を使っているので、サイト全体をピンクで染めるという方法は出来ません。
90
+
91
+ 長くなってしまいましたが、まとめると、
92
+
93
+ ```
94
+
95
+ <div class="filter">
96
+
97
+ <p>test</p>
98
+
99
+ </div>
100
+
101
+ ```
102
+
103
+ この状態のhtmlでどんなcssを使うと以下の画像の緑枠内をピンクにすることが出来ますかという質問です。
104
+
105
+ ![イメージ説明](79c9bd2068758ca530777714fa25dd22.png)
28
106
 
29
107
 
30
108
 
31
- 理想は以下のような形にしたいです。
32
-
33
109
  よろしくお願いします。
34
-
35
- ![イメージ説明](398779844e56e4c3b4b24b6bd1f3f2ed.png)