質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.60%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

2回答

1294閲覧

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

Iori

総合スコア55

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1グッド

0クリップ

投稿2022/10/03 14:22

編集2022/10/03 15:31

前提

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

実現したいこと

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

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

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

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

<!-- これでaccordion閉じる -->の上の3つがあるとアコーディオンが閉じませんでした。公式のCDN

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

<!-- これでaccordion閉じる -->のソースはこちらの質問から引用しました。

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"> 出発前の1ヶ月前に事前課題を送ります。</p> 73 74 <p> 0から始めるプログラミング事前学習講座、環境構築の事前学習、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👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

Cocode

2022/10/03 14:48 編集

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

回答2

1

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

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

css

1 .accordion-button:focus { 2 box-shadow: none; 3 }
<!-- これでaccordion閉じる -->の上の3つがあるとアコーディオンが閉じませんでした。

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

投稿2022/10/03 14:53

hatena19

総合スコア33198

Iori👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

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
Cocode

総合スコア2314

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.60%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。