アコーディオンの周りの枠を消したい

前提

iSARAの模写をしており、アコーディオンを書いています。

実現したいこと

閉じたあとの青枠を消したいです。画面をクリックしないと消えません。
。

加えて開いた際にも青いのが残っているので、それもなくしたいです。

発生している問題・エラーメッセージ

エラーなどはありません。公式からそのままコピペしました。

の上の３つがあるとアコーディオンが閉じませんでした。公式のCDN

https://getbootstrap.jp/docs/5.0/getting-started/download/
のものなのですが、なぜこれが効かないのかがわかりません...

のソースはこちらの質問から引用しました。

https://teratail.com/questions/324870

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title>
9
10    <!-- BOOTSTRAP -->
11    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
12        integrity="sha384-EVS
13        TQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
14        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
15        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
16
17        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
18        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> -->
19
20        
21        <!-- これでaccordion閉じる -->
22        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
23
24    <link rel="icon" href="./images/icon.png">
25
26    <!-- JQUERY -->
27    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
28    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
29
30    <!-- Font Awesome -->
31    <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script>
32
33
34    <link rel="stylesheet" href="style.css">
35</head>
36
37--------中略----------
38
39                   <div class="accordion" id="accordionExample">
40                <div class="accordion-item ">
41                    <h2 class="accordion-header" id="headingOne">
42                        <button class="accordion-button collapsed " type="button" data-bs-toggle="collapse"
43                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
44                            <img src="/images/images29.png" alt="">
45                            Skypeで事前コンサル
46                        </button>
47                    </h2>
48                    <div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne"
49                        data-bs-parent="#accordionExample">
50                        <div class="accordion-body">
51                            <p class="bold">現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</p>
52                            <p class="bold">簡単なテストあり</p>
53                            <p>iSaraでは受講費以上を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。（テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。）
54                            </p>
55                        </div>
56                    </div>
57                </div>
58
59
60
61                <div class="accordion-item">
62                    <h2 class="accordion-header" id="headingTwo">
63                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
64                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
65                            <img src="/images/images29.png" alt="">
66                            事前課題の提出
67                        </button>
68                    </h2>
69                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
70                        data-bs-parent="#accordionExample">
71                        <div class="accordion-body">
72                            <p class="bold"> 出発前の１ヶ月前に事前課題を送ります。</p>
73
74                            <p> ０から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP / Mysqlの事前講座 </p>
75
76                            <p class="bold">
77                                課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。回数無制限のチャットサポート付きですので、最初は努力してください。また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。
78                            </p>
79                        </div>
80                    </div>
81                </div>
82
83                <div class="accordion-item">
84                    <h2 class="accordion-header" id="headingThree">
85                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
86                            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
87                            <img src="/images/images29.png" alt="">
88                            現地に渡航
89                        </button>
90                    </h2>
91                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
92                        data-bs-parent="#accordionExample">
93                        <div class="accordion-body">
94                            <p class="bold"> 到着日には空港でお出迎えし、初日のオリエンテーションを行います。 滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。
95                            </p>
96
97                            <p class="bold"> iSaraは『ノマド』フリーランス養成講座です。 楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。</p>
98                        </div>
99                    </div>
100                </div>
101
102
103                <div class="accordion-item">
104                    <h2 class="accordion-header" id="headingFour">
105                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
106                            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
107                            <img src="/images/images29.png" alt="">
108                            実案件を通して学ぶ
109                        </button>
110                    </h2>
111                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
112                        data-bs-parent="#accordionExample">
113                        <div class="accordion-body">
114                            <p class="bold"> 現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p>
115
116                            <p class="bold"> 案件獲得のためのメールの書き方や見積りの仕方など、他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p>
117
118                            <p>＊現役フリーランスがサポートします。</p>
119                        </div>
120                    </div>
121                </div>
122
123
124                <div class="accordion-item">
125                    <h2 class="accordion-header" id="headingFive">
126                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
127                            data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
128                            <img src="/images/images29.png" alt="">
129                            帰国後の仕事獲得
130                            サポート付き
131                        </button>
132                    </h2>
133                    <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
134                        data-bs-parent="#accordionExample">
135                        <div class="accordion-body">
136                            <p class="bold"> 経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</p>
137
138                           <p  class="bold"> iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。</p>
139
140                           <p  class="bold"> もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</p>
141                        </div>
142                    </div>
143                </div>
144

