質問編集履歴

2

背景の青が消えません。。。

2022/10/03 15:31

投稿

Iori
Iori

スコア55

test CHANGED
File without changes
test CHANGED
@@ -64,45 +64,195 @@
64
64
 
65
65
  --------中略----------
66
66
 
67
- <div class="accordion" id="accordionExample">
68
- <div class="accordion-item hide">
69
- <h2 class="accordion-header" id="headingOne">
70
- <button class="accordion-button collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
71
- Accordion Item #1
72
- </button>
73
- </h2>
74
- <div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
75
- <div class="accordion-body">
76
- <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
77
- </div>
78
- </div>
79
- </div>
80
- <div class="accordion-item">
81
- <h2 class="accordion-header" id="headingTwo">
82
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
83
- Accordion Item #2
84
- </button>
85
- </h2>
86
- <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
87
- <div class="accordion-body">
88
- <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
89
- </div>
90
- </div>
91
- </div>
92
- <div class="accordion-item">
93
- <h2 class="accordion-header" id="headingThree">
94
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
95
- Accordion Item #3
96
- </button>
97
- </h2>
98
- <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
99
- <div class="accordion-body">
100
- <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
101
- </div>
102
- </div>
103
- </div>
104
- </div>
105
-
106
-
67
+ <div class="accordion" id="accordionExample">
68
+ <div class="accordion-item ">
69
+ <h2 class="accordion-header" id="headingOne">
70
+ <button class="accordion-button collapsed " type="button" data-bs-toggle="collapse"
71
+ data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
72
+ <img src="/images/images29.png" alt="">
73
+ Skypeで事前コンサル
74
+ </button>
75
+ </h2>
76
+ <div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne"
77
+ data-bs-parent="#accordionExample">
78
+ <div class="accordion-body">
79
+ <p class="bold">現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</p>
80
+ <p class="bold">簡単なテストあり</p>
81
+ <p>iSaraでは受講費以上を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。(テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。)
82
+ </p>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+
88
+
89
+ <div class="accordion-item">
90
+ <h2 class="accordion-header" id="headingTwo">
91
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
92
+ data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
93
+ <img src="/images/images29.png" alt="">
94
+ 事前課題の提出
95
+ </button>
96
+ </h2>
97
+ <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
98
+ data-bs-parent="#accordionExample">
99
+ <div class="accordion-body">
100
+ <p class="bold"> 出発前の1ヶ月前に事前課題を送ります。</p>
101
+
102
+ <p> 0から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP / Mysqlの事前講座 </p>
103
+
104
+ <p class="bold">
105
+ 課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。回数無制限のチャットサポート付きですので、最初は努力してください。また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。
106
+ </p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="accordion-item">
112
+ <h2 class="accordion-header" id="headingThree">
113
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
114
+ data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
115
+ <img src="/images/images29.png" alt="">
116
+ 現地に渡航
117
+ </button>
118
+ </h2>
119
+ <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
120
+ data-bs-parent="#accordionExample">
121
+ <div class="accordion-body">
122
+ <p class="bold"> 到着日には空港でお出迎えし、初日のオリエンテーションを行います。 滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。
123
+ </p>
124
+
125
+ <p class="bold"> iSaraは『ノマド』フリーランス養成講座です。 楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+
131
+ <div class="accordion-item">
132
+ <h2 class="accordion-header" id="headingFour">
133
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
134
+ data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
135
+ <img src="/images/images29.png" alt="">
136
+ 実案件を通して学ぶ
137
+ </button>
138
+ </h2>
139
+ <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
140
+ data-bs-parent="#accordionExample">
141
+ <div class="accordion-body">
142
+ <p class="bold"> 現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p>
143
+
144
+ <p class="bold"> 案件獲得のためのメールの書き方や見積りの仕方など、他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p>
145
+
146
+ <p>*現役フリーランスがサポートします。</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+
152
+ <div class="accordion-item">
153
+ <h2 class="accordion-header" id="headingFive">
154
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
155
+ data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
156
+ <img src="/images/images29.png" alt="">
157
+ 帰国後の仕事獲得
158
+ サポート付き
159
+ </button>
160
+ </h2>
161
+ <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
162
+ data-bs-parent="#accordionExample">
163
+ <div class="accordion-body">
164
+ <p class="bold"> 経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</p>
165
+
166
+ <p class="bold"> iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。</p>
167
+
168
+ <p class="bold"> もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</p>
169
+ </div>
170
+ </div>
171
+ </div>
107
172
 
108
173
  ```
174
+
175
+
176
+ ```css
177
+
178
+ * {
179
+ text-align: center;
180
+ margin: 0 auto;
181
+ }
182
+
183
+
184
+ h2 {
185
+ border: #1877F2;
186
+ }
187
+
188
+
189
+
190
+
191
+
192
+
193
+
194
+
195
+
196
+
197
+
198
+
199
+ /* LESSON FLOW */
200
+
201
+ .lesson-flow {
202
+ padding: 30px auto;
203
+ margin-bottom: 50px;
204
+ }
205
+
206
+ .lesson-flow img {
207
+ width: 95%;
208
+ margin: 30px ;
209
+ display: none;
210
+ }
211
+
212
+ @media screen and (min-width: 768px) {
213
+ .lesson-flow img {
214
+ display: block;
215
+ }
216
+ }
217
+ 🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋
218
+ /* faq */
219
+ .accordion-item {
220
+ width: 90%;
221
+ margin: 10px auto;
222
+ }
223
+
224
+ .accordion-button {
225
+ padding: 0 20px 0 0;
226
+ background-color: #FEF5E0;
227
+ font-weight: bold;
228
+ }
229
+
230
+ .accordion-button:focus {
231
+ box-shadow: none;
232
+ }
233
+
234
+ .accordion-body {
235
+ background-color: #FEF5E0;
236
+
237
+ }
238
+
239
+ .accordion-body p {
240
+ text-align: left;
241
+
242
+ }
243
+
244
+
245
+ .accordion-button img {
246
+ width: 30px;
247
+ }
248
+ 🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋
249
+
250
+ ```
251
+
252
+ ### hatena19様のご指示の実行結果
253
+
254
+ アドバイスありがとうございます。該当コードを書き込むと青枠がきれいに消えました!
255
+
256
+ しかしながら画像のように背景が青いままになってしまいます...
257
+
258
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-04/7b709de4-8ae2-4ef5-876a-e0f4449f448b.jpeg)

1

質問の追加

2022/10/03 14:41

投稿

Iori
Iori

スコア55

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,9 @@
6
6
 
7
7
  閉じたあとの青枠を消したいです。画面をクリックしないと消えません。
8
8
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/84398691-23b8-4611-a0a3-277753aa303f.jpeg)。
9
+
10
+ 加えて開いた際にも青いのが残っているので、それもなくしたいです。
11
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/bc4e3e5b-471d-438f-80f7-73f4de975c70.jpeg)
9
12
 
10
13
 
11
14
  ### 発生している問題・エラーメッセージ