Q&A
質問失礼します！逆にいつなら青枠ついていてもいいですか？
①hoverとactiveのときだけ
②activeのときだけ
③いっさいいらない
④その他（具体的にお願いします〜）
前提
iSARAの模写をしており、アコーディオンを書いています。
実現したいこと
閉じたあとの青枠を消したいです。画面をクリックしないと消えません。
。
加えて開いた際にも青いのが残っているので、それもなくしたいです。
発生している問題・エラーメッセージ
エラーなどはありません。公式からそのままコピペしました。
<!-- これでaccordion閉じる -->の上の３つがあるとアコーディオンが閉じませんでした。公式のCDNhttps://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様のご指示の実行結果
アドバイスありがとうございます。該当コードを書き込むと青枠がきれいに消えました！
しかしながら画像のように背景が青いままになってしまいます...
回答2件
1
閉じたあとの青枠を消したいです。画面をクリックしないと消えません。
CSSに下記を追加してください。
css
1 .accordion-button:focus { 2 box-shadow: none; 3 }
<!-- これでaccordion閉じる -->の上の３つがあるとアコーディオンが閉じませんでした。
提示のコードをコピーして動作確認してみましたが、問題なく動作しました。
提示ざれていない他の部分が影響していると思われます。
現象の再現するコードを提示してください。
投稿2022/10/03 14:53
総合スコア33198
0
青枠いろいろなパターン
青枠いっさいいらない場合
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を押して誤操作してしまう可能性があります。
投稿2022/10/03 15:35
編集2022/10/03 15:49総合スコア2314
あなたの回答
tips
プレビュー