css
1
2* {
3    text-align: center;
4    margin: 0 auto;
5}
6
7
8h2 {
9    border: #1877F2;
10}
11
12
13
14
15
16
17
18
19
20
21
22
23/* LESSON FLOW */
24
25.lesson-flow {
26    padding: 30px auto;
27    margin-bottom: 50px;
28}
29
30.lesson-flow img {
31    width: 95%;
32    margin: 30px ;
33    display: none;
34}
35
36@media screen and (min-width: 768px) {
37    .lesson-flow img {
38        display: block;
39    }
40}
41🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋
42/* faq */
43.accordion-item {
44    width: 90%;
45    margin: 10px auto;
46}
47
48.accordion-button {
49    padding: 0 20px 0 0;
50    background-color: #FEF5E0;
51    font-weight: bold;
52}
53
54.accordion-button:focus {
55    box-shadow: none;
56}
57
58.accordion-body {
59    background-color: #FEF5E0;
60    
61}
62
63.accordion-body p {
64    text-align: left;
65
66}
67
68
69.accordion-button img {
70    width: 30px;
71}
72🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋
73

hatena19様のご指示の実行結果

アドバイスありがとうございます。該当コードを書き込むと青枠がきれいに消えました！

しかしながら画像のように背景が青いままになってしまいます...

Cocode

2022/10/03 14:48 編集

質問失礼します！逆にいつなら青枠ついていてもいいですか？ ①hoverとactiveのときだけ ②activeのときだけ ③いっさいいらない ④その他（具体的にお願いします〜）

行動規範の内容に同意します

回答2件

閉じたあとの青枠を消したいです。画面をクリックしないと消えません。

CSSに下記を追加してください。

css
1        .accordion-button:focus {
2            box-shadow: none;
3        }

の上の３つがあるとアコーディオンが閉じませんでした。

提示のコードをコピーして動作確認してみましたが、問題なく動作しました。
提示ざれていない他の部分が影響していると思われます。
現象の再現するコードを提示してください。

投稿2022/10/03 14:53

hatena19

総合スコア34353

青枠いろいろなパターン

青枠いっさいいらない場合

css
1.accordion-button:focus {
2  box-shadow: none;
3}

アコーディオン閉じたら青枠消す

※開いている状態の時は青枠ついたままです。

css
1.accordion-button.collapsed:focus {
2  box-shadow: none;
3}

hover（タッチデバイスではactive）の時だけ青枠つける

hoverとは、要素の上にカーソルが乗っている時。
activeとは、クリックまたはタップしている瞬間。
タッチデバイス（スマホなど）にはhoverが存在しません。
- 代わりに、cssでかいたhoverの見た目が、activeの時に発生させるために、JSで対応します。

css
1.accordion-button:focus {
2  box-shadow: none;
3}
4.accordion-button:hover {
5  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
6}

javascript
1// スマホにはhoverがないので、hoverのスタイルをactiveで発生させるため。
2document.addEventListener('DOMContentLoaded', () => {
3  document.querySelector('body').setAttribute('ontouchstart', '');
4});

activeのときだけ

css
1.accordion-button:focus {
2  box-shadow: none;
3}
4.accordion-button:active {
5  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
6}

青い背景色を消す

css
1.accordion-button:not(.collapsed) {
2  color: inherit;
3  /* デフォルトだと青色になるので、通常と同じ文字色にする */
4  background-color: inherit;
5  /* 背景色青色にならないようにする */
6}

デフォルトではfocus状態で青枠がつく仕様の理由

デフォルトの仕様は、UIやユニバーサルデザインの観点から、非常に優れています。
アコーディオンのタイトル部分は、通常なら<h2>タイトル</h2>だけでいいのに、わざわざ<h2><button>タイトル</button></h2>と、buttonタグを使っています。
buttonタグ、inputタグ、aタグにはフォーカスができます。
- JSで無理やりクリック可能にしたdivボタンとちがい、これらはデフォルトの状態でクリック・選択が可能な要素です。
- これらは、Tabキーでその要素をターゲットすることができ、再度Tabキーを押すと次のフォーカス可能要素に移ります。
- Enterキーで決定（クリック）をすることができます。
Tabキーで移動をするときにフォーカス状態で見た目が変わってくれないと、ユーザーが現在どの要素をフォーカスしているのか分かりません。
- せっかくbuttonタグを使ってフォーカス可能にしているのに、実質ユーザーにとってはフォーカス機能を使えない状態となり、機能を無駄にします。
- むしろフォーカス状態が見えないので、知らないうちにTabとEnterを押して誤操作してしまう可能性があります。